@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.js CHANGED
@@ -25572,13 +25572,11 @@ const HomeLink = styled__default.default.a`
25572
25572
  }
25573
25573
  }
25574
25574
  &:focus {
25575
- outline: 2px transparent solid;
25576
- box-shadow: ${(props) => props.theme.theme_vars.colours.focus} 0 0 0 2px,
25577
- ${(props) =>
25578
- props.theme.cardinal_name === 'north'
25579
- ? props.theme.theme_vars.colours.black
25580
- : props.theme.theme_vars.colours.focus}
25581
- 0 0 0 4px;
25575
+ outline: none;
25576
+ background: ${(props) => props.theme.theme_vars.colours.focus};
25577
+ box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
25578
+ -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};
25579
+ -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};
25582
25580
  transition: box-shadow 0.3s ease 0s;
25583
25581
  }
25584
25582
  `;
@@ -25731,6 +25729,9 @@ const Button$3 = styled__default.default.button`
25731
25729
  &:focus {
25732
25730
  outline: none;
25733
25731
  background: ${(props) => props.theme.theme_vars.colours.focus};
25732
+ box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
25733
+ -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};
25734
+ -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};
25734
25735
  svg {
25735
25736
  path {
25736
25737
  fill: ${(props) => props.theme.theme_vars.colours.black};
@@ -26033,12 +26034,14 @@ const CallToActionLink = styled__default.default.a`
26033
26034
  display: inline-block;
26034
26035
  outline: none;
26035
26036
 
26036
- &:hover,
26037
- &:focus {
26037
+ &:hover {
26038
26038
  text-decoration-style: dotted;
26039
26039
  text-shadow: 2px 2px 4px rgba(150, 150, 150, 0.5), -2px 2px 4px rgba(150, 150, 150, 0.5),
26040
26040
  2px -2px 4px rgba(150, 150, 150, 0.5), -2px -2px 4px rgba(150, 150, 150, 0.5);
26041
26041
  }
26042
+ &:focus {
26043
+ ${(props) => props.theme.linkStylesFocus};
26044
+ }
26042
26045
  &:active {
26043
26046
  transform: translate(3px);
26044
26047
  }
@@ -26124,6 +26127,14 @@ const PlayPauseButton = styled__default.default.button`
26124
26127
  &:hover {
26125
26128
  background: rgba(0, 0, 0, 0.7);
26126
26129
  }
26130
+ &:focus {
26131
+ outline: none;
26132
+ background: ${(props) => props.theme.theme_vars.colours.focus};
26133
+ color: ${(props) => props.theme.theme_vars.colours.black};
26134
+ box-shadow: 0 0 0 2px ${(props) => props.theme.theme_vars.colours.focus}, 0 0 0 4px ${(props) => props.theme.theme_vars.colours.black};
26135
+ -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};
26136
+ -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};
26137
+ }
26127
26138
  }
26128
26139
  `;
26129
26140
 
@@ -30028,9 +30039,9 @@ const generate_theme = (theme_vars) => {
30028
30039
  background: ${theme_vars.colours.focus};
30029
30040
  outline: none;
30030
30041
  text-decoration: none !important;
30031
- box-shadow: 0 0 0 1px ${theme_vars.colours.focus}, 0 0 0 3px ${theme_vars.colours.black};
30032
- -webkit-box-shadow: 0 0 0 1px ${theme_vars.colours.focus}, 0 0 0 3px ${theme_vars.colours.black};
30033
- -moz-box-shadow: 0 0 0 1px ${theme_vars.colours.focus}, 0 0 0 3px ${theme_vars.colours.black};
30042
+ box-shadow: 0 0 0 2px ${theme_vars.colours.focus}, 0 0 0 4px ${theme_vars.colours.black};
30043
+ -webkit-box-shadow: 0 0 0 2px ${theme_vars.colours.focus}, 0 0 0 4px ${theme_vars.colours.black};
30044
+ -moz-box-shadow: 0 0 0 2px ${theme_vars.colours.focus}, 0 0 0 4px ${theme_vars.colours.black};
30034
30045
  `,
30035
30046
  linkStylesActive: styled.css`
30036
30047
  color: ${theme_vars.colours.black};