diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index 26adc858b..41c775fae 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -49,6 +49,7 @@ $black-64: color.adjust($black, $alpha: -0.36); $black-80: color.adjust($black, $alpha: -0.2); $teal-66: color.adjust($teal, $alpha: -0.34); $teal-64: color.adjust($teal, $alpha: -0.36); +$teal-40: color.adjust($teal, $alpha: -0.6); $teal-24: color.adjust($teal, $alpha: -0.76); $teal-30: color.adjust($teal, $alpha: -0.7); $zinc-66: color.adjust($zinc, $alpha: -0.34); diff --git a/src/styles/components/_tag.scss b/src/styles/components/_tag.scss index fda1a041c..d26db32ad 100644 --- a/src/styles/components/_tag.scss +++ b/src/styles/components/_tag.scss @@ -38,8 +38,16 @@ .c-tag--closable { height: auto; - border-radius: 1.8em; - padding-right: 0; + padding: abstracts.$spacer-xs 0 abstracts.$spacer-xs 1.2rem; + border-radius: 1.8rem; + background-color: abstracts.$teal-40; + font-size: abstracts.$font-size-sm; + line-height: 2rem; + + .c-tag__close { + padding: 0; + font-size: abstracts.$font-size-base; + } } // Colors