Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(color): Update colors #711

Merged
merged 6 commits into from
Apr 18, 2018
Merged

feat(color): Update colors #711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fdab025
feat(color): start updating colors
tw15egan Apr 11, 2018
eb8214f
feat(color): update more colors
tw15egan Apr 11, 2018
fc1d366
feat(color): update hover colors
tw15egan Apr 12, 2018
e7a6d26
feat(color): tweak some more colors
tw15egan Apr 13, 2018
5f314f1
feat(color): update date-picker colors
tw15egan Apr 13, 2018
a5e35b5
feat(color): update table colors
tw15egan Apr 18, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/accordion/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

.#{$prefix}--accordion__item {
transition: all $transition--base $carbon--standard-easing;
border-top: 1px solid $ui-04;
border-top: 1px solid $ui-03;
overflow: hidden;

&:focus {
Expand All @@ -26,12 +26,12 @@
.#{$prefix}--accordion__arrow {
@include focus-outline('border');
overflow: visible; // safari fix
outline-offset: -.5px; // safari fix
outline-offset: -0.5px; // safari fix
}
}

&:last-child {
border-bottom: 1px solid $ui-04;
border-bottom: 1px solid $ui-03;
}
}

Expand All @@ -53,7 +53,7 @@
.#{$prefix}--accordion__arrow {
@include focus-outline('border');
overflow: visible; // safari fix
outline-offset: -.5px; // safari fix
outline-offset: -0.5px; // safari fix
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/breadcrumb/_breadcrumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
.#{$prefix}--breadcrumb-item::after {
content: '/';
margin-left: $spacing-md;
color: $text-03;
color: $text-02;
}

.#{$prefix}--breadcrumb--no-trailing-slash .#{$prefix}--breadcrumb-item:last-child::after {
Expand All @@ -52,8 +52,8 @@
&:hover,
&:focus {
outline: none;
color: $brand-01;
border-bottom: 1px solid $brand-01;
color: $hover-primary-text;
border-bottom: 1px solid $hover-primary-text;
}

// Applies to Firefox only
Expand Down
4 changes: 2 additions & 2 deletions src/components/button/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
$brand-01,
transparent,
$inverse-01,
$brand-02,
$hover-primary,
$ui-01
);
}
Expand All @@ -49,7 +49,7 @@
transparent,
$brand-01,
$brand-01,
$brand-01,
$hover-secondary,
$brand-01
);

Expand Down
8 changes: 4 additions & 4 deletions src/components/card/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
width: rem(200px);
height: rem(240px);
background-color: $ui-01;
border: 1px solid $ui-04;
border: 1px solid $ui-03;

&:focus {
@include focus-outline('border');
Expand Down Expand Up @@ -58,7 +58,7 @@
align-items: center;
justify-content: space-between;
height: rem(48px);
background-color: $ui-03;
background-color: $ui-02;
padding-left: 1rem;
padding-right: 1rem;

Expand Down Expand Up @@ -130,7 +130,7 @@
width: rem(50px);
height: rem(50px);
background-color: $ui-01;
border: 1px solid $ui-04;
border: 1px solid $ui-03;
border-radius: 100%;

.#{$prefix}--about__icon--img {
Expand Down Expand Up @@ -181,7 +181,7 @@
&:hover,
&:focus {
.#{$prefix}--app-actions__button--icon {
fill: $brand-01;
fill: $hover-secondary;
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/components/checkbox/_checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
top: calc(50% - 9px);
height: rem(18px);
width: rem(18px);
border: $checkbox-border-width solid $ui-05;
border: $checkbox-border-width solid $ui-04;
background-color: $ui-01;
}

Expand Down Expand Up @@ -116,7 +116,7 @@
width: rem(18px);
margin-right: $spacing-xs;
background-color: $ui-01;
border: $checkbox-border-width solid $ui-05;
border: $checkbox-border-width solid $ui-04;
min-width: rem(18px);
}

Expand Down
28 changes: 17 additions & 11 deletions src/components/content-switcher/_content-switcher.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@

&:focus {
outline: 1px solid transparent;
box-shadow: 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
background-color: $brand-02;
// box-shadow: 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
background-color: $hover-primary;
z-index: 2;
border-color: $brand-02;
border-color: $hover-primary;
text-decoration: underline;
color: $inverse-01;
}
Expand All @@ -43,8 +43,8 @@

&:hover,
&:active {
background-color: $brand-02;
border-color: $brand-02;
background-color: $hover-primary;
border-color: $hover-primary;
color: $inverse-01;
}
}
Expand All @@ -64,18 +64,22 @@

.#{$prefix}--content-switcher-btn:not(:first-of-type) {
border-left: $content-switcher-option-border;

&:hover {
border-left-color: $hover-primary;
}
}

.#{$prefix}--content-switcher-btn:first-of-type {
border-bottom-left-radius: $content-switcher-border-radius;
border-top-left-radius: $content-switcher-border-radius;

&:hover {
border-color: $brand-02;
border-color: $hover-primary;
}

&:focus {
box-shadow: -2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
// box-shadow: -2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
z-index: 0;
}
}
Expand All @@ -85,11 +89,11 @@
border-bottom-right-radius: $content-switcher-border-radius;

&:hover {
border-color: $brand-02;
border-color: $hover-primary;
}

&:focus {
box-shadow: 2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
// box-shadow: 2px 0 0 0 $color__blue-20, 0 2px 0 0 $color__blue-20, 0 -2px 0 0 $color__blue-20;
z-index: 0;
}
}
Expand All @@ -100,8 +104,10 @@
font-weight: 400;
outline: 1px solid transparent;

&:hover {
border-color: $brand-01;
&:hover,
&:focus {
border-color: $hover-primary;
background-color: $hover-primary;
}
}
}
6 changes: 3 additions & 3 deletions src/components/copy-button/_copy-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
@include typescale('omega');
top: 1.1rem;
padding: 0.5rem 1rem;
border: 1px solid $ui-04;
border: 1px solid $ui-03;
color: $text-01;
content: attr(data-feedback);
transform: translateX(-50%);
Expand All @@ -40,8 +40,8 @@
top: 0.85rem;
width: 0.5rem;
height: 0.5rem;
border-right: 1px solid $ui-04;
border-bottom: 1px solid $ui-04;
border-right: 1px solid $ui-03;
border-bottom: 1px solid $ui-03;
content: '';
transform: rotate(-135deg);
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/data-table-v2/_data-table-v2-action.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,20 +37,20 @@

&:hover {
> .#{$prefix}--toolbar-action__icon {
fill: $brand-01;
fill: $hover-secondary;
}
}

&:focus {
@include focus-outline;
> .#{$prefix}--toolbar-action__icon {
fill: $brand-01;
fill: $hover-secondary;
}
}

&:active {
> .#{$prefix}--toolbar-action__icon {
fill: darken($brand-01, 5%);
fill: $hover-secondary;
}
}

Expand Down
12 changes: 6 additions & 6 deletions src/components/data-table-v2/_data-table-v2-core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border-bottom: 1px solid $ui-04;
border-bottom: 1px solid $ui-03;

thead {
@include typescale('zeta');
Expand Down Expand Up @@ -50,24 +50,24 @@
}

th {
border-top: 1px solid $ui-04;
border-top: 1px solid $ui-03;
}

th,
td {
border-top: 1px solid $ui-04;
border-top: 1px solid $ui-03;
padding-left: $spacing-sm;
vertical-align: middle;
text-align: left;

&:first-of-type {
padding-left: rem(24px);
border-left: 1px solid $ui-04;
border-left: 1px solid $ui-03;
}

&:last-of-type {
padding-right: $spacing-lg;
border-right: 1px solid $ui-04;
border-right: 1px solid $ui-03;
}
}

Expand Down Expand Up @@ -123,7 +123,7 @@
}

&:last-of-type {
border-right-color: $ui-04;
border-right-color: $ui-03;
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/data-table-v2/_data-table-v2-expandable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@

&:hover {
> td {
background-color: rgba($brand-02, 0.1);
background-color: $hover-row;
}

> td:first-of-type {
Expand All @@ -51,7 +51,7 @@

+ tr[data-child-row] {
> td {
background-color: rgba($brand-02, 0.1);
background-color: $hover-row;
border-bottom: 1px solid $brand-01;
border-right: 1px solid $brand-01;
}
Expand All @@ -61,7 +61,7 @@

tr.#{$prefix}--expandable-row--hover-v2 {
> td {
background-color: rgba($brand-02, 0.1);
background-color: $hover-row;
border-top: 1px solid $brand-01;
}

Expand Down
8 changes: 4 additions & 4 deletions src/components/data-table/_data-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
min-width: 500px;
border-collapse: collapse;
border-spacing: 0;
border: 2px solid $ui-04;
border: 2px solid $ui-03;

td {
@include reset;
Expand Down Expand Up @@ -67,7 +67,7 @@
@include reset;
border-collapse: collapse;
width: auto;
border: 2px solid $ui-04;
border: 2px solid $ui-03;

tr td:first-child,
tr th:first-child {
Expand Down Expand Up @@ -116,10 +116,10 @@
}

&--even {
background-color: $ui-03;
background-color: $ui-02;

& + .#{$prefix}--expandable-row {
background-color: $ui-03;
background-color: $ui-02;
}
}
}
Expand Down
Loading