@ilo-org/styles 1.8.1 → 1.8.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -39,8 +39,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@ilo-org/fonts": "1.0.0",
-    "@ilo-org/themes": "0.9.1",
-    "@ilo-org/icons": "2.1.0"
+    "@ilo-org/icons": "2.1.0",
+    "@ilo-org/themes": "0.9.1"
   },
   "devDependencies": {
     "cssnano": "^7.0.6",

package/scss/_mixins.scss

@@ -189,106 +189,57 @@
 // Link styles
 // ======================================
 
-@mixin linkstyles() {
-  background: map-get($color, "link", "background", "default");
-  color: map-get($color, "link", "text", "default");
+@mixin linkstyles($theme: "light") {
+  $color-default: var(--ilo-link-color-default-light);
+  $color-visited: var(--ilo-link-color-visited-light);
+  $color-hover: var(--ilo-link-color-hover-light);
+  $color-active: var(--ilo-link-color-active-light);
+  $color-focus: var(--ilo-link-color-focus-light);
+  $background-default: var(--ilo-link-background-default-light);
+  $background-hover: var(--ilo-link-background-hover-light);
+  $background-focus: var(--ilo-link-background-focus-light);
+
+  @if ($theme == "dark") {
+    $color-default: var(--ilo-link-color-default-dark);
+    $color-visited: var(--ilo-link-color-visited-dark);
+    $color-hover: var(--ilo-link-color-hover-dark);
+    $background-default: var(--ilo-link-background-default-dark);
+    $background-hover: var(--ilo-link-background-hover-dark);
+    $background-focus: var(--ilo-link-background-focus-dark);
+  }
+
+  // Default styles
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   text-decoration: underline;
-  text-underline-offset: px-to-rem(6px);
-  text-decoration-thickness: px-to-rem(1.5px);
-  text-decoration-color: var(--ilo-color-blue);
-  padding-bottom: spacing(1);
+  background: transparent;
+  text-decoration-thickness: #{px-to-rem(1px)};
+  text-underline-offset: #{px-to-rem(6px)};
+  padding-bottom: #{spacing(1)};
+
+  color: $color-default;
+  text-decoration-color: $color-default;
 
   &:visited {
-    background: map-get($color, "link", "background", "visited");
-    color: map-get($color, "link", "text", "visited");
-    text-decoration-color: var(--ilo-color-purple);
+    color: $color-visited;
+    text-decoration-color: $color-visited;
   }
 
   &:hover {
-    background: map-get($color, "link", "background", "hover");
-    color: map-get($color, "link", "text", "hover");
-    text-decoration-thickness: 3px;
-    text-decoration-color: var(--ilo-color-blue);
-  }
-
-  &:active {
-    background: map-get($color, "link", "background", "active");
-    color: map-get($color, "link", "text", "active");
-    text-decoration-thickness: 3px;
-    text-decoration-color: var(--ilo-color-blue-dark);
+    color: $color-hover;
+    background-color: $background-hover;
+    text-decoration-color: $color-hover;
+    text-decoration-thickness: #{px-to-rem(3px)};
   }
 
+  &:active,
   &:focus {
-    background: map-get($color, "link", "background", "focus");
-    color: map-get($color, "link", "text", "focus");
-    text-decoration-thickness: 3px;
-    text-decoration-color: var(--ilo-color-blue-dark);
-  }
-
-  &--dark {
-    background: map-get($color, "link", "background-dark", "default");
-    color: map-get($color, "link", "text-dark", "default");
-    text-decoration-color: var(--ilo-color-gray-light);
-
-    &:visited {
-      background: map-get($color, "link", "background-dark", "visited");
-      color: map-get($color, "link", "text-dark", "visited");
-      text-decoration-color: var(--ilo-color-gray-base);
-    }
-
-    &:hover {
-      background: map-get($color, "link", "background-dark", "hover");
-      color: map-get($color, "link", "text-dark", "hover");
-      text-decoration-thickness: 3px;
-      text-decoration-color: var(--ilo-color-blue);
-    }
-
-    &:active {
-      background: map-get($color, "link", "background-dark", "active");
-      color: map-get($color, "link", "text-dark", "active");
-      text-decoration-thickness: 3px;
-      text-decoration-color: var(--ilo-color-blue-dark);
-    }
-
-    &:focus {
-      background: map-get($color, "link", "background-dark", "focus");
-      color: map-get($color, "link", "text-dark", "focus");
-      text-decoration-thickness: 3px;
-      text-decoration-color: var(--ilo-color-blue-dark);
-    }
-  }
-
-  &--footer {
-    @include font-styles("body-xxs");
-
-    background: map-get($color, "link", "background-footer", "default");
-    color: map-get($color, "link", "text-footer", "default");
-
-    &:visited {
-      background: map-get($color, "link", "background-footer", "visited");
-      color: map-get($color, "link", "text-footer", "visited");
-    }
-
-    &:hover {
-      background: map-get($color, "link", "background-footer", "hover");
-      color: map-get($color, "link", "text-footer", "hover");
-      text-decoration-thickness: 3px;
-    }
-
-    &:active {
-      background: map-get($color, "link", "background-footer", "active");
-      color: map-get($color, "link", "text-footer", "active");
-      text-decoration-thickness: 3px;
-    }
-
-    &:focus {
-      background: map-get($color, "link", "background-footer", "focus");
-      color: map-get($color, "link", "text-footer", "focus");
-      text-decoration-thickness: 3px;
-    }
+    color: $color-focus;
+    text-decoration-color: $color-focus;
+    text-decoration-thickness: #{px-to-rem(3px)};
+    background-color: $background-focus;
+    outline: none;
   }
 }
 

package/scss/components/_link.scss

@@ -2,5 +2,11 @@
 @use "../mixins" as *;
 
 .ilo--link {
-  @include linkstyles();
+  &__theme__light {
+    @include linkstyles("light");
+  }
+
+  &__theme__dark {
+    @include linkstyles("dark");
+  }
 }

package/scss/components/_richtext.scss

@@ -16,6 +16,10 @@
     --ilo-richtext-hr-color: var(--ilo-color-gray-light);
     --ilo-richtext-link-color: var(--ilo-color-purple);
     --ilo-richtext-link-visited-color: var(--ilo-color-purple);
+
+    a {
+      @include linkstyles("light");
+    }
   }
 
   &__theme__dark {
@@ -24,6 +28,10 @@
     --ilo-richtext-hr-color: var(--ilo-color-gray-light);
     --ilo-richtext-link-color: var(--ilo-color-blue-medium);
     --ilo-richtext-link-visited-color: var(--ilo-color-blue-medium);
+
+    a {
+      @include linkstyles("dark");
+    }
   }
 
   color: var(--ilo-richtext-color);
@@ -101,16 +109,6 @@
     font-weight: 700;
   }
 
-  // Link styles
-  a {
-    @include linkstyles();
-    background: none;
-
-    &:hover {
-      background: none;
-    }
-  }
-
   // Image styles
   img {
     width: 100%;

package/scss/components/_scorecard.scss

@@ -159,16 +159,21 @@
 
             .ilo--status {
               grid-area: status;
+              margin-bottom: 0;
             }
 
             #{$self}--title {
               grid-area: title;
               @include typography("heading-4");
+              margin-bottom: 0;
+              align-self: center;
             }
 
             #{$self}--area--content {
               grid-area: content;
               flex-flow: row wrap;
+              margin-bottom: 0;
+              align-items: center;
             }
 
             #{$self}--area--cta {

package/scss/theme/_foundation.scss

@@ -63,7 +63,6 @@
   /**
     * Font-size
     */
-
   --ilo-font-size-2xsm: calc(#{px-to-rem(10)} * var(--ilo-scale));
   --ilo-font-size-xsm: calc(#{px-to-rem(12)} * var(--ilo-scale));
   --ilo-font-size-sm: calc(#{px-to-rem(14)} * var(--ilo-scale));
@@ -119,4 +118,31 @@
   --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));
+
+  /**
+    * Links
+    */
+  --ilo-link-color-default-light: var(--ilo-color-blue-dark);
+  --ilo-link-color-default-dark: var(--ilo-color-white);
+
+  --ilo-link-color-visited-light: var(--ilo-color-purple);
+  --ilo-link-color-visited-dark: var(--ilo-color-gray-base);
+
+  --ilo-link-color-hover-light: var(--ilo-color-blue);
+  --ilo-link-color-hover-dark: var(--ilo-color-blue);
+
+  --ilo-link-color-active-light: var(--ilo-color-blue-dark);
+  --ilo-link-color-active-dark: var(--ilo-color-blue-dark);
+
+  --ilo-link-color-focus-light: var(--ilo-color-blue-dark);
+  --ilo-link-color-focus-dark: var(--ilo-color-blue-dark);
+
+  --ilo-link-background-default-light: transparent;
+  --ilo-link-background-default-dark: transparent;
+
+  --ilo-link-background-hover-light: transparent;
+  --ilo-link-background-hover-dark: var(--ilo-color-white);
+
+  --ilo-link-background-focus-light: var(--ilo-color-yellow);
+  --ilo-link-background-focus-dark: var(--ilo-color-yellow);
 }