Support colors

melohagan · Jan 10, 2023 · bff614c · bff614c
1 parent 0fdcc2e
commit bff614c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spectrum-inline-alert",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields.",
   "license": "MIT",
   "svelte": "index.js",
@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@crownframework/svelte-error-boundary": "^1.0.3",
-    "@spectrum-css/inlinealert": "^5.0.10",
     "svelte": "^3.49.0"
   },
   "devDependencies": {

diff --git a/schema.json b/schema.json
@@ -15,7 +15,6 @@
       },
       {
         "type": "select",
-        "showInBar": true,
         "label": "Variant",
         "defaultValue": "neutral",
         "key": "variant",
@@ -26,19 +25,19 @@
           },
           {
             "label": "Notice",
-            "value": "notice"
+            "value": "help"
           },
           {
             "label": "Informative",
             "value": "info"
           },
           {
             "label": "Positive",
-            "value": "positive"
+            "value": "success"
           },
           {
             "label": "Negative",
-            "value": "negative"
+            "value": "error"
           }
         ]
       }

diff --git a/src/Component.svelte b/src/Component.svelte
@@ -9,15 +9,16 @@
 
   const iconMap = {
     info: "Info",
-    positive: "CheckmarkCircle",
-    negative: "Alert",
-    notice: "Alert",
+    success: "CheckmarkCircle",
+    error: "Alert",
+    help: "Alert",
   }
   $: icon = iconMap[variant]
+  $: helpClass = variant === "help" ? "help" : ""
 </script>
 
 <div use:styleable={$component.styles}>
-  <div class="spectrum-InLineAlert spectrum-InLineAlert--info">
+  <div class="spectrum-InLineAlert spectrum-InLineAlert--{variant} {helpClass}">
     <div class="spectrum-InLineAlert-header">
         {title}
       <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon" focusable="false" aria-hidden="true">
@@ -29,3 +30,18 @@
     </div>
   </div>
 </div>
+
+<style>
+  .spectrum-InLineAlert {
+    --spectrum-semantic-negative-border-color: #e34850;
+    --spectrum-semantic-positive-border-color: #2d9d78;
+    --spectrum-semantic-informative-border-color: #3978ec;
+    --spectrum-semantic-positive-icon-color: #2d9d78;
+    --spectrum-semantic-negative-icon-color: #e34850;
+    --spectrum-semantic-informative-icon-color: #3978ec;
+  }
+  .help {
+    --spectrum-semantic-informative-border-color: #e88b37;
+    --spectrum-semantic-informative-icon-color: #e88b37;
+  }
+</style>