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

Refactor tags to support custom colors #668

Merged
merged 10 commits into from
Feb 24, 2017
Merged

Refactor tags to support custom colors #668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3926c11
Move remove button in mixin, add mixin for custom tags
Feb 10, 2017
f565436
Add rose and cobalt class examples
Feb 10, 2017
aaaf335
Rename classes and mixins
Feb 10, 2017
afe6944
Remove mock modifiers
Feb 10, 2017
3d22cc2
Remove mock modifiers bis
llorca Feb 10, 2017
b243e62
Merge remote-tracking branch 'origin/master' into al/tag-mixin
Feb 15, 2017
53c37d6
Remove fake modifier examples
Feb 15, 2017
7da661f
Tweak minimal tag background color opacities
Feb 16, 2017
fbc1d4f
Merge branch 'al/tag-mixin' of github.com:palantir/blueprint into al/…
Feb 16, 2017
eb01b34
big refactor of tag mixins
Feb 24, 2017
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
89 changes: 30 additions & 59 deletions packages/core/src/components/tag/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,13 @@ $tag-margin: ($pt-input-height - $tag-height) / 2 !default;
$tag-height-large: $pt-grid-size * 3 !default;
$tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;

// styles for a default .pt-tag
@mixin tag($removable-selector: "&.pt-tag-removable") {
@mixin pt-tag() {
display: inline-block;
position: relative;
border: none;
border-radius: $pt-border-radius;
box-shadow: none;
background: $gray1;
background-color: $gray1;
min-width: $tag-height;
padding: $tag-padding ($tag-padding * 3);
line-height: $pt-icon-size-standard;
Expand All @@ -30,26 +29,16 @@ $tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;
}

.pt-dark & {
&:not([class*="pt-intent-"]) {
background: $gray5;
color: $pt-text-color;
}
background-color: $gray5;
color: $pt-text-color;
}

#{$removable-selector} {
&.pt-tag-removable {
padding-right: $tag-height;
}

@each $intent, $color in $pt-intent-colors {
&.pt-intent-#{$intent} {
background: $color;
color: $white;
}
}
}

// updated properties for a .pt-tag.pt-large
@mixin tag-large($removable-selector: "&.pt-tag-removable") {
@mixin pt-tag-large() {
min-width: $tag-height-large;
padding: $tag-padding-large ($tag-padding-large * 2);
line-height: $pt-icon-size-large;
Expand All @@ -59,84 +48,66 @@ $tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;
border-radius: $tag-height-large / 2;
}

#{$removable-selector} {
&.pt-tag-removable {
padding-right: $tag-height-large;
}
}

@mixin tag-minimal() {
@mixin pt-tag-intent($background-color, $text-color: $white) {
background: $background-color;
color: $text-color;
}

@mixin pt-tag-minimal() {
&:not([class*="pt-intent-"]) {
background: rgba($gray3, 0.2);
background-color: rgba($gray3, 0.2);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Out of scope for this PR, but whoa, didn't realize we were using a non-standard color for minimal-tag backgrounds. Reasoning for not just using $light-gray4?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you put a $light-gray4 tag on top of a $light-gray4 background, you end up with a problem 🎩 Transparency keeps this safe no matter what the background color

color: $pt-text-color;

.pt-dark & {
background: rgba($gray3, 0.2);
color: $pt-dark-text-color;
}
}
}

@each $intent, $color in $pt-intent-colors {
&.pt-intent-#{$intent} {
background: rgba($color, 0.15);
color: map-get($pt-intent-text-colors, $intent);
}
@mixin pt-tag-minimal-intent($background-color, $text-color, $dark-text-color) {
background-color: rgba($background-color, 0.15);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if I want an exact color for the background (e.g. some really light color from my style guide's color palette)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fair point, but not a recommended practice for the same reasoning than above

color: $text-color;

.pt-dark &.pt-intent-#{$intent} {
background: rgba($color, 0.2);
color: map-get($pt-dark-intent-text-colors, $intent);
}
.pt-dark & {
background-color: rgba($background-color, 0.25);
color: $dark-text-color;
}
}

// styles for default .pt-tag-remove
@mixin tag-remove() {
@mixin pt-tag-remove() {
@include pt-icon();

position: absolute;
top: 0;
right: 0;
opacity: 0.5;

border: none;
background: none;
cursor: pointer;
padding: $tag-padding;
color: $white;
color: inherit;

&:hover {
opacity: 0.8;
background: none;
text-decoration: none;
}

&::before {
content: $pt-icon-small-cross;
&:active {
opacity: 1;
}

// standard (non-minimal) tags have a unique text color in dark theme.
// intent tags don't change in the dark theme.
.pt-dark .pt-tag:not(.pt-minimal):not([class*="pt-intent-"]) & {
color: $pt-text-color;
&::before {
content: $pt-icon-small-cross;
}
}

// updated properties for .pt-tag.pt-large .pt-tag-remove
@mixin tag-remove-large() {
@include pt-icon-sized($pt-icon-size-large);
margin-left: $pt-grid-size / 2;
padding: $tag-padding-large;
}

@mixin tag-remove-minimal() {
color: inherit;

@each $intent, $color in $pt-intent-colors {
.pt-intent-#{$intent} & {
color: $color;
}

.pt-dark .pt-intent-#{$intent} & {
color: $color;
}
.pt-large & {
@include pt-icon-sized($pt-icon-size-large);
padding: $tag-padding-large;
}
}
33 changes: 20 additions & 13 deletions packages/core/src/components/tag/_tag.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,17 @@ Styleguide components.tag.css
*/

.pt-tag {
@include tag();
@include pt-tag();

&.pt-large,
.pt-large & {
@include tag-large();
@include pt-tag-large();
}

@each $intent, $color in $pt-intent-colors {
&.pt-intent-#{$intent} {
@include pt-tag-intent($color);
}
}

/*
Expand Down Expand Up @@ -85,23 +91,24 @@ Styleguide components.tag.css
*/

&.pt-minimal {
@include tag-minimal();
@include pt-tag-minimal();

@each $intent, $color in $pt-intent-colors {
&.pt-intent-#{$intent} {
@include pt-tag-minimal-intent(
$color,
map-get($pt-intent-text-colors, $intent),
map-get($pt-dark-intent-text-colors, $intent)
);
}
}
}
}

.pt-tag-remove {
@include tag-remove();

.pt-large & {
@include tag-remove-large();
}

.pt-minimal & {
@include tag-remove-minimal();
}
@include pt-tag-remove();
}


/*
JavaScript API

Expand Down