feat: add sentiment borders to badge, alert, banner

Author: SimeonC

.prettierignore

@@ -13,4 +13,5 @@ website/src/static/css/fonts.css
 .gritmodules
 storybook-static
 tmp
-.@tablecheck
+.@tablecheck
+.all-contributorsrc

system/core/src/components/Alert.ts

@@ -3,7 +3,15 @@ import { css } from '../utils';
 export const element = 'div';
 export const className = 'alert';
 
-const variants = ['success', 'info', 'error', 'warning', 'neutral'] as const;
+const variants = [
+  'tertiary',
+  'ghost',
+  'success',
+  'info',
+  'error',
+  'warning',
+  'neutral'
+] as const;
 
 export type AlertVariant = (typeof variants)[number];
 
@@ -25,6 +33,7 @@ export const fullStyles = css`
   gap: var(--spacing-l1) var(--spacing-l2);
   color: var(--neutral-text);
   background: var(--neutral-surface);
+  border: 1px solid var(--neutral-border);
   border-radius: var(--border-radius-small);
   padding: var(--spacing-l2) var(--spacing-l3);
   align-items: flex-start;
@@ -59,20 +68,34 @@ export const fullStyles = css`
     grid: 'description' 1fr / 1fr;
   }
 
+  &[data-variant='tertiary'] {
+    color: var(--text);
+    background: var(--surface);
+    border-color: var(--border);
+  }
+  &[data-variant='ghost'] {
+    color: var(--text);
+    background: transparent;
+    border-color: var(--border);
+  }
   &[data-variant='error'] {
     color: var(--error-text);
     background: var(--error-surface);
+    border-color: var(--error-border);
   }
   &[data-variant='warning'] {
     color: var(--warning-text);
     background: var(--warning-surface);
+    border-color: var(--warning-border);
   }
   &[data-variant='success'] {
     color: var(--success-text);
     background: var(--success-surface);
+    border-color: var(--success-border);
   }
   &[data-variant='info'] {
     color: var(--info-text);
     background: var(--info-surface);
+    border-color: var(--info-border);
   }
 `;

system/core/src/components/Badge.ts

@@ -14,6 +14,7 @@ export const fullStyles = css`
   border-radius: var(--border-radius-small);
   color: var(--neutral-text);
   background-color: var(--neutral-surface);
+  border: 1px solid var(--neutral-border);
 
   &[data-size='x-small'] {
     padding: 2px 6px;
@@ -41,10 +42,12 @@ export interface Props {
 }
 
 const variants = [
+  'tertiary',
+  'ghost',
   'success',
-  'warning',
   'info',
   'error',
+  'warning',
   'neutral',
   'purple',
   'orange',
@@ -53,19 +56,36 @@ const variants = [
 
 export type BadgeVariant = (typeof variants)[number];
 
+function getVariantStyles(key: BadgeVariant): string {
+  if (key === 'disabled')
+    return css`
+      color: var(--text-disabled);
+      background-color: var(--surface-disabled);
+      border-color: transparent;
+    `;
+  if (key === 'tertiary')
+    return css`
+      color: var(--text);
+      background-color: var(--surface);
+      border-color: var(--border);
+    `;
+  if (key === 'ghost')
+    return css`
+      color: var(--text);
+      background-color: transparent;
+      border-color: var(--border);
+    `;
+  return css`
+    color: var(--${key}-text);
+    background-color: var(--${key}-surface);
+    border-color: var(--${key}-border);
+  `;
+}
+
 export const variantStyles = variants.reduce(
   (result, key) => ({
     ...result,
-    [key]:
-      key === 'disabled'
-        ? css`
-            color: var(--text-disabled);
-            background-color: var(--surface-disabled);
-          `
-        : css`
-            color: var(--${key}-text);
-            background-color: var(--${key}-surface);
-          `
+    [key]: getVariantStyles(key)
   }),
   {} as Record<BadgeVariant, string>
 );

system/core/src/components/Banner.ts

@@ -5,6 +5,7 @@ export const className = 'banner';
 export const fullStyles = css`
   padding: var(--spacing-l4);
   background-color: var(--neutral-surface);
+  border: 1px solid var(--neutral-border);
   display: grid;
   grid-template-columns: min-content auto min-content;
   grid-template-areas: 'icon title close' 'icon content content' 'icon actions actions';
@@ -41,16 +42,41 @@ export interface Props {
   'data-variant'?: BannerVariant;
 }
 
-const variants = ['success', 'warning', 'info', 'neutral'] as const;
+const variants = [
+  'tertiary',
+  'ghost',
+  'success',
+  'warning',
+  'info',
+  'neutral'
+] as const;
 
 export type BannerVariant = (typeof variants)[number];
 
+function getVariantStyles(key: BannerVariant): string {
+  if (key === 'tertiary')
+    return css`
+      color: var(--text);
+      background-color: var(--surface);
+      border-color: var(--border);
+    `;
+  if (key === 'ghost')
+    return css`
+      color: var(--text);
+      background-color: transparent;
+      border-color: var(--border);
+    `;
+  return css`
+    color: var(--${key}-text);
+    background-color: var(--${key}-surface);
+    border-color: var(--${key}-border);
+  `;
+}
+
 export const variantStyles = variants.reduce(
   (result, key) => ({
     ...result,
-    [key]: css`
-      background-color: var(--${key}-surface);
-    `
+    [key]: getVariantStyles(key)
   }),
   {} as Record<BannerVariant, string>
 );

system/core/src/components/Button.ts

@@ -73,7 +73,7 @@ export const variantStyles = {
     }
   `,
   secondary: css`
-    --tk-button-color: var(--surface-secondary-text);
+    --tk-button-color: var(--text-secondary);
     --tk-button-background-color: var(--surface-secondary);
     --tk-button-border-color: var(--surface-secondary);
     &[data-pseudo='hover'],

system/core/src/components/InputAlert.ts

@@ -43,16 +43,19 @@ export const fullStyles = css`
 
   &[data-variant='error'] {
     background: var(--error-surface);
+    border: 1px solid var(--error-border);
     color: var(--error-text);
   }
 
   &[data-variant='warning'] {
     background: var(--warning-surface);
+    border: 1px solid var(--warning-border);
     color: var(--warning-text);
   }
 
   &[data-variant='info'] {
     background: var(--info-surface);
+    border: 1px solid var(--info-border);
     color: var(--info-text);
   }
 `;