initial

layers/ui/components/alert/styles.scss

@@ -0,0 +1,83 @@
+@use '../../styles/mixins' as *;
+@use '../../styles/variables' as *;
+
+.ui-alert {
+  $self: &;
+
+  --icon-color: var(--alert-icon-color);
+
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  border-radius: 12px;
+  background-color: var(--alert-background);
+  text-align: left;
+
+  &__title {
+    @include txt-i-b('alert-title');
+
+    grid-area: title;
+    margin-bottom: var(--alert-title-margin, 4px);
+    margin-top: 2px;
+  }
+
+  &__text {
+    @include txt-i-m('alert-text');
+
+    grid-area: text;
+    color: $clr-black;
+
+    #{$self}.has-title & {
+      color: var(--alert-text-color, $clr-grey-500);
+    }
+
+    #{$self}.has-action & {
+      margin-bottom: 4px;
+    }
+  }
+
+  &__icon {
+    grid-area: icon;
+    align-self: center;
+    color: var(--icon-color);
+    padding: 8px;
+
+    #{$self}.has-title &,
+    #{$self}.has-action & {
+      align-self: flex-start
+    }
+  }
+
+  &__content{
+    flex: 1;
+  }
+
+  @include element-variant('alert', 'large', (
+          'padding': 16px,
+  ));
+
+  @include element-variant('alert', 'neutral', (
+          'icon-color': $clr-grey-500,
+          'background': $clr-grey-200,
+  ));
+
+  @include element-variant('alert', 'positive', (
+          'icon-color': $clr-green-500,
+          'background': $clr-green-100,
+  ));
+
+  @include element-variant('alert', 'warning', (
+          'icon-color': $clr-warn-500,
+          'background': $clr-warn-100,
+  ));
+
+  @include element-variant('alert', 'negative', (
+          'icon-color': $clr-red-500,
+          'background': $clr-red-100,
+  ));
+
+  @include element-variant('alert', 'marketing', (
+          'icon-color': $clr-market-500,
+          'background': $clr-market-100,
+  ));
+}