@financial-times/n-myft-ui 37.0.0 → 38.0.1

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 (37) hide show
  1. package/.pa11yci.js +2 -1
  2. package/.toolkitstate/ci.json +2 -2
  3. package/components/button/main.scss +49 -62
  4. package/components/collections/collections.html +1 -1
  5. package/components/collections/main.scss +54 -25
  6. package/components/concept-list/concept-list.html +1 -1
  7. package/components/concept-list/main.scss +33 -28
  8. package/components/digest-promo/generic-promo-message.html +1 -1
  9. package/components/digest-promo/main.scss +96 -98
  10. package/components/digest-promo/promo-message.html +1 -1
  11. package/components/follow-button/follow-button.html +1 -1
  12. package/components/instant-alert/index.js +4 -5
  13. package/components/instant-alert/instant-alert.html +1 -5
  14. package/components/instant-alert/main.scss +69 -46
  15. package/components/jsx/follow-plus-instant-alerts/follow-plus-instant-alerts.jsx +1 -1
  16. package/components/jsx/follow-plus-instant-alerts/main.scss +36 -46
  17. package/components/jsx/preferences-modal/main.scss +38 -19
  18. package/components/pin-button/main.scss +63 -54
  19. package/components/pin-button/pin-button.html +1 -1
  20. package/components/save-for-later/save-for-later.html +2 -2
  21. package/demos/app.js +1 -23
  22. package/demos/src/demo.scss +19 -15
  23. package/demos/templates/demo.html +6 -4
  24. package/dist/follow-plus-instant-alerts/follow-plus-instant-alerts.js +1 -1
  25. package/mixins/lozenge/_themes.scss +70 -64
  26. package/mixins/lozenge/_toggle-icon.scss +39 -38
  27. package/mixins/lozenge/main.scss +80 -65
  28. package/myft/main.scss +376 -336
  29. package/myft/ui/lists.js +4 -4
  30. package/myft/ui/lists.scss +2 -20
  31. package/myft/ui/myft-buttons/main.scss +1 -1
  32. package/myft/ui/personalise-links.js +1 -2
  33. package/package.json +15 -13
  34. package/scripts/build-demo.sh +1 -1
  35. package/components/onboarding-cta/main.scss +0 -10
  36. package/mixins/buttons.scss +0 -23
  37. package/styles.css +0 -1
package/components/instant-alert/main.scss CHANGED
@@ -1,47 +1,70 @@
1
- @import "../../mixins/buttons";
2
-
3
1
  .n-myft-ui--instant {
4
- position: relative;
5
-
6
- .n-myft-ui__button {
7
- @include buttonWithIcon(26, 24, oColorsByName('teal-40'), 'mail', 'mail', oColorsByName('white'));
8
- display: inline-block;
9
- }
10
- }
11
-
12
- .n-myft-ui__button--instant.n-myft-ui__button--instant-light {
13
- $icon-width: 36;
14
- border: 0;
15
- padding-left: 8px;
16
- padding-right: 36px;
17
- color: oColorsByName('black-80');
18
- font-weight: 400;
19
- background: transparent;
20
- &:not([disabled]):hover,
21
- &:not([disabled]):focus {
22
- background: transparent;
23
- color: oColorsByName('black-80');
24
- }
25
- &[aria-pressed="true"] {
26
- background: transparent;
27
- color: oColorsByName('black-80');
28
- }
29
- &::before {
30
- @include oIconsContent('mute-notifications', oColorsByName('black-60'), $icon-width, $iconset-version: 1);
31
- left: auto;
32
- right: 1px;
33
- margin-top: -18px;
34
- }
35
- &:not([disabled]):hover:before,
36
- &[aria-pressed="true"]::before {
37
- @include oIconsContent('notifications', oColorsByName('claret'), $icon-width, $iconset-version: 1);
38
- }
39
-
40
- .n-myft-ui--instant--hide-text & {
41
- margin-top: 5px;
42
- width: 20px;
43
- overflow: hidden;
44
- white-space: nowrap;
45
- text-indent: -110px;
46
- }
47
- }
2
+ position: relative;
3
+
4
+
5
+ .n-myft-ui__button--instant {
6
+ position: relative;
7
+ display: inline-block;
8
+ border: 0;
9
+ padding-left: var(--o3-spacing-4xs);
10
+ padding-right: 36px;
11
+ color: var(--o3-color-palette-black-80);
12
+ font-weight: 400;
13
+ background: transparent;
14
+
15
+ &::before {
16
+ --icon-size: 24px;
17
+ content: '';
18
+ position: absolute;
19
+ top: 50%;
20
+ background-color: var(--o3-color-palette-teal-40);
21
+ mask-image: var(--o3-icon-mail);
22
+ mask-repeat: no-repeat;
23
+ mask-size: contain;
24
+ width: var(--icon-size);
25
+ height: var(--icon-size);
26
+ }
27
+
28
+ &[aria-pressed='true']::before {
29
+ background-color: var(--o3-color-palette-white);
30
+ }
31
+
32
+ &[aria-pressed='true']:hover::before {
33
+ background-color: var(--o3-color-palette-teal-40);
34
+ }
35
+
36
+ &:not([disabled]):hover,
37
+ &:not([disabled]):focus {
38
+ background: transparent;
39
+ color: var(--o3-color-palette-black-80);
40
+ }
41
+
42
+ &[aria-pressed='true'] {
43
+ background: transparent;
44
+ color: var(--o3-color-palette-black-80);
45
+ }
46
+
47
+ &::before {
48
+ background-color: var(--o3-color-palette-black-60);
49
+ mask-image: var(--o3-icon-notification-mute);
50
+
51
+ left: auto;
52
+ right: var(--o3-spacing-4xs);
53
+ margin-top: calc(var(--o3-spacing-3xs) * -1);
54
+ }
55
+
56
+ &:not([disabled]):hover:before,
57
+ &[aria-pressed='true']::before {
58
+ mask-image: var(--o3-icon-notification);
59
+ background-color: var(--o3-color-palette-claret);
60
+ }
61
+
62
+ .n-myft-ui--instant--hide-text & {
63
+ margin-top: 5px;
64
+ width: 20px;
65
+ overflow: hidden;
66
+ white-space: nowrap;
67
+ text-indent: -110px;
68
+ }
69
+ }
70
+ }
package/components/jsx/follow-plus-instant-alerts/follow-plus-instant-alerts.jsx CHANGED
@@ -68,7 +68,7 @@ export default function FollowPlusInstantAlerts({ conceptId, name, csrfToken, se
68
68
  data-concept-id={conceptId}
69
69
  data-myft-ui-variant="followPlusInstantAlerts">
70
70
  <div
71
- className="n-myft-ui__announcement o-normalise-visually-hidden"
71
+ className="n-myft-ui__announcement o3-visually-hidden"
72
72
  aria-live="assertive"
73
73
  data-pressed-text={`Now following ${name}.`}
74
74
  data-unpressed-text={`No longer following ${name}.`}
package/components/jsx/follow-plus-instant-alerts/main.scss CHANGED
@@ -1,64 +1,54 @@
1
1
  @import '../../../mixins/lozenge/main.scss';
2
2
 
3
- @import "@financial-times/o-icons/main";
4
- @import "@financial-times/o-colors/main";
5
-
6
3
  @mixin bellOffIcon($color, $background) {
7
- @include oIconsContent(
8
- $icon-name: 'mute-notifications',
9
- $color: oColorsMix(
10
- $color: $color,
11
- $background: $background,
12
- $percentage: 60,
13
- ),
14
- $size: 10
15
- );
16
- background-size: 21px;
4
+ background-color: color-mix(in srgb, $background 60%, $color);
5
+ mask-image: var(--o3-icon-notification-mute);
17
6
  }
18
7
 
19
8
  @mixin bellOnIcon($color) {
20
- @include oIconsContent(
21
- $icon-name: 'notifications',
22
- $color: $color,
23
- $size: 10
24
- );
25
- background-size: 21px;
9
+ mask-image: var(--o3-icon-notification);
10
+ background-color: $color;
26
11
  }
27
12
 
28
- @mixin arrowIcon($icon-name, $color) {
29
- content: "";
30
- @include oIconsContent(
31
- $icon-name: $icon-name,
32
- $color: $color,
33
- $size: 10
34
- );
35
- background-size: 21px;
36
- background-position: 50% 41%;
37
- margin-left: 12px;
13
+ @mixin chevronIcon($icon-name, $color) {
14
+ --icon-size: 12px;
15
+ mask-repeat: no-repeat;
16
+ mask-size: contain;
17
+ width: var(--icon-size);
18
+ height: var(--icon-size);
19
+ content: '';
20
+ display: inline-block;
21
+ position: relative;
22
+ mask-image: var(--o3-icon-#{$icon-name});
23
+ background-color: $color;
24
+ margin-left: 8px;
25
+ vertical-align: bottom;
38
26
  }
39
27
 
40
28
  @mixin myftFollowButtonPlusToggleIcons($theme: standard) {
41
- @include withTheme($theme) {
42
- &.n-myft-follow-button--instant-alerts[aria-pressed=true]::before {
43
- @include bellOffIcon(getThemeColor(text), getThemeColor(background));
44
- }
29
+ // TODO: request new designs for these buttons to follow new o3 guidelines
30
+
31
+ @include withTheme($theme) {
32
+ &.n-myft-follow-button--instant-alerts[aria-pressed='true']::before {
33
+ @include bellOffIcon(getThemeColor(text), getThemeColor(background));
34
+ }
45
35
 
46
- &.n-myft-follow-button--instant-alerts--on[aria-pressed=true]::before {
47
- @include bellOnIcon(getThemeColor(text));
48
- }
36
+ &.n-myft-follow-button--instant-alerts--on[aria-pressed='true']::before {
37
+ @include bellOnIcon(getThemeColor(text));
38
+ }
49
39
 
50
- &.n-myft-follow-button--instant-alerts[aria-pressed=true]::after {
51
- @include arrowIcon('arrow-down', getThemeColor(text));
52
- }
40
+ &.n-myft-follow-button--instant-alerts[aria-pressed='true']::after {
41
+ @include chevronIcon('chevron-down', getThemeColor(text));
42
+ }
53
43
 
54
- &.n-myft-follow-button--instant-alerts--open[aria-pressed=true]::after {
55
- @include arrowIcon('arrow-up', getThemeColor(text));
56
- }
57
- }
44
+ &.n-myft-follow-button--instant-alerts--open[aria-pressed='true']::after {
45
+ @include chevronIcon('chevron-up', getThemeColor(text));
46
+ }
47
+ }
58
48
  }
59
49
 
60
50
  @each $theme in map-keys($myft-lozenge-themes) {
61
- .n-myft-follow-button#{getThemeModifier($theme)} {
62
- @include myftFollowButtonPlusToggleIcons($theme);
63
- }
51
+ .n-myft-follow-button#{getThemeModifier($theme)} {
52
+ @include myftFollowButtonPlusToggleIcons($theme);
53
+ }
64
54
  }
package/components/jsx/preferences-modal/main.scss CHANGED
@@ -1,4 +1,3 @@
1
- @import '@financial-times/o-colors/main';
2
1
  @import '@financial-times/o-forms/main';
3
2
  @include oForms();
4
3
 
@@ -6,10 +5,10 @@
6
5
  display: none;
7
6
  visibility: hidden;
8
7
  position: absolute;
9
- color: oColorsByName('black');
10
- background-color: oColorsByName('white-80');
8
+ color: var(--o3-color-palette-black);
9
+ background-color: var(--o3-color-palette-white-80);
11
10
  border-radius: 10px;
12
- border: 2px solid oColorsByName('black-5');
11
+ border: 2px solid var(--o3-color-palette-black-5);
13
12
  width: 275px;
14
13
  text-transform: none;
15
14
  z-index: 9999999;
@@ -21,11 +20,19 @@
21
20
  }
22
21
 
23
22
  .n-myft-ui__preferences-modal__checkbox__message {
24
- @include oTypographySans($scale: 0, $weight: 'semibold', $style: 'normal');
23
+ font-style: normal;
24
+ font-weight: var(--o3-font-weight-semibold);
25
+ line-height: var(--o3-font-lineheight-metric2-negative-1);
26
+ font-size: var(--o3-font-size-metric2-negative-1);
27
+ font-family: var(--o3-font-family-metric);
25
28
  }
26
29
 
27
30
  .n-myft-ui__preferences-modal__text {
28
- @include oTypographySans($scale: -1, $weight: 'regular', $style: 'normal');
31
+ font-style: normal;
32
+ font-weight: var(--o3-font-weight-regular);
33
+ line-height: var(--o3-font-lineheight-metric2-negative-2);
34
+ font-size: var(--o3-font-size-metric2-negative-2);
35
+ font-family: var(--o3-font-family-metric);
29
36
  margin-bottom: 0;
30
37
  }
31
38
 
@@ -34,17 +41,21 @@
34
41
  height: 32px;
35
42
  width: 100%;
36
43
  border-radius: 20px;
37
- border: 2px solid oColorsByName('black-20');
38
- background-color: oColorsByName('white-80');
39
- @include oTypographySans($scale: -1, $weight: 'regular', $style: 'normal');
40
- color: oColorsByName('black-80');
44
+ border: 2px solid var(--o3-color-palette-black-20);
45
+ background-color: var(--o3-color-palette-white-80);
46
+ font-style: normal;
47
+ font-weight: var(--o3-font-weight-regular);
48
+ line-height: var(--o3-font-lineheight-metric2-negative-2);
49
+ font-size: var(--o3-font-size-metric2-negative-2);
50
+ font-family: var(--o3-font-family-metric);
51
+ color: var(--o3-color-palette-black-80);
41
52
  }
42
53
 
43
54
  .n-myft-ui__preferences-modal__remove-button:not([disabled]):hover,
44
55
  .n-myft-ui__preferences-modal__remove-button:not([disabled]):focus {
45
- border: 2px solid oColorsByName('claret-60');
46
- background-color: oColorsMix($color: 'claret-60', $percentage: 20);
47
- color: oColorsByName('claret-60');
56
+ border: 2px solid var(--o3-color-palette-claret-60);
57
+ background-color: color-mix(in srgb, var(--o3-color-palette-claret-60) 20%, transparent);
58
+ color: var(--o3-color-palette-claret-60);
48
59
  }
49
60
 
50
61
  .n-myft-ui__preferences-modal__remove-button:disabled {
@@ -60,9 +71,13 @@
60
71
  // components/o-message/src/scss/_brand.scss#L21 in origami
61
72
  .n-myft-ui__preferences-modal-error {
62
73
  display: block;
63
- @include oTypographySans($scale: -1, $weight: 'regular', $style: 'normal');
64
- color: oColorsMix('black', 'crimson', $percentage: 12.5);
65
- background-color: oColorsMix('crimson', $percentage: 10);
74
+ font-style: normal;
75
+ font-weight: var(--o3-font-weight-regular);
76
+ line-height: var(--o3-font-lineheight-metric2-negative-2);
77
+ font-size: var(--o3-font-size-metric2-negative-2);
78
+ font-family: var(--o3-font-family-metric);
79
+ color: color-mix(in srgb, var(--o3-color-palette-black) 12.5%, var(--o3-color-palette-crimson));
80
+ background-color: color-mix(in srgb, var(--o3-color-palette-crimson) 10%, transparent);
66
81
  text-align: left;
67
82
  padding: 8px 12px;
68
83
  margin-top: 16px;
@@ -72,9 +87,13 @@
72
87
  transition: opacity 0.5s;
73
88
 
74
89
  a {
75
- @include oTypographySans($scale: -1, $weight: 'semibold', $style: 'normal');
76
- color: oColorsMix('black', 'crimson', $percentage: 12.5);
77
- text-decoration-color: oColorsMix('black', 'crimson', $percentage: 12.5);
90
+ font-style: normal;
91
+ font-weight: var(--o3-font-weight-semibold);
92
+ line-height: var(--o3-font-lineheight-metric2-negative-2);
93
+ font-size: var(--o3-font-size-metric2-negative-2);
94
+ font-family: var(--o3-font-family-metric);
95
+ color: color-mix(in srgb, var(--o3-color-palette-black) 12.5%, var(--o3-color-palette-crimson));
96
+ text-decoration-color: color-mix(in srgb, var(--o3-color-palette-black) 12.5%, var(--o3-color-palette-crimson));
78
97
  }
79
98
  }
80
99
 
package/components/pin-button/main.scss CHANGED
@@ -1,68 +1,77 @@
1
1
  .myft-pin-divider {
2
- height: 18px;
3
- width: 1px;
4
- background: oColorsByName('black-10');
5
- margin: 0 1px;
2
+ height: 18px;
3
+ width: 1px;
4
+ background: var(--o3-color-palette-black-10);
5
+ margin: 0 1px;
6
6
  }
7
7
 
8
8
  .myft-pin-button-wrapper .myft-pin-button {
9
- $icon-width: 36;
10
- @include oIconsContent('pin', oColorsByName('black-60'), $icon-width, $iconset-version: 1);
11
- &[aria-pressed=true],
12
- &:not([disabled]):hover {
13
- @include oIconsContent('pin', oColorsByName('claret'), $icon-width, $iconset-version: 1);
14
- background-color: transparent;
15
- border: 0;
16
- }
17
- }
9
+ --icon-size: 24px;
18
10
 
19
- .myft-pin-button__label {
20
- @include oNormaliseVisuallyHidden;
21
- }
11
+ background-color: transparent;
12
+ border: 0;
13
+ padding: 0;
14
+ position: relative;
22
15
 
23
- .myft-pin-button-wrapper .myft-pin-button {
24
- background-color: transparent;
25
- border: 0;
26
- padding: 0;
27
- min-width: 28px;
16
+ width: var(--icon-size);
17
+ height: var(--icon-size);
18
+
19
+ &::after {
20
+ content: '';
21
+ position: absolute;
22
+ inset: 0;
23
+ background-color: var(--o3-color-palette-black-60);
24
+ mask-image: var(--o3-icon-pin);
25
+
26
+ mask-repeat: no-repeat;
27
+ mask-size: contain;
28
+ }
29
+
30
+ &[aria-pressed='true'],
31
+ &:not([disabled]):hover {
32
+ &::after {
33
+ background-color: var(--o3-color-palette-claret);
34
+ border: 0;
35
+ }
36
+ }
28
37
  }
29
38
 
30
39
  .myft-pin-button-wrapper {
31
- .o-tooltip--myft-pin-button {
32
- min-width: 200px;
33
- }
40
+ .o-tooltip--myft-pin-button {
41
+ min-width: 200px;
42
+ }
34
43
 
35
- > form {
36
- display: flex;
37
- }
44
+ > form {
45
+ display: flex;
46
+ }
38
47
  }
39
48
 
40
49
  .myft-pin-button-wrapper.loading {
41
- position: relative;
42
- form {
43
- visibility: hidden;
44
- }
45
- &:after {
46
- position: absolute;
47
- top: 50%;
48
- left: 50%;
49
- transform: translate(-50%, -50%);
50
- content: " ";
51
- display: block;
52
- width: 12px;
53
- height: 12px;
54
- margin: 0 auto;
55
- border-radius: 50%;
56
- border: 3px solid oColorsByName('black-60');
57
- border-color: oColorsByName('black-60') transparent;
58
- animation: lds-dual-ring 1.2s linear infinite;
59
- @keyframes lds-dual-ring {
60
- 0% {
61
- transform: translate(-50%, -50%) rotate(0deg);
62
- }
63
- 100% {
64
- transform: translate(-50%, -50%) rotate(360deg);
65
- }
66
- }
67
- }
50
+ position: relative;
51
+ form {
52
+ visibility: hidden;
53
+ }
54
+ &:after {
55
+ position: absolute;
56
+ top: 50%;
57
+ left: 50%;
58
+ transform: translate(-50%, -50%);
59
+ content: ' ';
60
+ display: block;
61
+ width: 12px;
62
+ height: 12px;
63
+ margin: 0 auto;
64
+ border-radius: 50%;
65
+ border: 3px solid var(--o3-color-palette-black-60);
66
+ border-color: var(--o3-color-palette-black-60) transparent;
67
+ animation: lds-dual-ring 1.2s linear infinite;
68
+ @keyframes lds-dual-ring {
69
+ 0% {
70
+ transform: translate(-50%, -50%) rotate(0deg);
71
+ }
72
+ 100% {
73
+ transform: translate(-50%, -50%) rotate(360deg);
74
+ }
75
+ }
76
+ }
68
77
  }
package/components/pin-button/pin-button.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <input type="hidden" value="{{directType}}" name="directType"> {{else}}
8
8
  <input type="hidden" value="http://www.ft.com/ontology/concept/Concept" name="directType"> {{/if}}
9
9
  <div
10
- class="n-myft-ui__announcement o-normalise-visually-hidden"
10
+ class="n-myft-ui__announcement o3-visually-hidden"
11
11
  aria-live="assertive"
12
12
  data-pressed-text="{{name}} pinned in myFT."
13
13
  data-unpressed-text="Unpinned {{name}} from myFT."
package/components/save-for-later/save-for-later.html CHANGED
@@ -7,14 +7,14 @@
7
7
  data-myft-ui-save-config="{{#if nonModal}}nonModal{{/if}}">
8
8
  {{> n-myft-ui/components/csrf-token/input}}
9
9
  <div
10
- class="n-myft-ui__announcement o-normalise-visually-hidden"
10
+ class="n-myft-ui__announcement o3-visually-hidden"
11
11
  aria-live="assertive"
12
12
  data-pressed-text="Article saved in My FT."
13
13
  data-unpressed-text="Removed article from My FT."
14
14
  ></div>
15
15
  <button
16
16
  type="submit"
17
- class="{{#if saveButtonWithIcon}}n-myft-ui__save-button-with-icon{{else}}n-myft-ui__button{{#variant}} n-myft-ui__button--{{this}}{{/variant}}{{/if}}"
17
+ class="{{#if saveButtonWithIcon}}n-myft-ui__save-button-with-icon{{else}}o3-button o3-button--secondary o3-button--small{{#variant}} o3-button--{{this}}{{/variant}}{{/if}}"
18
18
  data-trackable="{{#if trackableId}}{{trackableId}}{{else}}save-for-later{{/if}}"
19
19
  {{#if isSaved}}
20
20
  {{!-- The value of alternate label needs to be the opposite of label / the current saved state. This allows the client side JS to toggle the labels on state changes --}}
package/demos/app.js CHANGED
@@ -1,9 +1,6 @@
1
1
  require('sucrase/register');
2
2
 
3
3
  const nExpress = require('@financial-times/n-express');
4
- const chalk = require('chalk');
5
- const errorHighlight = chalk.bold.red;
6
- const highlight = chalk.bold.green;
7
4
  const path = require('path');
8
5
  const handlebars = require('handlebars');
9
6
  const { PageKitHandlebars, helpers } = require('@financial-times/dotcom-server-handlebars');
@@ -56,25 +53,6 @@ app.get('/', (req, res) => {
56
53
  }, fixtures));
57
54
  });
58
55
 
59
- function runPa11yTests () {
60
- const spawn = require('child_process').spawn;
61
- const pa11y = spawn('pa11y-ci');
62
56
 
63
- pa11y.stdout.on('data', (data) => {
64
- console.log(highlight(`${data}`)); //eslint-disable-line
65
- });
66
57
 
67
- pa11y.stderr.on('data', (error) => {
68
- console.log(errorHighlight(`${error}`)); //eslint-disable-line
69
- });
70
-
71
- pa11y.on('close', (code) => {
72
- process.exit(code);
73
- });
74
- }
75
-
76
- const listen = app.listen(5005);
77
-
78
- if (process.env.PA11Y === 'true') {
79
- listen.then(runPa11yTests);
80
- }
58
+ app.listen(5005);
package/demos/src/demo.scss CHANGED
@@ -1,6 +1,5 @@
1
1
  $system-code: "n-myft-ui-demo";
2
-
3
- @import 'n-ui-foundations/main';
2
+ @import '@financial-times/dotcom-ui-base-styles/styles';
4
3
  @import '../../myft/main';
5
4
  @import '../../components/collections/main';
6
5
  @import '../../components/concept-list/main';
@@ -8,10 +7,15 @@ $system-code: "n-myft-ui-demo";
8
7
  @import '../../components/button/main';
9
8
  @import '../../components/follow-button/main';
10
9
  @import '../../components/jsx/follow-plus-instant-alerts/main';
11
- @import '../../components/onboarding-cta/main';
12
10
  @import '../../components/jsx/preferences-modal/main';
13
11
 
14
12
  @import '../../components/digest-promo/main';
13
+
14
+ .onboarding-container {
15
+ background-color: var(--o3-color-palette-slate);
16
+ padding: 20px;
17
+ }
18
+
15
19
  .n-myft-digest-promo {
16
20
  display: block;
17
21
  }
@@ -37,32 +41,32 @@ $system-code: "n-myft-ui-demo";
37
41
  }
38
42
 
39
43
  .concept-collection--standard {
40
- background-color: oColorsByName('paper');
44
+ background-color: var(--o3-color-palette-paper);
41
45
  }
42
46
 
43
47
  .concept-collection--inverse {
44
- background-color: oColorsByName('claret-60');
45
- color: oColorsByName('white');
48
+ background-color: var(--o3-color-palette-claret-60);
49
+ color: var(--o3-color-palette-white);
46
50
  }
47
51
 
48
52
  .concept-collection--inverse-monochrome {
49
- background-color: oColorsByName('white');
50
- color: oColorsByName('black');
53
+ background-color: var(--o3-color-palette-white);
54
+ color: var(--o3-color-palette-black);
51
55
  }
52
56
 
53
57
  .concept-collection--alphaville {
54
- background-color: oColorsByName('matisse');
55
- color: oColorsByName('white');
58
+ background-color: var(--o3-color-palette-matisse-blue);
59
+ color: var(--o3-color-palette-white);
56
60
  }
57
61
 
58
62
  .concept-collection--opinion {
59
- background-color: oColorsByName('sky');
60
- color: oColorsByName('oxford');
63
+ background-color: var(--o3-color-palette-sky);
64
+ color: var(--o3-color-palette-oxford);
61
65
  }
62
66
 
63
67
  .concept-collection--monochrome {
64
- background-color: oColorsByName('black');
65
- color: oColorsByName('white');
68
+ background-color: var(--o3-color-palette-black);
69
+ color: var(--o3-color-palette-white);
66
70
  }
67
71
 
68
72
  .demo-section {
@@ -78,5 +82,5 @@ $system-code: "n-myft-ui-demo";
78
82
  font-style: italic;
79
83
  font-size: 1.2em;
80
84
  margin: 12px 0;
81
- color: oColorsByName('black-70');
85
+ color: var(--o3-color-palette-black-70);
82
86
  }
package/demos/templates/demo.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="stylesheet" href="/public/main.css">
9
9
  </head>
10
10
 
11
- <body>
11
+ <body data-o3-brand="core">
12
12
 
13
13
  <div class="o-grid-container o-grid-container--snappy">
14
14
  <div class="o-grid-row">
@@ -380,9 +380,11 @@
380
380
  Used on the myFT section of the homepage.
381
381
  </p>
382
382
 
383
- <a class="n-myft-onboarding-cta" href="#">
384
- See stories
385
- </a>
383
+ <div class="onboarding-container">
384
+ <a class="o3-button o3-button--secondary" data-o3-theme="inverse" href="#">
385
+ See stories
386
+ </a>
387
+ </div>
386
388
  </div>
387
389
  </div>
388
390
  </section>
package/dist/follow-plus-instant-alerts/follow-plus-instant-alerts.js CHANGED
@@ -92,7 +92,7 @@ function FollowPlusInstantAlerts(_ref) {
92
92
  'data-concept-id': conceptId,
93
93
  'data-myft-ui-variant': 'followPlusInstantAlerts' }),
94
94
  _react2.default.createElement('div', {
95
- className: 'n-myft-ui__announcement o-normalise-visually-hidden',
95
+ className: 'n-myft-ui__announcement o3-visually-hidden',
96
96
  'aria-live': 'assertive',
97
97
  'data-pressed-text': 'Now following ' + name + '.',
98
98
  'data-unpressed-text': 'No longer following ' + name + '.'