Skip to content

Commit d5a79c5

Browse files
brandyscarneybrandyscarney
committed
Merge branch 'FW-6252' into FW-6252-chip
2 parents 5811fbd + 60a241f commit d5a79c5

File tree

8 files changed

+77
-65
lines changed

8 files changed

+77
-65
lines changed

‎core/package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
"fs-extra": "^9.0.1",
6767
"jest": "^29.7.0",
6868
"jest-cli": "^29.7.0",
69-
"outsystems-design-tokens": "^1.2.3",
69+
"outsystems-design-tokens": "^1.2.4",
7070
"prettier": "^2.8.8",
7171
"rollup": "^2.26.4",
7272
"sass": "^1.33.0",

‎core/src/foundations/ionic.utility.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1054,6 +1054,12 @@ Do not edit directly, this file was auto-generated.
10541054
.ion-background-bg-neutral-boldest-default {
10551055
background-color: $ion-bg-neutral-boldest-default;
10561056
}
1057+
.ion-bg-neutral-boldest-press {
1058+
color: $ion-bg-neutral-boldest-press;
1059+
}
1060+
.ion-background-bg-neutral-boldest-press {
1061+
background-color: $ion-bg-neutral-boldest-press;
1062+
}
10571063
.ion-bg-surface-default {
10581064
color: $ion-bg-surface-default;
10591065
}

‎core/src/foundations/ionic.vars.scss‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -165,14 +165,14 @@ $ion-bg-info-subtle-default: var(--ion-bg-info-subtle-default, #f2f4fd);
165165
$ion-bg-info-subtle-default-rgb: var(--ion-bg-info-subtle-default-rgb, 242, 244, 253);
166166
$ion-bg-info-subtle-press: var(--ion-bg-info-subtle-press, #d0d7fa);
167167
$ion-bg-info-subtle-press-rgb: var(--ion-bg-info-subtle-press-rgb, 208, 215, 250);
168-
$ion-bg-warning-base-default: var(--ion-bg-warning-base-default, #ba8200);
169-
$ion-bg-warning-base-default-rgb: var(--ion-bg-warning-base-default-rgb, 186, 130, 0);
170-
$ion-bg-warning-base-press: var(--ion-bg-warning-base-press, #704b02);
171-
$ion-bg-warning-base-press-rgb: var(--ion-bg-warning-base-press-rgb, 112, 75, 2);
172-
$ion-bg-warning-subtle-default: var(--ion-bg-warning-subtle-default, #fff9ea);
173-
$ion-bg-warning-subtle-default-rgb: var(--ion-bg-warning-subtle-default-rgb, 255, 249, 234);
174-
$ion-bg-warning-subtle-press: var(--ion-bg-warning-subtle-press, #ffebb1);
175-
$ion-bg-warning-subtle-press-rgb: var(--ion-bg-warning-subtle-press-rgb, 255, 235, 177);
168+
$ion-bg-warning-base-default: var(--ion-bg-warning-base-default, #ffd600);
169+
$ion-bg-warning-base-default-rgb: var(--ion-bg-warning-base-default-rgb, 255, 214, 0);
170+
$ion-bg-warning-base-press: var(--ion-bg-warning-base-press, #df9c00);
171+
$ion-bg-warning-base-press-rgb: var(--ion-bg-warning-base-press-rgb, 223, 156, 0);
172+
$ion-bg-warning-subtle-default: var(--ion-bg-warning-subtle-default, #fff5db);
173+
$ion-bg-warning-subtle-default-rgb: var(--ion-bg-warning-subtle-default-rgb, 255, 245, 219);
174+
$ion-bg-warning-subtle-press: var(--ion-bg-warning-subtle-press, #ffe07b);
175+
$ion-bg-warning-subtle-press-rgb: var(--ion-bg-warning-subtle-press-rgb, 255, 224, 123);
176176
$ion-bg-body: var(--ion-bg-body, #ffffff);
177177
$ion-bg-body-rgb: var(--ion-bg-body-rgb, 255, 255, 255);
178178
$ion-bg-neutral-subtle-default: var(--ion-bg-neutral-subtle-default, #efefef);
@@ -193,6 +193,8 @@ $ion-bg-neutral-bold-press: var(--ion-bg-neutral-bold-press, #242424);
193193
$ion-bg-neutral-bold-press-rgb: var(--ion-bg-neutral-bold-press-rgb, 36, 36, 36);
194194
$ion-bg-neutral-boldest-default: var(--ion-bg-neutral-boldest-default, #242424);
195195
$ion-bg-neutral-boldest-default-rgb: var(--ion-bg-neutral-boldest-default-rgb, 36, 36, 36);
196+
$ion-bg-neutral-boldest-press: var(--ion-bg-neutral-boldest-press, #111111);
197+
$ion-bg-neutral-boldest-press-rgb: var(--ion-bg-neutral-boldest-press-rgb, 17, 17, 17);
196198
$ion-bg-surface-default: var(--ion-bg-surface-default, #ffffff);
197199
$ion-bg-surface-default-rgb: var(--ion-bg-surface-default-rgb, 255, 255, 255);
198200
$ion-bg-surface-inverse: var(--ion-bg-surface-inverse, #ffffff);
@@ -231,8 +233,8 @@ $ion-text-danger: var(--ion-text-danger, #bf2222);
231233
$ion-text-danger-rgb: var(--ion-text-danger-rgb, 191, 34, 34);
232234
$ion-text-info: var(--ion-text-info, #0d4bc3);
233235
$ion-text-info-rgb: var(--ion-text-info-rgb, 13, 75, 195);
234-
$ion-text-warning: var(--ion-text-warning, #ba8200);
235-
$ion-text-warning-rgb: var(--ion-text-warning-rgb, 186, 130, 0);
236+
$ion-text-warning: var(--ion-text-warning, #966503);
237+
$ion-text-warning-rgb: var(--ion-text-warning-rgb, 150, 101, 3);
236238
$ion-text-success: var(--ion-text-success, #126f23);
237239
$ion-text-success-rgb: var(--ion-text-success-rgb, 18, 111, 35);
238240
$ion-text-link-default: var(--ion-text-link-default, #105cef);
@@ -300,8 +302,8 @@ $ion-icon-success: var(--ion-icon-success, #126f23);
300302
$ion-icon-success-rgb: var(--ion-icon-success-rgb, 18, 111, 35);
301303
$ion-icon-danger: var(--ion-icon-danger, #bf2222);
302304
$ion-icon-danger-rgb: var(--ion-icon-danger-rgb, 191, 34, 34);
303-
$ion-icon-warning: var(--ion-icon-warning, #ba8200);
304-
$ion-icon-warning-rgb: var(--ion-icon-warning-rgb, 186, 130, 0);
305+
$ion-icon-warning: var(--ion-icon-warning, #966503);
306+
$ion-icon-warning-rgb: var(--ion-icon-warning-rgb, 150, 101, 3);
305307
$ion-icon-inverse: var(--ion-icon-inverse, #ffffff);
306308
$ion-icon-inverse-rgb: var(--ion-icon-inverse-rgb, 255, 255, 255);
307309
$ion-icon-primary: var(--ion-icon-primary, #105cef);

‎core/src/themes/ionic/ionic.theme.default.scss‎

Lines changed: 40 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
// - subtle: a map of the subtle color variations
1515
//
1616
// Each hue color map should provide
17-
// TODO: rename base to background?
1817
// - base: The main color used for backgrounds
1918
// - base-rgb: The base color in RGB format
2019
// - contrast: A color that ensures readable text on the base color
@@ -33,7 +32,6 @@ $ionic-colors: (
3332
contrast: globals.$ion-text-inverse,
3433
contrast-rgb: globals.$ion-text-inverse-rgb,
3534
shade: globals.$ion-bg-primary-base-press,
36-
// TODO this is not a verified value
3735
tint: globals.$ion-semantics-primary-600,
3836
foreground: globals.$ion-text-primary,
3937
),
@@ -43,12 +41,10 @@ $ionic-colors: (
4341
contrast: globals.$ion-text-primary,
4442
contrast-rgb: globals.$ion-text-primary-rgb,
4543
shade: globals.$ion-bg-primary-subtle-press,
46-
// TODO this is not a verified value
4744
tint: globals.$ion-semantics-primary-200,
4845
foreground: globals.$ion-text-primary,
4946
),
5047
),
51-
// info equivalent
5248
secondary:
5349
(
5450
bold: (
@@ -57,7 +53,6 @@ $ionic-colors: (
5753
contrast: globals.$ion-text-inverse,
5854
contrast-rgb: globals.$ion-text-inverse-rgb,
5955
shade: globals.$ion-bg-info-base-press,
60-
// TODO this is not a verified value
6156
tint: globals.$ion-semantics-info-700,
6257
foreground: globals.$ion-text-info,
6358
),
@@ -67,43 +62,57 @@ $ionic-colors: (
6762
contrast: globals.$ion-text-info,
6863
contrast-rgb: globals.$ion-text-info-rgb,
6964
shade: globals.$ion-bg-info-subtle-press,
70-
// TODO this is not a verified value
7165
tint: globals.$ion-semantics-info-200,
7266
foreground: globals.$ion-text-info,
7367
),
7468
),
75-
// TODO - no equivalent for tertiary, can we add purple as a color?
76-
success:
77-
(
78-
bold: (
79-
base: globals.$ion-bg-success-base-default,
80-
base-rgb: globals.$ion-bg-success-base-default-rgb,
81-
contrast: globals.$ion-text-inverse,
82-
contrast-rgb: globals.$ion-text-inverse-rgb,
83-
shade: globals.$ion-bg-success-base-press,
84-
// TODO this is not a verified value
85-
tint: globals.$ion-semantics-success-800,
86-
foreground: globals.$ion-text-success,
87-
),
88-
subtle: (
89-
base: globals.$ion-bg-success-subtle-default,
90-
base-rgb: globals.$ion-bg-success-subtle-default-rgb,
91-
contrast: globals.$ion-text-success,
92-
contrast-rgb: globals.$ion-text-success-rgb,
93-
shade: globals.$ion-bg-success-subtle-press,
94-
// TODO this is not a verified value
95-
tint: globals.$ion-semantics-success-200,
96-
foreground: globals.$ion-text-success,
97-
),
69+
tertiary: (
70+
bold: (
71+
base: globals.$ion-primitives-violet-700,
72+
base-rgb: globals.$ion-primitives-violet-700-rgb,
73+
contrast: globals.$ion-text-inverse,
74+
contrast-rgb: globals.$ion-text-inverse-rgb,
75+
shade: globals.$ion-primitives-violet-800,
76+
tint: globals.$ion-primitives-violet-600,
77+
foreground: globals.$ion-primitives-violet-700,
9878
),
79+
subtle: (
80+
base: globals.$ion-primitives-violet-100,
81+
base-rgb: globals.$ion-primitives-violet-100-rgb,
82+
contrast: globals.$ion-primitives-violet-700,
83+
contrast-rgb: globals.$ion-primitives-violet-700-rgb,
84+
shade: globals.$ion-primitives-violet-300,
85+
tint: globals.$ion-primitives-violet-200,
86+
foreground: globals.$ion-primitives-violet-700,
87+
),
88+
),
89+
success: (
90+
bold: (
91+
base: globals.$ion-bg-success-base-default,
92+
base-rgb: globals.$ion-bg-success-base-default-rgb,
93+
contrast: globals.$ion-text-inverse,
94+
contrast-rgb: globals.$ion-text-inverse-rgb,
95+
shade: globals.$ion-bg-success-base-press,
96+
tint: globals.$ion-semantics-success-800,
97+
foreground: globals.$ion-text-success,
98+
),
99+
subtle: (
100+
base: globals.$ion-bg-success-subtle-default,
101+
base-rgb: globals.$ion-bg-success-subtle-default-rgb,
102+
contrast: globals.$ion-text-success,
103+
contrast-rgb: globals.$ion-text-success-rgb,
104+
shade: globals.$ion-bg-success-subtle-press,
105+
tint: globals.$ion-semantics-success-200,
106+
foreground: globals.$ion-text-success,
107+
),
108+
),
99109
warning: (
100110
bold: (
101111
base: globals.$ion-bg-warning-base-default,
102112
base-rgb: globals.$ion-bg-warning-base-default-rgb,
103113
contrast: globals.$ion-text-default,
104114
contrast-rgb: globals.$ion-text-default-rgb,
105115
shade: globals.$ion-bg-warning-base-press,
106-
// TODO this is not a verified value
107116
tint: globals.$ion-primitives-yellow-300,
108117
foreground: globals.$ion-text-warning,
109118
),
@@ -113,7 +122,6 @@ $ionic-colors: (
113122
contrast: globals.$ion-text-warning,
114123
contrast-rgb: globals.$ion-text-warning-rgb,
115124
shade: globals.$ion-bg-warning-subtle-press,
116-
// TODO this is not a verified value
117125
tint: globals.$ion-primitives-yellow-100,
118126
foreground: globals.$ion-text-warning,
119127
),
@@ -125,7 +133,6 @@ $ionic-colors: (
125133
contrast: globals.$ion-text-inverse,
126134
contrast-rgb: globals.$ion-text-inverse-rgb,
127135
shade: globals.$ion-bg-danger-base-press,
128-
// TODO this is not a verified value
129136
tint: globals.$ion-semantics-danger-700,
130137
foreground: globals.$ion-text-danger,
131138
),
@@ -135,23 +142,18 @@ $ionic-colors: (
135142
contrast: globals.$ion-text-danger,
136143
contrast-rgb: globals.$ion-text-danger-rgb,
137144
shade: globals.$ion-bg-danger-subtle-press,
138-
// TODO this is not a verified value
139145
tint: globals.$ion-semantics-danger-200,
140146
foreground: globals.$ion-text-danger,
141147
),
142148
),
143-
// neutral/base equivalent
144149
light:
145150
(
146151
bold: (
147152
base: globals.$ion-bg-neutral-base-default,
148153
base-rgb: globals.$ion-bg-neutral-base-default-rgb,
149154
contrast: globals.$ion-text-default,
150155
contrast-rgb: globals.$ion-text-default-rgb,
151-
// TODO this fails AA testing
152-
// shade: globals.$ion-bg-neutral-base-press,
153156
shade: globals.$ion-primitives-neutral-600,
154-
// TODO this is not a verified value
155157
tint: globals.$ion-primitives-neutral-400,
156158
foreground: globals.$ion-text-default,
157159
),
@@ -161,12 +163,10 @@ $ionic-colors: (
161163
contrast: globals.$ion-text-default,
162164
contrast-rgb: globals.$ion-text-default-rgb,
163165
shade: globals.$ion-bg-neutral-subtlest-press,
164-
// TODO this is not a verified value
165166
tint: globals.$ion-primitives-neutral-100,
166167
foreground: globals.$ion-text-default,
167168
),
168169
),
169-
// neutral/bold equivalent
170170
medium:
171171
(
172172
bold: (
@@ -175,7 +175,6 @@ $ionic-colors: (
175175
contrast: globals.$ion-text-inverse,
176176
contrast-rgb: globals.$ion-text-inverse-rgb,
177177
shade: globals.$ion-bg-neutral-bold-press,
178-
// TODO this is not a verified value
179178
tint: globals.$ion-primitives-neutral-900,
180179
foreground: globals.$ion-text-default,
181180
),
@@ -185,22 +184,18 @@ $ionic-colors: (
185184
contrast: globals.$ion-text-subtlest,
186185
contrast-rgb: globals.$ion-text-subtlest-rgb,
187186
shade: globals.$ion-bg-neutral-subtle-press,
188-
// TODO this is not a verified value
189187
tint: globals.$ion-primitives-neutral-100,
190188
foreground: globals.$ion-text-default,
191189
),
192190
),
193-
// neutral/boldest equivalent
194191
dark:
195192
(
196193
bold: (
197194
base: globals.$ion-bg-neutral-boldest-default,
198195
base-rgb: globals.$ion-bg-neutral-boldest-default-rgb,
199196
contrast: globals.$ion-text-inverse,
200197
contrast-rgb: globals.$ion-text-inverse-rgb,
201-
// TODO $ion-bg-neutral-boldest-press does not exist
202-
shade: globals.$ion-bg-neutral-bold-press,
203-
// TODO this is not a verified value
198+
shade: globals.$ion-bg-neutral-boldest-press,
204199
tint: globals.$ion-primitives-neutral-1100,
205200
foreground: globals.$ion-text-default,
206201
),
@@ -210,7 +205,6 @@ $ionic-colors: (
210205
contrast: globals.$ion-text-subtle,
211206
contrast-rgb: globals.$ion-text-subtle-rgb,
212207
shade: globals.$ion-bg-neutral-subtle-press,
213-
// TODO this is not a verified value
214208
tint: globals.$ion-primitives-neutral-100,
215209
foreground: globals.$ion-text-default,
216210
),

‎core/src/themes/ionic/test/colors/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@
9898
<h3 class="header">Text</h3>
9999
<div class="color-block ion-color-primary"><div class="ion-color">Primary</div></div>
100100
<div class="color-block ion-color-secondary"><div class="ion-color">Secondary</div></div>
101+
<div class="color-block ion-color-tertiary"><div class="ion-color">Tertiary</div></div>
101102
<div class="color-block ion-color-success"><div class="ion-color">Success</div></div>
102103
<div class="color-block ion-color-warning"><div class="ion-color">Warning</div></div>
103104
<div class="color-block ion-color-danger"><div class="ion-color">Danger</div></div>
@@ -110,6 +111,7 @@ <h3 class="header">Text</h3>
110111
<h3 class="header">Background</h3>
111112
<div class="color-block ion-color-primary"><div class="ion-color-background">Primary</div></div>
112113
<div class="color-block ion-color-secondary"><div class="ion-color-background">Secondary</div></div>
114+
<div class="color-block ion-color-tertiary"><div class="ion-color-background">Tertiary</div></div>
113115
<div class="color-block ion-color-success"><div class="ion-color-background">Success</div></div>
114116
<div class="color-block ion-color-warning"><div class="ion-color-background">Warning</div></div>
115117
<div class="color-block ion-color-danger"><div class="ion-color-background">Danger</div></div>
@@ -122,6 +124,7 @@ <h3 class="header">Background</h3>
122124
<h3 class="header">Background Shade</h3>
123125
<div class="color-block ion-color-primary"><div class="ion-color-background-shade">Primary</div></div>
124126
<div class="color-block ion-color-secondary"><div class="ion-color-background-shade">Secondary</div></div>
127+
<div class="color-block ion-color-tertiary"><div class="ion-color-background-shade">Tertiary</div></div>
125128
<div class="color-block ion-color-success"><div class="ion-color-background-shade">Success</div></div>
126129
<div class="color-block ion-color-warning"><div class="ion-color-background-shade">Warning</div></div>
127130
<div class="color-block ion-color-danger"><div class="ion-color-background-shade">Danger</div></div>
@@ -134,6 +137,7 @@ <h3 class="header">Background Shade</h3>
134137
<h3 class="header">Background Tint</h3>
135138
<div class="color-block ion-color-primary"><div class="ion-color-background-tint">Primary</div></div>
136139
<div class="color-block ion-color-secondary"><div class="ion-color-background-tint">Secondary</div></div>
140+
<div class="color-block ion-color-tertiary"><div class="ion-color-background-tint">Tertiary</div></div>
137141
<div class="color-block ion-color-success"><div class="ion-color-background-tint">Success</div></div>
138142
<div class="color-block ion-color-warning"><div class="ion-color-background-tint">Warning</div></div>
139143
<div class="color-block ion-color-danger"><div class="ion-color-background-tint">Danger</div></div>
@@ -146,6 +150,7 @@ <h3 class="header">Background Tint</h3>
146150
<h3 class="header">Subtle Text</h3>
147151
<div class="color-block ion-color-primary"><div class="ion-color-subtle">Primary</div></div>
148152
<div class="color-block ion-color-secondary"><div class="ion-color-subtle">Secondary</div></div>
153+
<div class="color-block ion-color-tertiary"><div class="ion-color-subtle">Tertiary</div></div>
149154
<div class="color-block ion-color-success"><div class="ion-color-subtle">Success</div></div>
150155
<div class="color-block ion-color-warning"><div class="ion-color-subtle">Warning</div></div>
151156
<div class="color-block ion-color-danger"><div class="ion-color-subtle">Danger</div></div>
@@ -158,6 +163,7 @@ <h3 class="header">Subtle Text</h3>
158163
<h3 class="header">Subtle Background</h3>
159164
<div class="color-block ion-color-primary"><div class="ion-color-subtle-background">Primary</div></div>
160165
<div class="color-block ion-color-secondary"><div class="ion-color-subtle-background">Secondary</div></div>
166+
<div class="color-block ion-color-tertiary"><div class="ion-color-subtle-background">Tertiary</div></div>
161167
<div class="color-block ion-color-success"><div class="ion-color-subtle-background">Success</div></div>
162168
<div class="color-block ion-color-warning"><div class="ion-color-subtle-background">Warning</div></div>
163169
<div class="color-block ion-color-danger"><div class="ion-color-subtle-background">Danger</div></div>
@@ -172,6 +178,9 @@ <h3 class="header">Subtle Background Shade</h3>
172178
<div class="color-block ion-color-secondary">
173179
<div class="ion-color-subtle-background-shade">Secondary</div>
174180
</div>
181+
<div class="color-block ion-color-tertiary">
182+
<div class="ion-color-subtle-background-shade">Tertiary</div>
183+
</div>
175184
<div class="color-block ion-color-success"><div class="ion-color-subtle-background-shade">Success</div></div>
176185
<div class="color-block ion-color-warning"><div class="ion-color-subtle-background-shade">Warning</div></div>
177186
<div class="color-block ion-color-danger"><div class="ion-color-subtle-background-shade">Danger</div></div>
@@ -186,6 +195,7 @@ <h3 class="header">Subtle Background Tint</h3>
186195
<div class="color-block ion-color-secondary">
187196
<div class="ion-color-subtle-background-tint">Secondary</div>
188197
</div>
198+
<div class="color-block ion-color-tertiary"><div class="ion-color-subtle-background-tint">Tertiary</div></div>
189199
<div class="color-block ion-color-success"><div class="ion-color-subtle-background-tint">Success</div></div>
190200
<div class="color-block ion-color-warning"><div class="ion-color-subtle-background-tint">Warning</div></div>
191201
<div class="color-block ion-color-danger"><div class="ion-color-subtle-background-tint">Danger</div></div>

0 commit comments

Comments
 (0)