@ongov/ontario-design-system-component-library 6.0.0-alpha.3 → 6.0.0-alpha.4

package/dist/collection/components/ontario-header/ontario-application-header.css

@@ -26,7 +26,8 @@
 /* callout backgrounds */
 /* icon colours */
 /* service ontario header colours */
-/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+/*** 1 - Breakpoint sizes for media queries ***/
+/* -------------------------------
     Global font variables
 --------------------------------- */
 /* Rem calc function */
@@ -1552,56 +1553,6 @@
 		float: left;
 	}
 }
-/*
-*  Text Inputs
-*/
-.ontario-input {
-	border: 2px solid #1a1a1a;
-	border-radius: 4px;
-	box-sizing: border-box;
-	color: #1a1a1a;
-	display: block;
-	font-size: 1rem;
-	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	line-height: 1.5;
-	margin: 0 0 2.5rem;
-	max-width: 48rem;
-	width: 100%;
-	padding: 0.625rem 1rem;
-	transition: box-shadow 0.1s ease-in-out;
-}
-.ontario-input--2-char-width {
-	max-width: 8ex;
-}
-
-.ontario-input--3-char-width {
-	max-width: 10ex;
-}
-
-.ontario-input--4-char-width {
-	max-width: 12ex;
-}
-
-.ontario-input--5-char-width {
-	max-width: 14ex;
-}
-
-.ontario-input--7-char-width {
-	max-width: 17ex;
-}
-
-.ontario-input--10-char-width {
-	max-width: 23ex;
-}
-
-.ontario-input--20-char-width {
-	max-width: 41ex;
-}
-
-.ontario-form-group:last-of-type {
-	margin-bottom: 2.5rem;
-}
-
 /*
 * Visibility
 *
@@ -1717,10 +1668,53 @@
 		display: block !important;
 	}
 }
+.ontario-input {
+	border: 2px solid rgb(25.5, 25.5, 25.5);
+	border-radius: 4px;
+	box-sizing: border-box;
+	color: rgb(25.5, 25.5, 25.5);
+	display: block;
+	font-size: 1rem;
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	margin: 0;
+	max-width: 48rem;
+	width: 100%;
+	padding: 0.625rem 1rem;
+	transition: box-shadow 0.1s ease-in-out;
+}
+.ontario-input--2-char-width {
+	max-width: 8ex;
+}
+
+.ontario-input--3-char-width {
+	max-width: 10ex;
+}
+
+.ontario-input--4-char-width {
+	max-width: 12ex;
+}
+
+.ontario-input--5-char-width {
+	max-width: 14ex;
+}
+
+.ontario-input--7-char-width {
+	max-width: 17ex;
+}
+
+.ontario-input--10-char-width {
+	max-width: 23ex;
+}
+
+.ontario-input--20-char-width {
+	max-width: 41ex;
+}
+
 .ontario-application-header {
 	display: flex;
 	align-items: center;
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 	color: #ffffff;
 	height: 3.125rem !important;
 	position: relative;
@@ -1741,7 +1735,7 @@
 }
 
 .ontario-header-button.ontario-application-navigation--closed:active {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 }
 
 .ontario-header-button--with-outline {
@@ -1752,7 +1746,7 @@
 
 .ontario-application-subheader .ontario-header-button,
 .ontario-application-navigation .ontario-header-button {
-	background-color: #4d4d4d;
+	background-color: rgb(76.5, 76.5, 76.5);
 }
 
 .ontario-header-button--closed:focus {
@@ -1797,7 +1791,7 @@
 /* Ontario application subheader styles */
 .ontario-application-subheader {
 	padding: 1.25rem 0;
-	background-color: #404040;
+	background-color: rgb(63.75, 63.75, 63.75);
 	overflow: visible;
 	position: relative;
 	z-index: 5;
@@ -1827,7 +1821,7 @@
 
 .ontario-application-subheader .ontario-header-button,
 .ontario-application-navigation .ontario-header-button {
-	background-color: #4d4d4d;
+	background-color: rgb(76.5, 76.5, 76.5);
 }
 .ontario-application-subheader .ontario-header-button:hover,
 .ontario-application-navigation .ontario-header-button:hover {
@@ -1835,11 +1829,11 @@
 }
 .ontario-application-subheader .ontario-header-button:active,
 .ontario-application-navigation .ontario-header-button:active {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 }
 
 .ontario-header-button--without-outline:hover {
-	background-color: #4d4d4d;
+	background-color: rgb(76.5, 76.5, 76.5);
 }
 .ontario-header-button--without-outline:focus {
 	box-shadow: 0 0 0 4px #009adb;
@@ -1870,13 +1864,13 @@
 
 .ontario-application-subheader .ontario-header-button {
 	visibility: visible;
-	background-color: #4d4d4d;
+	background-color: rgb(76.5, 76.5, 76.5);
 }
 .ontario-application-subheader .ontario-header-button:hover {
 	background-color: #666666;
 }
 .ontario-application-subheader .ontario-header-button:active {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 }
 
 .ontario-header__menu-toggler span {
@@ -1940,7 +1934,7 @@
 	color: #ffffff;
 }
 .ontario-application-subheader__menu-container a:active {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 }
 .ontario-application-subheader__menu-container a:focus {
 	box-shadow: 0 0 0 4px #009adb;
@@ -2018,7 +2012,7 @@
 }
 
 .ontario-application-navigation a {
-	color: #1a1a1a;
+	color: rgb(25.5, 25.5, 25.5);
 	display: block;
 	font-size: 1.125rem;
 	font-weight: 600;
@@ -2039,8 +2033,8 @@
 	box-shadow: 0 0 0 4px #009adb inset;
 }
 .ontario-application-navigation a.ontario-link--active {
-	border-left: 6px solid #1a1a1a;
-	background-color: #f2f2f2;
+	border-left: 6px solid rgb(25.5, 25.5, 25.5);
+	background-color: rgb(242.25, 242.25, 242.25);
 }
 
 .ontario-navigation--open {
@@ -2092,16 +2086,16 @@
 	background-color: #666666;
 }
 .ontario-header-button.ontario-navigation--open:active {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 }
 
 .ontario-header-button.ontario-navigation--closed:active {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 }
 
 /* Header buttons */
 .ontario-header-button {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 	border: none;
 	border-radius: 4px;
 	box-sizing: border-box;
@@ -2126,12 +2120,12 @@
 
 .ontario-header-button--with-outline,
 .ontario-header-button--without-outline {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 	color: #ffffff;
 }
 .ontario-header-button--with-outline:hover,
 .ontario-header-button--without-outline:hover {
-	background-color: #4d4d4d;
+	background-color: rgb(76.5, 76.5, 76.5);
 }
 .ontario-header-button--with-outline:active,
 .ontario-header-button--without-outline:active {
@@ -2139,7 +2133,7 @@
 }
 .ontario-header-button--with-outline:focus,
 .ontario-header-button--without-outline:focus {
-	background-color: #4d4d4d;
+	background-color: rgb(76.5, 76.5, 76.5);
 }
 
 .ontario-header-button--with-outline {
@@ -2152,7 +2146,7 @@
 	color: #ffffff;
 }
 .ontario-header-button--with-outline:focus {
-	background-color: #4d4d4d;
+	background-color: rgb(76.5, 76.5, 76.5);
 }
 @media screen and (max-width: 20em) {
 	.ontario-header-button--with-outline {
@@ -2251,7 +2245,7 @@
 }
 
 .ontario-application-navigation a {
-	color: #1a1a1a;
+	color: rgb(25.5, 25.5, 25.5);
 	display: block;
 	font-size: 1.125rem;
 	font-weight: 600;
@@ -2272,8 +2266,8 @@
 	box-shadow: 0 0 0 4px #009adb inset;
 }
 .ontario-application-navigation a.ontario-link--active {
-	border-left: 6px solid #1a1a1a;
-	background-color: #f2f2f2;
+	border-left: 6px solid rgb(25.5, 25.5, 25.5);
+	background-color: rgb(242.25, 242.25, 242.25);
 }
 
 /* Ontario application header overlay styles */

package/dist/collection/components/ontario-header/ontario-header.css

@@ -26,7 +26,8 @@
 /* callout backgrounds */
 /* icon colours */
 /* service ontario header colours */
-/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+/*** 1 - Breakpoint sizes for media queries ***/
+/* -------------------------------
     Global font variables
 --------------------------------- */
 /* Rem calc function */
@@ -52,7 +53,8 @@
 
 /* -------------------------------
     Global line-height variables
---------------------------------- */ /*
+--------------------------------- */
+/*
 *  Grid functions
 *
 *  1 - Lower-bound
@@ -1521,56 +1523,6 @@
 		float: left;
 	}
 }
-/*
-*  Text Inputs
-*/
-.ontario-input {
-	border: 2px solid #1a1a1a;
-	border-radius: 4px;
-	box-sizing: border-box;
-	color: #1a1a1a;
-	display: block;
-	font-size: 1rem;
-	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	line-height: 1.5;
-	margin: 0 0 2.5rem;
-	max-width: 48rem;
-	width: 100%;
-	padding: 0.625rem 1rem;
-	transition: box-shadow 0.1s ease-in-out;
-}
-.ontario-input--2-char-width {
-	max-width: 8ex;
-}
-
-.ontario-input--3-char-width {
-	max-width: 10ex;
-}
-
-.ontario-input--4-char-width {
-	max-width: 12ex;
-}
-
-.ontario-input--5-char-width {
-	max-width: 14ex;
-}
-
-.ontario-input--7-char-width {
-	max-width: 17ex;
-}
-
-.ontario-input--10-char-width {
-	max-width: 23ex;
-}
-
-.ontario-input--20-char-width {
-	max-width: 41ex;
-}
-
-.ontario-form-group:last-of-type {
-	margin-bottom: 2.5rem;
-}
-
 /*
 * Visibility
 *
@@ -1686,6 +1638,55 @@
 		display: block !important;
 	}
 }
+/* -------------------------------
+    Global letter-spacing variables
+--------------------------------- */
+/* -------------------------------
+    Global typography variables
+--------------------------------- */
+.ontario-input {
+	border: 2px solid rgb(25.5, 25.5, 25.5);
+	border-radius: 4px;
+	box-sizing: border-box;
+	color: rgb(25.5, 25.5, 25.5);
+	display: block;
+	font-size: 1rem;
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	margin: 0;
+	max-width: 48rem;
+	width: 100%;
+	padding: 0.625rem 1rem;
+	transition: box-shadow 0.1s ease-in-out;
+}
+.ontario-input--2-char-width {
+	max-width: 8ex;
+}
+
+.ontario-input--3-char-width {
+	max-width: 10ex;
+}
+
+.ontario-input--4-char-width {
+	max-width: 12ex;
+}
+
+.ontario-input--5-char-width {
+	max-width: 14ex;
+}
+
+.ontario-input--7-char-width {
+	max-width: 17ex;
+}
+
+.ontario-input--10-char-width {
+	max-width: 23ex;
+}
+
+.ontario-input--20-char-width {
+	max-width: 41ex;
+}
+
 :host {
 	--header-search-reset: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);
 }
@@ -1710,7 +1711,7 @@
 	align-items: center;
 }
 .ontario-icon-container-reset svg {
-	fill: #1a1a1a;
+	fill: rgb(25.5, 25.5, 25.5);
 }
 
 .ontario-subheader__menu a {
@@ -1735,7 +1736,7 @@
 	color: #ffffff;
 }
 .ontario-subheader__menu a:active {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 }
 .ontario-subheader__menu a:focus {
 	box-shadow: 0 0 0 4px #009adb;
@@ -1801,7 +1802,7 @@
 }
 
 .ontario-navigation a {
-	color: #1a1a1a;
+	color: rgb(25.5, 25.5, 25.5);
 	display: block;
 	font-size: 1.125rem;
 	font-weight: 600;
@@ -1811,7 +1812,7 @@
 }
 .ontario-navigation a:hover {
 	text-decoration: underline;
-	background-color: #e6e6e6;
+	background-color: rgb(229.5, 229.5, 229.5);
 }
 .ontario-navigation a:active {
 	text-decoration: underline;
@@ -1822,8 +1823,8 @@
 	box-shadow: 0 0 0 4px #009adb inset;
 }
 .ontario-navigation a.ontario-link--active {
-	border-left: 6px solid #1a1a1a;
-	background-color: #f2f2f2;
+	border-left: 6px solid rgb(25.5, 25.5, 25.5);
+	background-color: rgb(242.25, 242.25, 242.25);
 }
 
 .ontario-overlay {
@@ -1840,7 +1841,7 @@
 	position: relative;
 	overflow: hidden;
 	z-index: 5;
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 	color: #ffffff;
 	display: flex;
 	align-items: center;
@@ -1903,11 +1904,11 @@
 	background-color: #666666;
 }
 .ontario-header-button.ontario-navigation--open:active {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 }
 
 .ontario-header-button.ontario-navigation--closed:active {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 }
 
 .ontario-header__logo-container {
@@ -1992,8 +1993,8 @@
 .ontario-header__search-submit {
 	border: 0;
 	border-radius: 0 3px 3px 0;
-	background-color: #f2f2f2;
-	color: #1a1a1a;
+	background-color: rgb(242.25, 242.25, 242.25);
+	color: rgb(25.5, 25.5, 25.5);
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -2010,7 +2011,7 @@
 	padding-right: 0.75rem;
 }
 .ontario-header__search-submit svg {
-	fill: #1a1a1a;
+	fill: rgb(25.5, 25.5, 25.5);
 }
 .ontario-header__search-submit:hover {
 	background-color: #00478f;
@@ -2047,7 +2048,7 @@ input[type='reset'].ontario-header__search-reset {
 	right: 80px;
 	height: 28px;
 	width: 28px;
-	color: #1a1a1a;
+	color: rgb(25.5, 25.5, 25.5);
 	margin: 0;
 	padding: 0.5rem;
 	background-image: var(--header-search-reset);
@@ -2071,7 +2072,7 @@ input[type='reset'].ontario-header__search-reset:focus {
 
 /* Header buttons */
 .ontario-header-button {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 	border: none;
 	border-radius: 4px;
 	box-sizing: border-box;
@@ -2096,12 +2097,12 @@ input[type='reset'].ontario-header__search-reset:focus {
 
 .ontario-header-button--with-outline,
 .ontario-header-button--without-outline {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 	color: #ffffff;
 }
 .ontario-header-button--with-outline:hover,
 .ontario-header-button--without-outline:hover {
-	background-color: #4d4d4d;
+	background-color: rgb(76.5, 76.5, 76.5);
 }
 .ontario-header-button--with-outline:active,
 .ontario-header-button--without-outline:active {
@@ -2109,7 +2110,7 @@ input[type='reset'].ontario-header__search-reset:focus {
 }
 .ontario-header-button--with-outline:focus,
 .ontario-header-button--without-outline:focus {
-	background-color: #4d4d4d;
+	background-color: rgb(76.5, 76.5, 76.5);
 }
 .ontario-header-button--with-outline:active,
 .ontario-header-button--without-outline:active {
@@ -2126,7 +2127,7 @@ input[type='reset'].ontario-header__search-reset:focus {
 	color: #ffffff;
 }
 .ontario-header-button--with-outline:focus {
-	background-color: #4d4d4d;
+	background-color: rgb(76.5, 76.5, 76.5);
 }
 @media screen and (max-width: 20em) {
 	.ontario-header-button--with-outline {
@@ -2135,7 +2136,7 @@ input[type='reset'].ontario-header__search-reset:focus {
 }
 
 .ontario-header-button--without-outline:focus {
-	background-color: #4d4d4d;
+	background-color: rgb(76.5, 76.5, 76.5);
 }
 
 .ontario-header__menu-toggler {
@@ -2320,7 +2321,7 @@ input[type='reset'].ontario-header__search-reset:focus {
 }
 
 .ontario-navigation a {
-	color: #1a1a1a;
+	color: rgb(25.5, 25.5, 25.5);
 	display: block;
 	font-size: 1.125rem;
 	font-weight: 600;
@@ -2330,7 +2331,7 @@ input[type='reset'].ontario-header__search-reset:focus {
 }
 .ontario-navigation a:hover {
 	text-decoration: underline;
-	background-color: #e6e6e6;
+	background-color: rgb(229.5, 229.5, 229.5);
 }
 .ontario-navigation a:active {
 	text-decoration: underline;
@@ -2341,8 +2342,8 @@ input[type='reset'].ontario-header__search-reset:focus {
 	box-shadow: 0 0 0 4px #009adb inset;
 }
 .ontario-navigation a.ontario-link--active {
-	border-left: 6px solid #1a1a1a;
-	background-color: #f2f2f2;
+	border-left: 6px solid rgb(25.5, 25.5, 25.5);
+	background-color: rgb(242.25, 242.25, 242.25);
 }
 
 .ontario-navigation.ontario-navigation--open .ontario-navigation__container {