@ilo-org/styles 1.10.1 → 1.11.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -35,12 +35,10 @@
   "publishConfig": {
     "access": "public"
   },
-  "author": "@justintemps, @johnpauldavis, @avrilpearl, @ghlost",
   "license": "Apache-2.0",
   "dependencies": {
     "@ilo-org/fonts": "2.0.0",
-    "@ilo-org/icons": "2.4.0",
-    "@ilo-org/themes": "0.9.1"
+    "@ilo-org/icons": "2.4.0"
   },
   "devDependencies": {
     "cssnano": "^7.0.6",

package/scss/_animations.scss

@@ -1,8 +1,3 @@
-//*------------------------------------*\
-//    $ANIMATIONS
-//*------------------------------------*/
-@use "tokens" as *;
-
 // ======================================
 // Global transition
 // ======================================

package/scss/_config.scss

@@ -4,3 +4,9 @@
 /// @type String
 /// @group config
 $prefix: "ilo" !default;
+
+/// The base font size for the design system
+/// @access public
+/// @type Number
+/// @group config
+$base-font-size: 18.66px;

package/scss/_functions.scss

@@ -1,7 +1,9 @@
+@use "./config" as *;
+
 //*------------------------------------*\
 //    $FUNCTIONS
 //*------------------------------------*/
-@use "tokens" as *;
+@use "icons" as *;
 // ======================================
 // String Replace
 // ======================================
@@ -44,7 +46,7 @@
   @if index($px, "%") {
     @return $px;
   } @else {
-    @return math.div(strip-units($px), strip-units($type-base-size)) * 1rem;
+    @return math.div(strip-units($px), strip-units($base-font-size)) * 1rem;
   }
 }
 
@@ -77,36 +79,3 @@
   $output: str-replace($icon, $fill, $color);
   @return $output;
 }
-
-// =========================================
-// Adjust a margin to account for line-height
-// and font descenders
-//
-// $descender is the height of the descender
-// in pixels when the font is $typesize
-// $lineheight is the line-height when
-// the font is $typesize
-//
-// include the second set of values
-// if your margin is between two sets
-// of text
-// =========================================
-@function margin-adjust(
-  $margin,
-  $descender1,
-  $lineheight1,
-  $typesize1,
-  $descender2: 0,
-  $lineheight2: 0,
-  $typesize2: 0
-) {
-  $lineHeightScale: math.div($lineheight1, $typesize1);
-  $finalval: ($lineHeightScale - 1) + ($descender1 * $typesize1);
-  @if $descender2 > 0 and $lineheight2 > 0 and $typesize2 > 0 {
-    $lineHeightScale2: math.div($lineheight2, $typesize2);
-    $val2: ($lineHeightScale2 - 1) + ($descender2 * $typesize2);
-    $finalval: $finalval + $val2;
-  }
-  $adjusted: $margin - $finalval;
-  @return $adjusted;
-}

package/scss/{_tokens.scss → _icons.scss}

@@ -1,5 +1,5 @@
 //*------------------------------------*\
 //    $TOKENS
 //*------------------------------------*/
-@forward "@ilo-org/themes/build/scss/tokens";
+
 @forward "@ilo-org/icons/build/scss/icons";

package/scss/_mixins.scss

@@ -1,7 +1,7 @@
 //*------------------------------------*\
 //    $MIXINS
 //*------------------------------------*/
-@use "tokens" as *;
+@use "icons" as *;
 @use "functions" as *;
 @use "animations" as *;
 @use "theme/breakpoints" as *;
@@ -45,92 +45,9 @@
   }
 }
 
-// ======================================
-// Text Margin
-//
-// calculates reduced margin to account
-// for line-height and descenders
-// ======================================
-
-@mixin textmargin(
-  $margin,
-  $marginval,
-  $stylename,
-  $descender,
-  $stylename2: false,
-  $descender2: false
-) {
-  @if $stylename2 != false {
-    #{$margin}: px-to-rem(
-      margin-adjust(
-        $marginval,
-        map-get($type, "descenders", $descender),
-        map-get($type, $stylename, "size"),
-        map-get($type, $stylename, "line-height")
-      )
-    );
-  } @else {
-    #{$margin}: px-to-rem(
-      margin-adjust(
-        $marginval,
-        map-get($type, "descenders", $descender),
-        map-get($type, $stylename, "size"),
-        map-get($type, $stylename, "line-height"),
-        map-get($type, "descenders", $descender2),
-        map-get($type, $stylename2, "size"),
-        map-get($type, $stylename2, "line-height")
-      )
-    );
-  }
-}
-
-// ======================================
-// Border Values
-// ======================================
-
-@mixin bordervalues($mappath, $location, $state: "default") {
-  border-bottom: px-to-rem(
-      map-get($spacing, $location, $mappath, $state, "border", "bottom")
-    )
-    solid map-get($color, $location, $mappath, $state, "border", "bottom");
-  border-left: px-to-rem(
-      map-get($spacing, $location, $mappath, $state, "border", "left")
-    )
-    solid map-get($color, $location, $mappath, $state, "border", "left");
-  border-right: px-to-rem(
-      map-get($spacing, $location, $mappath, $state, "border", "right")
-    )
-    solid map-get($color, $location, $mappath, $state, "border", "right");
-  border-top: px-to-rem(
-      map-get($spacing, $location, $mappath, $state, "border", "top")
-    )
-    solid map-get($color, $location, $mappath, $state, "border", "top");
-}
-
-// ======================================
-// Border Radius Values
-// ======================================
-
-@mixin borderradius($mappath) {
-  border-bottom-left-radius: map-get($radius, $mappath, "bottom-left");
-  border-bottom-right-radius: map-get($radius, $mappath, "bottom-right");
-  border-top-left-radius: map-get($radius, $mappath, "top-left");
-  border-top-right-radius: map-get($radius, $mappath, "top-right");
-}
-
-// ======================================
-// Box Padding Values
-// ======================================
-
-@mixin boxpadding($mappath, $size) {
-  padding-bottom: map-get($spacing, "boxpadding", $mappath, $size, "bottom");
-  padding-left: map-get($spacing, "boxpadding", $mappath, $size, "left");
-  padding-right: map-get($spacing, "boxpadding", $mappath, $size, "right");
-  padding-top: map-get($spacing, "boxpadding", $mappath, $size, "top");
-}
-
 // ======================================
 // Data URL Icon
+// @TODO: Deprecate all usage of dataurlicon and replace with icon mixin
 // ======================================
 
 @mixin dataurlicon($name, $color: $color-base-neutrals-black) {
@@ -138,6 +55,10 @@
   background-repeat: no-repeat;
 }
 
+// ======================================
+// Icon
+// ======================================
+
 @mixin icon($name, $color: black) {
   $icon: map-get($icons, $name);
   mask-image: url("#{$icon}");
@@ -147,33 +68,6 @@
   background-color: $color;
 }
 
-// ======================================
-// Video Button
-// ======================================
-@mixin videobutton($name, $size: "standard") {
-  $height: if($size == "big", 72px, 32px);
-  $box: if($size == "big", 80px, 40px);
-  $width: $height;
-  $color: $color-ux-video-controls-default-icon;
-
-  cursor: pointer;
-  border: none;
-  background-color: $color-ux-video-controls-default-background;
-  width: $box;
-  height: $box;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: $width $height;
-  @include dataurlicon($name, $color);
-
-  &:hover,
-  &:focus {
-    background-color: $color-ux-video-controls-hover-background;
-    $color: $color-ux-video-controls-hover-icon;
-    @include dataurlicon($name, $color);
-  }
-}
-
 // ======================================
 // Link styles
 // ======================================
@@ -310,11 +204,11 @@
   }
 }
 
-@mixin hero-grid-rows($min-height: $spacing-hero-image-min-height) {
+@mixin hero-grid-rows($min-height: var(--hero-image-min-height)) {
   grid-template-rows:
     minmax($min-height, 1fr)
-    $spacing-hero-tooltip-height
-    $spacing-hero-card-corner-cut-height-sm
+    var(--hero-tooltip-height)
+    var(--hero-card-corner-cut-height-sm)
     auto;
 }
 
@@ -379,6 +273,10 @@
   }
 }
 
+// ======================================
+// Typography
+// ======================================
+
 @mixin typography($variant, $mobile: false) {
   @if $variant ==
     "heading-1" or

package/scss/_typography.scss

@@ -1,12 +1,3 @@
-// Adapted from Carbon Library
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Load the theme vars and fonts
-@use "@ilo-org/themes/build/scss/tokens" as *;
-
 // Set Arabic fonts
 :root[lang*="ar"],
 [lang*="ar"] {
@@ -37,11 +28,11 @@
 
 html,
 body {
-  color: $color-font-base;
+  color: var(--ilo-color-gray-charcoal);
   font-family: var(--ilo-fonts-copy);
-  font-size: #{$type-base-size};
-  line-height: #{$type-base-line-height};
-  letter-spacing: $type-base-letter-spacing;
+  font-size: var(--ilo-font-size-base);
+  line-height: var(--ilo-line-height-base);
+  letter-spacing: normal;
   -webkit-font-smoothing: antialiased;
 }
 

package/scss/_typographymonorepo.scss

@@ -1,20 +1,41 @@
-// Adapted from Carbon Library
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Load the theme vars and fonts
-@use "@ilo-org/themes/build/scss/tokens" as *;
+// Load the fonts
 @forward "@ilo-org/fonts/font-css/fonts";
 
+// Set Arabic fonts
+:root[lang*="ar"],
+[lang*="ar"] {
+  --ilo-fonts-display: var(--ilo-fonts-display-ar);
+  --ilo-fonts-copy: var(--ilo-fonts-copy-ar);
+
+  // Letter spacing overrides for Arabic. Different letter spacing values cause incorrect
+  // glpyhs to be rendered. See https://github.com/international-labour-organization/designsystem/issues/1547
+  --ilo-letter-spacing-xsm: 0;
+  --ilo-letter-spacing-sm: 0;
+  --ilo-letter-spacing-md: 0;
+  --ilo-letter-spacing-lg: 0;
+}
+
+// Set Chinese system fonts
+:root[lang*="zh"],
+[lang*="zh"] {
+  --ilo-fonts-display: var(--ilo-fonts-display-zh);
+  --ilo-fonts-copy: var(--ilo-fonts-copy-zh);
+}
+
+// Set Japanese system fonts
+:root[lang*="ja"],
+[lang*="ja"] {
+  --ilo-fonts-display: var(--ilo-fonts-display-jp);
+  --ilo-fonts-copy: var(--ilo-fonts-copy-jp);
+}
+
 html,
 body {
-  color: $color-font-base;
+  color: var(--ilo-color-gray-charcoal);
   font-family: var(--ilo-fonts-copy);
-  font-size: #{$type-base-size};
-  line-height: #{$type-base-line-height};
-  letter-spacing: $type-base-letter-spacing;
+  font-size: var(--ilo-font-size-base);
+  line-height: var(--ilo-line-height-base);
+  letter-spacing: normal;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -26,15 +47,3 @@ h5,
 h5 {
   font-family: var(--ilo-fonts-display);
 }
-
-// Set Chinese system fonts
-html[lang*="zh"] {
-  --ilo-fonts-display: var(--ilo-fonts-display-zh);
-  --ilo-fonts-copy: var(--ilo-fonts-copy-zh);
-}
-
-// Set Japanese system fonts
-html[lang*="ja"] {
-  --ilo-fonts-display: var(--ilo-fonts-display-jp);
-  --ilo-fonts-copy: var(--ilo-fonts-copy-jp);
-}

package/scss/components/_accordion.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 @import "../config";

package/scss/components/_blockquote.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 @import "../config";

package/scss/components/_breadcrumb.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @use "../animations" as *;
 @import "../mixins";

package/scss/components/_button.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../animations";
 @import "../mixins";
@@ -176,7 +175,7 @@
   }
 
   &:disabled {
-    opacity: $opacity-disabled;
+    opacity: 0.45;
     pointer-events: none;
   }
 }

package/scss/components/_callout.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 @import "../config";

package/scss/components/_card.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @use "../animations" as *;
 @import "../mixins";

package/scss/components/_cardgroup.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 

package/scss/components/_container.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../animations";
 @import "../mixins";
@@ -6,7 +5,7 @@
 .ilo--container {
   margin-right: auto;
   margin-left: auto;
-  max-width: $layout-max-width;
-  padding: 0 px-to-rem($layout-padding);
+  max-width: var(--ilo-layout-max-width);
+  padding: 0 var(--ilo-layout-padding);
   width: 100%;
 }

package/scss/components/_contextmenu.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 
@@ -54,7 +53,7 @@
   }
 
   &--link {
-    border-bottom: px-to-rem($borders-base) solid var(--ilo-color-white);
+    border-bottom: var(--ilo-border-md) solid var(--ilo-color-white);
     color: var(--ilo-color-blue-dark);
     display: inline-block;
     padding: spacing(4) spacing(2);
@@ -72,7 +71,7 @@
       color: var(--ilo-color-blue);
       outline: none;
       text-decoration: underline;
-      text-decoration-thickness: px-to-rem($borders-base);
+      text-decoration-thickness: var(--ilo-border-md);
     }
   }
 }

package/scss/components/_datacard.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @use "../animations" as *;
 @import "../mixins";

package/scss/components/_datepicker.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 

package/scss/components/_detailcard.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @use "../animations" as *;
 @import "../mixins";

package/scss/components/_empty.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @import "../mixins";
 @import "../animations";
 

package/scss/components/_factlistcard.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @use "../animations" as *;
 @import "../mixins";
@@ -67,7 +66,7 @@
       }
 
       #{$self}--title {
-        color: $brand-ilo-black;
+        color: var(--ilo-color-gray-charcoal);
         font-size: var(--ilo-font-size-xlg);
         line-height: var(--ilo-line-height-md);
         letter-spacing: var(--ilo-letter-spacing-xsm);

package/scss/components/_featurecard.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @use "../animations" as *;
 @import "../mixins";

package/scss/components/_fieldset.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @use "sass:math";
 @import "../mixins";
@@ -31,11 +30,11 @@
     justify-content: flex-start;
     align-items: flex-start;
     flex-direction: $value;
-    @include textmargin("gap", $gap, "label-medium", "display", 0, 0);
+    gap: px-to-rem($gap);
   }
 
   &--legend-wrapper {
-    @include textmargin("margin-bottom", $gap, "label-medium", "display", 0, 0);
+    margin-bottom: px-to-rem($gap);
 
     .ilo--tooltip--wrapper {
       top: px-to-rem(-1px);
@@ -44,7 +43,7 @@
 
   &--legend {
     font-family: var(--ilo-fonts-display);
-    font-weight: map-get($type, "weights", "label");
+    font-weight: var(--ilo-font-weight-bold);
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
@@ -105,14 +104,7 @@
   &__error {
     font-family: var(--ilo-fonts-copy);
     @include typography("body-xsmall");
-    @include textmargin(
-      "margin-top",
-      map-get($spacing, "padding-1-5"),
-      "body-xxs",
-      "copy",
-      0,
-      0
-    );
+    margin-top: px-to-rem(6px);
   }
 
   &--helper {

package/scss/components/_file-upload.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 
@@ -12,36 +11,34 @@
       width: 0;
     }
 
-    background-color: map-get($color, "ux", "background", "default");
-    border: map-get($borders, "small")
-      map-get($color, "ux", "borders", "default") solid;
-    color: map-get($color, "ux", "labels", "actionable");
+    background-color: var(--ilo-color-white);
+    border: var(--ilo-border-sm) solid var(--ilo-color-gray-base);
+    color: var(--ilo-color-blue-dark);
     content: attr(data-label);
     display: inline-block;
     font-family: var(--ilo-fonts-display);
-    font-weight: map-get($type, "weights", "label");
-    @include borderradius("button");
-    @include boxpadding("button", "medium");
+    font-weight: var(--ilo-font-weight-bold);
+    border-radius: px-to-rem(2px);
+    padding-inline: px-to-rem(18px);
+    padding-block: px-to-rem(7px);
     @include typography("highlight-medium");
 
     .ilo--form__theme__dark & {
-      color: map-get($color, "ux", "labels", "actionable");
+      color: var(--ilo-color-blue-dark);
     }
 
     &:hover {
-      background-color: map-get($color, "ux", "background", "hover");
-      border: map-get($borders, "small")
-        map-get($color, "ux", "borders", "hover") solid;
+      background-color: var(--ilo-color-blue-lighter);
+      border: var(--ilo-border-sm) solid var(--ilo-color-blue);
       cursor: pointer;
-      color: map-get($color, "ux", "labels", "hover");
+      color: var(--ilo-color-blue);
       outline: none;
     }
 
     &:focus {
-      background-color: map-get($color, "ux", "background", "focus");
-      border: map-get($borders, "small")
-        map-get($color, "ux", "borders", "hover") solid;
-      color: map-get($color, "ux", "labels", "focus");
+      background-color: var(--ilo-color-white);
+      border: var(--ilo-border-sm) solid var(--ilo-color-blue);
+      color: var(--ilo-color-blue);
       outline: none;
     }
 
@@ -50,10 +47,9 @@
     }
 
     &:active {
-      background-color: map-get($color, "ux", "background", "active");
-      border: map-get($borders, "base")
-        map-get($color, "ux", "borders", "active") solid;
-      color: map-get($color, "ux", "labels", "active");
+      background-color: var(--ilo-color-blue);
+      border: var(--ilo-border-md) solid var(--ilo-color-blue-dark);
+      color: var(--ilo-color-white);
     }
 
     &:disabled {
@@ -64,14 +60,9 @@
     &:invalid,
     &.error,
     .error & {
-      background-color: map-get(
-        $color,
-        "formelements",
-        "input",
-        "error",
-        "background"
-      );
-      @include bordervalues("input", "formelements", "error");
+      background-color: var(--ilo-color-white);
+      border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
+      border-left: px-to-rem(3px) solid var(--ilo-color-red-dark);
     }
   }
 
@@ -85,11 +76,12 @@
 
   &--list-item {
     display: block;
-    background-color: $color-formelements-uploadedfile-default-background;
-    @include bordervalues("uploadedfile", "formelements", "default");
+    background-color: var(--ilo-color-gray-light);
+    border: var(--ilo-border-md) solid var(--ilo-color-gray-light);
+    border-left: px-to-rem(3px) solid var(--ilo-color-blue-dark);
     box-sizing: border-box;
     font-family: var(--ilo-fonts-display);
-    font-weight: map-get($type, "weights", "section");
+    font-weight: var(--ilo-font-weight-medium);
     @include typography("highlight-medium");
     height: px-to-rem(48px);
     outline: none;

package/scss/components/_form.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 

package/scss/components/_formcontrol.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @use "sass:math";
 @import "../mixins";