Skip to content

Commit 0c61b76

Browse files
homing1homing1
authored
Update primary color (#723)
* Deprecate old colors * Add blue colors * Update primary colors * Add hover light * Update interactive tag close hover * Update primary active * Update link button * Update turqoise * Fix stylelint error * Update hyperlink in dark * Revert hyperlink updates * Add primary hover light text * Refactor * Rename to -background-hover and -dark-hover * Add changeset * Update colors map * Revert hyperlink dark
1 parent 9634b6d commit 0c61b76

File tree

5 files changed

+161
-54
lines changed

5 files changed

+161
-54
lines changed

‎.changeset/dull-parrots-thank.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@microsoft/atlas-css': minor
3+
---
4+
5+
Update primary colors to align with Fluent 2 colors.

‎css/src/components/tag.scss

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,15 @@ $tag-color-filled-hover: $primary-hover !default;
2828
$tag-background-filled-hover: $secondary !default;
2929
$tag-interactive-divider-color-filled: $secondary-box-shadow !default;
3030
$tag-interactive-color-filled-hover: $secondary-invert !default;
31+
$tag-interactive-color-filled-close-hover: $primary-dark-hover !default;
3132

3233
$tag-color-primary: $primary-dark !default;
3334
$tag-color-primary-hover: $primary-hover !default;
3435
$tag-background-primary: $primary-background !default;
35-
$tag-background-primary-hover: $primary-hover !default;
36+
$tag-background-primary-hover: $primary-background-hover !default;
3637
$tag-border-color-primary: $primary-background-glow-high-contrast !default;
3738
$tag-interactive-divider-color-primary: $primary-box-shadow !default;
38-
$tag-interactive-color-primary-hover: $primary-invert !default;
39+
$tag-interactive-color-primary-hover: $primary-dark-hover !default;
3940

4041
.tag {
4142
display: inline-flex;
@@ -200,6 +201,11 @@ $tag-interactive-color-primary-hover: $primary-invert !default;
200201

201202
.tag-close {
202203
border-inline-start-color: $tag-interactive-divider-color-filled;
204+
205+
&:hover,
206+
&.is-hovered {
207+
color: $tag-interactive-color-filled-close-hover;
208+
}
203209
}
204210
}
205211
}

‎css/src/tokens/colors.scss

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ $text: var(--theme-text);
88
$text-subtle: var(--theme-text-subtle);
99
$text-invert: var(--theme-text-invert);
1010
$hyperlink: var(--theme-hyperlink);
11+
$hyperlink-hover: var(--theme-hyperlink-hover);
1112
$text-glow-high-contrast: var(--theme-text-glow-high-contrast);
1213
$box-shadow-color-light: var(--theme-box-shadow-light);
1314
$box-shadow-color-medium: var(--theme-box-shadow-medium);
@@ -66,62 +67,76 @@ $score-high: var(--theme-score-high);
6667

6768
$primary: var(--theme-primary-base);
6869
$primary-background: var(--theme-primary-background);
70+
$primary-background-hover: var(--theme-primary-background-hover);
6971
$primary-background-glow-high-contrast: var(--theme-primary-background-glow-high-contrast);
7072
$primary-dark: var(--theme-primary-dark);
73+
$primary-dark-hover: var(--theme-primary-dark-hover);
7174
$primary-hover: var(--theme-primary-hover);
7275
$primary-active: var(--theme-primary-active);
7376
$primary-invert: var(--theme-primary-invert);
7477
$primary-box-shadow: var(--theme-primary-box-shadow);
7578

7679
$secondary: var(--theme-secondary-base);
7780
$secondary-background: var(--theme-secondary-background);
81+
$secondary-background-hover: var(--theme-secondary-background-hover);
7882
$secondary-background-glow-high-contrast: var(--theme-secondary-background-glow-high-contrast);
7983
$secondary-dark: var(--theme-secondary-dark);
84+
$secondary-dark-hover: var(--theme-secondary-dark-hover);
8085
$secondary-hover: var(--theme-secondary-hover);
8186
$secondary-active: var(--theme-secondary-active);
8287
$secondary-invert: var(--theme-secondary-invert);
8388
$secondary-box-shadow: var(--theme-secondary-box-shadow);
8489

8590
$tertiary: var(--theme-tertiary-base);
8691
$tertiary-background: var(--theme-tertiary-background);
92+
$tertiary-background-hover: var(--theme-tertiary-background-hover);
8793
$tertiary-background-glow-high-contrast: var(--theme-tertiary-background-glow-high-contrast);
8894
$tertiary-dark: var(--theme-tertiary-dark);
95+
$tertiary-dark-hover: var(--theme-tertiary-dark-hover);
8996
$tertiary-hover: var(--theme-tertiary-hover);
9097
$tertiary-active: var(--theme-tertiary-active);
9198
$tertiary-invert: var(--theme-tertiary-invert);
9299
$tertiary-box-shadow: var(--theme-tertiary-box-shadow);
93100

94101
$success: var(--theme-success-base);
95102
$success-background: var(--theme-success-background);
103+
$success-background-hover: var(--theme-success-background-hover);
96104
$success-background-glow-high-contrast: var(--theme-success-background-glow-high-contrast);
97105
$success-dark: var(--theme-success-dark);
106+
$success-dark-hover: var(--theme-success-dark-hover);
98107
$success-hover: var(--theme-success-hover);
99108
$success-active: var(--theme-success-active);
100109
$success-invert: var(--theme-success-invert);
101110
$success-box-shadow: var(--theme-success-box-shadow);
102111

103112
$info: var(--theme-info-base);
104113
$info-background: var(--theme-info-background);
114+
$info-background-hover: var(--theme-info-background-hover);
105115
$info-background-glow-high-contrast: var(--theme-info-background-glow-high-contrast);
106116
$info-dark: var(--theme-info-dark);
117+
$info-dark-hover: var(--theme-info-dark-hover);
107118
$info-hover: var(--theme-info-hover);
108119
$info-active: var(--theme-info-active);
109120
$info-invert: var(--theme-info-invert);
110121
$info-box-shadow: var(--theme-info-box-shadow);
111122

112123
$warning: var(--theme-warning-base);
113124
$warning-background: var(--theme-warning-background);
125+
$warning-background-hover: var(--theme-warning-background-hover);
114126
$warning-background-glow-high-contrast: var(--theme-warning-background-glow-high-contrast);
115127
$warning-dark: var(--theme-warning-dark);
128+
$warning-dark-hover: var(--theme-warning-dark-hover);
116129
$warning-hover: var(--theme-warning-hover);
117130
$warning-active: var(--theme-warning-active);
118131
$warning-invert: var(--theme-warning-invert);
119132
$warning-box-shadow: var(--theme-warning-box-shadow);
120133

121134
$danger: var(--theme-danger-base);
122135
$danger-background: var(--theme-danger-background);
136+
$danger-background-hover: var(--theme-danger-background-hover);
123137
$danger-background-glow-high-contrast: var(--theme-danger-background-glow-high-contrast);
124138
$danger-dark: var(--theme-danger-dark);
139+
$danger-dark-hover: var(--theme-danger-dark-hover);
125140
$danger-hover: var(--theme-danger-hover);
126141
$danger-active: var(--theme-danger-active);
127142
$danger-invert: var(--theme-danger-invert);
@@ -136,7 +151,9 @@ $colors: (
136151
$primary-active,
137152
$primary-invert,
138153
$primary-box-shadow,
139-
$primary-background-glow-high-contrast
154+
$primary-background-glow-high-contrast,
155+
$primary-background-hover,
156+
$primary-dark-hover
140157
),
141158
'secondary': (
142159
$secondary,
@@ -146,7 +163,9 @@ $colors: (
146163
$secondary-active,
147164
$secondary-invert,
148165
$secondary-box-shadow,
149-
$secondary-background-glow-high-contrast
166+
$secondary-background-glow-high-contrast,
167+
$secondary-background-hover,
168+
$secondary-dark-hover
150169
),
151170
'tertiary': (
152171
$tertiary,
@@ -156,7 +175,9 @@ $colors: (
156175
$tertiary-active,
157176
$tertiary-invert,
158177
$tertiary-box-shadow,
159-
$tertiary-background-glow-high-contrast
178+
$tertiary-background-glow-high-contrast,
179+
$tertiary-background-hover,
180+
$tertiary-dark-hover
160181
),
161182
'success': (
162183
$success,
@@ -166,7 +187,9 @@ $colors: (
166187
$success-active,
167188
$success-invert,
168189
$success-box-shadow,
169-
$success-background-glow-high-contrast
190+
$success-background-glow-high-contrast,
191+
$success-background-hover,
192+
$success-dark-hover
170193
),
171194
'info': (
172195
$info,
@@ -176,7 +199,9 @@ $colors: (
176199
$info-active,
177200
$info-invert,
178201
$info-box-shadow,
179-
$info-background-glow-high-contrast
202+
$info-background-glow-high-contrast,
203+
$info-background-hover,
204+
$info-dark-hover
180205
),
181206
'warning': (
182207
$warning,
@@ -186,7 +211,9 @@ $colors: (
186211
$warning-active,
187212
$warning-invert,
188213
$warning-box-shadow,
189-
$warning-background-glow-high-contrast
214+
$warning-background-glow-high-contrast,
215+
$warning-background-hover,
216+
$warning-dark-hover
190217
),
191218
'danger': (
192219
$danger,
@@ -196,7 +223,9 @@ $colors: (
196223
$danger-active,
197224
$danger-invert,
198225
$danger-box-shadow,
199-
$danger-background-glow-high-contrast
226+
$danger-background-glow-high-contrast,
227+
$danger-background-hover,
228+
$danger-dark-hover
200229
)
201230
) !default;
202231

@@ -212,6 +241,8 @@ $color-index-active: 5;
212241
$color-index-invert: 6;
213242
$color-index-box-shadow: 7;
214243
$color-index-background-glow-high-contrast: 8;
244+
$color-index-background-hover: 9;
245+
$color-index-dark-hover: 10;
215246

216247
// example implementation of a color loop
217248

‎css/src/tokens/palette.scss

Lines changed: 46 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -71,16 +71,37 @@ $palette-white-opacity-18: hsl(0deg 0% 100% / 18%) !default;
7171

7272
// Blue
7373

74-
$palette-blue-10: #d7eaf8 !default;
75-
$palette-blue-20: #9ccbee !default;
76-
$palette-blue-30: #75b6e7 !default;
77-
$palette-blue-40: #278cda !default;
78-
$palette-blue-50: #0078d4 !default;
79-
$palette-blue-60: #0065b3 !default;
80-
$palette-blue-70: #00579a !default;
81-
$palette-blue-80: #004173 !default;
82-
$palette-blue-90: #002b4d !default;
83-
$palette-blue-100: #000a13 !default;
74+
$palette-blue-10-deprecated: #d7eaf8 !default;
75+
$palette-blue-20-deprecated: #9ccbee !default;
76+
$palette-blue-30-deprecated: #75b6e7 !default;
77+
$palette-blue-40-deprecated: #278cda !default;
78+
$palette-blue-50-deprecated: #0078d4 !default;
79+
$palette-blue-60-deprecated: #0065b3 !default;
80+
$palette-blue-70-deprecated: #00579a !default;
81+
$palette-blue-80-deprecated: #004173 !default;
82+
$palette-blue-90-deprecated: #002b4d !default;
83+
$palette-blue-100-deprecated: #000a13 !default;
84+
85+
$palette-blue-10: #ebf3fc !default;
86+
$palette-blue-20: #cfe4fa !default;
87+
$palette-blue-30: #a9d3f2 !default;
88+
$palette-blue-40: #b4d6fa !default;
89+
$palette-blue-50: #9abfdc !default;
90+
$palette-blue-60: #77b7f7 !default;
91+
$palette-blue-70: #62abf5 !default;
92+
$palette-blue-80: #479ef5 !default;
93+
$palette-blue-90: #2886de !default;
94+
$palette-blue-100: #0078d4 !default;
95+
$palette-blue-110: #0f6cbd !default;
96+
$palette-blue-120: #115ea3 !default;
97+
$palette-blue-130: #0f548c !default;
98+
$palette-blue-140: #004e8c !default;
99+
$palette-blue-150: #0e4775 !default;
100+
$palette-blue-160: #004377 !default;
101+
$palette-blue-170: #0c3b5e !default;
102+
$palette-blue-180: #0a2e4a !default;
103+
$palette-blue-190: #002c4e !default;
104+
$palette-blue-200: #082338 !default;
84105

85106
$palette-blue-a: #9ccbee !default;
86107

@@ -107,19 +128,21 @@ $palette-navy-opacity-70: hsl(262deg 46% 17% / 70%) !default;
107128

108129
// Turqoise
109130

110-
$palette-turqoise-10: #e9fbff !default;
111-
$palette-turqoise-20: #bdf5ff !default;
112-
$palette-turqoise-30: #7becff !default;
113-
$palette-turqoise-40: #50e6ff !default;
114-
$palette-turqoise-50: #41b9cf !default;
115-
$palette-turqoise-60: #328e9f !default;
116-
$palette-turqoise-70: #28727f !default;
117-
$palette-turqoise-80: #19474f !default;
118-
$palette-turqoise-90: #0f2a2f !default;
119-
$palette-turqoise-100: #050e0f !default;
120-
121-
$palette-navy-opacity-30: hsl(189deg 52% 12% / 30%) !default;
122-
$palette-navy-opacity-70: hsl(189deg 52% 12% / 70%) !default;
131+
$palette-turqoise-10-deprecated: #e9fbff !default;
132+
$palette-turqoise-20-deprecated: #bdf5ff !default;
133+
$palette-turqoise-30-deprecated: #7becff !default;
134+
$palette-turqoise-40-deprecated: #50e6ff !default;
135+
$palette-turqoise-50-deprecated: #41b9cf !default;
136+
$palette-turqoise-60-deprecated: #328e9f !default;
137+
$palette-turqoise-70-deprecated: #28727f !default;
138+
$palette-turqoise-80-deprecated: #19474f !default;
139+
$palette-turqoise-90-deprecated: #0f2a2f !default;
140+
$palette-turqoise-100-deprecated: #050e0f !default;
141+
142+
$palette-turqoise-10: #1aebff !default;
143+
144+
$palette-turqoise-opacity-30-deprecated: hsl(189deg 52% 12% / 30%) !default;
145+
$palette-turqoise-opacity-70-deprecated: hsl(189deg 52% 12% / 70%) !default;
123146

124147
// Green
125148

0 commit comments

Comments
 (0)