@glance-networks/agent-plugin
Version:
Glance Networks Agent Plugin
91 lines (90 loc) • 3.34 kB
JavaScript
// filled icons
import alert_error_filled from './assets/alert_error_filled.svelte';
import alert_triangle_filled from './assets/alert_triangle_filled.svelte';
import alert_info_filled from './assets/alert_info_filled.svelte';
import alert_success_filled from './assets/alert_success_filled.svelte';
// normal icons
import alertInfo from './assets/alertInfo.svelte';
import alertTriangle from './assets/alertTriangle.svelte';
import alertError from './assets/alertError.svelte';
import alertSuccess from './assets/alertSuccess.svelte';
// tailwindcss colors scheme
import { theme } from '@glance-design/tailwind-config';
const tailwindColors = theme?.colors ?? {};
/**
* @constant
* @name ALERT_BADGE_SIZES
* @description Alert badge sizes
**/
export const ALERT_BADGE_SIZES = {
small: 'small',
medium: 'medium',
large: 'large',
};
/**
* @constant
* @name Icons
* @description SVG icons, colors and label for the alert severity badge
**/
export const Icons = {
info: {
component: alertInfo,
label: 'Alert info icon',
inverseStroke: tailwindColors['primary-on-surface']['inverse'],
stroke: tailwindColors['info-on-surface']['bright'],
dataIcon: 'info',
},
warning: {
component: alertTriangle,
label: 'Alert warning icon',
inverseStroke: tailwindColors['primary-on-surface']['inverse'],
stroke: tailwindColors['warning-on-surface']['bright'],
dataIcon: 'warning',
},
error: {
component: alertError,
label: 'Alert error icon',
inverseStroke: tailwindColors['error-on-surface']['fixed-light'],
stroke: tailwindColors['error-on-surface']['bright'],
dataIcon: 'error',
},
success: {
component: alertSuccess,
label: 'Alert success icon',
inverseStroke: tailwindColors['primary-on-surface']['inverse'],
stroke: tailwindColors['success-on-surface']['bright'],
dataIcon: 'success',
},
info_filled: {
component: alert_info_filled,
label: 'Filled alert success icon',
inverseFill: tailwindColors['primary-on-surface']['inverse'],
fill: tailwindColors['info-surface']['subtle'],
stroke: tailwindColors['info-on-surface']['default'],
dataIcon: 'info_filled',
},
warning_filled: {
component: alert_triangle_filled,
label: 'Filled alert warning icon',
inverseFill: tailwindColors['primary-on-surface']['inverse'],
fill: tailwindColors['warning-surface']['subtle'],
stroke: tailwindColors['warning-on-surface']['default'],
dataIcon: 'warning_filled',
},
error_filled: {
component: alert_error_filled,
label: 'Filled alert error icon',
inverseFill: tailwindColors['primary-on-surface']['inverse'],
fill: tailwindColors['error-surface']['subtle'],
stroke: tailwindColors['error-on-surface']['default'],
dataIcon: 'error_filled',
},
success_filled: {
component: alert_success_filled,
label: 'Filled alert success icon',
inverseFill: tailwindColors['primary-on-surface']['inverse'],
fill: tailwindColors['success-surface']['subtle'],
stroke: tailwindColors['success-on-surface']['default'],
dataIcon: 'success_filled',
},
};