initial

layers/ui/components/badge/styles.scss

@@ -0,0 +1,47 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+@use 'sass:selector';
+
+.ui-badge {
+  @include txt-s-m;
+
+  display: inline-flex;
+  align-items: center;
+
+  gap: 4px;
+  padding: 4.5px 8.73px;
+  border-radius: 8px;
+  color: var(--badge-color);
+  background-color: var(--badge-background);
+  white-space: nowrap;
+
+  @include element-variant('badge', 'neutral', (
+          'color': $clr-cyan-500,
+          'background': $clr-grey-300,
+  ));
+
+  @include element-variant('badge', 'positive', (
+          'color': $clr-green-500,
+          'background': $clr-green-100,
+  ));
+
+  @include element-variant('badge', 'warning', (
+          'color': $clr-warn-500,
+          'background': $clr-warn-200,
+  ));
+
+  @include element-variant('badge', 'negative', (
+          'color': $clr-red-500,
+          'background': $clr-red-100,
+  ));
+
+  @include element-variant('badge', 'marketing', (
+          'color': $clr-white,
+          'background': $clr-cyan-300,
+  ));
+
+  @include element-variant('badge', 'extended', (
+          'color': $clr-cyan-500,
+          'background': $clr-white,
+  ));
+}