@financial-times/o-labels 7.1.0 → 7.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/demos/src/data/states-content.json +4 -0
- package/main.scss +1 -1
- package/package.json +1 -1
- package/src/scss/_brand.scss +52 -22
- package/src/scss/_mixins.scss +5 -4
- package/src/scss/_placeholders.scss +1 -1
- package/src/scss/_variables.scss +1 -0
- package/src/tsx/label.tsx +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [7.1.2](https://github.com/Financial-Times/origami/compare/o-labels-v7.1.1...o-labels-v7.1.2) (2025-10-28)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* force release of unreleased components ([#2264](https://github.com/Financial-Times/origami/issues/2264)) ([c4faddc](https://github.com/Financial-Times/origami/commit/c4faddc35b69c712ca6a967353871d9921cd4dfc))
|
|
9
|
+
|
|
10
|
+
## [7.1.1](https://github.com/Financial-Times/origami/compare/o-labels-v7.1.0...o-labels-v7.1.1) (2025-10-28)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* 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))
|
|
16
|
+
|
|
3
17
|
## [7.1.0](https://github.com/Financial-Times/origami/compare/o-labels-v7.0.3...o-labels-v7.1.0) (2025-10-22)
|
|
4
18
|
|
|
5
19
|
|
package/main.scss
CHANGED
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
padding: oPrivateSpacingByName('s1') oPrivateSpacingByName('s2');
|
|
110
110
|
font-weight: oFontsWeight('bold');
|
|
111
111
|
color: oPrivateFoundationGet('o3-color-palette-white');
|
|
112
|
-
border-radius:
|
|
112
|
+
border-radius: oPrivateFoundationGet('o3-border-radius-1');
|
|
113
113
|
|
|
114
114
|
&.o-labels-indicator--live {
|
|
115
115
|
// This needs to use the correct label tokens in the Design System
|
package/package.json
CHANGED
package/src/scss/_brand.scss
CHANGED
|
@@ -13,19 +13,22 @@
|
|
|
13
13
|
|
|
14
14
|
// Define shared brand configurations
|
|
15
15
|
$_o-labels-shared-brand-config: (
|
|
16
|
-
font-scale:
|
|
16
|
+
font-scale: 0,
|
|
17
17
|
padding-vertical: oPrivateSpacingByName('s1'),
|
|
18
18
|
padding-horizontal: oPrivateSpacingByName('s2'),
|
|
19
19
|
border-width: 1px,
|
|
20
|
+
line-height: oPrivateFoundationGet('o3-type-label-line-height'),
|
|
20
21
|
'big': (
|
|
21
22
|
font-scale: 0,
|
|
22
23
|
padding-vertical: oPrivateSpacingByName('s2'),
|
|
23
|
-
padding-horizontal: oPrivateSpacingByName('s2')
|
|
24
|
+
padding-horizontal: oPrivateSpacingByName('s2'),
|
|
25
|
+
line-height: oPrivateFoundationGet('o3-type-label-line-height')
|
|
24
26
|
),
|
|
25
27
|
'small': (
|
|
26
28
|
font-scale: -1,
|
|
27
29
|
padding-vertical: 2px,
|
|
28
|
-
padding-horizontal: 4px
|
|
30
|
+
padding-horizontal: 4px,
|
|
31
|
+
line-height: 1rem
|
|
29
32
|
)
|
|
30
33
|
);
|
|
31
34
|
|
|
@@ -35,11 +38,19 @@ $_o-labels-shared-brand-config: (
|
|
|
35
38
|
'variables': map-merge($_o-labels-shared-brand-config, (
|
|
36
39
|
text-color: oPrivateFoundationGet('o3-color-palette-black'),
|
|
37
40
|
background-color: oPrivateFoundationGet('o3-color-palette-wheat'),
|
|
41
|
+
border-color: oPrivateFoundationGet('o3-color-palette-wheat'),
|
|
38
42
|
'content-commercial': (
|
|
39
|
-
background-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', $percentage: 83.334)
|
|
43
|
+
background-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', $percentage: 83.334),
|
|
44
|
+
border-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', $percentage: 83.334)
|
|
40
45
|
),
|
|
41
46
|
'content-premium': (
|
|
42
|
-
background-color: oPrivateFoundationGet('o3-color-palette-
|
|
47
|
+
background-color: oPrivateFoundationGet('o3-color-palette-slate'),
|
|
48
|
+
border-color: oPrivateFoundationGet('o3-color-palette-slate')
|
|
49
|
+
),
|
|
50
|
+
'content-scoop': (
|
|
51
|
+
background-color: oPrivateFoundationGet('o3-color-palette-ft-pink'),
|
|
52
|
+
border-color: oPrivateFoundationGet('o3-color-palette-ft-pink'),
|
|
53
|
+
text-color: oPrivateFoundationGet('o3-color-palette-black-80')
|
|
43
54
|
),
|
|
44
55
|
'lifecycle-beta': (
|
|
45
56
|
background-color: oPrivateFoundationGet('o3-color-palette-paper'),
|
|
@@ -57,6 +68,7 @@ $_o-labels-shared-brand-config: (
|
|
|
57
68
|
'small',
|
|
58
69
|
'content-commercial',
|
|
59
70
|
'content-premium',
|
|
71
|
+
'content-scoop',
|
|
60
72
|
'lifecycle-beta'
|
|
61
73
|
)
|
|
62
74
|
));
|
|
@@ -67,61 +79,78 @@ $_o-labels-shared-brand-config: (
|
|
|
67
79
|
@include oBrandDefine('o-labels', 'internal', (
|
|
68
80
|
'variables': map-merge($_o-labels-shared-brand-config, (
|
|
69
81
|
background-color: oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-white', 10),
|
|
82
|
+
border-color: oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-white', 10),
|
|
70
83
|
'support-active': (
|
|
71
|
-
background-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', 70)
|
|
84
|
+
background-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', 70),
|
|
85
|
+
border-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', 70)
|
|
72
86
|
),
|
|
73
87
|
'support-dead': (
|
|
74
|
-
background-color: oPrivateFoundationGet('o3-color-palette-black')
|
|
88
|
+
background-color: oPrivateFoundationGet('o3-color-palette-black'),
|
|
89
|
+
border-color: oPrivateFoundationGet('o3-color-palette-black')
|
|
75
90
|
),
|
|
76
91
|
'support-deprecated': (
|
|
77
|
-
background-color: oPrivateFoundationGet('o3-color-palette-crimson')
|
|
92
|
+
background-color: oPrivateFoundationGet('o3-color-palette-crimson'),
|
|
93
|
+
border-color: oPrivateFoundationGet('o3-color-palette-crimson')
|
|
78
94
|
),
|
|
79
95
|
'support-experimental': (
|
|
80
|
-
background-color: oPrivateFoundationGet('o3-color-palette-lemon')
|
|
96
|
+
background-color: oPrivateFoundationGet('o3-color-palette-lemon'),
|
|
97
|
+
border-color: oPrivateFoundationGet('o3-color-palette-lemon')
|
|
81
98
|
),
|
|
82
99
|
'support-maintained': (
|
|
83
|
-
background-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', 70)
|
|
100
|
+
background-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', 70),
|
|
101
|
+
border-color: oPrivateColorsMix('o3-color-palette-jade', 'o3-color-palette-black', 70)
|
|
84
102
|
),
|
|
85
103
|
'tier-bronze': (
|
|
86
104
|
// NOTE: service tiers not in o-colors yet, will be moved if another
|
|
87
105
|
// component needs to use these colours
|
|
88
|
-
background-color: #b78d83
|
|
106
|
+
background-color: #b78d83,
|
|
107
|
+
border-color: #b78d83
|
|
89
108
|
),
|
|
90
109
|
'tier-gold': (
|
|
91
110
|
// NOTE: service tiers not in o-colors yet, will be moved if another
|
|
92
111
|
// component needs to use these colours
|
|
93
|
-
background-color: #b89d62
|
|
112
|
+
background-color: #b89d62,
|
|
113
|
+
border-color: #b89d62
|
|
94
114
|
),
|
|
95
115
|
'tier-platinum': (
|
|
96
116
|
// NOTE: service tiers not in o-colors yet, will be moved if another
|
|
97
117
|
// component needs to use these colours
|
|
98
|
-
background-color: #e5e4e2
|
|
118
|
+
background-color: #e5e4e2,
|
|
119
|
+
border-color: #e5e4e2
|
|
99
120
|
),
|
|
100
121
|
'tier-silver': (
|
|
101
122
|
// NOTE: service tiers not in o-colors yet, will be moved if another
|
|
102
123
|
// component needs to use these colours
|
|
103
|
-
background-color: #c0c0c0
|
|
124
|
+
background-color: #c0c0c0,
|
|
125
|
+
border-color: #c0c0c0
|
|
104
126
|
),
|
|
105
127
|
'oxford': (
|
|
106
|
-
background-color: oPrivateFoundationGet('o3-color-palette-oxford')
|
|
128
|
+
background-color: oPrivateFoundationGet('o3-color-palette-oxford'),
|
|
129
|
+
border-color: oPrivateFoundationGet('o3-color-palette-oxford')
|
|
107
130
|
),
|
|
108
131
|
'teal': (
|
|
109
|
-
background-color: oPrivateFoundationGet('o3-color-palette-teal-50')
|
|
132
|
+
background-color: oPrivateFoundationGet('o3-color-palette-teal-50'),
|
|
133
|
+
border-color: oPrivateFoundationGet('o3-color-palette-teal-50')
|
|
110
134
|
),
|
|
111
135
|
'lemon': (
|
|
112
|
-
background-color: oPrivateFoundationGet('o3-color-palette-lemon')
|
|
136
|
+
background-color: oPrivateFoundationGet('o3-color-palette-lemon'),
|
|
137
|
+
border-color: oPrivateFoundationGet('o3-color-palette-lemon')
|
|
113
138
|
),
|
|
114
139
|
'slate': (
|
|
115
|
-
background-color: oPrivateFoundationGet('o3-color-palette-slate')
|
|
140
|
+
background-color: oPrivateFoundationGet('o3-color-palette-slate'),
|
|
141
|
+
border-color: oPrivateFoundationGet('o3-color-palette-slate')
|
|
116
142
|
),
|
|
117
143
|
'jade': (
|
|
118
|
-
background-color: oPrivateFoundationGet('o3-color-palette-jade')
|
|
144
|
+
background-color: oPrivateFoundationGet('o3-color-palette-jade'),
|
|
145
|
+
border-color: oPrivateFoundationGet('o3-color-palette-jade')
|
|
119
146
|
),
|
|
120
147
|
'crimson': (
|
|
121
|
-
background-color: oPrivateFoundationGet('o3-color-palette-crimson')
|
|
148
|
+
background-color: oPrivateFoundationGet('o3-color-palette-crimson'),
|
|
149
|
+
border-color: oPrivateFoundationGet('o3-color-palette-crimson')
|
|
122
150
|
),
|
|
123
151
|
'mandarin': (
|
|
124
|
-
background-color: oPrivateFoundationGet('o3-color-palette-mandarin')
|
|
152
|
+
background-color: oPrivateFoundationGet('o3-color-palette-mandarin'),
|
|
153
|
+
border-color: oPrivateFoundationGet('o3-color-palette-mandarin')
|
|
125
154
|
)
|
|
126
155
|
)),
|
|
127
156
|
'supports-variants': (
|
|
@@ -151,7 +180,8 @@ $_o-labels-shared-brand-config: (
|
|
|
151
180
|
@if oBrandIs('whitelabel') {
|
|
152
181
|
@include oBrandDefine('o-labels', 'whitelabel', (
|
|
153
182
|
'variables': map-merge($_o-labels-shared-brand-config, (
|
|
154
|
-
background-color: oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-white', 10)
|
|
183
|
+
background-color: oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-white', 10),
|
|
184
|
+
border-color: oPrivateColorsMix('o3-color-palette-black', 'o3-color-palette-white', 10)
|
|
155
185
|
)),
|
|
156
186
|
'supports-variants': (
|
|
157
187
|
'big',
|
package/src/scss/_mixins.scss
CHANGED
|
@@ -7,21 +7,23 @@
|
|
|
7
7
|
@mixin _oLabelsBaseContent() {
|
|
8
8
|
@include oPrivateTypographySans(
|
|
9
9
|
$scale: _oLabelsGet('font-scale'),
|
|
10
|
-
$weight: '
|
|
10
|
+
$weight: 'regular'
|
|
11
11
|
);
|
|
12
|
-
line-height:
|
|
12
|
+
line-height: _oLabelsGet('line-height');
|
|
13
13
|
text-align: center;
|
|
14
14
|
display: inline-block;
|
|
15
15
|
box-sizing: border-box;
|
|
16
16
|
margin: 0;
|
|
17
17
|
text-decoration: none;
|
|
18
|
+
text-transform: oPrivateFoundationGet('o3-type-label-text-case');
|
|
18
19
|
padding: calc(
|
|
19
20
|
#{_oLabelsGet('padding-vertical')} - #{_oLabelsGet('border-width')}
|
|
20
21
|
)
|
|
21
22
|
calc(#{_oLabelsGet('padding-horizontal')} - #{_oLabelsGet('border-width')});
|
|
22
23
|
color: _oLabelsGet('text-color');
|
|
23
24
|
background-color: _oLabelsGet('background-color');
|
|
24
|
-
border: solid _oLabelsGet('border-width')
|
|
25
|
+
border: solid _oLabelsGet('border-width') _oLabelsGet('border-color');
|
|
26
|
+
border-radius: oPrivateFoundationGet('o3-border-radius-1');
|
|
25
27
|
}
|
|
26
28
|
|
|
27
29
|
/// Size modifiers for labels.
|
|
@@ -171,7 +173,6 @@
|
|
|
171
173
|
$scale: _oLabelsGet('font-scale', $size);
|
|
172
174
|
@if $scale {
|
|
173
175
|
@include oPrivateTypographySans($scale);
|
|
174
|
-
line-height: 1;
|
|
175
176
|
}
|
|
176
177
|
padding: calc(
|
|
177
178
|
#{_oLabelsGet('padding-vertical', $size)} - #{_oLabelsGet('border-width')}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Do not output placeholders twice i.e. if o-labels is imported twice.
|
|
2
2
|
// This is a temporary variable, until we can use the new sass `@use` feature
|
|
3
|
-
// that will not have the problem of re-outputting placeholders on every import
|
|
3
|
+
// that will not have the problem of re-outputting placeholders on every import.
|
|
4
4
|
$_o-labels-first-import: true !default;
|
|
5
5
|
|
|
6
6
|
@if $_o-labels-first-import == true {
|
package/src/scss/_variables.scss
CHANGED