Skip to content

Commit 63557ce

Browse files
R-BowerR-Bower
authored
Merge pull request #209 from qualcomm/olaf/new-tokens-updates
chore: more token updates and fixes
2 parents 940cd28 + e905eff commit 63557ce

52 files changed

Lines changed: 525 additions & 201 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/common/qds-core/CHANGELOG.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,21 @@
11
# @qualcomm-ui/qds-core Changelog
22

3+
## 1.22.0 (2026/03/30)
4+
5+
### Features
6+
7+
- [icon-button]: add shape prop ([9c93d49](https://github.com/qualcomm/qualcomm-ui/commit/9c93d49))
8+
9+
### Bug Fixes
10+
11+
- [badge]: update tokens and apply text-box cap-to-baseline ([9804845](https://github.com/qualcomm/qualcomm-ui/commit/9804845))
12+
- [progress]: update disabled state tokens ([2e10e52](https://github.com/qualcomm/qualcomm-ui/commit/2e10e52))
13+
- [alert-banner]: use compact icon button for close action ([74d1316](https://github.com/qualcomm/qualcomm-ui/commit/74d1316))
14+
- [tag]: update tokens and apply text-box cap-to-baseline ([3f94cdf](https://github.com/qualcomm/qualcomm-ui/commit/3f94cdf))
15+
- [button]: update variant tokens and icon color system ([bfff8f1](https://github.com/qualcomm/qualcomm-ui/commit/bfff8f1))
16+
- [number-input]: disabled & readonly background ([949b174](https://github.com/qualcomm/qualcomm-ui/commit/949b174))
17+
- [inline-notification]: update border-radius ([cfc3745](https://github.com/qualcomm/qualcomm-ui/commit/cfc3745))
18+
319
## 1.21.1 (2026/03/25)
420

521
### Bug Fixes

‎packages/common/qds-core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@qualcomm-ui/qds-core",
3-
"version": "1.21.1",
3+
"version": "1.22.0",
44
"description": "qds core components",
55
"author": "Ryan Bower",
66
"license": "BSD-3-Clause-Clear",

‎packages/common/qds-core/src/alert-banner/alert-banner.api.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,19 @@ export function createQdsAlertBannerApi(
2525
const emphasis = props.emphasis || "info"
2626
const variant = props.variant || "strong"
2727

28+
const closeButtonEmphasis =
29+
variant === "strong"
30+
? emphasis === "warning"
31+
? "black-persistent"
32+
: "inverse"
33+
: "neutral"
34+
2835
const commonBindings: QdsAlertBannerCommonBindings = {
2936
"data-scope": "alert-banner",
3037
}
3138

3239
return {
40+
closeButtonEmphasis,
3341
emphasis,
3442
variant,
3543

‎packages/common/qds-core/src/alert-banner/alert-banner.types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,13 @@ export interface QdsAlertBannerCloseButtonBindings
8484
"data-part": "close-button"
8585
}
8686

87+
export type QdsAlertBannerCloseButtonEmphasis =
88+
| "black-persistent"
89+
| "inverse"
90+
| "neutral"
91+
8792
export interface QdsAlertBannerApi {
93+
closeButtonEmphasis: QdsAlertBannerCloseButtonEmphasis
8894
emphasis: QdsAlertBannerEmphasis
8995
variant: QdsAlertBannerVariant
9096

‎packages/common/qds-core/src/alert-banner/qds-alert-banner.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100
margin-inline-start: var(--spacing-120);
101101
}
102102

103-
.qui-alert-banner__close-button {
103+
.qui-alert-banner__root .qui-alert-banner__close-button {
104104
flex-shrink: 0;
105105
margin-inline-start: var(--spacing-120);
106106
}

‎packages/common/qds-core/src/badge/qds-badge-colors.css‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
}
66
&[data-emphasis="brand"] {
77
--badge-background: var(--color-background-brand-primary);
8+
--badge-text: var(--color-utility-persistent-white);
89
}
910
&[data-emphasis="info"] {
1011
--badge-background: var(--color-background-support-info);
@@ -17,37 +18,48 @@
1718
}
1819
&[data-emphasis="amber"] {
1920
--badge-background: var(--color-category-amber-strong);
21+
--badge-text: var(--color-utility-persistent-white);
2022
}
2123
&[data-emphasis="blue"] {
2224
--badge-background: var(--color-category-blue-strong);
25+
--badge-text: var(--color-utility-persistent-white);
2326
}
2427
&[data-emphasis="cyan"] {
2528
--badge-background: var(--color-category-cyan-strong);
29+
--badge-text: var(--color-utility-persistent-white);
2630
}
2731
&[data-emphasis="green"] {
2832
--badge-background: var(--color-category-green-strong);
33+
--badge-text: var(--color-utility-persistent-white);
2934
}
3035
&[data-emphasis="lime"],
3136
&[data-emphasis="kiwi"] {
3237
--badge-background: var(--color-category-lime-strong);
38+
--badge-text: var(--color-utility-persistent-white);
3339
}
3440
&[data-emphasis="magenta"] {
3541
--badge-background: var(--color-category-magenta-strong);
42+
--badge-text: var(--color-utility-persistent-white);
3643
}
3744
&[data-emphasis="orange"] {
3845
--badge-background: var(--color-category-orange-strong);
46+
--badge-text: var(--color-utility-persistent-white);
3947
}
4048
&[data-emphasis="purple"] {
4149
--badge-background: var(--color-category-purple-strong);
50+
--badge-text: var(--color-utility-persistent-white);
4251
}
4352
&[data-emphasis="red"] {
4453
--badge-background: var(--color-category-red-strong);
54+
--badge-text: var(--color-utility-persistent-white);
4555
}
4656
&[data-emphasis="teal"] {
4757
--badge-background: var(--color-category-teal-strong);
58+
--badge-text: var(--color-utility-persistent-white);
4859
}
4960
&[data-emphasis="violet"] {
5061
--badge-background: var(--color-category-violet-strong);
62+
--badge-text: var(--color-utility-persistent-white);
5163
}
5264
&[data-emphasis="warning"] {
5365
--badge-background: var(--color-background-support-warning);
@@ -121,7 +133,7 @@
121133
}
122134
&[data-emphasis="neutral"] {
123135
--badge-background: var(--color-background-support-neutral);
124-
--badge-text: var(--color-utility-persistent-white);
136+
--badge-text: var(--color-text-neutral-inverse);
125137
}
126138
}
127139

‎packages/common/qds-core/src/badge/qds-icon-badge.css‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,29 @@
1-
.qui-badge__root {
1+
.qui-badge__root[data-scope="icon-badge"] {
22
&[data-size="xxs"] {
33
--icon-radius: var(--border-radius-xs);
44
--icon-size: var(--sizing-60);
55
}
66
&[data-size="xs"] {
7-
--icon-radius: var(--border-radius-xs);
7+
--icon-radius: var(--border-radius-md);
88
--icon-size: var(--sizing-70);
99
}
1010
&[data-size="sm"] {
11-
--icon-radius: var(--border-radius-sm);
11+
--icon-radius: var(--border-radius-md);
1212
--icon-size: var(--sizing-80);
1313
}
1414
&[data-size="md"] {
15-
--icon-radius: var(--border-radius-sm);
15+
--icon-radius: var(--border-radius-md);
1616
--icon-size: var(--sizing-90);
1717
}
1818
&[data-size="lg"] {
1919
--icon-radius: var(--border-radius-md);
2020
--icon-size: var(--sizing-120);
2121
}
2222
&[data-size="xl"] {
23-
--icon-radius: var(--border-radius-lg);
23+
--icon-radius: var(--border-radius-md);
2424
--icon-size: var(--sizing-140);
2525
}
26-
}
2726

28-
.qui-badge__root[data-scope="icon-badge"] {
2927
background: var(--badge-background);
3028
border: solid var(--border-size, 0) var(--badge-border);
3129
border-radius: var(--icon-radius);

‎packages/common/qds-core/src/badge/qds-number-badge.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
1-
.qui-badge__root {
1+
.qui-badge__root[data-scope="number-badge"] {
2+
> span {
3+
text-box: cap alphabetic;
4+
}
5+
26
&[data-size="sm"] {
37
font: var(--font-static-body-xs-default);
48
--count-size: var(--sizing-80);
9+
padding: var(--spacing-0) var(--spacing-40);
510
}
611
&[data-size="md"] {
712
font: var(--font-static-body-sm-default);
813
--count-size: var(--sizing-90);
14+
padding: var(--spacing-0) var(--spacing-50);
915
}
1016
&[data-size="lg"] {
1117
font: var(--font-static-body-md-default);
1218
--count-size: var(--sizing-120);
19+
padding: var(--spacing-0) var(--spacing-70);
1320
}
14-
}
1521

16-
.qui-badge__root[data-scope="number-badge"] {
1722
background: var(--badge-background);
1823
block-size: var(--count-size);
1924
border: solid var(--border-size, 0) var(--badge-border);
2025
border-radius: var(--border-radius-rounded);
2126
color: var(--badge-text);
2227
min-inline-size: var(--count-size);
23-
padding: 0;
24-
25-
&[data-overflow] {
26-
padding: 0 var(--spacing-50);
27-
}
2828

2929
&[data-emphasis="neutral"] {
3030
--badge-background: var(--color-background-support-neutral);

‎packages/common/qds-core/src/badge/qds-status-badge.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.qui-badge__root {
1+
.qui-badge__root[data-scope="status-badge"] {
22
&[data-size="xxs"] {
33
--status-size: var(--sizing-40);
44
}
@@ -17,9 +17,7 @@
1717
&[data-size="xl"] {
1818
--status-size: var(--sizing-80);
1919
}
20-
}
2120

22-
.qui-badge__root[data-scope="status-badge"] {
2321
background: var(--badge-background);
2422
border: solid var(--border-size, 0) var(--badge-background);
2523
border-radius: var(--border-radius-rounded);

‎packages/common/qds-core/src/badge/qds-text-badge.css‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,33 @@
11
.qui-badge__root[data-scope="text-badge"] {
2+
> span {
3+
text-box: cap alphabetic;
4+
}
5+
26
background: var(--badge-background);
37
border: solid var(--border-size, 0) var(--badge-border);
48
color: var(--badge-text);
59

610
&[data-size="sm"] {
711
border-radius: var(--border-radius-xs);
812
font: var(--font-static-body-xs-default);
9-
padding: var(--spacing-10) var(--spacing-40);
13+
min-height: var(--sizing-80);
14+
min-width: var(--sizing-80);
15+
padding: var(--spacing-0) var(--spacing-50);
1016
}
1117

1218
&[data-size="md"] {
1319
border-radius: var(--border-radius-sm);
1420
font: var(--font-static-body-sm-default);
15-
padding: var(--spacing-20) var(--spacing-50);
21+
min-height: var(--sizing-90);
22+
min-width: var(--sizing-90);
23+
padding: var(--spacing-0) var(--spacing-70);
1624
}
1725

1826
&[data-size="lg"] {
1927
border-radius: var(--border-radius-sm);
2028
font: var(--font-static-body-md-default);
21-
padding: var(--spacing-40) var(--spacing-70);
29+
min-height: var(--sizing-120);
30+
min-width: var(--sizing-120);
31+
padding: var(--spacing-0) var(--spacing-70);
2232
}
2333
}

0 commit comments

Comments
 (0)