@comicrelief/component-library 8.25.5 → 8.25.6

package/dist/components/Organisms/Footer/FundraisingRegulatorLogo.js

@@ -20,7 +20,8 @@ const FundraisingRegulatorLogo = () => /*#__PURE__*/_react.default.createElement
     width: '150px',
     textDecoration: 'none'
   },
-  target: "_blank"
+  target: "_blank",
+  rel: "noreferrer"
 }, /*#__PURE__*/_react.default.createElement("img", {
   src: "https://www.fundraisingregulator.org.uk/fr-badge/80983ed7-ea80-40db-8e52-4a3351d9e77d/en/white",
   width: "100%",

package/dist/index.js

@@ -412,12 +412,6 @@ Object.defineProperty(exports, "spacing", {
     return _spacing.default;
   }
 });
-Object.defineProperty(exports, "srTheme", {
-  enumerable: true,
-  get: function () {
-    return _theme2.default;
-  }
-});
 Object.defineProperty(exports, "zIndex", {
   enumerable: true,
   get: function () {
@@ -425,7 +419,6 @@ Object.defineProperty(exports, "zIndex", {
   }
 });
 var _theme = _interopRequireDefault(require("./theme/crTheme/theme"));
-var _theme2 = _interopRequireDefault(require("./theme/srTheme/theme"));
 var _ThemeProvider = _interopRequireDefault(require("./theme/ThemeProvider"));
 var _hideVisually = _interopRequireDefault(require("./theme/shared/hideVisually"));
 var _zIndex = _interopRequireDefault(require("./theme/shared/zIndex"));

package/dist/theme/crTheme/colors.js

@@ -15,11 +15,6 @@ const colors = {
   coral: '#F9686D',
   coral_dark: '#961D35',
   coral_light: '#FFCECE',
-  cwg_22_blue: '#204794',
-  cwg_22_orange: '#FB6326',
-  cwg_22_purple: '#7B3ED3',
-  cwg_22_red: '#E62731',
-  cwg_22_yellow: '#F8E928',
   deep_violet_dark: '#2C0230',
   deep_violet: '#2C0230' /** Will be removed  */,
   deep_violet_light: '#3e1c43',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.25.5",
+  "version": "8.25.6",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Organisms/Footer/FundraisingRegulatorLogo.js

@@ -16,8 +16,7 @@ const FundraisingRegulatorWrapper = styled.div`
 const FundraisingRegulatorLogo = () => (
   <FundraisingRegulatorWrapper>
     {/* Code from https://www.fundraisingregulator.org.uk/ */}
-    {/* eslint-disable-next-line react/jsx-no-target-blank */}
-    <a href="https://www.fundraisingregulator.org.uk/validate?registrant=COMIC+RELIEF" className="fr-digital-badge" style={{ height: 'auto', width: '150px', textDecoration: 'none' }} target="_blank">
+    <a href="https://www.fundraisingregulator.org.uk/validate?registrant=COMIC+RELIEF" className="fr-digital-badge" style={{ height: 'auto', width: '150px', textDecoration: 'none' }} target="_blank" rel="noreferrer">
       <img src="https://www.fundraisingregulator.org.uk/fr-badge/80983ed7-ea80-40db-8e52-4a3351d9e77d/en/white" width="100%" alt="Fundraising Regulator badge with validation link" loading="lazy" />
     </a>
   </FundraisingRegulatorWrapper>

package/src/index.js

@@ -1,6 +1,5 @@
 /* Theme */
 export { default as crTheme } from './theme/crTheme/theme';
-export { default as srTheme } from './theme/srTheme/theme';
 export { default as ThemeProvider } from './theme/ThemeProvider';
 
 /* Utils */

package/src/theme/crTheme/colors.js

@@ -9,11 +9,6 @@ const colors = {
   coral: '#F9686D',
   coral_dark: '#961D35',
   coral_light: '#FFCECE',
-  cwg_22_blue: '#204794',
-  cwg_22_orange: '#FB6326',
-  cwg_22_purple: '#7B3ED3',
-  cwg_22_red: '#E62731',
-  cwg_22_yellow: '#F8E928',
   deep_violet_dark: '#2C0230',
   deep_violet: '#2C0230' /** Will be removed  */,
   deep_violet_light: '#3e1c43',

package/dist/theme/srTheme/buttonColors.js

@@ -1,205 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = require("styled-components");
-var _colors = _interopRequireDefault(require("./colors"));
-const buttonColors = {
-  black: {
-    background: (0, _colors.default)('black'),
-    color: (0, _colors.default)('white'),
-    hoverBackground: (0, _colors.default)('grey'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  blue: {
-    background: (0, _colors.default)('blue'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('blue_light'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  blue_dark: {
-    background: (0, _colors.default)('blue_dark'),
-    color: (0, _colors.default)('white'),
-    hoverBackground: (0, _colors.default)('blue'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  blue_light: {
-    background: (0, _colors.default)('blue_light'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('blue_dark'),
-    hoverColor: (0, _colors.default)('white')
-  },
-  coral: {
-    background: (0, _colors.default)('coral'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('coral_light'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  coral_dark: {
-    background: (0, _colors.default)('coral_dark'),
-    color: (0, _colors.default)('white'),
-    hoverBackground: (0, _colors.default)('coral'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  coral_light: {
-    background: (0, _colors.default)('coral_light'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('coral_dark'),
-    hoverColor: (0, _colors.default)('white')
-  },
-  green: {
-    background: (0, _colors.default)('green'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('green_light'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  green_dark: {
-    background: (0, _colors.default)('green_dark'),
-    color: (0, _colors.default)('white'),
-    hoverBackground: (0, _colors.default)('green'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  green_light: {
-    background: (0, _colors.default)('green_light'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('green_dark'),
-    hoverColor: (0, _colors.default)('white')
-  },
-  grey: {
-    background: (0, _colors.default)('grey'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('grey_light'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  grey_dark: {
-    background: (0, _colors.default)('grey_dark'),
-    color: (0, _colors.default)('white'),
-    hoverBackground: (0, _colors.default)('grey'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  grey_light: {
-    background: (0, _colors.default)('grey_light'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('grey_dark'),
-    hoverColor: (0, _colors.default)('white')
-  },
-  magenta: {
-    background: (0, _colors.default)('magenta'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('magenta_light'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  magenta_dark: {
-    background: (0, _colors.default)('magenta_dark'),
-    color: (0, _colors.default)('white'),
-    hoverBackground: (0, _colors.default)('magenta'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  magenta_light: {
-    background: (0, _colors.default)('magenta_light'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('magenta_dark'),
-    hoverColor: (0, _colors.default)('white')
-  },
-  orange: {
-    background: (0, _colors.default)('orange'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('orange_light'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  orange_dark: {
-    background: (0, _colors.default)('orange_dark'),
-    color: (0, _colors.default)('white'),
-    hoverBackground: (0, _colors.default)('orange'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  orange_light: {
-    background: (0, _colors.default)('orange_light'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('orange_dark'),
-    hoverColor: (0, _colors.default)('white')
-  },
-  purple: {
-    background: (0, _colors.default)('purple'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('purple_light'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  purple_dark: {
-    background: (0, _colors.default)('purple_dark'),
-    color: (0, _colors.default)('white'),
-    hoverBackground: (0, _colors.default)('purple'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  purple_light: {
-    background: (0, _colors.default)('purple_light'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('purple_dark'),
-    hoverColor: (0, _colors.default)('white')
-  },
-  red: {
-    background: (0, _colors.default)('red'),
-    color: (0, _colors.default)('white'),
-    hoverBackground: (0, _colors.default)('red_dark'),
-    hoverColor: (0, _colors.default)('white')
-  },
-  teal: {
-    background: (0, _colors.default)('teal'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('teal_light'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  teal_dark: {
-    background: (0, _colors.default)('teal_dark'),
-    color: (0, _colors.default)('white'),
-    hoverBackground: (0, _colors.default)('teal'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  teal_light: {
-    background: (0, _colors.default)('teal_light'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('teal_dark'),
-    hoverColor: (0, _colors.default)('white')
-  },
-  transparent: {
-    background: 'rgba(255, 255, 255, 0.5)',
-    color: 'inherit',
-    hoverBackground: 'rgba(255, 255, 255, 0.7)',
-    hoverColor: 'inherit'
-  },
-  white: {
-    background: (0, _colors.default)('white'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('grey'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  yellow: {
-    background: (0, _colors.default)('yellow'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('yellow_light'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  yellow_dark: {
-    background: (0, _colors.default)('yellow_dark'),
-    color: (0, _colors.default)('white'),
-    hoverBackground: (0, _colors.default)('yellow'),
-    hoverColor: (0, _colors.default)('black')
-  },
-  yellow_light: {
-    background: (0, _colors.default)('yellow_light'),
-    color: (0, _colors.default)('black'),
-    hoverBackground: (0, _colors.default)('yellow_dark'),
-    hoverColor: (0, _colors.default)('white')
-  }
-};
-var _default = colorName => {
-  let style = 'inherit';
-  if (colorName) {
-    style = (0, _styledComponents.css)(["background-color:", ";color:", ";:hover{background-color:", ";color:", ";}"], buttonColors[colorName].background, buttonColors[colorName].color, buttonColors[colorName].hoverBackground, buttonColors[colorName].hoverColor);
-  }
-  return style;
-};
-exports.default = _default;

package/dist/theme/srTheme/colors.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-const colors = {
-  black: '#030e1a',
-  black_dark: '#030e1a',
-  blue: '#223c59',
-  blue_dark: '#3a4972',
-  blue_donate: '#2042AD',
-  blue_donate_interact: '#001A85',
-  blue_light: '#274084',
-  blue_royal: '#6489FC',
-  coral: '#FF6F61',
-  coral_dark: '#961D35',
-  coral_light: '#FFCECE',
-  deep_violet_dark: '#2C0230',
-  deep_violet: '#2C0230' /** Will be removed  */,
-  deep_violet_light: '#3e1c43',
-  green: '#4ecd57',
-  green_dark: '#1B651D',
-  green_light: '#F4F2F4',
-  grey: '#969598',
-  grey_dark: '#222222',
-  grey_extra_light: '#f0f0f0',
-  grey_for_forms: '#666',
-  grey_light: '#f4f2f4',
-  grey_medium: '#E1E2E3',
-  magenta: '#FC59CE',
-  magenta_dark: '#821C5D',
-  magenta_light: '#FEB4DC',
-  orange: '#FF9635',
-  orange_dark: '#984316',
-  orange_light: '#FEE3CC',
-  purple: '#6F3AAB',
-  lavender: '#C180F9',
-  purple_dark: '#48276E',
-  purple_light: '#DFC6F6',
-  red: '#e52530',
-  red_dark: '#e52530',
-  ruby_dark: '#e7135d',
-  teal: '#4ECDBE',
-  teal_dark: '#13767C',
-  teal_light: '#86E4E9',
-  white: '#FFFFFF',
-  white_smoke: '#fbf5f5',
-  yellow: '#FFE400',
-  yellow_dark: '#665700',
-  yellow_light: '#FEFD5A'
-};
-var _default = colorName => {
-  if (colorName) {
-    return colors[colorName];
-  }
-  return 'inherit';
-};
-exports.default = _default;

package/dist/theme/srTheme/fontSizes.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-const fontSizes = {
-  xxs: '0.69375rem',
-  xs: '0.83125rem',
-  s: '1rem',
-  m: '1.2rem',
-  l: '1.44rem',
-  xl: '1.725rem',
-  xxl: '4.125rem',
-  super: '7.3125rem'
-};
-var _default = size => {
-  if (size) {
-    return fontSizes[size];
-  }
-  return '';
-};
-exports.default = _default;

package/dist/theme/srTheme/linkStyles.js

@@ -1,35 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _styledComponents = require("styled-components");
-var _colors = _interopRequireDefault(require("./colors"));
-const linkStyles = {
-  standard: {
-    color: (0, _colors.default)('black'),
-    border: "1px solid ".concat((0, _colors.default)('black')),
-    weight: '700',
-    paddingBottom: '0.06em',
-    hoverColor: (0, _colors.default)('black'),
-    hoverBorder: "2px solid ".concat((0, _colors.default)('black'))
-  },
-  standard_white: {
-    color: (0, _colors.default)('white'),
-    border: "1px solid ".concat((0, _colors.default)('white')),
-    weight: 'normal',
-    paddingBottom: '0.06em',
-    hoverColor: (0, _colors.default)('white'),
-    hoverBorder: '1px solid trasparent'
-  }
-};
-var _default = (styleName, underline) => {
-  let style = (0, _styledComponents.css)(["padding-bottom:0.06em;color:", ";border-bottom:solid 1px;border-bottom-color:inherit;font-weight:700;:hover{color:inherit;font-weight:700;}"], (0, _colors.default)('black'));
-  if (styleName) {
-    style = (0, _styledComponents.css)(["padding:", ";color:", ";border-bottom:", ";font-weight:", ";:hover{color:", ";border-bottom:", ";font-weight:", ";}"], linkStyles[styleName].padding, linkStyles[styleName].color, underline && linkStyles[styleName].border, linkStyles[styleName].weight, linkStyles[styleName].hoverColor, underline && linkStyles[styleName].hoverBorder, linkStyles[styleName].hoverWeight);
-  }
-  return style;
-};
-exports.default = _default;

package/dist/theme/srTheme/theme.js

@@ -1,26 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _colors = _interopRequireDefault(require("./colors"));
-var _buttonColors = _interopRequireDefault(require("./buttonColors"));
-var _linkStyles = _interopRequireDefault(require("./linkStyles"));
-var _fontSizes = _interopRequireDefault(require("./fontSizes"));
-var _allBreakpoints = _interopRequireDefault(require("../shared/allBreakpoints"));
-var _fontFamilies = _interopRequireDefault(require("../shared/fontFamilies"));
-var _default = exports.default = {
-  color: _colors.default,
-  buttonColors: _buttonColors.default,
-  linkStyles: _linkStyles.default,
-  fontSize: _fontSizes.default,
-  allBreakpoints: _allBreakpoints.default,
-  fontFamilies: _fontFamilies.default,
-  font: {
-    regular: 'Founders',
-    semiBold: 'Founders_semi_bold',
-    bold: 'Founders_bold'
-  }
-};

package/src/theme/srTheme/buttonColors.js

@@ -1,206 +0,0 @@
-import { css } from 'styled-components';
-import color from './colors';
-
-const buttonColors = {
-  black: {
-    background: color('black'),
-    color: color('white'),
-    hoverBackground: color('grey'),
-    hoverColor: color('black')
-  },
-  blue: {
-    background: color('blue'),
-    color: color('black'),
-    hoverBackground: color('blue_light'),
-    hoverColor: color('black')
-  },
-  blue_dark: {
-    background: color('blue_dark'),
-    color: color('white'),
-    hoverBackground: color('blue'),
-    hoverColor: color('black')
-  },
-  blue_light: {
-    background: color('blue_light'),
-    color: color('black'),
-    hoverBackground: color('blue_dark'),
-    hoverColor: color('white')
-  },
-  coral: {
-    background: color('coral'),
-    color: color('black'),
-    hoverBackground: color('coral_light'),
-    hoverColor: color('black')
-  },
-  coral_dark: {
-    background: color('coral_dark'),
-    color: color('white'),
-    hoverBackground: color('coral'),
-    hoverColor: color('black')
-  },
-  coral_light: {
-    background: color('coral_light'),
-    color: color('black'),
-    hoverBackground: color('coral_dark'),
-    hoverColor: color('white')
-  },
-  green: {
-    background: color('green'),
-    color: color('black'),
-    hoverBackground: color('green_light'),
-    hoverColor: color('black')
-  },
-  green_dark: {
-    background: color('green_dark'),
-    color: color('white'),
-    hoverBackground: color('green'),
-    hoverColor: color('black')
-  },
-  green_light: {
-    background: color('green_light'),
-    color: color('black'),
-    hoverBackground: color('green_dark'),
-    hoverColor: color('white')
-  },
-  grey: {
-    background: color('grey'),
-    color: color('black'),
-    hoverBackground: color('grey_light'),
-    hoverColor: color('black')
-  },
-  grey_dark: {
-    background: color('grey_dark'),
-    color: color('white'),
-    hoverBackground: color('grey'),
-    hoverColor: color('black')
-  },
-  grey_light: {
-    background: color('grey_light'),
-    color: color('black'),
-    hoverBackground: color('grey_dark'),
-    hoverColor: color('white')
-  },
-  magenta: {
-    background: color('magenta'),
-    color: color('black'),
-    hoverBackground: color('magenta_light'),
-    hoverColor: color('black')
-  },
-  magenta_dark: {
-    background: color('magenta_dark'),
-    color: color('white'),
-    hoverBackground: color('magenta'),
-    hoverColor: color('black')
-  },
-  magenta_light: {
-    background: color('magenta_light'),
-    color: color('black'),
-    hoverBackground: color('magenta_dark'),
-    hoverColor: color('white')
-  },
-  orange: {
-    background: color('orange'),
-    color: color('black'),
-    hoverBackground: color('orange_light'),
-    hoverColor: color('black')
-  },
-  orange_dark: {
-    background: color('orange_dark'),
-    color: color('white'),
-    hoverBackground: color('orange'),
-    hoverColor: color('black')
-  },
-  orange_light: {
-    background: color('orange_light'),
-    color: color('black'),
-    hoverBackground: color('orange_dark'),
-    hoverColor: color('white')
-  },
-  purple: {
-    background: color('purple'),
-    color: color('black'),
-    hoverBackground: color('purple_light'),
-    hoverColor: color('black')
-  },
-  purple_dark: {
-    background: color('purple_dark'),
-    color: color('white'),
-    hoverBackground: color('purple'),
-    hoverColor: color('black')
-  },
-  purple_light: {
-    background: color('purple_light'),
-    color: color('black'),
-    hoverBackground: color('purple_dark'),
-    hoverColor: color('white')
-  },
-  red: {
-    background: color('red'),
-    color: color('white'),
-    hoverBackground: color('red_dark'),
-    hoverColor: color('white')
-  },
-  teal: {
-    background: color('teal'),
-    color: color('black'),
-    hoverBackground: color('teal_light'),
-    hoverColor: color('black')
-  },
-  teal_dark: {
-    background: color('teal_dark'),
-    color: color('white'),
-    hoverBackground: color('teal'),
-    hoverColor: color('black')
-  },
-  teal_light: {
-    background: color('teal_light'),
-    color: color('black'),
-    hoverBackground: color('teal_dark'),
-    hoverColor: color('white')
-  },
-  transparent: {
-    background: 'rgba(255, 255, 255, 0.5)',
-    color: 'inherit',
-    hoverBackground: 'rgba(255, 255, 255, 0.7)',
-    hoverColor: 'inherit'
-  },
-  white: {
-    background: color('white'),
-    color: color('black'),
-    hoverBackground: color('grey'),
-    hoverColor: color('black')
-  },
-  yellow: {
-    background: color('yellow'),
-    color: color('black'),
-    hoverBackground: color('yellow_light'),
-    hoverColor: color('black')
-  },
-  yellow_dark: {
-    background: color('yellow_dark'),
-    color: color('white'),
-    hoverBackground: color('yellow'),
-    hoverColor: color('black')
-  },
-  yellow_light: {
-    background: color('yellow_light'),
-    color: color('black'),
-    hoverBackground: color('yellow_dark'),
-    hoverColor: color('white')
-  }
-};
-
-export default colorName => {
-  let style = 'inherit';
-  if (colorName) {
-    style = css`
-      background-color: ${buttonColors[colorName].background};
-      color: ${buttonColors[colorName].color};
-      :hover {
-        background-color: ${buttonColors[colorName].hoverBackground};
-        color: ${buttonColors[colorName].hoverColor};
-      }
-    `;
-  }
-  return style;
-};

package/src/theme/srTheme/colors.js

@@ -1,53 +0,0 @@
-const colors = {
-  black: '#030e1a',
-  black_dark: '#030e1a',
-  blue: '#223c59',
-  blue_dark: '#3a4972',
-  blue_donate: '#2042AD',
-  blue_donate_interact: '#001A85',
-  blue_light: '#274084',
-  blue_royal: '#6489FC',
-  coral: '#FF6F61',
-  coral_dark: '#961D35',
-  coral_light: '#FFCECE',
-  deep_violet_dark: '#2C0230',
-  deep_violet: '#2C0230' /** Will be removed  */,
-  deep_violet_light: '#3e1c43',
-  green: '#4ecd57',
-  green_dark: '#1B651D',
-  green_light: '#F4F2F4',
-  grey: '#969598',
-  grey_dark: '#222222',
-  grey_extra_light: '#f0f0f0',
-  grey_for_forms: '#666',
-  grey_light: '#f4f2f4',
-  grey_medium: '#E1E2E3',
-  magenta: '#FC59CE',
-  magenta_dark: '#821C5D',
-  magenta_light: '#FEB4DC',
-  orange: '#FF9635',
-  orange_dark: '#984316',
-  orange_light: '#FEE3CC',
-  purple: '#6F3AAB',
-  lavender: '#C180F9',
-  purple_dark: '#48276E',
-  purple_light: '#DFC6F6',
-  red: '#e52530',
-  red_dark: '#e52530',
-  ruby_dark: '#e7135d',
-  teal: '#4ECDBE',
-  teal_dark: '#13767C',
-  teal_light: '#86E4E9',
-  white: '#FFFFFF',
-  white_smoke: '#fbf5f5',
-  yellow: '#FFE400',
-  yellow_dark: '#665700',
-  yellow_light: '#FEFD5A'
-};
-
-export default colorName => {
-  if (colorName) {
-    return colors[colorName];
-  }
-  return 'inherit';
-};

package/src/theme/srTheme/fontSizes.js

@@ -1,17 +0,0 @@
-const fontSizes = {
-  xxs: '0.69375rem',
-  xs: '0.83125rem',
-  s: '1rem',
-  m: '1.2rem',
-  l: '1.44rem',
-  xl: '1.725rem',
-  xxl: '4.125rem',
-  super: '7.3125rem'
-};
-
-export default size => {
-  if (size) {
-    return fontSizes[size];
-  }
-  return '';
-};

package/src/theme/srTheme/linkStyles.js

@@ -1,51 +0,0 @@
-import { css } from 'styled-components';
-import color from './colors';
-
-const linkStyles = {
-  standard: {
-    color: color('black'),
-    border: `1px solid ${color('black')}`,
-    weight: '700',
-    paddingBottom: '0.06em',
-    hoverColor: color('black'),
-    hoverBorder: `2px solid ${color('black')}`
-  },
-  standard_white: {
-    color: color('white'),
-    border: `1px solid ${color('white')}`,
-    weight: 'normal',
-    paddingBottom: '0.06em',
-    hoverColor: color('white'),
-    hoverBorder: '1px solid trasparent'
-  }
-};
-
-export default (styleName, underline) => {
-  let style = css`
-    padding-bottom: 0.06em;
-    color: ${color('black')};
-    border-bottom: solid 1px;
-    border-bottom-color: inherit;
-    font-weight: 700;
-    :hover {
-      color: inherit;
-      font-weight: 700;
-    }
-  `;
-
-  if (styleName) {
-    style = css`
-      padding: ${linkStyles[styleName].padding};
-      color: ${linkStyles[styleName].color};
-      border-bottom: ${underline && linkStyles[styleName].border};
-      font-weight: ${linkStyles[styleName].weight};
-      :hover {
-        color: ${linkStyles[styleName].hoverColor};
-        border-bottom: ${underline && linkStyles[styleName].hoverBorder};
-        font-weight: ${linkStyles[styleName].hoverWeight};
-      }
-    `;
-  }
-
-  return style;
-};

package/src/theme/srTheme/theme.js

@@ -1,20 +0,0 @@
-import color from './colors';
-import buttonColors from './buttonColors';
-import linkStyles from './linkStyles';
-import fontSize from './fontSizes';
-import allBreakpoints from '../shared/allBreakpoints';
-import fontFamilies from '../shared/fontFamilies';
-
-export default {
-  color,
-  buttonColors,
-  linkStyles,
-  fontSize,
-  allBreakpoints,
-  fontFamilies,
-  font: {
-    regular: 'Founders',
-    semiBold: 'Founders_semi_bold',
-    bold: 'Founders_bold'
-  }
-};