@ilo-org/styles 0.1.18 → 0.2.0

package/README.md

@@ -6,7 +6,7 @@ This package provides the stylesheets which are used to style components in othe
 - [@ilo-org/fonts](./packages/fonts)
 - [@ilo-org/icons](./packages/icons)
 
-## Installation and PNPM Commands
+## Installation and commands
 
 To install
 

package/build/css/components/index.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -10,7 +10,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -123,7 +123,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -148,7 +148,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -402,7 +402,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -412,7 +412,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -437,7 +437,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -727,7 +727,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -857,7 +857,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -1489,7 +1489,10 @@
   right: auto;
   transform: rotateY(180deg);
 }
-.ilo--card--graphic .ilo--profile--contents * {
+.ilo--card--graphic .ilo--profile--contents--light * {
+  color: rgb(45, 45, 45);
+}
+.ilo--card--graphic .ilo--profile--contents--dark * {
   color: rgb(255, 255, 255);
 }
 .ilo--card--graphic:hover, .ilo--card--graphic:focus, .ilo--card--graphic:focus-within {
@@ -2263,7 +2266,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -2308,7 +2311,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -2413,7 +2416,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -2494,7 +2497,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -2504,7 +2507,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -2514,7 +2517,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -2524,7 +2527,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -2650,7 +2653,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -2678,7 +2681,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -2766,7 +2769,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -2776,7 +2779,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -2786,7 +2789,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -2839,7 +2842,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -2914,7 +2917,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -3020,7 +3023,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -3043,7 +3046,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -3057,7 +3060,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -3067,7 +3070,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -3092,7 +3095,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -3492,7 +3495,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -3615,7 +3618,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -4106,7 +4109,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -4162,7 +4165,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -4304,7 +4307,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -4314,7 +4317,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -4339,7 +4342,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -4497,7 +4500,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -4592,7 +4595,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -4602,7 +4605,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -4612,7 +4615,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -4718,9 +4721,71 @@
   width: 100%;
 }
 
+.ilo--logo--visibility--hidden {
+  visibility: hidden;
+}
+.ilo--logo--size--fluid {
+  width: 100%;
+  height: auto;
+}
+.ilo--logo--theme--light {
+  --logo-theme-color: rgb(30, 45, 190);
+}
+.ilo--logo--theme--dark {
+  --logo-theme-color: rgb(255, 255, 255);
+}
+.ilo--logo--link {
+  all: unset;
+  cursor: pointer;
+}
+.ilo--logo--image {
+  height: 100%;
+  width: 100%;
+}
+.ilo--logo--sub-brand {
+  --lockup-height: calc(var(--logo-image-height) * 0.703);
+  --lockup-bottom-offset: calc(var(--lockup-height) * 0.05);
+  color: var(--logo-theme-color);
+  font-size: var(--logo-font-size);
+  line-height: var(--logo-font-size);
+  font-family: Overpass;
+  font-weight: 700;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.ilo--logo--sub-brand--image {
+  height: 100%;
+  width: 50%;
+}
+.ilo--logo--sub-brand--lock-up {
+  position: relative;
+  display: flex;
+  height: var(--lockup-height);
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: flex-start;
+  width: 50%;
+  bottom: var(--lockup-bottom-offset);
+}
+.ilo--logo--sub-brand--lock-up--separator {
+  padding: 0 0.4em;
+  height: 100%;
+  display: inline-block;
+  line-height: 0px;
+}
+.ilo--logo--sub-brand--lock-up--separator::before {
+  content: "";
+  position: relative;
+  display: inline-block;
+  height: 100%;
+  width: calc(var(--logo-image-height) * 0.02);
+  background-color: var(--logo-theme-color);
+}
+
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -4730,7 +4795,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -4740,7 +4805,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -4837,7 +4902,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -4924,6 +4989,7 @@
 .ilo--header--logo {
   display: block;
   max-width: 150px;
+  width: 100%;
 }
 @media screen and (min-width: 1024px) {
   .ilo--header--logo {
@@ -5714,7 +5780,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -5724,7 +5790,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -5734,7 +5800,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -5926,7 +5992,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -6066,7 +6132,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -6076,7 +6142,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -6101,7 +6167,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -6118,22 +6184,40 @@
   float: left;
   width: 3.4297963558rem;
 }
-.ilo--profile--contents .id {
+.ilo--profile--contents--light .id {
   margin-left: 4.0192926045rem;
   padding-top: 5px;
 }
-.ilo--profile--contents .id:first-of-type {
+.ilo--profile--contents--light .id:first-of-type {
   padding-bottom: 1px;
 }
-.ilo--profile--contents .id:nth-of-type(2):last-of-type {
+.ilo--profile--contents--light .id:nth-of-type(2):last-of-type {
   padding-top: 0;
 }
-.ilo--profile--contents .id:first-of-type:last-of-type,
-.ilo--profile--contents .id:nth-of-type(2):last-of-type {
+.ilo--profile--contents--light .id:first-of-type:last-of-type,
+.ilo--profile--contents--light .id:nth-of-type(2):last-of-type {
   border-bottom: 2px solid rgb(237, 240, 242);
   padding-bottom: 11px;
 }
-.ilo--profile--contents .id:first-of-type:last-of-type {
+.ilo--profile--contents--light .id:first-of-type:last-of-type {
+  padding-top: 14px;
+}
+.ilo--profile--contents--dark .id {
+  margin-left: 4.0192926045rem;
+  padding-top: 5px;
+}
+.ilo--profile--contents--dark .id:first-of-type {
+  padding-bottom: 1px;
+}
+.ilo--profile--contents--dark .id:nth-of-type(2):last-of-type {
+  padding-top: 0;
+}
+.ilo--profile--contents--dark .id:first-of-type:last-of-type,
+.ilo--profile--contents--dark .id:nth-of-type(2):last-of-type {
+  border-bottom: 2px solid rgb(237, 240, 242);
+  padding-bottom: 11px;
+}
+.ilo--profile--contents--dark .id:first-of-type:last-of-type {
   padding-top: 14px;
 }
 .ilo--profile--name {
@@ -6224,7 +6308,11 @@
 .right-to-left .ilo--profile .ilo--profile--avatar {
   float: right;
 }
-.right-to-left .ilo--profile .ilo--profile--contents .id {
+.right-to-left .ilo--profile .ilo--profile--contents--light .id {
+  margin-left: auto;
+  margin-right: 4.0192926045rem;
+}
+.right-to-left .ilo--profile .ilo--profile--contents--dark .id {
   margin-left: auto;
   margin-right: 4.0192926045rem;
 }
@@ -6246,7 +6334,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -6353,7 +6441,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -6363,7 +6451,7 @@
 */
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -6388,7 +6476,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -6449,7 +6537,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -6864,7 +6952,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -6918,7 +7006,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -7075,7 +7163,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -7426,7 +7514,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -7612,7 +7700,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -7670,7 +7758,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -7844,7 +7932,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS:
@@ -8015,7 +8103,7 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 24 Feb 2023 11:13:42 GMT
+ * Generated on Fri, 21 Apr 2023 13:22:10 GMT
  */
 /**
 * TOKENS: