@financial-times/n-myft-ui 37.0.0 → 38.0.0

package/mixins/lozenge/_themes.scss

@@ -1,77 +1,83 @@
 $myft-lozenge-themes: (
-	standard: (
-		toggle-button-theme: ('color': 'claret'),
-		background: oColorsByName('claret'),
-		text: oColorsByName('white'),
-		highlight: oColorsByName('claret-50'),
-		pressed-highlight: rgba(oColorsByName('black'), 0.05),
-		disabled: rgba(oColorsByName('black'), 0.5),
-	),
-	inverse: (
-		toggle-button-theme: 'inverse',
-		background: oColorsByName('white'),
-		text: oColorsByName('black'),
-		highlight: rgba(white, 0.8),
-		pressed-highlight: rgba(white, 0.2),
-		disabled: rgba(oColorsByName('white'), 0.5),
-		mix-blend-mode: lighten
-	),
-	opinion: (
-		toggle-button-theme: ('color': 'oxford-40'),
-		background: oColorsByName('oxford-40'),
-		text: oColorsByName('white'),
-		highlight: oColorsByName('oxford-30'),
-		pressed-highlight: rgba(oColorsByName('oxford-40'), 0.2),
-		disabled: rgba(oColorsByName('black'), 0.5),
-	),
-	monochrome: (
-		toggle-button-theme: 'inverse',
-		background: oColorsByName('white'),
-		text: oColorsByName('black'),
-		highlight: oColorsByName('white-80'),
-		pressed-highlight: rgba(oColorsByName('white'), 0.2),
-		disabled: rgba(oColorsByName('white'), 0.5),
-	),
-	inverse-monochrome: (
-		toggle-button-theme: ('color': 'black'),
-		background: oColorsByName('black'),
-		text: oColorsByName('white'),
-		highlight: oColorsByName('black-80'),
-		pressed-highlight: rgba(oColorsByName('black'), 0.2),
-		disabled: rgba(oColorsByName('black'), 0.5),
-	),
-	alphaville: (
-		toggle-button-theme: 'inverse',
-		background: oColorsByName('white'),
-		text: oColorsByName('matisse'),
-		highlight: rgba(white, 0.8),
-		pressed-highlight: rgba(white, 0.2),
-		disabled: rgba(oColorsByName('white'), 0.5),
-	)
+  standard: (
+    toggle-button-theme: (
+      'color': 'claret',
+    ),
+    background: var(--o3-color-palette-claret),
+    text: var(--o3-color-palette-white),
+    highlight: var(--o3-color-palette-claret-50),
+    pressed-highlight: color-mix(in srgb, var(--o3-color-palette-black) 5%, transparent),
+    disabled: color-mix(in srgb, var(--o3-color-palette-black) 50%, transparent),
+  ),
+  inverse: (
+    toggle-button-theme: 'inverse',
+    background: var(--o3-color-palette-white),
+    text: var(--o3-color-palette-black),
+    highlight: color-mix(in srgb, white 80%, transparent),
+    pressed-highlight: color-mix(in srgb, var(--o3-color-palette-white) 20%, transparent),
+    disabled: color-mix(in srgb, var(--o3-color-palette-white) 50%, transparent),
+    mix-blend-mode: lighten,
+  ),
+  opinion: (
+    toggle-button-theme: (
+      'color': 'oxford-40',
+    ),
+    background: var(--o3-color-palette-oxford-40),
+    text: var(--o3-color-palette-white),
+    highlight: var(--o3-color-palette-oxford-30),
+    pressed-highlight: color-mix(in srgb, var(--o3-color-palette-oxford-40) 20%, transparent),
+    disabled: color-mix(in srgb, var(--o3-color-palette-black) 50%, transparent),
+  ),
+  monochrome: (
+    toggle-button-theme: 'inverse',
+    background: var(--o3-color-palette-white),
+    text: var(--o3-color-palette-black),
+    highlight: var(--o3-color-palette-white-80),
+    pressed-highlight: color-mix(in srgb, var(--o3-color-palette-white) 20%, transparent),
+    disabled: color-mix(in srgb, var(--o3-color-palette-white) 50%, transparent),
+  ),
+  inverse-monochrome: (
+    toggle-button-theme: (
+      'color': 'black',
+    ),
+    background: var(--o3-color-palette-black),
+    text: var(--o3-color-palette-white),
+    highlight: var(--o3-color-palette-black-80),
+		pressed-highlight: color-mix(in srgb, var(--o3-color-palette-black) 20%, transparent),
+		disabled: color-mix(in srgb, var(--o3-color-palette-black) 50%, transparent),
+  ),
+  alphaville: (
+    toggle-button-theme: 'inverse',
+    background: var(--o3-color-palette-white),
+    text: var(--o3-color-palette-matisse-blue),
+		highlight: color-mix(in srgb, var(--o3-color-palette-white) 80%, transparent),
+    pressed-highlight: color-mix(in srgb, var(--o3-color-palette-white) 20%, transparent),
+		disabled: color-mix(in srgb, var(--o3-color-palette-white) 50%, transparent),
+  ),
 );
 
 @function getThemeColor($key) {
-	@return map-get($theme-map, $key);
+  @return map-get($theme-map, $key);
 }
 
 // to avoid creating --standard styles
-@function getThemeModifier ($theme) {
-	@if $theme == 'standard' {
-		@return '';
-	} @else {
-		@return '--#{$theme}';
-	}
+@function getThemeModifier($theme) {
+  @if $theme == 'standard' {
+    @return '';
+  } @else {
+    @return '--#{$theme}';
+  }
 }
 
 @mixin withTheme($theme) {
-	@if type-of($theme) == 'map' {
-		$theme-map: $theme !global;
-	} @else {
-		$theme-map: map-get($myft-lozenge-themes, $theme) !global;
-	}
+  @if type-of($theme) == 'map' {
+    $theme-map: $theme !global;
+  } @else {
+    $theme-map: map-get($myft-lozenge-themes, $theme) !global;
+  }
 
-	@content;
+  @content;
 
-	// stylelint-disable order/order
-	$theme-map: null !global;
+  // stylelint-disable order/order
+  $theme-map: null !global;
 }

package/mixins/lozenge/_toggle-icon.scss

@@ -1,50 +1,51 @@
-@import "./themes";
+@import './themes';
 
 @mixin getIcon($name, $color) {
-	@include oIconsContent(
-		$icon-name: $name,
-		$size: 10,
-		$color: $color,
-		$iconset-version: 1
-	);
-	content: "";
+  --icon-size: 12px;
+  content: '';
+  display: inline-block;
+  mask-image: var($name);
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  background-color: $color;
+  background-size: 25px;
+  margin: 0 6px -1px 0;
 }
 
 @mixin plusIcon($color) {
-	@include getIcon("plus", $color);
-	background-size: 25px;
-	margin: 0 6px -1px 0;
+  @include getIcon(--o3-icon-plus, $color);
 }
 
 @mixin tickIcon($color) {
-	@include getIcon("tick", $color);
-	background-size: 21px;
+  @include getIcon(--o3-icon-tick, $color);
 }
 
 @mixin myftToggleIcon($theme: standard) {
-	@include withTheme($theme) {
-		&::before {
-			@include plusIcon(getThemeColor(background));
-		}
-
-		&[aria-pressed="true"] {
-			&::before {
-				@include tickIcon(getThemeColor(text));
-			}
-		}
-
-		&[disabled],
-		&[disabled]:hover {
-			background: transparent;
-
-			&::before {
-				@include plusIcon(getThemeColor(disabled));
-				opacity: 0.5;
-			}
-
-			&[aria-pressed="true"]::before {
-				@include tickIcon(getThemeColor(disabled));
-			}
-		}
-	}
+  @include withTheme($theme) {
+    &::before {
+      @include getIcon(--o3-icon-plus, getThemeColor(background));
+    }
+
+    &[aria-pressed='true'] {
+      &::before {
+        @include getIcon(--o3-icon-tick, getThemeColor(text));
+      }
+    }
+
+    &[disabled],
+    &[disabled]:hover {
+      background: transparent;
+
+      &::before {
+        @include getIcon(--o3-icon-plus, getThemeColor(disabled));
+        opacity: 0.5;
+      }
+
+      &[aria-pressed='true']::before {
+        @include getIcon(--o3-icon-tick, getThemeColor(disabled));
+      }
+    }
+  }
 }

package/mixins/lozenge/main.scss

@@ -1,85 +1,100 @@
 @import './themes';
 @import './toggle-icon';
 
-@include oNormalise($opts: (
-	'elements': ('forms', 'text', 'links')
-));
-
 @mixin commonMyftLozengeStyles {
-	border-radius: 100px;
-	box-sizing: content-box;
-	display: block;
-	font-size: 14px;
-	margin: 6px 4px 6px 2px;
-	max-width: 200px;
-	outline-offset: 2px;
-	overflow: hidden;
-	text-align: left;
-	text-overflow: ellipsis;
-	transition: border-color, background-color 0.5s ease;
-	white-space: nowrap;
-
-	&[disabled]:hover,
-	&[disabled] {
-		background: transparent;
-		border: 1px solid getThemeColor(disabled);
-		color: getThemeColor(disabled);
-		opacity: unset;
-	}
+  border-radius: 100px;
+  box-sizing: content-box;
+  display: block;
+  margin: 6px 4px 6px 2px;
+  max-width: 200px;
+  outline-offset: 2px;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  transition: border-color, background-color 0.5s ease;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  font-family: var(--o3-font-family-metric);
+  text-decoration: none;
+  appearance: none;
+  color: getThemeColor(background);
+  border: 1px solid getThemeColor(background);
+  background-color: transparent;
+  &[disabled]:hover,
+  &[disabled] {
+    background: transparent;
+    border: 1px solid getThemeColor(disabled);
+    color: getThemeColor(disabled);
+    opacity: unset;
+  }
 }
 
 @mixin myftLozengeTheme($theme: standard) {
-	@include withTheme($theme) {
-		background-color: transparent;
-		border: 1px solid getThemeColor(background);
-		color: getThemeColor(background);
+  @include withTheme($theme) {
+    background-color: transparent;
+    border: 1px solid getThemeColor(background);
+    color: getThemeColor(background);
 
-		&:hover,
-		&:focus {
-			background-color: getThemeColor(pressed-highlight);
-			border-color: getThemeColor(background);
-			color: getThemeColor(background);
-		}
+    &:hover,
+    &:focus {
+      background-color: getThemeColor(pressed-highlight);
+      border-color: getThemeColor(background);
+      color: getThemeColor(background);
+    }
 
-		@include commonMyftLozengeStyles;
-		padding: 5px 12px;
-	}
+    @include commonMyftLozengeStyles;
+  }
 }
 
 @mixin myftLozenge($theme: standard) {
-	@include myftLozengeTheme($theme);
-	@include oTypographySans($weight: 'semibold', $scale: -1);
+  @include myftLozengeTheme($theme);
+  font-size: var(--o3-font-size-metric2-negative-1);
+  line-height: var(--o3-font-lineheight-metric2-negative-1);
+  font-weight: var(--o3-font-weight-semibold);
+  padding: 5px 12px;
+  min-height: 20px;
 }
 
 @mixin myftLozengeToggleButton($theme: standard) {
-	@include myftToggleIcon($theme);
-	@include withTheme($theme) {
-		@include oButtonsContent($opts: (
-			'type': 'secondary',
-			'theme': getThemeColor(toggle-button-theme)
-		));
+  @include myftToggleIcon($theme);
+  @include withTheme($theme) {
+    font-size: var(--o3-font-size-negative-1);
+    line-height: var(--o3-font-lineheight-negative-2);
+    font-weight: var(--o3-font-weight-semibold);
+    min-height: 28px;
+    min-width: 60px;
 
-		&[aria-pressed="true"] {
-			color: getThemeColor(text);
-			@if getThemeColor(mix-blend-mode) {
-				mix-blend-mode: getThemeColor(mix-blend-mode);
-			}
+    &[aria-pressed="true"] {
+      color: getThemeColor(text);
+      background-color: getThemeColor(background);
+      border-color: getThemeColor(background);
+      @if getThemeColor(mix-blend-mode) {
+        mix-blend-mode: getThemeColor(mix-blend-mode);
+      }
 
-			&:hover,
-			&:focus {
-				border-color: getThemeColor(highlight);
-				color: getThemeColor(text);
+      &:hover,
+      &:focus {
+        border-color: getThemeColor(highlight);
+        color: getThemeColor(text);
 
-				@if getThemeColor(mix-blend-mode) {
-					mix-blend-mode: getThemeColor(mix-blend-mode);
-					background-color: rgba(getThemeColor(highlight), 0.85);
-				} @else {
-					background-color: getThemeColor(highlight);
-				}
-			}
-		}
+        @if getThemeColor(mix-blend-mode) {
+          mix-blend-mode: getThemeColor(mix-blend-mode);
+          background-color: color-mix(in srgb, getThemeColor(highlight) 85%, transparent);
+        } @else {
+          background-color: getThemeColor(highlight);
+        }
+      }
+    }
+    &:hover,
+    &:focus {
+      background-color: getThemeColor(pressed-highlight);
+      border-color: getThemeColor(background);
+      color: getThemeColor(background);
+    }
 
-		@include commonMyftLozengeStyles;
-		padding: 0 12px;
-	}
+    @include commonMyftLozengeStyles;
+    padding: 0 var(--o3-spacing-3xs);
+  }
 }