@ons/design-system 44.0.1 → 45.0.0

package/scss/utilities/_grid.scss

@@ -0,0 +1,245 @@
+@use 'sass:math';
+
+.ons-grid {
+  box-sizing: border-box;
+  font-size: 0;
+  margin-left: -$grid-gutters;
+}
+
+.ons-grid--float {
+  letter-spacing: 0;
+}
+
+.ons-grid--center {
+  text-align: center;
+  .ons-grid__col {
+    text-align: left;
+  }
+}
+
+.ons-grid--center-all {
+  text-align: center;
+}
+
+.ons-grid--reverse {
+  direction: rtl;
+  .ons-grid__col {
+    direction: ltr;
+  }
+}
+
+.ons-grid--spaced {
+  .ons-grid__col {
+    margin-bottom: $grid-gutters;
+  }
+  &.ons-grid--tight {
+    .ons-grid__col {
+      margin-bottom: math.div($grid-gutters, 2);
+    }
+  }
+}
+
+.ons-grid--align-mid {
+  .ons-grid__col {
+    vertical-align: middle;
+  }
+}
+
+.ons-grid--stagger-align {
+  .ons-grid__col:nth-of-type(1n) {
+    text-align: right;
+  }
+  .ons-grid__col:nth-of-type(2n) {
+    text-align: left;
+  }
+}
+
+.ons-grid--tight {
+  margin-left: math.div(-$grid-gutters, 2);
+  .ons-grid__col {
+    padding-left: math.div($grid-gutters, 2);
+  }
+}
+
+.ons-grid--loose {
+  margin-left: -$grid-gutters * 2;
+}
+
+.ons-grid--gutterless {
+  margin-left: 0;
+  .ons-grid__col {
+    padding-left: 0;
+  }
+}
+
+.ons-grid--pixelgutter {
+  margin-left: 1px;
+  .ons-grid__col {
+    margin-bottom: 1px;
+    padding-left: 1px;
+  }
+}
+
+.ons-grid--flex {
+  display: flex;
+  flex-flow: row wrap;
+
+  &.ons-grid--center {
+    justify-content: center;
+  }
+
+  &.ons-grid--between {
+    justify-content: space-between;
+  }
+
+  &.ons-grid--vertical-top {
+    align-items: start;
+  }
+
+  &.ons-grid--vertical-center {
+    align-items: center;
+  }
+}
+
+@include bp-suffix(ons-grid--no-wrap) {
+  flex-wrap: nowrap;
+}
+
+@include bp-suffix(ons-grid--column, $create-between-breakpoints: true) {
+  flex-direction: column;
+}
+
+@include bp-suffix(ons-grid--bordered, false) {
+  margin-left: 0;
+  .ons-grid__col {
+    border-bottom: 1px solid $color-borders;
+    border-top: 1px solid $color-borders;
+    flex: 1 1 auto;
+    padding-bottom: 1rem;
+    padding-top: 1rem;
+    &:first-of-type {
+      border-right: 1px solid $color-borders;
+      padding-left: 0;
+    }
+  }
+}
+
+.ons-grid__col {
+  background-clip: content-box;
+  box-sizing: border-box;
+  display: inline-block;
+  // Fixes text overflow issues
+  min-width: 0;
+  padding-left: $grid-gutters;
+  vertical-align: top;
+  width: 100%;
+
+  .ons-grid--float & {
+    display: block;
+    float: left;
+  }
+
+  &--loose {
+    padding-left: $grid-gutters * 2;
+  }
+
+  .ons-grid--flex & {
+    width: auto;
+  }
+}
+
+.ons-grid__col--flex {
+  display: flex;
+}
+
+@include bp-suffix(ons-grid__col--sticky) {
+  position: sticky;
+  top: 2rem;
+}
+
+@each $breakpoint-min, $size in $grid-bp {
+  @for $column from 1 through $grid-cols {
+    $width: percentage(math.div($column, $grid-cols));
+
+    @include mq($breakpoint-min) {
+      .ons-col-#{$column}\@#{$breakpoint-min} {
+        max-width: $width;
+        width: $width;
+      }
+
+      .ons-push-#{$column}\@#{$breakpoint-min} {
+        left: $width;
+        position: relative;
+      }
+
+      .ons-pull-#{$column}\@#{$breakpoint-min} {
+        left: -$width;
+        position: relative;
+      }
+    }
+  }
+
+  @each $breakpoint-max, $size in $grid-bp {
+    @for $column from 1 through $grid-cols {
+      $width: percentage(math.div($column, $grid-cols));
+
+      @include mq($breakpoint-min, $breakpoint-max) {
+        .ons-col-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
+          max-width: $width;
+          width: $width;
+        }
+
+        .ons-push-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
+          left: $width;
+          position: relative;
+        }
+
+        .ons-pull-#{$column}\@#{$breakpoint-min}\@#{$breakpoint-max} {
+          left: -$width;
+          position: relative;
+        }
+      }
+    }
+  }
+}
+
+@include bp-suffix(ons-col-auto) {
+  width: auto;
+
+  .ons-grid--flex & {
+    flex-basis: auto;
+    max-width: 100%;
+  }
+}
+
+@include bp-suffix(ons-u-flex-shrink) {
+  flex-shrink: 1;
+}
+
+@include bp-suffix(ons-u-flex-no-shrink) {
+  flex-shrink: 0;
+}
+
+@include bp-suffix(ons-u-flex-grow) {
+  flex-grow: 1;
+}
+
+@include bp-suffix(ons-u-flex-no-grow) {
+  flex-grow: 0;
+}
+
+@include bp-suffix(ons-u-flex-no-basis) {
+  flex-basis: 0;
+}
+
+@include bp-suffix(ons-u-flex-align-bottom) {
+  align-self: flex-end;
+}
+
+@include bp-suffix('ons-nopull-', false) {
+  left: 0;
+}
+
+@include bp-suffix('ons-nopush-', false) {
+  left: 0;
+}

package/scss/utilities/_index.scss

@@ -0,0 +1,10 @@
+@import './border';
+@import './colors';
+@import './display';
+@import './float';
+@import './grid';
+@import './margin';
+@import './pad';
+@import './typography';
+@import './utilities';
+@import './visibility';

package/scss/utilities/_margin.scss

@@ -0,0 +1,24 @@
+$sizes: (
+  no: 0,
+  xs: 0.5rem,
+  s: 1rem,
+  m: 1.5rem,
+  l: 2rem,
+  xl: 3rem,
+);
+
+$margins: (
+  mt: margin-top,
+  mr: margin-right,
+  mb: margin-bottom,
+  ml: margin-left,
+  m: margin,
+);
+
+@each $key, $value in $sizes {
+  @each $abbr, $dec in $margins {
+    @include bp-suffix(ons-u-#{$abbr}-#{$key}, $create-between-breakpoints: true) {
+      #{$dec}: #{$value} !important;
+    }
+  }
+}

package/scss/utilities/_pad.scss

@@ -0,0 +1,25 @@
+// e.g ons-u-pl-m
+$sizes: (
+  no: 0 !important,
+  xxs: 0.3rem,
+  xs: 0.5rem,
+  s: 1rem,
+  m: 2rem,
+  l: 3rem,
+);
+
+$padding: (
+  pt: padding-top,
+  pr: padding-right,
+  pb: padding-bottom,
+  pl: padding-left,
+  p: padding,
+);
+
+@each $key, $value in $sizes {
+  @each $abbr, $dec in $padding {
+    @include bp-suffix(ons-u-#{$abbr}-#{$key}, $create-between-breakpoints: true) {
+      #{$dec}: #{$value};
+    }
+  }
+}

package/scss/utilities/_typography.scss

@@ -0,0 +1,88 @@
+@mixin font-size($props, $base) {
+  $small-size: map-get($props, small);
+  $large-size: map-get($props, large);
+
+  font-size: rems($small-size, $base);
+  font-weight: map-get($props, weight);
+  line-height: map-get($props, line-height);
+
+  @if $small-size != $large-size {
+    @include mq(m) {
+      font-size: rems($large-size, $base);
+    }
+  }
+}
+
+@each $name, $props in $type-matrix {
+  .#{$name} {
+    @include font-size($props, $base);
+  }
+}
+
+@each $breakpoint, $size in $grid-bp {
+  @each $name, $props in $type-matrix {
+    @include mq($breakpoint) {
+      .#{$name}\@#{$breakpoint} {
+        @include font-size($props, $base);
+      }
+    }
+  }
+}
+
+h1 {
+  @extend .ons-u-fs-xl;
+}
+
+h2 {
+  @extend .ons-u-fs-l;
+}
+
+h3 {
+  @extend .ons-u-fs-m;
+}
+
+h4 {
+  @extend .ons-u-fs-r--b;
+}
+
+.ons-u-fw-b {
+  font-weight: 700;
+}
+
+.ons-u-fw-n {
+  font-weight: $font-weight-regular;
+}
+
+.ons-u-fs-i {
+  font-style: italic;
+}
+
+.ons-u-tt-u {
+  text-transform: uppercase;
+}
+
+.ons-u-td-no,
+.ons-u-td-no:hover {
+  text-decoration: none;
+}
+
+.ons-u-lighter {
+  color: $color-text-light;
+}
+
+.ons-u-f-mono {
+  font-family: $font-mono;
+  letter-spacing: 0.1em;
+}
+
+.ons-u-ta-right {
+  text-align: right;
+}
+
+.ons-u-ta-left {
+  text-align: left;
+}
+
+.ons-u-ta-center {
+  text-align: center;
+}

package/scss/utilities/_utilities.scss

@@ -0,0 +1,31 @@
+.ons-u-dib {
+  display: inline-block;
+}
+
+.ons-u-di {
+  display: inline;
+}
+
+.ons-u-db {
+  display: block;
+}
+
+// Utility class to override the height property to 'auto'
+.ons-u-ha {
+  height: auto;
+}
+
+// Utility class to force non-wrapping of values
+.ons-u-nowrap {
+  white-space: nowrap;
+}
+
+// Utility class to set direction right to left
+.ons-u-rtl {
+  direction: rtl;
+}
+
+// Set an element's width to be auto at specified breakpoint
+@include bp-suffix(ons-u-wa--) {
+  width: auto;
+}

package/scss/utilities/_visibility.scss

@@ -0,0 +1,45 @@
+.ons-u-hidden {
+  display: none !important;
+  visibility: hidden;
+}
+
+@include bp-suffix('ons-u-vh', $create-between-breakpoints: true) {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  user-select: none;
+  width: 1px;
+}
+
+.ons-u-visuallyhidden.ons-u-focusable:active,
+.ons-u-vh.ons-u-focusable:active,
+.ons-u-visuallyhidden.ons-u-focusable:focus,
+.ons-u-vh.ons-u-focusable:focus {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  width: auto;
+}
+
+.ons-u-invisible {
+  visibility: hidden;
+}
+
+.ons-u-ir {
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+}
+
+.ons-u-ir::before {
+  content: '';
+  display: block;
+  height: 150%;
+  width: 0;
+}

package/scss/vars/_colors.scss

@@ -0,0 +1,112 @@
+@import '../helpers/functions';
+
+// =============================================================================
+// ONS Brand guidelines for Colour: https://www.notion.so/Colours-9cd14589e0764e33a3b3c5a6762f37ae
+// Tints: If you are using tints of a colour, use either 70%, 40% or 10%. Tints are created by adding white (30%, 60% or 90%), rather than using transparency.
+// =============================================================================
+
+// Grey palette
+$color-black: #222;
+$color-grey-100: #414042;
+$color-grey-75: #707071;
+$color-grey-35: #bcbcbd;
+$color-grey-15: #e2e2e3;
+$color-grey-5: #f5f5f6;
+$color-white: #fff;
+
+// Primary brand palette
+$color-night-blue: #003c57; // ONS logo primary
+$color-spring-green: #a8bd3a; // ONS logo accent
+$color-ocean-blue: #206095;
+$color-sky-blue: #27a0cc;
+$color-aqua-teal: #00a3a6;
+
+// Supporting palette
+$color-leaf-green: #0f8243;
+$color-ruby-red: #d0021b;
+$color-jaffa-orange: #fa6401;
+$color-sun-yellow: #fbc900;
+$color-neon-yellow: #f0f762;
+
+// ONS logo
+$color-ons-logo-primary: $color-night-blue !default;
+$color-ons-logo-secondary: $color-spring-green !default;
+
+// Census 2021
+$color-indigo-blue: #3c388e;
+$color-plum-purple: #902082;
+$color-flamingo-pink: #df0667;
+
+// NISRA logo
+$color-nisra-logo-primary: #3d7cc9;
+$color-nisra-logo-secondary: #cddb00;
+$color-nisra-logo-tertiary: #00205c;
+
+// Theme branding
+$color-branded: $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;
+$color-branded-tertiary: $color-aqua-teal !default;
+$color-branded-tertiary-tint: tint($color-branded-tertiary, 90%) !default;
+$color-branded-supporting: $color-spring-green !default;
+$color-branded-supporting-tint: tint($color-branded-supporting, 90%) !default;
+
+// =============================================================================
+// Assignment
+// =============================================================================
+
+// Headers, footers, banners
+$color-header: $color-branded !default;
+$color-header-top: $color-white !default;
+$color-header-top-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;
+
+// Typography
+$color-text: $color-black !default;
+$color-text-light: $color-grey-75 !default;
+$color-text-inverse: $color-white !default;
+$color-text-banner: $color-black !default;
+$color-text-link: $color-ocean-blue !default;
+$color-text-link-hover: $color-night-blue !default;
+$color-text-link-active: $color-night-blue !default;
+$color-text-link-focus: $color-black !default;
+$color-text-inverse-link: $color-white !default;
+$color-text-inverse-link-hover: $color-grey-5 !default;
+$color-text-banner-link: $color-grey-100 !default;
+$color-text-banner-link-hover: $color-black !default;
+
+// Foundations
+$color-focus: $color-sun-yellow !default;
+$color-highlight: $color-neon-yellow !default;
+
+// Borders
+$color-borders: $color-grey-75 !default;
+$color-borders-indent: $color-grey-35 !default;
+$color-document-border: $color-grey-15 !default;
+$color-document-border-focus: $color-black !default;
+
+// Form elements
+$color-button: $color-leaf-green !default;
+$color-button-secondary: $color-grey-15 !default;
+$color-input: $color-black !default;
+
+// Panels and status
+$color-info: $color-ocean-blue !default;
+$color-info-tint: tint($color-info, 90) !default;
+$color-info-vibrant: scale-color($color-info, $lightness: 20%, $saturation: 30%) !default;
+$color-success: $color-leaf-green !default;
+$color-success-tint: tint($color-success, 90) !default;
+$color-success-vibrant: scale-color($color-success, $lightness: 20%, $saturation: 30%) !default;
+$color-errors: $color-ruby-red !default;
+$color-errors-tint: tint($color-errors, 90) !default;
+$color-errors-vibrant: scale-color($color-errors, $lightness: 20%, $saturation: 30%) !default;
+$color-pending: $color-jaffa-orange !default;
+$color-pending-tint: tint($color-pending, 90) !default;
+$color-pending-vibrant: scale-color($color-pending, $lightness: 20%, $saturation: 30%) !default;
+$color-dead: $color-grey-75 !default;
+$color-instruction: $color-jaffa-orange !default;
+$color-instruction-tint: tint($color-instruction, 90) !default;
+$color-tag-bg: tint($color-leaf-green, 90) !default;

package/scss/vars/_forms.scss

@@ -0,0 +1,50 @@
+@import '../helpers/functions';
+
+$input-radius: 3px;
+$input-padding-vertical: 0.39rem;
+$input-padding-horizontal: 0.5rem;
+$input-width: 20rem;
+$input-border-width: 1px;
+$input-widths: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 30, 40, 50;
+// Widest character (capital W) is 1.0065rem wide
+$char-max-width: 0.9rem;
+// Widest number (4) is 0.54rem  wide
+$num-max-width: 0.54rem;
+// Not the width of a space, the width of the space between characters with no spaces between
+$char-space-width: 0.029rem;
+// Space width
+$nbsp-width: 0.256rem;
+
+@mixin input-width($class-name, $char-width: $char-max-width) {
+  @each $width in $input-widths {
+    .#{str-replace($class-name, '{x}', $width)} {
+      max-width: input-width-calc($width, $char-width);
+      width: 100%;
+
+      .ons-field__group & {
+        width: input-width-calc($width, $char-width);
+      }
+
+      @if $width <= 10 {
+        .ons-input-type & {
+          width: input-width-calc($width, $char-width);
+        }
+      }
+    }
+  }
+}
+
+@function input-width-calc($chars: 1, $char-width: $char-max-width, $spaces: 0, $num-chars: 0) {
+  // Space between characters is 0.029rem wide
+  // Extra 2 pixels are to prevent clipping when the cursor is visible (2px is needed for iOS)
+
+  $padding-width: $input-padding-horizontal * 2;
+  $chars-width: $char-width * $chars;
+  $num-chars-width: $num-max-width * $num-chars;
+  $chars-space-width: $char-space-width * ($chars + $num-chars - 1);
+  $spaces-width: $spaces * $nbsp-width;
+
+  @return calc(
+    #{$padding-width + $chars-width + $num-chars-width + $chars-space-width + $spaces-width} + #{($input-border-width * 2) + 2px}
+  );
+}

package/scss/vars/_grid.scss

@@ -0,0 +1,17 @@
+$grid-bp: (
+  xxs: 300px,
+  xs: 400px,
+  s: 500px,
+  m: 740px,
+  l: 980px,
+  xl: 1300px,
+  xxl: 1600px
+) !default;
+
+$grid-max-width: 57.445rem !default;
+$grid-max-1280: 71.111111rem !default;
+$grid-cols: 12 !default;
+$grid-cols-mobile: 4 !default;
+$grid-gutters: 1rem !default;
+$grid-bp-fixed: map-get($grid-bp, m) !default;
+$grid-baseline: 16px;

package/scss/vars/_index.scss

@@ -0,0 +1,5 @@
+@import './vars';
+@import './colors';
+@import './typography';
+@import './grid';
+@import './forms';