[minor][v16.12.0] Update ToniqError to use ToniqAlert.Danger + ToniqC…

…hip.Outline (#111)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-root",
-    "version": "16.11.0",
+    "version": "16.12.0",
     "private": true,
     "description": "Root design system mono-repo package.",
     "homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",

packages/design-system/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system",
-    "version": "16.11.0",
+    "version": "16.12.0",
     "private": false,
     "description": "Design system elements for Toniq Labs",
     "keywords": [

packages/design-system/src/elements/toniq-chip/toniq-chip.element.book.ts

@@ -72,6 +72,10 @@ export const toniqChipBookPage = defineBookPage({
                     title: 'danger style',
                     inputs: {variant: ToniqChipVariantEnum.Danger},
                 },
+                {
+                    title: 'outline style',
+                    inputs: {variant: ToniqChipVariantEnum.Outline},
+                },
             ];
 
         styleVariations.forEach((styleVariation) => {

packages/design-system/src/elements/toniq-chip/toniq-chip.element.ts

@@ -11,6 +11,7 @@ export enum ToniqChipVariantEnum {
     Success = 'success',
     Warning = 'warning',
     Danger = 'danger',
+    Outline = 'outline',
 }
 
 export const ToniqChip = defineToniqElement<{
@@ -26,6 +27,7 @@ export const ToniqChip = defineToniqElement<{
         'toniq-chip-success': ({inputs}) => inputs.variant === ToniqChipVariantEnum.Success,
         'toniq-chip-warning': ({inputs}) => inputs.variant === ToniqChipVariantEnum.Warning,
         'toniq-chip-danger': ({inputs}) => inputs.variant === ToniqChipVariantEnum.Danger,
+        'toniq-chip-outline': ({inputs}) => inputs.variant === ToniqChipVariantEnum.Outline,
     },
     options: {
         ignoreUnsetInputs: true,
@@ -58,6 +60,12 @@ export const ToniqChip = defineToniqElement<{
         ${hostClasses['toniq-chip-success'].selector} {
             ${applyBackgroundAndForeground(toniqColors.colorSuccess)};
         }
+
+        ${hostClasses['toniq-chip-outline'].selector} {
+            box-sizing: border-box;
+            ${applyBackgroundAndForeground(toniqColors.pagePrimary)};
+            border: 2px solid ${toniqColors.accentPrimary.backgroundColor};
+        }
     `,
     renderCallback({inputs}) {
         const iconTemplate: TemplateResult | string = inputs.icon

packages/design-system/src/elements/toniq-error-message/toniq-error-message.element.ts

@@ -1,22 +1,19 @@
 import {css, html} from 'element-vir';
 import {defineToniqElementNoInputs} from '../define-toniq-element';
+import {ToniqAlert, ToniqAlertVariantEnum} from '../toniq-alert/toniq-alert.element';
 
 export const ToniqErrorMessage = defineToniqElementNoInputs({
     tagName: 'toniq-error-message',
     styles: css`
         :host {
             display: block;
-            color: red;
-        }
-
-        p {
-            padding: 0;
-            margin: 0;
         }
     `,
     renderCallback() {
         return html`
-            <p><slot></slot></p>
+            <${ToniqAlert.assign({variant: ToniqAlertVariantEnum.Danger})}>
+                <slot></slot>
+            </${ToniqAlert}>
         `;
     },
 });

packages/native-elements-test/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-native-elements-test",
-    "version": "16.11.0",
+    "version": "16.12.0",
     "private": true,
     "scripts": {
         "compile": "virmator compile",

packages/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-scripts",
-    "version": "16.11.0",
+    "version": "16.12.0",
     "private": true,
     "scripts": {
         "compile": "virmator compile",