@financial-times/o-labels 7.0.2 → 7.0.3
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 +7 -0
- package/main.scss +25 -35
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [7.0.3](https://github.com/Financial-Times/origami/compare/o-labels-v7.0.2...o-labels-v7.0.3) (2025-09-18)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* use correct label tokens for live label ([7051a86](https://github.com/Financial-Times/origami/commit/7051a86baffb13f5f18e7f7871002c5476e2dac0))
|
|
9
|
+
|
|
3
10
|
## [7.0.2](https://github.com/Financial-Times/origami/compare/o-labels-v7.0.1...o-labels-v7.0.2) (2025-06-30)
|
|
4
11
|
|
|
5
12
|
|
package/main.scss
CHANGED
|
@@ -23,38 +23,29 @@
|
|
|
23
23
|
/// @example scss - Timestamp label with inverse modifier class
|
|
24
24
|
/// @include oLabels($opts: ('timestamp': ('inverse': true));
|
|
25
25
|
/// @access public
|
|
26
|
-
@mixin oLabels(
|
|
27
|
-
$opts: (
|
|
28
|
-
'sizes': $_o-labels-standard-sizes,
|
|
26
|
+
@mixin oLabels($opts: ('sizes': $_o-labels-standard-sizes,
|
|
29
27
|
'states': $_o-labels-standard-states,
|
|
30
|
-
'indicators': (
|
|
31
|
-
'status': $_o-labels-indicator-status,
|
|
28
|
+
'indicators': ('status': $_o-labels-indicator-status,
|
|
32
29
|
'inverse': true,
|
|
33
30
|
),
|
|
34
|
-
'timestamp': (
|
|
35
|
-
'inverse': true,
|
|
31
|
+
'timestamp': ('inverse': true,
|
|
36
32
|
),
|
|
37
|
-
)
|
|
38
|
-
) {
|
|
33
|
+
)) {
|
|
39
34
|
// Get standard labels to include
|
|
40
35
|
$standard-label-sizes: map-get($opts, 'sizes');
|
|
41
36
|
$standard-label-states: map-get($opts, 'states');
|
|
42
37
|
// Get indicator labels to include
|
|
43
38
|
$indicator-label-opts: map-get($opts, 'indicators');
|
|
44
|
-
$indicator-label-opts: if(
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
()
|
|
48
|
-
);
|
|
39
|
+
$indicator-label-opts: if(type-of($indicator-label-opts)=='map',
|
|
40
|
+
$indicator-label-opts,
|
|
41
|
+
());
|
|
49
42
|
$indicator-label-status: map-get($indicator-label-opts, 'status');
|
|
50
43
|
$indicator-label-inverse: map-get($indicator-label-opts, 'inverse');
|
|
51
44
|
// Get whether to include the timestamp label
|
|
52
45
|
$timestamp-label: map-get($opts, 'timestamp');
|
|
53
|
-
$timestamp-label-inverse: if(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
$timestamp-label
|
|
57
|
-
);
|
|
46
|
+
$timestamp-label-inverse: if(type-of($timestamp-label)=='map',
|
|
47
|
+
map-get($timestamp-label, 'inverse'),
|
|
48
|
+
$timestamp-label);
|
|
58
49
|
|
|
59
50
|
// Base standard label styles
|
|
60
51
|
.o-labels {
|
|
@@ -91,29 +82,20 @@
|
|
|
91
82
|
// Indicator label styles
|
|
92
83
|
@if $indicator-label-status and _oLabelsSupports('indicators') {
|
|
93
84
|
.o-labels-indicator {
|
|
94
|
-
@include oLabelsIndicatorContent(
|
|
95
|
-
|
|
96
|
-
'block': true,
|
|
97
|
-
)
|
|
98
|
-
);
|
|
85
|
+
@include oLabelsIndicatorContent($opts: ('block': true,
|
|
86
|
+
));
|
|
99
87
|
}
|
|
100
88
|
|
|
101
89
|
.o-labels-indicator__status {
|
|
102
|
-
@include oLabelsIndicatorContent(
|
|
103
|
-
|
|
104
|
-
'element': 'status',
|
|
105
|
-
)
|
|
106
|
-
);
|
|
90
|
+
@include oLabelsIndicatorContent($opts: ('element': 'status',
|
|
91
|
+
));
|
|
107
92
|
}
|
|
108
93
|
|
|
109
94
|
@each $indicator-status in $indicator-label-status {
|
|
110
95
|
.o-labels-indicator--#{$indicator-status} {
|
|
111
|
-
@include oLabelsIndicatorContent(
|
|
112
|
-
$opts: (
|
|
113
|
-
'block': true,
|
|
96
|
+
@include oLabelsIndicatorContent($opts: ('block': true,
|
|
114
97
|
'modifier': $indicator-status,
|
|
115
|
-
)
|
|
116
|
-
);
|
|
98
|
+
));
|
|
117
99
|
}
|
|
118
100
|
}
|
|
119
101
|
|
|
@@ -128,8 +110,15 @@
|
|
|
128
110
|
font-weight: oFontsWeight('bold');
|
|
129
111
|
color: oPrivateFoundationGet('o3-color-palette-white');
|
|
130
112
|
border-radius: div(2, 16) * 1rem;
|
|
113
|
+
|
|
131
114
|
&.o-labels-indicator--live {
|
|
115
|
+
// This needs to use the correct label tokens in the Design System
|
|
132
116
|
background: oPrivateFoundationGet('o3-color-palette-crimson');
|
|
117
|
+
line-height: oPrivateFoundationGet('o3-type-label-line-height');
|
|
118
|
+
font-family: oPrivateFoundationGet('o3-type-label-font-family');
|
|
119
|
+
font-size: oPrivateFoundationGet('o3-type-label-font-size');
|
|
120
|
+
font-weight: oPrivateFoundationGet('o3-type-label-font-weight');
|
|
121
|
+
text-transform: oPrivateFoundationGet('o3-type-label-text-case');
|
|
133
122
|
}
|
|
134
123
|
|
|
135
124
|
&.o-labels-indicator--closed {
|
|
@@ -138,6 +127,7 @@
|
|
|
138
127
|
}
|
|
139
128
|
|
|
140
129
|
.o-labels-indicator.o-labels-indicator--badge.o-labels-indicator--inverse {
|
|
130
|
+
|
|
141
131
|
&.o-labels-indicator--live,
|
|
142
132
|
&.o-labels-indicator--closed {
|
|
143
133
|
background: transparent;
|
|
@@ -146,7 +136,7 @@
|
|
|
146
136
|
}
|
|
147
137
|
}
|
|
148
138
|
|
|
149
|
-
@if ($o-labels-is-silent ==
|
|
139
|
+
@if ($o-labels-is-silent ==false) {
|
|
150
140
|
@include oLabels();
|
|
151
141
|
|
|
152
142
|
// Set module to silent again
|
package/package.json
CHANGED