@ilo-org/styles 1.0.7 → 1.1.0

package/scss/components/_navigation.scss

@@ -17,7 +17,7 @@
     width: 100%;
   }
 
-  @include breakpoint("large") {
+  @include breakpoint("lg") {
     overflow: visible;
   }
 
@@ -50,7 +50,7 @@
       background-size: 32px;
     }
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       display: none;
     }
 
@@ -78,7 +78,7 @@
         background-size: 32px;
       }
 
-      @include breakpoint("large") {
+      @include breakpoint("lg") {
         display: none;
       }
     }
@@ -88,7 +88,7 @@
     display: block;
     height: spacing(14);
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       height: spacing(18);
     }
 
@@ -97,7 +97,7 @@
       padding: spacing(4) 0;
       width: auto;
 
-      @include breakpoint("large") {
+      @include breakpoint("lg") {
         padding: 0 0 spacing(6);
       }
     }
@@ -113,7 +113,7 @@
       justify-content: space-between;
     }
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       background: $brand-ilo-blue;
     }
   }
@@ -178,17 +178,17 @@
           }
         }
 
-        @include breakpoint("large") {
+        @include breakpoint("lg") {
           display: flex;
         }
       }
 
-      @include breakpoint("large") {
+      @include breakpoint("lg") {
         padding: 0;
       }
     }
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       background: $brand-ilo-blue;
       display: flex;
       justify-content: flex-end;
@@ -205,7 +205,7 @@
       visibility: hidden;
     }
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       display: flex;
       justify-content: space-between;
       padding: 0 spacing(5);
@@ -235,12 +235,12 @@
     }
 
     .ilo--header--local & {
-      @include breakpoint("large") {
+      @include breakpoint("lg") {
         display: none;
       }
     }
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       background: $brand-ilo-dark-blue;
       overflow: visible;
       position: static;
@@ -258,7 +258,7 @@
     padding: spacing(4) 0;
     text-align: right;
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       display: block;
     }
 
@@ -274,7 +274,7 @@
 .ilo--nav {
   width: 100%;
 
-  @include breakpoint("large") {
+  @include breakpoint("lg") {
     width: auto;
   }
 
@@ -291,7 +291,7 @@
   &--set {
     width: 100%;
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       display: flex;
       width: auto;
     }
@@ -302,7 +302,7 @@
     font-family: $fonts-display;
     font-weight: 500;
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       display: flex;
       align-items: center;
 
@@ -326,7 +326,7 @@
       text-decoration: none;
     }
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       background: $brand-ilo-dark-blue;
       color: $brand-ilo-white;
       display: inline-block;
@@ -386,7 +386,7 @@
       }
     }
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       @include dataurlicon("add", $brand-ilo-white);
       @include font-styles("nav-bold-b-sm");
 
@@ -440,12 +440,12 @@
     justify-content: space-between;
 
     [dir="rtl"] {
-      @include breakpoint("large") {
+      @include breakpoint("lg") {
         padding: 0 max((100% - 1260px) / 2, 20px) 0 0;
       }
     }
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       padding: 0 32px 0 max((100% - 1260px) / 2, 20px);
     }
 
@@ -466,7 +466,7 @@
     &--set {
       display: none;
 
-      @include breakpoint("large") {
+      @include breakpoint("lg") {
         display: flex;
         justify-content: space-between;
       }
@@ -578,7 +578,7 @@
     }
   }
 
-  @include breakpoint("large") {
+  @include breakpoint("lg") {
     display: none;
   }
 }
@@ -694,7 +694,7 @@
     transform: translateX(0);
   }
 
-  @include breakpoint("large") {
+  @include breakpoint("lg") {
     height: auto;
     left: 0;
     padding: spacing(8) 0;
@@ -717,7 +717,7 @@
   }
 
   &--inner {
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       display: flex;
       justify-content: space-between;
     }
@@ -728,7 +728,7 @@
     grid-template-columns: 1fr;
     width: 100%;
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       grid-auto-flow: column;
       grid-template-columns: repeat(5, 1fr);
       grid-template-rows: repeat(5, 1fr);
@@ -756,7 +756,7 @@
 }
 
 .ilo--mobile--subnav {
-  @include breakpoint("large") {
+  @include breakpoint("lg") {
     display: none;
   }
 
@@ -829,7 +829,7 @@
       }
     }
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       display: none;
     }
   }
@@ -862,7 +862,7 @@
     transform: translateX(0);
   }
 
-  @include breakpoint("large") {
+  @include breakpoint("lg") {
     filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
       drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
       drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08));
@@ -904,7 +904,7 @@
 .ilo--search {
   display: none;
 
-  @include breakpoint("large") {
+  @include breakpoint("lg") {
     display: flex;
   }
 

package/scss/components/_notification.scss

@@ -16,7 +16,7 @@
     max-width: 340px;
     width: 100%;
 
-    @include breakpoint("medium") {
+    @include breakpoint("md") {
       max-width: 490px;
     }
 
@@ -32,7 +32,7 @@
       padding: spacing(6);
     }
 
-    @include breakpoint("medium") {
+    @include breakpoint("md") {
       max-width: 100%;
 
       .ilo--notification--content {
@@ -62,7 +62,7 @@
       width: px-to-rem(40px);
       top: 0;
 
-      @include breakpoint("medium") {
+      @include breakpoint("md") {
         .ilo--notification--inline & {
           background-position: center;
         }
@@ -96,7 +96,7 @@
 
     margin-bottom: spacing(3);
 
-    @include breakpoint("medium") {
+    @include breakpoint("md") {
       .ilo--notification--inline & {
         margin-bottom: 0;
       }
@@ -107,14 +107,14 @@
     font-weight: 400;
     @include font-styles("body-xs");
 
-    @include breakpoint("medium") {
+    @include breakpoint("md") {
       .ilo--notification--inline & {
         margin-left: spacing(6);
       }
     }
 
     &:not(:last-child) {
-      @include breakpoint("medium") {
+      @include breakpoint("md") {
         .ilo--notification--inline & {
           flex-grow: 1;
         }
@@ -128,7 +128,7 @@
     font-weight: 400;
     @include font-styles("body-xs");
 
-    @include breakpoint("medium") {
+    @include breakpoint("md") {
       .ilo--notification--inline & {
         margin-left: spacing(4);
       }
@@ -138,7 +138,7 @@
       margin-bottom: spacing(5);
     }
 
-    @include breakpoint("medium") {
+    @include breakpoint("md") {
       .ilo--notification--inline & {
         margin-bottom: 0;
       }
@@ -146,7 +146,7 @@
   }
 
   &--cta {
-    @include breakpoint("medium") {
+    @include breakpoint("md") {
       .ilo--notification--inline & {
         margin-left: spacing(6);
       }

package/scss/components/_promocard.scss

@@ -13,7 +13,7 @@
       &__narrow {
         --max-width: #{px-to-rem(343px)};
 
-        @include breakpoint("medium", true) {
+        @include breakpoint("md", true) {
           --max-width: 100%;
         }
       }
@@ -39,11 +39,11 @@
       padding: spacing(10) spacing(6);
       width: 100%;
 
-      @include breakpoint("medium") {
+      @include breakpoint("md") {
         padding: spacing(12);
       }
 
-      @include breakpoint("large") {
+      @include breakpoint("lg") {
         padding: spacing(16) spacing(18);
       }
 
@@ -92,7 +92,7 @@
             @include font-styles("headline-4");
             margin-bottom: spacing(2);
 
-            @include breakpoint("medium") {
+            @include breakpoint("md") {
               @include font-styles("headline-2");
             }
           }
@@ -111,7 +111,7 @@
       #{$self}--title {
         @include font-styles("headline-4");
 
-        @include breakpoint("medium") {
+        @include breakpoint("md") {
           @include font-styles("headline-2");
         }
       }
@@ -120,7 +120,7 @@
         @include font-styles("body-small");
         margin-bottom: spacing(8);
 
-        @include breakpoint("medium") {
+        @include breakpoint("md") {
           @include font-styles("base");
         }
       }

package/scss/components/_richtext.scss

@@ -9,6 +9,11 @@
 
   a {
     @include linkstyles();
+    background: none;
+
+    &:hover {
+      background: none;
+    }
   }
 
   img {
@@ -202,7 +207,7 @@
   // Repeat list styles from the list component
   @include invincible-list;
 
-  @include breakpoint("medium") {
+  @include breakpoint("md") {
     @include font-styles("base");
 
     h1,
@@ -379,7 +384,7 @@
         transform: scaleX(-1);
       }
 
-      @include breakpoint("medium") {
+      @include breakpoint("md") {
         padding: spacing(15) spacing(12) spacing(12) 0;
 
         blockquote {

package/scss/components/_statcard.scss

@@ -10,7 +10,7 @@
     &__stat {
       --max-width: #{px-to-rem(343px)};
 
-      @include breakpoint("medium", true) {
+      @include breakpoint("md", true) {
         --max-width: 100%;
       }
 

package/scss/components/_tableofcontents.scss

@@ -46,7 +46,7 @@
       width: 100vw;
       z-index: 10001;
 
-      @include breakpoint("large") {
+      @include breakpoint("lg") {
         padding: 0;
       }
     }
@@ -63,7 +63,7 @@
     }
   }
 
-  @include breakpoint("large") {
+  @include breakpoint("lg") {
     display: block;
 
     & > * {
@@ -94,7 +94,7 @@
       }
     }
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       display: none;
 
       &.show {

package/scss/components/_tabs.scss

@@ -149,7 +149,7 @@
       }
     }
 
-    @include breakpoint("medium") {
+    @include breakpoint("md") {
       .ilo--tabs--content {
         padding: spacing(10) spacing(16) spacing(16) spacing(16);
       }
@@ -171,7 +171,7 @@
       }
     }
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       .ilo--tabs--selection {
         &--item {
           width: min(calc(var(--tabscount) / 1 * 100%), 100%);

package/scss/components/_textcard.scss

@@ -40,7 +40,7 @@
         }
       }
 
-      @include breakpoint("medium", true) {
+      @include breakpoint("md", true) {
         --max-width: 100%;
       }
 
@@ -57,7 +57,7 @@
 
           padding: spacing(10) spacing(6) spacing(8);
 
-          @include breakpoint("medium", true) {
+          @include breakpoint("md", true) {
             --max-width: 100%;
           }
 
@@ -101,7 +101,7 @@
           "copy"
         );
 
-        @include breakpoint("medium") {
+        @include breakpoint("md") {
           @include font-styles("headline-5");
           @include textmargin(
             "margin-bottom",

package/scss/components/_tooltip.scss

@@ -27,7 +27,7 @@
   max-width: px-to-rem(180px);
 
   &--long {
-    @include breakpoint("medium") {
+    @include breakpoint("md") {
       max-width: px-to-rem(400px);
     }
   }

package/scss/components/_video.scss

@@ -115,7 +115,7 @@
           color: $color-ux-video-controls-default-icon;
         }
 
-        @include breakpoint("large") {
+        @include breakpoint("lg") {
           width: px-to-rem(80px);
           flex-direction: column;
           height: px-to-rem(124px);

package/scss/global.scss

@@ -4,5 +4,8 @@
 // Load the css resets
 @use "reset";
 
+//Theme Foundation
+@use "theme";
+
 //Import type styles
 @use "typography";

package/scss/monorepo.scss

@@ -6,6 +6,9 @@
 // Load the css resets
 @use "reset";
 
+//Theme Foundation
+@use "theme";
+
 //Import type styles
 @use "typographymonorepo";
 

package/scss/theme/_breakpoints.scss

@@ -0,0 +1,11 @@
+/**
+  * Breakpoints are defined in scss because they can't be referenced as a css variables
+  */
+$breakpoints-foundation: (
+  xs: 320px,
+  sm: 414px,
+  md: 610px,
+  lg: 1024px,
+  xl: 1168px,
+  xxl: 1140px,
+);

package/scss/theme/_foundation.scss

@@ -0,0 +1,82 @@
+@use "../functions" as *;
+@use "./breakpoints" as *;
+
+:root {
+  /**
+    * Typography
+    */
+  --ilo-scale: 1; // default scale for the design system
+  --ilo-font-family: Overpass, Noto Sans, Noto Sans CJK JP, Yu Gothic,
+    Hiragino Sans, TakaoPGothic, PingFang SC, Microsoft YaHei, 微软雅黑,
+    sans-serif;
+  --ilo-font-copy: Noto Sans, Noto Sans CJK JP, Yu Gothic, Hiragino Sans,
+    TakaoPGothic, PingFang SC, Microsoft YaHei, 微软雅黑, sans-serif;
+  --ilo-font-family-headings: var(--ilo-font-family);
+  --ilo-font-family-monospace: monospace;
+  --ilo-line-height: 1.46;
+
+  /**
+    * Colors
+    */
+  --ilo-color-white: rgba(255, 255, 255, 1);
+
+  --ilo-color-blue: rgba(30, 45, 190, 1);
+  --ilo-color-blue-lighter: rgba(235, 245, 253, 1);
+  --ilo-color-blue-light: rgba(190, 220, 250, 1);
+  --ilo-color-blue-dark: rgba(35, 0, 80, 1);
+  --ilo-color-blue-medium: rgba(210, 213, 242, 1);
+  --ilo-color-blue-ramp: rgba(30, 45, 190, 0.4);
+  --ilo-color-blue-dark-ramp: rgba(35, 0, 80, 0.5);
+
+  --ilo-color-gray-charcoal: rgba(45, 45, 45, 1);
+  --ilo-color-gray-accessible: rgba(109, 109, 109, 1);
+  --ilo-color-gray-light: rgba(237, 240, 242, 1);
+  --ilo-color-gray-ui: rgba(184, 196, 204, 1);
+
+  --ilo-color-red: rgba(250, 60, 75, 1);
+  --ilo-color-red-light: rgba(254, 216, 219, 1);
+  --ilo-color-red-dark: rgba(200, 48, 60, 1);
+  --ilo-color-red-ramp: rgba(250, 60, 75, 0.2);
+
+  --ilo-color-yellow: rgba(255, 205, 45, 1);
+  --ilo-color-yellow-light: rgba(255, 245, 200, 1);
+  --ilo-color-yellow-ramp: rgba(255, 205, 45, 0.2);
+
+  --ilo-color-green: rgba(140, 225, 100, 1);
+  --ilo-color-green-light: rgba(232, 249, 224, 1);
+  --ilo-color-green-ramp: rgba(140, 225, 100, 0.2);
+
+  --ilo-color-turquoise: rgba(5, 210, 210, 1);
+
+  --ilo-color-purple: rgba(150, 10, 85, 1);
+
+  /**
+    * Sizing
+    */
+  --ilo-breakpoint-xs: #{map-get($breakpoints-foundation, "xs")};
+  --ilo-breakpoint-sm: #{map-get($breakpoints-foundation, "sm")};
+  --ilo-breakpoint-md: #{map-get($breakpoints-foundation, "md")};
+  --ilo-breakpoint-lg: #{map-get($breakpoints-foundation, "lg")};
+  --ilo-breakpoint-xl: #{map-get($breakpoints-foundation, "xl")};
+  --ilo-breakpoint-xxl: #{map-get($breakpoints-foundation, "xxl")};
+  --ilo-border-radius: calc(#{px-to-rem(2)} * var(--ilo-scale));
+
+  /**
+    * Spacing
+    */
+  --ilo-spacing-base: calc(#{px-to-rem(4)} * var(--ilo-scale));
+
+  /**
+    * Transition
+    */
+  --ilo-transition-duration: 150ms;
+  --ilo-transition-timing-function: ease-out;
+
+  /**
+    * Border
+    */
+  --ilo-border-xs: calc(#{px-to-rem(1)} * var(--ilo-scale));
+  --ilo-border-sm: calc(#{px-to-rem(1.5)} * var(--ilo-scale));
+  --ilo-border-md: calc(#{px-to-rem(2)} * var(--ilo-scale));
+  --ilo-border-lg: calc(#{px-to-rem(4)} * var(--ilo-scale));
+}

package/scss/theme/index.scss

@@ -0,0 +1 @@
+@use "foundation";