feat(toast): add css variables

Endava · Jun 28, 2023 · 08dcbdc · 08dcbdc
1 parent 7922a87
commit 08dcbdc
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/packages/bee-q/src/components/toast/scss/bq-toast.scss b/packages/bee-q/src/components/toast/scss/bq-toast.scss
@@ -9,7 +9,10 @@
 }
 
 .bq-toast {
-  @apply flex items-center gap-xs bg-bg-primary p-m shadow-l;
+  @apply flex items-center gap-[var(--bq-toast--gap)] px-[var(--bq-toast--padding-x)] py-[var(--bq-toast--padding-y)];
+  @apply rounded-[var(--bq-toast--border-radius)] bg-[var(--bq-toast--background)] shadow-[shadow:var(--bq-toast--box-shadow)];
+
+  border: var(--bq-toast--border-width) var(--bq-toast--border-style) var(--bq-toast--border-color);
 }
 
 .bq-toast--icon {

diff --git a/packages/bee-q/src/components/toast/scss/bq-toast.variables.scss b/packages/bee-q/src/components/toast/scss/bq-toast.variables.scss
@@ -3,6 +3,34 @@
 /* -------------------------------------------------------------------------- */
 
 :host {
+  /**
+   * @prop --bq-toast--background: Toast background color
+   * @prop --bq-toast--box-shadow: Toast box shadow
+   * @prop --bq-toast--padding-y: Toast vertical padding
+   * @prop --bq-toast--padding-x: Toast horizontal padding
+   * @prop --bq-toast--gap: Toast distance between icon and text
+   * @prop --bq-toast--border--radius: Toast border radius
+   * @prop --bq-toast--border-color: Toast border color
+   * @prop --bq-toast--border-style: Toast border style
+   * @prop --bq-toast--border-width: Toast border width
+   * @prop --bq-toast--info-icon-color: Toast icon color when type is 'info'
+   * @prop --bq-toast--success-icon-color: Toast icon color when type is 'success'
+   * @prop --bq-toast--alert-icon-color: Toast icon color when type is 'alert'
+   * @prop --bq-toast--error-icon-color: Toast icon color when type is 'error'
+   * @prop --bq-toast--loading-icon-color: Toast icon color when type is 'loading'
+   * @prop --bq-toast--custom-icon-color: Toast icon color when type is 'custom'
+   */
+
+  --bq-toast--background: theme('colors.bg.primary');
+  --bq-toast--box-shadow: theme('boxShadow.l');
+  --bq-toast--padding-y: theme('spacing.s');
+  --bq-toast--padding-x: theme('spacing.m');
+  --bq-toast--gap: theme('spacing.xs');
+  --bq-toast--border-radius: theme('borderRadius.s');
+  --bq-toast--border-width: unset;
+  --bq-toast--border-style: none;
+  --bq-toast--border-color: theme('colors.transparent');
+
   --bq-toast--info-icon-color: theme('colors.icon.brand');
   --bq-toast--success-icon-color: theme('colors.icon.success');
   --bq-toast--alert-icon-color: theme('colors.icon.warning');

diff --git a/packages/bee-q/src/global/styles/utils/_utility.scss b/packages/bee-q/src/global/styles/utils/_utility.scss
@@ -43,7 +43,7 @@
  */
 
 .bq-toast-portal {
-  @apply fixed z-50 flex max-h-full flex-col gap-xs2;
+  @apply fixed z-50 flex max-h-full flex-col gap-s;
 
   &.top-left {
     @apply left-xxl2 top-xxl2;