Skip to content

Commit

Permalink
feat(Components): add new color tokens (2/2) (#8427)
Browse files Browse the repository at this point in the history 
* feat: overflow menu

* feat: pagination

* feat: popover

* feat: progress indicator

* feat: radio

* feat: search

* feat: select

* feat: slider

* feat: structured list

* feat: tabs

* fix: update tokens

Co-authored-by: TJ Egan <[email protected]>
  • Loading branch information
@jnm2377 @tw15egan
jnm2377 and tw15egan authored Apr 26, 2021
1 parent 7575c19 commit 8a94d14
Show file tree
Hide file tree
Showing 12 changed files with 199 additions and 192 deletions.
32 changes: 16 additions & 16 deletions packages/components/src/components/overflow-menu/_overflow-menu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
}

&:hover {
background-color: $hover-ui;
background-color: $background-hover;
}
}

Expand Down Expand Up @@ -72,7 +72,7 @@
.#{$prefix}--overflow-menu__trigger {
@include box-shadow;

background-color: $field-01;
background-color: $layer;
transition: none;
}

Expand All @@ -85,7 +85,7 @@
.#{$prefix}--overflow-menu__icon {
width: rem(16px);
height: rem(16px);
fill: $icon-01;
fill: $icon-primary;

// Windows, Firefox HCM Fix
@media screen and (-ms-high-contrast: active),
Expand All @@ -108,20 +108,20 @@
align-items: flex-start;
width: rem(160px);
list-style: none;
background-color: $field-01;
background-color: $layer;

&::after {
position: absolute;
display: block;
background-color: $field-01;
background-color: $layer;
transition: background-color $duration--fast-02
motion(entrance, productive);
content: '';
}
}

.#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open:hover {
background-color: $field-01;
background-color: $layer;
}

.#{$prefix}--overflow-menu-options--light {
Expand Down Expand Up @@ -233,7 +233,7 @@
}

.#{$prefix}--overflow-menu--divider {
border-top: 1px solid $ui-03;
border-top: 1px solid $border-subtle;
}

.#{$prefix}--overflow-menu--light .#{$prefix}--overflow-menu--divider {
Expand Down Expand Up @@ -282,11 +282,11 @@
}

.#{$prefix}--overflow-menu-options__btn svg {
fill: $icon-02;
fill: $icon-secondary;
}

.#{$prefix}--overflow-menu-options__btn:hover svg {
fill: $icon-01;
fill: $icon-primary;
}

.#{$prefix}--overflow-menu-options__option-content {
Expand All @@ -296,44 +296,44 @@
}

.#{$prefix}--overflow-menu-options__option:hover {
background-color: $hover-ui;
background-color: $layer-hover;
}

.#{$prefix}--overflow-menu-options__option--danger
.#{$prefix}--overflow-menu-options__btn:hover,
.#{$prefix}--overflow-menu-options__option--danger
.#{$prefix}--overflow-menu-options__btn:focus {
color: $text-04;
background-color: $danger-01;
color: $text-on-color;
background-color: $button-danger-primary;

svg {
fill: currentColor;
}
}

.#{$prefix}--overflow-menu-options__option--disabled:hover {
background-color: $ui-01;
background-color: $layer;
cursor: not-allowed;
}

.#{$prefix}--overflow-menu-options__option--disabled
.#{$prefix}--overflow-menu-options__btn {
color: $disabled-02;
color: $text-disabled;
pointer-events: none;

&:hover,
&:active,
&:focus {
@include focus-outline('reset');

background-color: $ui-01;
background-color: $layer;
}
}

.#{$prefix}--overflow-menu-options__option--disabled
.#{$prefix}--overflow-menu-options__btn
svg {
fill: $disabled-02;
fill: $icon-disabled;
}

.#{$prefix}--overflow-menu--flip {
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/components/pagination-nav/_pagination-nav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
display: block;
width: 0;
height: $carbon--spacing-02;
background-color: $interactive-01;
background-color: $background-brand;
opacity: 0;
transition: width $duration--fast-02 motion(standard, productive);
content: '';
Expand Down Expand Up @@ -59,9 +59,9 @@
/// @param {Number} $select-icon-top-position [$carbon--spacing-05]
/// @param {Number} $select-icon-left-position [$carbon--spacing-05]
@mixin pagination-nav(
$text-color: $text-02,
$text-color-active: $text-02,
$background-color-hover: $hover-ui,
$text-color: $text-secondary,
$text-color-active: $text-secondary,
$background-color-hover: $background-hover,
$background-color-active: initial,
$font-weight: 400,
$item-padding: 0,
Expand Down
26 changes: 13 additions & 13 deletions packages/components/src/components/pagination/_pagination.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ $css--helpers: true;
width: calc(100% - 1px);
min-height: rem(48px);
overflow-x: auto;
background-color: $ui-01;
border-top: 1px solid $ui-03;
background-color: $layer;
border-top: 1px solid $border-subtle;

@include carbon--breakpoint('md') {
overflow: initial;
Expand Down Expand Up @@ -84,7 +84,7 @@ $css--helpers: true;
}

.#{$prefix}--pagination .#{$prefix}--select-input:hover {
background: $hover-ui;
background: $background-hover;
}

.#{$prefix}--pagination .#{$prefix}--select__arrow {
Expand All @@ -95,13 +95,13 @@ $css--helpers: true;
.#{$prefix}--pagination
.#{$prefix}--select__item-count
.#{$prefix}--select-input {
border-right: $spacing-4xs solid $ui-03;
border-right: $spacing-4xs solid $border-subtle;
}

.#{$prefix}--pagination
.#{$prefix}--select__page-number
.#{$prefix}--select-input {
border-left: 1px solid $ui-03;
border-left: 1px solid $border-subtle;
}

.#{$prefix}--pagination__left,
Expand Down Expand Up @@ -146,7 +146,7 @@ $css--helpers: true;

span.#{$prefix}--pagination__text {
margin-left: $carbon--spacing-05;
color: $text-02;
color: $text-secondary;
}

.#{$prefix}--pagination__button,
Expand All @@ -162,11 +162,11 @@ $css--helpers: true;
background: none;

border: none;
border-left: 1px solid $ui-03;
border-left: 1px solid $border-subtle;
cursor: pointer;
transition: outline $duration--fast-02 motion(standard, productive),
background-color $duration--fast-02 motion(standard, productive);
fill: $ui-05;
fill: $icon-primary;

// Windows, Firefox HCM Fix
@media screen and (-ms-high-contrast: active),
Expand All @@ -185,23 +185,23 @@ $css--helpers: true;

.#{$prefix}--pagination__button:hover,
.#{$prefix}--btn--ghost:hover.#{$prefix}--pagination__button {
background: $hover-ui;
background: $layer-hover;
}

.#{$prefix}--pagination__button--no-index,
.#{$prefix}--btn--ghost.#{$prefix}--pagination__button--no-index {
cursor: not-allowed;
fill: $disabled-02;
fill: $icon-disabled;
}

.#{$prefix}--pagination__button:disabled:hover,
.#{$prefix}--pagination__button--no-index:hover,
.#{$prefix}--btn--ghost:disabled:hover.#{$prefix}--pagination__button,
.#{$prefix}--btn--ghost:hover.#{$prefix}--pagination__button--no-index {
background: $ui-01;
border-color: $ui-03;
background: $layer;
border-color: $border-subtle;
cursor: not-allowed;
fill: $disabled-02;
fill: $icon-disabled;
}

// Skeleton state
Expand Down
26 changes: 13 additions & 13 deletions packages/components/src/components/pagination/_unstable_pagination.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ $css--helpers: true;

width: 100%;
height: rem(48px);
background-color: $ui-01;
border-top: 1px solid $ui-03;
background-color: $layer;
border-top: 1px solid $border-subtle;
border-bottom: 1px solid transparent;
}

Expand All @@ -40,7 +40,7 @@ $css--helpers: true;
}

margin: 0 $carbon--spacing-05;
color: $text-02;
color: $text-secondary;
}

.#{$prefix}--unstable-pagination__left,
Expand Down Expand Up @@ -79,15 +79,15 @@ $css--helpers: true;
height: 100%;
margin: 0;
padding: 0 rem(14px);
color: $ui-05;
color: $icon-primary;
background: none;

border: none;
border-left: 1px solid $ui-03;
cursor: pointer;
transition: outline $duration--fast-02 motion(standard, productive),
background-color $duration--fast-02 motion(standard, productive);
fill: $ui-05;
fill: $icon-primary;
}

// Unset height/width set by icon-only button:
Expand All @@ -101,25 +101,25 @@ $css--helpers: true;
}

.#{$prefix}--unstable-pagination__button:hover {
color: $ui-05;
background: $hover-ui;
color: $icon-primary;
background: $layer-hover;
}

.#{$prefix}--unstable-pagination__button--no-index {
cursor: not-allowed;
fill: $disabled-02;
fill: $icon-disabled;
}

.#{$prefix}--unstable-pagination__button.#{$prefix}--btn:disabled {
background: transparent;
border-color: $ui-03;
border-color: $border-subtle;
}

.#{$prefix}--unstable-pagination__button:disabled:hover,
.#{$prefix}--unstable-pagination__button--no-index:hover {
background: transparent;
cursor: not-allowed;
fill: $disabled-02;
fill: $icon-disabled;
}

.#{$prefix}--unstable-pagination__page-selector,
Expand Down Expand Up @@ -155,7 +155,7 @@ $css--helpers: true;
.#{$prefix}--unstable-pagination__page-selector
.#{$prefix}--select-input:hover,
.#{$prefix}--unstable-pagination__page-sizer .#{$prefix}--select-input:hover {
background: $hover-ui;
background: $background-hover;
}

.#{$prefix}--unstable-pagination__page-selector .#{$prefix}--select__arrow,
Expand All @@ -169,11 +169,11 @@ $css--helpers: true;
}

.#{$prefix}--unstable-pagination__page-selector {
border-left: 1px solid $ui-03;
border-left: 1px solid $border-subtle;
}

.#{$prefix}--unstable-pagination__page-sizer {
border-right: 1px solid $ui-03;
border-right: 1px solid $border-subtle;
}
}

Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/components/popover/_popover.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
/// @access private
/// @group popover
@mixin popover {
$popover-text-color: $text-01;
$popover-text-color: $text-primary;
$popover-caret-offset: 1rem;
$popover-box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
$popover-offset: 8px;
Expand All @@ -39,17 +39,17 @@
width: max-content;
max-width: rem(368px);
color: $popover-text-color;
background-color: $ui-01;
background-color: $layer;
border-radius: 2px;
}

.#{$prefix}--popover--light .#{$prefix}--popover-contents {
background-color: $ui-background;
background-color: $background;
}

.#{$prefix}--popover--high-contrast .#{$prefix}--popover-contents {
color: $inverse-01;
background-color: $inverse-02;
color: $text-inverse;
background-color: $background-inverse;
}

.#{$prefix}--popover--caret .#{$prefix}--popover-contents::before,
Expand Down
Loading

0 comments on commit 8a94d14

Please sign in to comment.