@rws-aoa/react-library/dist/css/styles.css

RWS AOA Design System

:root {
  /* Brand colours */
  --color-rijks-yellow: #f9e11e;
  --color-rijks-yellow-light: #fcf29a;
  --color-rijks-yellow-hover: #edd406;
  --color-rijks-skyblue: #007bc7;
  --color-rijks-skyblue-hover: #01496d;
  --color-rijks-skyblue-light: #d9ebf7;
  --color-rijks-logoblue: #154273;
  --color-rijks-grey-1: #f3f3f3;
  --color-rijks-grey-2: #e6e6e6;
  --color-rijks-grey-3: #cccccc;
  --color-rijks-grey-4: #b4b4b4;
  --color-rijks-grey-5: #999999;
  --color-rijks-grey-6: #696969;
  --color-rijks-grey-7: #535353;
  --color-rijks-notification-red: #f9dfdd;
  --color-rijks-notification-yellow: #fff4dc;
  --color-rijks-notification-green: #e1eddb;
  --color-rijks-notification-blue: #d9ebf7;

  /* Custom colours */
  --color-rijks-red-1: #d52b1e;
  --color-rijks-red-1-light: #fbe9e8;
  --color-rijks-red-1-hover: #951e15;

  /* Main colours */
  --color-primary: var(--color-rijks-skyblue);
  --color-primary-hover: var(--color-rijks-skyblue-hover);
  --color-error: var(--color-rijks-red-1);
  --color-error-hover: var(--color-rijks-red-1-hover);
  --color-disabled: var(--color-rijks-grey-2);
  --color-text: #222222;
  --color-text-light: #ffffff;
  --color-text-link: #01689b;
  --color-text-link-visited: #884488;
  --color-text-heading: var(--color-rijks-logoblue);
  --color-text-disabled: var(--color-rijks-grey-3);
  --color-bg-error: var(--color-rijks-notification-red);
  --color-bg-warning: var(--color-rijks-notification-yellow);
  --color-bg-confirmation: var(--color-rijks-notification-green);
  --color-bg-explanation: var(--color-rijks-notification-blue);
  --color-bg-light: var(--color-text-light);

  /* TYPOGRAPHY */

  /* Font families */
  --font-text: 'RijksoverheidSansText', verdana, arial, sans-serif;
  --font-heading: 'RijksoverheidSansHeading', verdana, arial, sans-serif;

  /* Font size & line height */
  --font-size-text: 1.125rem;
  --font-size-h1: 1.813rem;
  --font-size-h2: 1.625rem;
  --font-lineheight-text: 1.575rem;
  --font-lineheight-heading: 2.25rem;
}

/* Add RWS fonts */
@font-face {
  font-family: RijksoverheidSansHeading;
  font-style: normal;
  font-weight: normal;
  src: url('/assets/font/heading/regular/rijksoverheidsansheading-regular_2_0-webfont.woff') format('woff');
}

@font-face {
  font-family: RijksoverheidSansText;
  font-style: italic;
  font-weight: normal;
  src: url('/assets/font/text/italic/rijksoverheidsanswebtext-italic-webfont.woff') format('woff');
}

@font-face {
  font-family: RijksoverheidSansText;
  font-style: normal;
  font-weight: normal;
  src: url('/assets/font/text/regular/rijksoverheidsanswebtext-regular-webfont.woff') format('woff');
}

@font-face {
  font-family: RijksoverheidSansText;
  font-style: normal;
  font-weight: bold;
  src: url('/assets/font/text/bold/rijksoverheidsanswebtext-bold-webfont.woff') format('woff');
}

html,
body {
  font-family: RijksoverheidSansText, verdana, arial, sans-serif;
  font-size: 16px;
  color: #222222;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: RijksoverheidSansHeading, verdana, arial, sans-serif;
}