diff --git a/source/_patterns/01-elements/chips/chip.scss b/source/_patterns/01-elements/chips/chip.scss index 5da587ec46..362acdfae6 100644 --- a/source/_patterns/01-elements/chips/chip.scss +++ b/source/_patterns/01-elements/chips/chip.scss @@ -6,6 +6,7 @@ border: solid 1px $db-color-cool-gray-400; border-radius: $chip---radius; display: inline-flex; + font-weight: 500; // Link related styles font-size: to-rem($pxValue: 14); @@ -42,6 +43,12 @@ color: $chip-checked--color; //*** Variants *** + &[data-variant="light"] { + background-color: $db-color-cool-gray-200; + color: $db-color-cool-gray-700; + border: 1px solid $db-color-cool-gray-400; + } + &[data-variant="warning"] { background-color: $db-color-warning; } diff --git a/source/_patterns/01-elements/chips/chips.json b/source/_patterns/01-elements/chips/chips.json index 1adfeb02ca..348489a50d 100644 --- a/source/_patterns/01-elements/chips/chips.json +++ b/source/_patterns/01-elements/chips/chips.json @@ -1,5 +1,9 @@ { "variants": [ + { + "label": "Light", + "variant": "light" + }, { "label": "Warning", "variant": "warning" diff --git a/source/_patterns/01-elements/tags/tag.scss b/source/_patterns/01-elements/tags/tag.scss index e5541e016f..9271b34673 100644 --- a/source/_patterns/01-elements/tags/tag.scss +++ b/source/_patterns/01-elements/tags/tag.scss @@ -6,10 +6,10 @@ border-radius: $tag---radius; color: $tag---color; display: inline-flex; + font-weight: 500; // Link related styles font-size: to-rem($pxValue: 12); - font-weight: initial; height: to-rem($pxValue: 24); justify-content: center; padding-left: to-rem($pxValue: 4); @@ -27,6 +27,12 @@ } //*** Variants *** + &[data-variant="light"] { + background-color: $db-color-cool-gray-200; + color: $db-color-cool-gray-700; + border: 1px solid $db-color-cool-gray-400; + } + &[data-variant="warning"] { background-color: $db-color-warning-small-font; } diff --git a/source/_patterns/01-elements/tags/tags.json b/source/_patterns/01-elements/tags/tags.json index 2df5522654..d4d83e7be3 100644 --- a/source/_patterns/01-elements/tags/tags.json +++ b/source/_patterns/01-elements/tags/tags.json @@ -1,5 +1,9 @@ { "variants": [ + { + "label": "Light", + "variant": "light" + }, { "label": "Informative", "variant": "informative"