@ilo-org/styles 1.3.2 → 1.3.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -38,9 +38,9 @@
   "author": "@justintemps, @johnpauldavis, @avrilpearl, @ghlost",
   "license": "Apache-2.0",
   "dependencies": {
+    "@ilo-org/themes": "0.9.1",
     "@ilo-org/fonts": "1.0.0",
-    "@ilo-org/icons": "2.0.0",
-    "@ilo-org/themes": "0.9.1"
+    "@ilo-org/icons": "2.0.0"
   },
   "devDependencies": {
     "cssnano": "^7.0.6",
@@ -54,9 +54,7 @@
     "sass": "^1.62.1"
   },
   "scripts": {
-    "build": "gulp",
-    "build:lib": "pnpm build",
-    "build:docs": "pnpm build",
+    "build:lib": "gulp",
     "format": "prettier --check . --ignore-path ../../.prettierignore",
     "format:fix": "prettier --write . --ignore-path ../../.prettierignore",
     "lint": "eslint",

package/scss/_mixins.scss

@@ -198,56 +198,66 @@
   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);
 
   &:visited {
     background: map-get($color, "link", "background", "visited");
     color: map-get($color, "link", "text", "visited");
+    text-decoration-color: var(--ilo-color-purple);
   }
 
   &: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);
   }
 
   &: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);
     }
   }
 

package/scss/components/_promocard.scss

@@ -89,12 +89,8 @@
           }
 
           #{$self}--title {
-            @include font-styles("headline-4");
+            @include font-styles("headline-5");
             margin-bottom: spacing(2);
-
-            @include breakpoint("md") {
-              @include font-styles("headline-2");
-            }
           }
 
           #{$self}--intro {

package/scss/components/_richtext.scss

@@ -109,9 +109,9 @@
 
   // Horizontal rule (hr) styles
   hr {
-    background-color: var(--ilo-color-borders-default);
+    background-color: var(--ilo-color-gray-light);
     border: none;
-    height: px-to-rem(4px);
+    height: px-to-rem(3px);
   }
 
   .responsive-video-embed {

package/scss/components/_tabs.scss

@@ -83,9 +83,14 @@
         &[aria-selected="true"] {
           background-color: $color-base-neutrals-white;
           border-top: px-to-rem(3px) solid $color-ux-labels-actionable;
+          pointer-events: none;
           @include globaltransition("color, background-color, border-color");
         }
 
+        &[aria-selected="false"]:not(:hover) {
+          border-top: px-to-rem(3px) solid transparent;
+        }
+
         &.icon {
           .ilo--icon {
             height: px-to-rem(16px);
@@ -174,3 +179,37 @@
     }
   }
 }
+
+// This was proposed by base theme but isn't implemented in the design system yet
+.ilo--tabs--secondary {
+  display: flex;
+  flex-wrap: wrap;
+  margin-block: 2rem;
+  gap: 10px;
+
+  .ilo--tabs--selection--button {
+    display: block;
+    padding: 0.2em 1em;
+    font-size: 16px;
+    font-weight: 600;
+    color: #230050;
+    text-decoration: none;
+
+    &[aria-selected="false"] {
+      border-bottom: 2px solid transparent;
+      background-color: var(--ilo-color-background-highlight);
+
+      &:hover {
+        color: var(--ilo-color-blue);
+        border-bottom-color: var(--ilo-color-blue);
+        background-color: var(--ilo-color-background-hover);
+      }
+    }
+
+    &[aria-selected="true"] {
+      color: var(--ilo-color-blue-dark);
+      border-bottom: 2px solid var(--ilo-color-blue-dark);
+      pointer-events: none;
+    }
+  }
+}