Skip to content

Commit

Permalink
Update secondary color (#729)
Browse files Browse the repository at this point in the history 
* Deprecate grey colors

* Add new grey palette

* Add another grey color

* Update secondary theme colors

* Add changeset

* Update changeset

* Update badge background

* Revert

* Add back input icon

* Update secondary base

* Update control border bottom

* Revert input icon

* Update button border color

* Remove pagination ellipsis color
  • Loading branch information
@homing1
homing1 authored Jan 14, 2025
1 parent 1f42341 commit 8e512e9
Show file tree
Hide file tree
Showing 9 changed files with 134 additions and 107 deletions.
5 changes: 5 additions & 0 deletions .changeset/spotty-books-exist.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@microsoft/atlas-css': minor
---

Update secondary color to align with Fluent 2 colors.
2 changes: 1 addition & 1 deletion css/src/components/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ $button-sm-font-size: $font-size-8 !default;

$button-icon-font-size: 0.875em !default;

$button-border-color: $text-subtle !default;
$button-border-color: $control-border !default;
$button-border-width: $control-border-width !default;
$button-border-radius: $control-radius !default;

Expand Down
9 changes: 1 addition & 8 deletions css/src/components/form/input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ $input-border-bottom-color: $control-border-bottom !default;
$input-placeholder-color: $text-subtle !default;

$input-hover-color: $text !default;
$input-hover-border-color: $secondary !default;
$input-hover-border-color: $default-hover !default;
$input-focus-border-color: $primary !default;

$input-disabled-color: $text-subtle !default;
Expand All @@ -19,7 +19,6 @@ $input-focus-box-shadow-size: 0 0.0625rem 0 0 !default;

$input-icon-size: 2.25em !default;
$input-icon-color: $text-subtle !default;
$input-icon-active-color: $secondary !default;

.input {
@include control;
Expand Down Expand Up @@ -127,12 +126,6 @@ $input-icon-active-color: $secondary !default;
z-index: $zindex-multi;
}

@include focus-visible {
+ .icon {
color: $input-icon-active-color;
}
}

&.input-sm {
~ .icon svg {
width: 0.875em;
Expand Down
2 changes: 1 addition & 1 deletion css/src/components/form/select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ $select-border-bottom-color: $control-border-bottom !default;
$select-placeholder-color: $text-subtle !default;

$select-hover-color: $text !default;
$select-hover-border-color: $secondary !default;
$select-hover-border-color: $default-hover !default;
$select-focus-border-color: $primary !default;

$select-disabled-color: $text-subtle !default;
Expand Down
2 changes: 1 addition & 1 deletion css/src/components/form/textarea.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ $textarea-border-bottom-color: $control-border-bottom !default;
$textarea-placeholder-color: $text-subtle !default;

$textarea-hover-color: $text !default;
$textarea-hover-border-color: $secondary !default;
$textarea-hover-border-color: $default-hover !default;
$textarea-focus-border-color: $primary !default;

$textarea-disabled-color: $text-subtle !default;
Expand Down
9 changes: 4 additions & 5 deletions css/src/components/pagination.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@ $pagination-focus-border-color: $primary-active !default;
$pagination-active-color: $primary-active !default;
$pagination-active-border-color: $primary-active !default;

$pagination-disabled-color: $secondary !default;
$pagination-disabled-background-color: $secondary-background !default;
$pagination-disabled-border-color: $secondary-background !default;
$pagination-disabled-color: $secondary-dark !default;
$pagination-disabled-background-color: $secondary !default;
$pagination-disabled-border-color: $secondary !default;

$pagination-current-color: $text-invert !default;
$pagination-current-background-color: $primary !default;
$pagination-current-background-color-hover: $primary-hover !default;
$pagination-current-border-color: $text-invert !default;

$pagination-ellipsis-color: $secondary-background !default;
$pagination-ellipsis-color: $secondary !default;

$pagination-shadow-inset: inset 0 1px 2px $box-shadow-color-light;

Expand Down Expand Up @@ -80,7 +80,6 @@ $pagination-shadow-inset: inset 0 1px 2px $box-shadow-color-light;
}

.pagination-ellipsis {
color: $pagination-ellipsis-color;
pointer-events: none;
}

Expand Down
6 changes: 3 additions & 3 deletions css/src/components/tag.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ $tag-icon-font-size: 0.875em !default;
$tag-border-width: $border-width !default;
$tag-border-radius: $border-radius !default;
$tag-border-radius-rounded: $border-radius-rounded !default;
$tag-border-color: $secondary !default;
$tag-border-color: $control-border !default;

$tag-color: $secondary-dark !default;
$tag-color-hover: $primary-dark !default;
Expand All @@ -25,8 +25,8 @@ $tag-background-hover: $secondary-background-glow-high-contrast !default;
$tag-color-filled: $text !default;
$tag-background-filled: $secondary-background-glow-high-contrast !default;
$tag-color-filled-hover: $primary-hover !default;
$tag-background-filled-hover: $secondary !default;
$tag-interactive-divider-color-filled: $secondary-box-shadow !default;
$tag-background-filled-hover: $secondary-background-hover !default;
$tag-interactive-divider-color-filled: $control-border !default;
$tag-interactive-color-filled-hover: $secondary-invert !default;
$tag-interactive-color-filled-close-hover: $primary-dark-hover !default;

Expand Down
56 changes: 43 additions & 13 deletions css/src/tokens/palette.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,49 @@ Notes:

// Monochrome

$palette-grey-10: #fafafa !default;
$palette-grey-20: #f2f2f2 !default;
$palette-grey-30: #e6e6e6 !default;
$palette-grey-40: #d2d2d2 !default;
$palette-grey-50: #bcbcbc !default;
$palette-grey-60: #a2a2a2 !default;
$palette-grey-70: #8e8e8e !default;
$palette-grey-80: #757575 !default;
$palette-grey-90: #505050 !default;
$palette-grey-100: #404040 !default;
$palette-grey-110: #2f2f2f !default;
$palette-grey-120: #171717 !default;
$palette-grey-130: #161616 !default;
$palette-grey-10-deprecated: #fafafa !default;
$palette-grey-20-deprecated: #f2f2f2 !default;
$palette-grey-30-deprecated: #e6e6e6 !default;
$palette-grey-40-deprecated: #d2d2d2 !default;
$palette-grey-50-deprecated: #bcbcbc !default;
$palette-grey-60-deprecated: #a2a2a2 !default;
$palette-grey-70-deprecated: #8e8e8e !default;
$palette-grey-80-deprecated: #757575 !default;
$palette-grey-90-deprecated: #505050 !default;
$palette-grey-100-deprecated: #404040 !default;
$palette-grey-110-deprecated: #2f2f2f !default;
$palette-grey-120-deprecated: #171717 !default;
$palette-grey-130-deprecated: #161616 !default;

$palette-grey-10: #f5f5f5 !default;
$palette-grey-20: #f0f0f0 !default;
$palette-grey-30: #ebebeb !default;
$palette-grey-40: #e6e6e6 !default;
$palette-grey-50: #e0e0e0 !default;
$palette-grey-60: #d6d6d6 !default;
$palette-grey-70: #d1d1d1 !default;
$palette-grey-80: #c7c7c7 !default;
$palette-grey-90: #bdbdbd !default;
$palette-grey-100: #b3b3b3 !default;
$palette-grey-110: #adadad !default;
$palette-grey-120: #999 !default;
$palette-grey-130: #757575 !default;
$palette-grey-140: #707070 !default;
$palette-grey-150: #6b6b6b !default;
$palette-grey-160: #666 !default;
$palette-grey-170: #616161 !default;
$palette-grey-180: #575757 !default;
$palette-grey-190: #525252 !default;
$palette-grey-200: #4d4d4d !default;
$palette-grey-210: #424242 !default;
$palette-grey-220: #3d3d3d !default;
$palette-grey-230: #383838 !default;
$palette-grey-240: #333 !default;
$palette-grey-250: #292929 !default;
$palette-grey-260: #242424 !default;
$palette-grey-270: #1a1a1a !default;
$palette-grey-280: #141414 !default;
$palette-grey-290: #0a0a0a !default;

// Black

Expand Down
Loading

0 comments on commit 8e512e9

Please sign in to comment.