@ons/design-system 50.0.1 → 53.0.0

package/scss/ids.scss

@@ -0,0 +1,2 @@
+@import './settings/ids';
+@import './main';

package/scss/settings/_census.scss

@@ -1,5 +1,7 @@
 // Census brand
+$color-white: #fff;
 $color-black: #222;
+$color-white: #fff;
 $color-branded: #902082;
 $color-branded-tint: rgba(144, 32, 130, 0.1); // 10% of brand colour
 $color-branded-secondary: #df0667;
@@ -11,3 +13,142 @@ $color-census-gradient: linear-gradient(to bottom left, #902082 0%, #3c388e 100%
 // Assignment
 $color-tag-bg: $color-branded-supporting-tint;
 $color-text-link-hover: $color-black;
+
+// Overrides
+
+// Header logo
+.ons-header__title-logo {
+  .ons-svg-logo {
+    fill: $color-white;
+  }
+}
+
+// Hero
+.ons-hero--census {
+  background-image: linear-gradient(46deg, $color-branded-tertiary 0%, $color-branded 100%);
+  display: flex;
+  margin-bottom: 2px;
+  margin-top: 2px;
+  overflow: hidden;
+  padding: 0 !important;
+  position: relative;
+
+  .ons-hero__container {
+    align-items: flex-end;
+    min-height: 400px;
+  }
+  .ons-hero__circle-image,
+  .ons-hero__circle-gradient,
+  .ons-hero__circle-lined,
+  .ons-hero__circle {
+    position: absolute;
+  }
+  .ons-hero__circle-image {
+    background-color: $color-white;
+    border-radius: 50%;
+    height: 300px;
+    right: -4px;
+    top: -98px;
+    width: 300px;
+    z-index: 2;
+
+    img {
+      border-radius: 50%;
+      display: block;
+      height: 100%;
+    }
+  }
+  .ons-hero__circle-gradient {
+    background-image: linear-gradient(-45deg, $color-branded 0%, $color-branded 20%, $color-branded-tertiary 60%, #005489 90%);
+    border-radius: 50%;
+    display: block;
+    height: 182px;
+    right: -91px; // Half width of circle
+    top: 0.7rem;
+    width: 182px;
+    z-index: 3;
+  }
+  .ons-hero__circle {
+    background-color: $color-white;
+    border-radius: 50%;
+    display: block;
+    height: 990px;
+    left: 50%;
+    margin-left: -495px; // Half of circle
+    top: 27px;
+    width: 990px;
+    z-index: 1;
+  }
+  .ons-hero__circle-lined {
+    fill: $color-white;
+    height: 133px;
+    opacity: 0.4;
+    right: -24px;
+    top: 114px;
+    width: 133px;
+    z-index: 4;
+  }
+  .ons-hero__details {
+    padding-bottom: 1rem;
+    padding-top: 218px;
+  }
+
+  @media (min-width: 740px) {
+    .ons-hero__container {
+      align-items: center;
+    }
+    .ons-hero__details {
+      padding-top: 2rem;
+    }
+    .ons-hero__circle-image {
+      height: 382px;
+      right: -8px;
+      top: -117px;
+      width: 382px;
+    }
+    .ons-hero__circle-gradient {
+      height: 234px;
+      right: -117px; // Half width of circle
+      top: 1rem;
+      width: 234px;
+    }
+    .ons-hero__circle {
+      left: -331px;
+      margin: auto; // Reset
+      top: -288px;
+    }
+    .ons-hero__circle-lined {
+      height: 171px;
+      right: -24px;
+      top: 148px;
+      width: 171px;
+    }
+  }
+
+  @media (min-width: 980px) {
+    .ons-hero__details {
+      padding-right: 2.5rem;
+    }
+    .ons-hero__circle-image {
+      height: 558px;
+      margin: auto;
+      right: 0;
+      top: -176px;
+      width: 558px;
+    }
+    .ons-hero__circle-gradient {
+      height: 342px;
+      right: -171px; // Half width of circle
+      width: 342px;
+    }
+    .ons-hero__circle {
+      top: -369px;
+    }
+    .ons-hero__circle-lined {
+      height: 243px;
+      right: 0;
+      top: 292px; // Reset
+      width: 243px;
+    }
+  }
+}

package/scss/settings/_ids.scss

@@ -0,0 +1,48 @@
+// IDS brand
+$color-black: #222;
+$color-branded: #624595;
+$color-branded-text: $color-black;
+$color-branded-tint: rgba(98, 69, 149, 0.1); // 10% of brand colour
+$color-branded-secondary: #e06c0f;
+// Assignment
+$color-text-link-hover: $color-black;
+
+// Overrides
+// Hero
+.ons-hero {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 400 520'%3E%3Cmask id='a' width='400' height='520' x='0' y='0' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%2330279E' d='M0 0h400v519.066H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='url(%23b)' d='M197.258-52.508c-38.413-38.497-35.323-35.38-73.712-73.903-17.017-17.08-27.478-36.477-26.054-61.85 1.919-34.088 16.925-58.593 48.675-71.608 33.248-13.627 63.159-6.854 88.473 18.059 39.713 39.08 37.365 37.117 76.72 76.56 38.723 38.815 27.726 27.608 66.251 66.632 30.571 30.967 30.937 80.812 1.263 112.41-28.753 30.624-82.306 32.403-112.27 2.903-40.021-39.408-29.618-29.512-69.283-69.273l-.072.069.009.001Z' style='mix-blend-mode:multiply'/%3E%3Cpath fill='url(%23c)' d='M587.867 63.296c-39.333 39.442-36.141 36.273-75.491 75.689-17.445 17.478-37.291 28.245-63.285 26.853-34.92-1.874-60.058-17.178-73.465-49.66-14.046-34.023-7.192-64.674 18.255-90.66C433.8-15.266 431.8-12.856 472.087-53.276c39.645-39.766 28.211-28.472 68.071-68.035 31.641-31.391 82.689-31.907 115.132-1.598 31.448 29.371 33.407 84.214 3.269 114.976-40.255 41.092-30.142 30.413-70.764 71.142l.07.076.002.01Z' style='mix-blend-mode:multiply'/%3E%3Cpath fill='%23624595' d='M-728.821-950.538c-99.434-99.252-260.511-99.122-359.769.312-99.26 99.433-99.12 260.511.32 359.766L55.788 551.605c99.433 99.265 260.511 99.122 359.766-.312 99.265-99.433 99.122-260.511-.312-359.766L-728.821-950.538Z'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='401.572' x2='97.933' y1='-114.191' y2='-114.56' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.04' stop-color='%23869A38'/%3E%3Cstop offset='1' stop-color='%234C863F'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='523.973' x2='524.441' y1='-144.263' y2='166.737' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.49' stop-color='%23C66B20'/%3E%3Cstop offset='1' stop-color='%23DD902F'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  &__container {
+    align-items: flex-end !important;
+    min-height: 400px !important;
+  }
+}
+// Small bp
+@media (min-width: 500px) {
+  .ons-hero {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 739 373'%3E%3Cmask id='a' width='739' height='373' x='0' y='0' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%2330279E' d='M0 0h739v372.744H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='url(%23b)' d='M411.285-40.014c-47.454-47.686-43.637-43.824-91.06-91.543-21.022-21.157-33.945-45.184-32.187-76.613 2.371-42.224 20.909-72.578 60.131-88.7 41.073-16.88 78.024-8.49 109.295 22.37 49.059 48.407 46.159 45.975 94.777 94.833 47.837 48.08 34.252 34.198 81.843 82.537 37.766 38.358 38.218 100.1 1.56 139.242-35.52 37.932-101.677 40.137-138.693 3.594-49.44-48.813-36.588-36.555-85.588-85.807l-.09.085.012.002Z' style='mix-blend-mode:multiply'/%3E%3Cpath fill='url(%23c)' d='M904.394 113.651c-48.59 48.857-44.646 44.932-93.258 93.756-21.551 21.649-46.067 34.987-78.179 33.263-43.139-2.322-74.193-21.279-90.755-61.514-17.352-42.144-8.885-80.111 22.551-112.3 49.314-50.517 46.844-47.531 96.612-97.6 48.975-49.258 34.851-35.268 84.092-84.274 39.088-38.884 102.15-39.524 142.228-1.979 38.845 36.382 41.265 104.315 4.039 142.42-49.729 50.9-37.236 37.671-87.419 88.123l.086.093.003.012Z' style='mix-blend-mode:multiply'/%3E%3Cpath fill='%23624595' d='M-668.626-1067.49c-123.006-123.11-322.269-122.95-445.054.39-122.8 123.336-122.62 323.138.39 446.255L301.984 795.779c123.004 123.129 322.268 122.952 445.053-.387 122.797-123.337 122.62-323.139-.386-446.256L-668.626-1067.49Z'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='663.684' x2='288.583' y1='-116.421' y2='-116.875' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.04' stop-color='%23869A38'/%3E%3Cstop offset='1' stop-color='%234C863F'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='825.463' x2='826.044' y1='-143.449' y2='241.783' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.49' stop-color='%23C66B20'/%3E%3Cstop offset='1' stop-color='%23DD902F'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
+
+    &__container {
+      align-items: center !important;
+    }
+  }
+}
+// Medium bp
+@media (min-width: 740px) {
+  .ons-hero {
+    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 976 373"%3E%3Cmask id="a" width="976" height="373" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"%3E%3Cpath fill="%2330279E" d="M0 0h976v372.744H0z"/%3E%3C/mask%3E%3Cg mask="url(%23a)"%3E%3Cpath fill="%23624595" d="M-1930.87-2218.81c-175.41-175.02-459.47-174.68-634.48.75l-76.35 76.55c-175.01 175.43-174.67 459.53.74 634.56L-302.981 825.814c175.418 175.026 459.479 174.686 634.483-.745l76.356-76.548c175.004-175.439 174.663-459.534-.747-634.56L-1930.87-2218.81Z"/%3E%3Cpath fill="url(%23b)" d="M179.204-186.115C62.374-302.862 71.748-293.391-45.006-410.219c-51.762-51.79-83.645-110.676-79.46-187.768 5.622-103.581 51.038-178.092 147.347-217.802 100.873-41.595 191.712-21.168 268.707 54.364 120.795 118.508 113.665 112.554 233.371 232.168 117.796 117.702 84.351 83.736 201.513 202.062 92.992 93.919 94.399 245.336 4.5 341.51-87.118 93.197-249.69 98.885-340.818 9.428-121.725-119.49-90.079-89.483-210.738-210.06l-.211.209-.001-.007Z" style="mix-blend-mode:multiply"/%3E%3Cpath fill="url(%23c)" d="M1209.6 173.899c-95.89 96.116-88.11 88.408-184.05 184.461-42.542 42.585-90.912 68.825-154.262 65.411-85.116-4.59-146.363-41.91-179.036-121.102-34.22-82.947-17.478-157.657 44.561-221 97.328-99.38 92.442-93.514 190.678-192.004 96.669-96.915 68.773-69.398 165.959-165.787 77.13-76.511 201.56-77.717 280.62-3.816 76.62 71.612 81.36 205.305 7.89 280.282-98.14 100.145-73.5 74.112-172.52 173.38l.17.175h-.01Z" style="mix-blend-mode:multiply"/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id="b" x1="796.834" x2="-124.998" y1="-374.928" y2="-374.215" gradientUnits="userSpaceOnUse"%3E%3Cstop offset=".04" stop-color="%23869A38"/%3E%3Cstop offset="1" stop-color="%234C863F"/%3E%3C/linearGradient%3E%3ClinearGradient id="c" x1="1054.17" x2="1055.03" y1="-334.443" y2="423.667" gradientUnits="userSpaceOnUse"%3E%3Cstop offset=".49" stop-color="%23C66B20"/%3E%3Cstop offset="1" stop-color="%23DD902F"/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E');
+
+    &__details {
+      padding-bottom: 1rem;
+      padding-top: 1rem;
+    }
+  }
+}
+// Large bp
+@media (min-width: 980px) {
+  .ons-hero {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 1920 629'%3E%3Cmask id='a' width='1920' height='629' x='0' y='0' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%2330279E' d='M0 0h1920v628.219H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23624595' d='M-1285.11-2148.85c-174.93-176.44-461.03-178.91-639.04-5.53l-77.66 75.65c-178.01 173.38-180.5 456.97-5.58 633.41L324.066 906.306c174.929 176.444 461.028 178.914 639.036 5.529l77.668-75.652c178.01-173.389 180.5-456.969 5.58-633.409L-1285.11-2148.85Z'/%3E%3Cpath fill='url(%23b)' d='M702.452-229.24C546.533-385.046 559.044-372.408 403.227-528.322c-69.079-69.117-111.629-147.705-106.044-250.589 7.503-138.236 68.114-237.679 196.645-290.669 134.622-55.51 255.853-28.25 358.607 72.549C1013.64-838.874 1004.13-846.82 1163.89-687.187c157.2 157.081 112.57 111.751 268.93 269.666 124.1 125.341 125.98 327.417 6 455.77-116.26 124.376-333.23 131.967-454.841 12.58-162.45-159.467-120.217-119.421-281.245-280.338l-.282.278v-.009Z' style='mix-blend-mode:multiply'/%3E%3Cpath fill='url(%23c)' d='M1993.15 254.591c-115.74 115.382-106.34 106.129-222.16 221.436-51.34 51.122-109.65 82.548-185.9 78.231-102.44-5.805-176.04-50.931-215.11-146.365-40.92-99.959-20.52-189.836 54.36-265.879C1541.83 22.705 1535.93 29.751 1654.5-88.482c116.68-116.342 83.02-83.311 200.32-199.018 93.1-91.845 242.88-92.887 337.81-3.67 91.99 86.455 97.25 247.401 8.57 337.413-118.46 120.225-88.71 88.97-208.24 208.136l.2.212h-.01Z' style='mix-blend-mode:multiply'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='b' x1='1526.72' x2='296.473' y1='-481.225' y2='-480.273' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.04' stop-color='%23869A38'/%3E%3Cstop offset='1' stop-color='%234C863F'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='1807.73' x2='1806.27' y1='-357.833' y2='554.737' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.49' stop-color='%23C66B20'/%3E%3Cstop offset='1' stop-color='%23DD902F'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
+  }
+}

package/scss/utilities/_margin.scss

@@ -1,5 +1,6 @@
 $sizes: (
   no: 0,
+  xxs: 0.25rem,
   xs: 0.5rem,
   s: 1rem,
   m: 1.5rem,

package/scss/vars/_colors.scss

@@ -35,6 +35,7 @@ $color-flamingo-pink: #df0667;
 
 // Theme branding
 $color-branded: $color-ocean-blue !default;
+$color-branded-text: $color-ocean-blue !default;
 $color-branded-tint: tint($color-branded, 90%) !default;
 $color-branded-secondary: $color-night-blue !default;
 $color-branded-secondary-tint: tint($color-branded-secondary, 90%) !default;
@@ -49,8 +50,10 @@ $color-branded-supporting-tint: tint($color-branded-supporting, 90%) !default;
 
 // Headers, footers, banners, page
 $color-header: $color-branded !default;
-$color-header-top: $color-white !default;
-$color-header-top-internal: $color-branded-secondary !default;
+$color-header-light: $color-white !default;
+$color-header-masthead: $color-white !default;
+$color-header-masthead-dark: $color-black !default;
+$color-header-masthead-internal: $color-branded-secondary !default;
 $color-cta-bg: $color-branded-tint !default;
 $color-banner-bg: $color-grey-5 !default;
 $color-banner-bg-dark: $color-grey-15 !default;