@financial-times/o-labels 7.1.0 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [8.0.0](https://github.com/Financial-Times/origami/compare/o-labels-v7.1.2...o-labels-v8.0.0) (2026-02-05)
+
+
+### ⚠ BREAKING CHANGES
+
+* Replace `scoop` with `exclusive`
+
+### Features
+
+* Replace `scoop` with `exclusive` ([8ff2c0d](https://github.com/Financial-Times/origami/commit/8ff2c0d3cfd25cec7d3d5046ca66134fc1af1633))
+
+## [7.1.2](https://github.com/Financial-Times/origami/compare/o-labels-v7.1.1...o-labels-v7.1.2) (2025-10-28)
+
+
+### Bug Fixes
+
+* force release of unreleased components ([#2264](https://github.com/Financial-Times/origami/issues/2264)) ([c4faddc](https://github.com/Financial-Times/origami/commit/c4faddc35b69c712ca6a967353871d9921cd4dfc))
+
+## [7.1.1](https://github.com/Financial-Times/origami/compare/o-labels-v7.1.0...o-labels-v7.1.1) (2025-10-28)
+
+
+### Bug Fixes
+
+* update o-labels badge styling to match new designs ([#2246](https://github.com/Financial-Times/origami/issues/2246)) ([66aa1fc](https://github.com/Financial-Times/origami/commit/66aa1fc8c6ee2d95a7c1d531c15875f66c70d1ab))
+
 ## [7.1.0](https://github.com/Financial-Times/origami/compare/o-labels-v7.0.3...o-labels-v7.1.0) (2025-10-22)
 
 

package/MIGRATION.md

@@ -1,5 +1,14 @@
 # Migration Guide
 
+## Migrating from v7 to v8
+
+This release removes the `content-scoop` label and replaces with `content-exclusive'. Ensure any references to `content-scoop` are updated:
+
+```diff
+- <span class="o-labels o-labels--content-scoop">Exclusive</span>
++ <span class="o-labels o-labels--content-exclusive">Exclusive</span>
+```
+
 ## Migrating from v6 to v7
 
 This major release introduces a new design language and visually breaking changes. This includes mobile optimised typography, icons, and buttons. It also removes peer dependencies from deprecated "o2" components.

package/demos/src/data/states-content.json

@@ -15,6 +15,10 @@
 		{
 			"id": "content-premium",
 			"content": "Premium"
+		},
+		{
+			"id": "content-exclusive",
+			"content": "Exclusive"
 		}
 	]
 }

package/main.scss

@@ -109,7 +109,7 @@
 			padding: oPrivateSpacingByName('s1') oPrivateSpacingByName('s2');
 			font-weight: oFontsWeight('bold');
 			color: oPrivateFoundationGet('o3-color-palette-white');
-			border-radius: div(2, 16) * 1rem;
+			border-radius: oPrivateFoundationGet('o3-border-radius-1');
 
 			&.o-labels-indicator--live {
 				// This needs to use the correct label tokens in the Design System

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@financial-times/o-labels",
-	"version": "7.1.0",
+	"version": "8.0.0",
 	"description": "Labels for content classification or to emphasise a value. Provides customisation options with the FT colour palette.",
 	"keywords": [
 		"label",

package/src/scss/_brand.scss

@@ -13,19 +13,22 @@
 
 // Define shared brand configurations
 $_o-labels-shared-brand-config: (
-	font-scale: -1,
+	font-scale: 0,
 	padding-vertical: oPrivateSpacingByName('s1'),
 	padding-horizontal: oPrivateSpacingByName('s2'),
 	border-width: 1px,
+	line-height: oPrivateFoundationGet('o3-type-label-line-height'),
 	'big': (
 		font-scale: 0,
 		padding-vertical: oPrivateSpacingByName('s2'),
-		padding-horizontal: oPrivateSpacingByName('s2')
+		padding-horizontal: oPrivateSpacingByName('s2'),
+		line-height: oPrivateFoundationGet('o3-type-label-line-height')
 	),
 	'small': (
 		font-scale: -1,
 		padding-vertical: 2px,
-		padding-horizontal: 4px
+		padding-horizontal: 4px,
+		line-height: 1rem
 	)
 );
 
@@ -35,11 +38,19 @@ $_o-labels-shared-brand-config: (
 		'variables': map-merge($_o-labels-shared-brand-config, (
 			text-color: oPrivateFoundationGet('o3-color-palette-black'),
 			background-color: oPrivateFoundationGet('o3-color-palette-wheat'),
+			border-color: oPrivateFoundationGet('o3-color-palette-wheat'),
 			'content-commercial': (
-				background-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', $percentage: 83.334)
+				background-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', $percentage: 83.334),
+				border-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', $percentage: 83.334)
 			),
 			'content-premium': (
-				background-color: oPrivateFoundationGet('o3-color-palette-black')
+				background-color: oPrivateFoundationGet('o3-color-palette-slate'),
+				border-color: oPrivateFoundationGet('o3-color-palette-slate')
+			),
+			'content-exclusive': (
+				background-color: oPrivateFoundationGet('o3-color-palette-ft-pink'),
+				border-color: oPrivateFoundationGet('o3-color-palette-ft-pink'),
+				text-color: oPrivateFoundationGet('o3-color-palette-black-80')
 			),
 			'lifecycle-beta': (
 				background-color: oPrivateFoundationGet('o3-color-palette-paper'),
@@ -57,6 +68,7 @@ $_o-labels-shared-brand-config: (
 			'small',
 			'content-commercial',
 			'content-premium',
+			'content-exclusive',
 			'lifecycle-beta'
 		)
 	));
@@ -67,61 +79,78 @@ $_o-labels-shared-brand-config: (
 	@include oBrandDefine('o-labels', 'internal', (
 		'variables': map-merge($_o-labels-shared-brand-config, (
 			background-color: oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-white', 10),
+			border-color: oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-white', 10),
 			'support-active': (
-				background-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', 70)
+				background-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', 70),
+				border-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', 70)
 			),
 			'support-dead': (
-				background-color: oPrivateFoundationGet('o3-color-palette-black')
+				background-color: oPrivateFoundationGet('o3-color-palette-black'),
+				border-color: oPrivateFoundationGet('o3-color-palette-black')
 			),
 			'support-deprecated': (
-				background-color: oPrivateFoundationGet('o3-color-palette-crimson')
+				background-color: oPrivateFoundationGet('o3-color-palette-crimson'),
+				border-color: oPrivateFoundationGet('o3-color-palette-crimson')
 			),
 			'support-experimental': (
-				background-color: oPrivateFoundationGet('o3-color-palette-lemon')
+				background-color: oPrivateFoundationGet('o3-color-palette-lemon'),
+				border-color: oPrivateFoundationGet('o3-color-palette-lemon')
 			),
 			'support-maintained': (
-				background-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', 70)
+				background-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', 70),
+				border-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', 70)
 			),
 			'tier-bronze': (
 				// NOTE: service tiers not in o-colors yet, will be moved if another
 				// component needs to use these colours
-				background-color: #b78d83
+				background-color: #b78d83,
+				border-color: #b78d83
 			),
 			'tier-gold': (
 				// NOTE: service tiers not in o-colors yet, will be moved if another
 				// component needs to use these colours
-				background-color: #b89d62
+				background-color: #b89d62,
+				border-color: #b89d62
 			),
 			'tier-platinum': (
 				// NOTE: service tiers not in o-colors yet, will be moved if another
 				// component needs to use these colours
-				background-color: #e5e4e2
+				background-color: #e5e4e2,
+				border-color: #e5e4e2
 			),
 			'tier-silver': (
 				// NOTE: service tiers not in o-colors yet, will be moved if another
 				// component needs to use these colours
-				background-color: #c0c0c0
+				background-color: #c0c0c0,
+				border-color: #c0c0c0
 			),
 			'oxford': (
-				background-color: oPrivateFoundationGet('o3-color-palette-oxford')
+				background-color: oPrivateFoundationGet('o3-color-palette-oxford'),
+				border-color: oPrivateFoundationGet('o3-color-palette-oxford')
 			),
 			'teal': (
-				background-color: oPrivateFoundationGet('o3-color-palette-teal-50')
+				background-color: oPrivateFoundationGet('o3-color-palette-teal-50'),
+				border-color: oPrivateFoundationGet('o3-color-palette-teal-50')
 			),
 			'lemon': (
-				background-color: oPrivateFoundationGet('o3-color-palette-lemon')
+				background-color: oPrivateFoundationGet('o3-color-palette-lemon'),
+				border-color: oPrivateFoundationGet('o3-color-palette-lemon')
 			),
 			'slate': (
-				background-color: oPrivateFoundationGet('o3-color-palette-slate')
+				background-color: oPrivateFoundationGet('o3-color-palette-slate'),
+				border-color: oPrivateFoundationGet('o3-color-palette-slate')
 			),
 			'jade': (
-				background-color: oPrivateFoundationGet('o3-color-palette-jade')
+				background-color: oPrivateFoundationGet('o3-color-palette-jade'),
+				border-color: oPrivateFoundationGet('o3-color-palette-jade')
 			),
 			'crimson': (
-				background-color: oPrivateFoundationGet('o3-color-palette-crimson')
+				background-color: oPrivateFoundationGet('o3-color-palette-crimson'),
+				border-color: oPrivateFoundationGet('o3-color-palette-crimson')
 			),
 			'mandarin': (
-				background-color: oPrivateFoundationGet('o3-color-palette-mandarin')
+				background-color: oPrivateFoundationGet('o3-color-palette-mandarin'),
+				border-color: oPrivateFoundationGet('o3-color-palette-mandarin')
 			)
 		)),
 		'supports-variants': (
@@ -151,7 +180,8 @@ $_o-labels-shared-brand-config: (
 @if oBrandIs('whitelabel') {
 	@include oBrandDefine('o-labels', 'whitelabel', (
 		'variables': map-merge($_o-labels-shared-brand-config, (
-			background-color: oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-white', 10)
+			background-color: oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-white', 10),
+			border-color: oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-white', 10)
 		)),
 		'supports-variants': (
 			'big',

package/src/scss/_mixins.scss

@@ -7,21 +7,23 @@
 @mixin _oLabelsBaseContent() {
 	@include oPrivateTypographySans(
 		$scale: _oLabelsGet('font-scale'),
-		$weight: 'semibold'
+		$weight: 'regular'
 	);
-	line-height: 1em;
+	line-height: _oLabelsGet('line-height');
 	text-align: center;
 	display: inline-block;
 	box-sizing: border-box;
 	margin: 0;
 	text-decoration: none;
+	text-transform: oPrivateFoundationGet('o3-type-label-text-case');
 	padding: calc(
 			#{_oLabelsGet('padding-vertical')} - #{_oLabelsGet('border-width')}
 		)
 		calc(#{_oLabelsGet('padding-horizontal')} - #{_oLabelsGet('border-width')});
 	color: _oLabelsGet('text-color');
 	background-color: _oLabelsGet('background-color');
-	border: solid _oLabelsGet('border-width') transparent;
+	border: solid _oLabelsGet('border-width') _oLabelsGet('border-color');
+	border-radius: oPrivateFoundationGet('o3-border-radius-1');
 }
 
 /// Size modifiers for labels.
@@ -171,7 +173,6 @@
 	$scale: _oLabelsGet('font-scale', $size);
 	@if $scale {
 		@include oPrivateTypographySans($scale);
-		line-height: 1;
 	}
 	padding: calc(
 			#{_oLabelsGet('padding-vertical', $size)} - #{_oLabelsGet('border-width')}

package/src/scss/_placeholders.scss

@@ -1,6 +1,6 @@
 // Do not output placeholders twice i.e. if o-labels is imported twice.
 // This is a temporary variable, until we can use the new sass `@use` feature
-// that will not have the problem of re-outputting placeholders on every import
+// that will not have the problem of re-outputting placeholders on every import.
 $_o-labels-first-import: true !default;
 
 @if $_o-labels-first-import == true {

package/src/scss/_variables.scss

@@ -30,6 +30,7 @@ $_o-labels-standard-sizes: (
 $_o-labels-standard-states: (
 	'content-commercial',
 	'content-premium',
+	'content-exclusive',
 
 	'lifecycle-beta',
 

package/src/tsx/label.tsx

@@ -9,14 +9,10 @@ export interface SupportLabelProps extends BaseLabelProps {
 		| 'support-dead'
 		| 'support-deprecated'
 		| 'support-experimental'
-		| 'support-maintained'
+		| 'support-maintained';
 }
 export interface ServiceLabelProps extends BaseLabelProps {
-	state:
-		| 'tier-bronze'
-		| 'tier-gold'
-		| 'tier-platinum'
-		| 'tier-silver'
+	state: 'tier-bronze' | 'tier-gold' | 'tier-platinum' | 'tier-silver';
 }
 export interface ColourLabelProps extends BaseLabelProps {
 	state:
@@ -26,23 +22,24 @@ export interface ColourLabelProps extends BaseLabelProps {
 		| 'slate'
 		| 'jade'
 		| 'crimson'
-		| 'mandarin'
+		| 'mandarin';
 }
 export interface ContentLabelProps extends BaseLabelProps {
-	state:
-		| 'content-commercial'
-		| 'content-premium'
+	state: 'content-commercial' | 'content-premium' | 'content-exclusive';
 }
 export interface LifeCycleLabelProps extends BaseLabelProps {
-	state:
-		| 'lifecycle-beta'
+	state: 'lifecycle-beta';
 }
 
 function SimpleLabel({
 	size,
 	state,
 	children,
-}: {size?: string, state?: string, children: string}): React.JSX.Element {
+}: {
+	size?: string;
+	state?: string;
+	children: string;
+}): React.JSX.Element {
 	const classNames = ['o-labels'];
 	if (size) {
 		classNames.push(`o-labels--${size}`);
@@ -54,23 +51,23 @@ function SimpleLabel({
 }
 
 export function BaseLabel(props: BaseLabelProps): React.JSX.Element {
-	return SimpleLabel(props)
+	return SimpleLabel(props);
 }
 
 export function SupportLabel(props: SupportLabelProps): React.JSX.Element {
-	return SimpleLabel(props)
+	return SimpleLabel(props);
 }
 export function ServiceLabel(props: ServiceLabelProps): React.JSX.Element {
-	return SimpleLabel(props)
+	return SimpleLabel(props);
 }
 export function ColourLabel(props: ColourLabelProps): React.JSX.Element {
-	return SimpleLabel(props)
+	return SimpleLabel(props);
 }
 export function ContentLabel(props: ContentLabelProps): React.JSX.Element {
-	return SimpleLabel(props)
+	return SimpleLabel(props);
 }
 export function LifeCycleLabel(props: LifeCycleLabelProps): React.JSX.Element {
-	return SimpleLabel(props)
+	return SimpleLabel(props);
 }
 
 export interface IndicatorLabelProps {
@@ -92,16 +89,17 @@ export function IndicatorLabel({
 	if (inverse) {
 		classNames.push('o-labels-indicator--inverse');
 	}
-	if(badge) {
+	if (badge) {
 		classNames.push('o-labels-indicator--badge');
 	}
 	return (
 		<span className={classNames.join(' ')}>
-			<span className="o-labels-indicator__status"> {status || indicator} </span>
+			<span className="o-labels-indicator__status">
+				{' '}
+				{status || indicator}{' '}
+			</span>
 			{timestamp && (
-				<span className="o-labels-indicator__timestamp">
-					{timestamp}
-				</span>
+				<span className="o-labels-indicator__timestamp">{timestamp}</span>
 			)}
 		</span>
 	);
@@ -109,17 +107,16 @@ export function IndicatorLabel({
 
 export interface TimestampLabelProps {
 	inverse?: boolean;
-	children?: React.JSX.Element | React.JSX.Element[]
+	children?: React.JSX.Element | React.JSX.Element[];
 }
 
-export function TimestampLabel({inverse, children}: TimestampLabelProps): React.JSX.Element {
+export function TimestampLabel({
+	inverse,
+	children,
+}: TimestampLabelProps): React.JSX.Element {
 	const classNames = ['o-labels-timestamp'];
 	if (inverse) {
 		classNames.push('o-labels-timestamp--inverse');
 	}
-	return (
-		<span className={classNames.join(' ')}>
-			{children}
-		</span>
-	);
+	return <span className={classNames.join(' ')}>{children}</span>;
 }