@nnc-digital/nnc-design-system 1.0.0-beta2 → 1.0.0-beta3

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/build/index.js +23 -12
  2. package/build/index.js.map +1 -1
  3. package/build/index.mjs.js +23 -12
  4. package/build/index.mjs.js.map +1 -1
  5. package/package.json +1 -1
package/build/index.mjs.js CHANGED
@@ -25559,13 +25559,11 @@ const HomeLink = styled.a`
25559
25559
  }
25560
25560
  }
25561
25561
  &:focus {
25562
- outline: 2px transparent solid;
25563
- box-shadow: ${(props) => props.theme.theme_vars.colours.focus} 0 0 0 2px,
25564
- ${(props) =>
25565
- props.theme.cardinal_name === 'north'
25566
- ? props.theme.theme_vars.colours.black
25567
- : props.theme.theme_vars.colours.focus}
25568
- 0 0 0 4px;
25562
+ outline: none;
25563
+ background: ${(props) => props.theme.theme_vars.colours.focus};
25564
+ box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
25565
+ -webkit-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
25566
+ -moz-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
25569
25567
  transition: box-shadow 0.3s ease 0s;
25570
25568
  }
25571
25569
  `;
@@ -25718,6 +25716,9 @@ const Button$3 = styled.button`
25718
25716
  &:focus {
25719
25717
  outline: none;
25720
25718
  background: ${(props) => props.theme.theme_vars.colours.focus};
25719
+ box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
25720
+ -webkit-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
25721
+ -moz-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
25721
25722
  svg {
25722
25723
  path {
25723
25724
  fill: ${(props) => props.theme.theme_vars.colours.black};
@@ -26020,12 +26021,14 @@ const CallToActionLink = styled.a`
26020
26021
  display: inline-block;
26021
26022
  outline: none;
26022
26023
 
26023
- &:hover,
26024
- &:focus {
26024
+ &:hover {
26025
26025
  text-decoration-style: dotted;
26026
26026
  text-shadow: 2px 2px 4px rgba(150, 150, 150, 0.5), -2px 2px 4px rgba(150, 150, 150, 0.5),
26027
26027
  2px -2px 4px rgba(150, 150, 150, 0.5), -2px -2px 4px rgba(150, 150, 150, 0.5);
26028
26028
  }
26029
+ &:focus {
26030
+ ${(props) => props.theme.linkStylesFocus};
26031
+ }
26029
26032
  &:active {
26030
26033
  transform: translate(3px);
26031
26034
  }
@@ -26111,6 +26114,14 @@ const PlayPauseButton = styled.button`
26111
26114
  &:hover {
26112
26115
  background: rgba(0, 0, 0, 0.7);
26113
26116
  }
26117
+ &:focus {
26118
+ outline: none;
26119
+ background: ${(props) => props.theme.theme_vars.colours.focus};
26120
+ color: ${(props) => props.theme.theme_vars.colours.black};
26121
+ box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
26122
+ -webkit-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
26123
+ -moz-box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
26124
+ }
26114
26125
  }
26115
26126
  `;
26116
26127
 
@@ -30015,9 +30026,9 @@ const generate_theme = (theme_vars) => {
30015
30026
  background: ${theme_vars.colours.focus};
30016
30027
  outline: none;
30017
30028
  text-decoration: none !important;
30018
- box-shadow: 0 0 0 1px ${theme_vars.colours.focus}, 0 0 0 3px ${theme_vars.colours.black};
30019
- -webkit-box-shadow: 0 0 0 1px ${theme_vars.colours.focus}, 0 0 0 3px ${theme_vars.colours.black};
30020
- -moz-box-shadow: 0 0 0 1px ${theme_vars.colours.focus}, 0 0 0 3px ${theme_vars.colours.black};
30029
+ box-shadow: 0 0 0 2px ${theme_vars.colours.focus}, 0 0 0 4px ${theme_vars.colours.black};
30030
+ -webkit-box-shadow: 0 0 0 2px ${theme_vars.colours.focus}, 0 0 0 4px ${theme_vars.colours.black};
30031
+ -moz-box-shadow: 0 0 0 2px ${theme_vars.colours.focus}, 0 0 0 4px ${theme_vars.colours.black};
30021
30032
  `,
30022
30033
  linkStylesActive: css`
30023
30034
  color: ${theme_vars.colours.black};