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

Jump to bottom

feat(tokens): update color tokens pt3 #8376

Merged
merged 13 commits into from
Apr 23, 2021
Merged

feat(tokens): update color tokens pt3 #8376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
2c8c649
feat(Tag): update color tokens
tw15egan Apr 12, 2021
0d224d0
feat(Textarea): update color tokens
tw15egan Apr 12, 2021
a03c0df
feat(TextInput): update color tokens
tw15egan Apr 12, 2021
0ab7c37
feat(Tile): update color tokens
tw15egan Apr 12, 2021
eba3a3a
feat(TimePicker): update color tokens
tw15egan Apr 13, 2021
048221e
feat(Toggle): start token update
tw15egan Apr 13, 2021
aa95344
feat(Toggle): finish token update
tw15egan Apr 13, 2021
293ac4b
feat(Tooltip): update color tokens
tw15egan Apr 13, 2021
76f7966
feat(Treeview): update color tokens
tw15egan Apr 13, 2021
eb6fd75
feat(UIShell): update a few color tokens
tw15egan Apr 13, 2021
8c06edd
feat(globals): update global scssto new color tokens
tw15egan Apr 13, 2021
04a2c8f
fix(tokens): update tokens based on feedback
tw15egan Apr 14, 2021
8d3ac25
Merge branch 'main' into token-update-pt3
kodiakhq[bot] Apr 23, 2021
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
6 changes: 3 additions & 3 deletions packages/components/src/components/data-table/_data-table-core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,9 +275,9 @@
tbody
tr:not(.#{$prefix}--parent-row):nth-child(even)
td {
background-color: $data-table-zebra-color;
border-top: 1px solid $data-table-zebra-color;
border-bottom: 1px solid $data-table-zebra-color;
background-color: $layer-accent;
border-top: 1px solid $layer-accent;
border-bottom: 1px solid $layer-accent;
}

.#{$prefix}--data-table--zebra
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/components/data-table/_data-table-expandable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,9 +273,9 @@

.#{$prefix}--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 1) td,
.#{$prefix}--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 2) td {
background-color: $data-table-zebra-color;
border-top: 1px solid $data-table-zebra-color;
border-bottom: 1px solid $data-table-zebra-color;
background-color: $layer-accent;
border-top: 1px solid $layer-accent;
border-bottom: 1px solid $layer-accent;
}

.#{$prefix}--data-table--zebra tr.#{$prefix}--parent-row td,
Expand Down
17 changes: 12 additions & 5 deletions packages/components/src/components/tag/_tag.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,13 +127,17 @@
}

.#{$prefix}--tag--high-contrast {
@include tag-theme($inverse-02, $inverse-01, $inverse-hover-ui);
@include tag-theme(
$background-inverse,
$text-inverse,
$background-inverse-hover
);
}

.#{$prefix}--tag--disabled,
.#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
.#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
@include tag-theme($disabled-01, $disabled-02);
@include tag-theme($layer-disabled, $text-disabled);

&:hover {
cursor: not-allowed;
Expand Down Expand Up @@ -227,7 +231,7 @@
}

.#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus {
box-shadow: inset 0 0 0 1px $inverse-focus-ui;
box-shadow: inset 0 0 0 1px $focus-inverse;
}

.#{$prefix}--tag--filter.#{$prefix}--tag--disabled
Expand All @@ -236,7 +240,7 @@
}

.#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {
fill: $disabled-02;
fill: $icon-disabled;
}

// small tags
Expand All @@ -258,7 +262,10 @@
// Skeleton state
.#{$prefix}--tag.#{$prefix}--skeleton {
@include skeleton;
@include tag-theme($bg-color: $skeleton-01, $text-color: $text-01);
@include tag-theme(
$bg-color: $skeleton-background,
$text-color: $text-primary
);

width: rem(60px);
overflow: hidden;
Expand Down
16 changes: 9 additions & 7 deletions packages/components/src/components/text-area/_text-area.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@
height: 100%;
min-height: rem(40px);
padding: rem(11px) $carbon--spacing-05;
color: $text-01;
background-color: $field-01;
color: $text-primary;
background-color: $field;
border: none;
border-bottom: 1px solid $ui-04;
border-bottom: 1px solid $border-strong;
transition: background-color $duration--fast-01 motion(standard, productive),
outline $duration--fast-01 motion(standard, productive);
resize: vertical;
Expand All @@ -49,6 +49,7 @@
@include type-style('body-long-01');
}

// V11: Possibly deprecate
.#{$prefix}--text-area--light {
background-color: $field-02;
}
Expand All @@ -67,24 +68,25 @@
position: absolute;
top: $carbon--spacing-04;
right: $carbon--spacing-05;
fill: $support-01;
fill: $support-error;
}

//-----------------------------
// Disabled
//-----------------------------
.#{$prefix}--text-area:disabled {
color: $disabled-02;
background-color: $disabled-01;
color: $text-disabled;
background-color: $field-disabled;
border-bottom: 1px solid transparent;
outline: none;
cursor: not-allowed;
}

.#{$prefix}--text-area:disabled::placeholder {
color: $disabled-02;
color: $text-disabled;
}

// V11: Possibly deprecate
.#{$prefix}--text-area.#{$prefix}--text-area--light:disabled {
background-color: $field-02;
}
Expand Down
34 changes: 19 additions & 15 deletions packages/components/src/components/text-input/_text-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@
width: 100%;
height: rem(40px);
padding: 0 $carbon--spacing-05;
color: $text-01;
background-color: $field-01;
color: $text-primary;
background-color: $field;
border: none;
border-bottom: 1px solid $ui-04;
border-bottom: 1px solid $border-strong;
transition: background-color $duration--fast-01 motion(standard, productive),
outline $duration--fast-01 motion(standard, productive);

Expand Down Expand Up @@ -63,6 +63,7 @@
@include placeholder-colors;
}

// V11: Possibly deprecate
.#{$prefix}--text-input--light {
background-color: $field-02;
}
Expand All @@ -82,11 +83,11 @@
top: 50%;
right: $carbon--spacing-05;
transform: translateY(-50%);
fill: $support-01;
fill: $support-error;
}

.#{$prefix}--text-input__invalid-icon--warning {
fill: $support-03;
fill: $support-warning;

path:first-of-type {
opacity: 1;
Expand Down Expand Up @@ -121,7 +122,7 @@

svg {
transition: fill $duration--fast-01 motion(standard, productive);
fill: $icon-02;
fill: $icon-secondary;

// Windows, Firefox HCM Fix
@media screen and (-ms-high-contrast: active),
Expand All @@ -136,10 +137,11 @@
@include focus-outline('outline');
}

.#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover,
.#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:hover
svg,
.#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger:focus
svg {
fill: $icon-01;
fill: $icon-primary;
}

.#{$prefix}--text-input--invalid,
Expand Down Expand Up @@ -177,10 +179,10 @@
+ .#{$prefix}--text-input--password__visibility__toggle
svg {
cursor: not-allowed;
fill: $disabled-02;
fill: $icon-disabled;

&:hover {
fill: $disabled-02;
fill: $icon-disabled;
}
}

Expand All @@ -190,20 +192,21 @@
.#{$prefix}--text-input:disabled {
@include focus-outline('reset');

color: $disabled-02;
background-color: $disabled-01;
color: $text-disabled;
background-color: $field-disabled;
border-bottom: 1px solid transparent;
// Needed to fix disabled text in Safari #6673
-webkit-text-fill-color: currentColor;
cursor: not-allowed;
}

// V11: Possibly deprecate
.#{$prefix}--text-input--light:disabled {
background-color: $field-02;
}

.#{$prefix}--text-input:disabled::placeholder {
color: $disabled-02;
color: $text-disabled;
opacity: 1;
}

Expand Down Expand Up @@ -234,7 +237,7 @@
//-----------------------------
.#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper {
position: relative;
background: $field-01;
background: $field;
transition: background-color $duration--fast-01 motion(standard, productive),
outline $duration--fast-01 motion(standard, productive);
}
Expand Down Expand Up @@ -274,7 +277,7 @@
+ .#{$prefix}--text-input__divider {
display: block;
margin: 0 1rem;
border-color: $ui-03;
border-color: $border-subtle;
border-style: solid;
border-bottom: none;
}
Expand All @@ -283,6 +286,7 @@
top: rem(80px);
}

// V11: Possibly deprecate
.#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--light {
background: $field-02;
}
Expand Down
Loading