@cypress-design/vue-alert 0.3.0 → 0.4.0

package/.turbo/turbo-build.log

@@ -0,0 +1,13 @@
+$ yarn build:module && yarn build:types
+$ yarn vite build
+$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
+vite v4.2.1 building for production...
+transforming...
+✓ 5 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.es.mjs  9.84 kB │ gzip: 2.77 kB │ map: 269.19 kB
+dist/index.umd.js  8.26 kB │ gzip: 2.62 kB │ map: 268.58 kB
+✓ built in 7.79s
+$ yarn vue-tsc --project ./tsconfig.build.json
+$ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json

package/Alert.vue

@@ -71,7 +71,7 @@ const detailsRef = ref(null)
 const contentRef = ref(null)
 
 const typeClasses = computed(() => {
-  return alertClasses[props.type]
+  return alertClasses[props.type] ?? {}
 })
 
 let timeout: number | undefined
@@ -105,7 +105,7 @@ function dismiss() {
 
 const computedIconProps = computed(() => {
   return {
-    strokeColor: alertClasses[props.type].iconColor,
+    strokeColor: typeClasses.value.iconColor,
     class: 'my-[4px] mr-[8px]',
   }
 })
@@ -126,7 +126,7 @@ const icon: ComputedRef<FunctionalComponent | null> = computed(() => {
 })
 
 const sizeClasses = computed(() => {
-  return alertSizesClasses[props.size]
+  return alertSizesClasses[props.size] ?? {}
 })
 </script>
 
@@ -164,7 +164,7 @@ const sizeClasses = computed(() => {
     </div>
     <details
       v-if="slots.details"
-      class="p-[16px] border-t-1"
+      class="p-[16px] border-t border-t-1"
       ref="detailsRef"
       :class="[typeClasses.bodyClass, typeClasses.borderClass]"
     >

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cypress-design/vue-alert
 
+## 0.4.0
+
+### Minor Changes
+
+- [#178](https://github.com/cypress-io/cypress-design/pull/178) [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650) Thanks [@elevatebart](https://github.com/elevatebart)! - deliver new docs and improved components
+
+### Patch Changes
+
+- Updated dependencies [[`18399c7`](https://github.com/cypress-io/cypress-design/commit/18399c72a52288c67af0935384430d4e4cd24251), [`d0de778`](https://github.com/cypress-io/cypress-design/commit/d0de77843adb87d8f4804219c6dca8f45b15c650)]:
+  - @cypress-design/vue-icon@0.20.0
+  - @cypress-design/details-animation@0.1.0
+
 ## 0.3.0
 
 ### Minor Changes

package/ReadMe.md

@@ -9,7 +9,7 @@ Examples:
 - To attract attention to a specific note on the page.
 - To inform the user of a change in the system.
 
-## install
+## Install
 
 ```bash
 npm install @cypress-design/vue-alert
@@ -25,10 +25,11 @@ yarn add @cypress-design/vue-alert
 
 The simplest is to use with plain text. By default, type is `info`.
 
-```vue
+```vue live
 <script setup>
 import Alert from '@cypress-design/vue-alert'
 </script>
+
 <template>
   <Alert type="error">Great Scott!!</Alert>
 </template>
@@ -36,33 +37,33 @@ import Alert from '@cypress-design/vue-alert'
 
 One can also have rich text in both the title and the body.
 
-```vue
-<template>
-  <Alert>
-    This is an <code>info</code> message
-    <template #body>
-      <p>This is the body of the alert.</p>
-    </template>
-  </Alert>
-</template>
+```jsx live
+<Alert>
+  This is an <code>info</code> message
+  <template #body>
+    <p>This is the body of the alert.</p>
+  </template>
+</Alert>
 ```
 
 If you want the alert to be dismissible, you can add the `dismissible` prop. Don't forget to add the `@dismiss` prop to handle the dismiss event.
 
-```vue
-<template>
-  <Alert
-    title="This is an info message"
-    dismissible
-    @dismiss="() => setDismissed(true)"
-  />
-</template>
+```jsx live
+const dismissed = false
+
+<Alert
+  dismissible
+  @dismiss="dismissed = true"
+>
+	This is an info message
+</Alert>
+<p v-if="dismissed">Alert dismissed</p>
 ```
 
 You can also remove the rounded corners and the icon of the alert by adding the `notRounded` and the `noIcon` props.
 
-```vue
-<template>
-  <Alert type="warning" title="This is an info message" notRounded noIcon />
-</template>
+```jsx live
+<Alert type="warning" notRounded noIcon>
+  Look at my corners
+</Alert>
 ```

package/dist/constants.d.ts

@@ -1,14 +1,14 @@
 import type { WindiColor } from '@cypress-design/icon-registry';
-export declare type AlertType = 'info' | 'success' | 'error' | 'warning' | 'neutral';
+export type AlertType = 'info' | 'success' | 'error' | 'warning' | 'neutral';
 export declare const alertSizesClasses: {
     readonly xs: "py-[4px] px-[8px] leading-[22px] text-[14px]";
     readonly sm: "py-[8px] px-[12px] leading-[22px] text-[14px]";
     readonly md: "py-[12px] px-[16px] leading-[24px] text-[16px]";
     readonly lg: "p-[16px] leading-[24px] text-[16px]";
 };
-export declare type AlertSize = keyof typeof alertSizesClasses;
+export type AlertSize = keyof typeof alertSizesClasses;
 export declare const defaultAlertSize: AlertSize;
-export declare type AlertClasses = {
+export type AlertClasses = {
     headerClass: string;
     bodyClass: string;
     borderClass: string;

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAE/D,oBAAY,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAC5E,eAAO,MAAM,iBAAiB;;;;;CAKpB,CAAA;AAEV,oBAAY,SAAS,GAAG,MAAM,OAAO,iBAAiB,CAAA;AACtD,eAAO,MAAM,gBAAgB,EAAE,SAAgB,CAAA;AAE/C,oBAAY,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,cAAc,EAAE,UAAU,CAAA;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,gBAAgB,EAAE,UAAU,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CA6DxD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,SAAkB,CAAA;AAEjD,eAAO,MAAM,iBAAiB,uBAAuB,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAE/D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAC5E,eAAO,MAAM,iBAAiB;;;;;CAKpB,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,iBAAiB,CAAA;AACtD,eAAO,MAAM,gBAAgB,EAAE,SAAgB,CAAA;AAE/C,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,cAAc,EAAE,UAAU,CAAA;IAC1B,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,gBAAgB,EAAE,UAAU,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CA6DxD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,SAAkB,CAAA;AAEjD,eAAO,MAAM,iBAAiB,uBAAuB,CAAA"}

package/dist/index.es.mjs

@@ -1,7 +1,7 @@
-import { h as i, defineComponent as R, ref as z, useSlots as T, computed as f, onMounted as j, onUnmounted as I, openBlock as C, createElementBlock as x, normalizeClass as p, createElementVNode as m, unref as r, renderSlot as k, normalizeProps as A, guardReactiveProps as B, createBlock as E, resolveDynamicComponent as H, mergeProps as _, createCommentVNode as g, createVNode as S, createTextVNode as N, toDisplayString as O } from "vue";
+import { h as i, defineComponent as M, ref as z, useSlots as R, computed as f, onMounted as j, onUnmounted as T, openBlock as C, createElementBlock as x, normalizeClass as p, createElementVNode as m, unref as r, renderSlot as k, normalizeProps as A, guardReactiveProps as I, createBlock as B, resolveDynamicComponent as E, mergeProps as H, createCommentVNode as g, createVNode as S, createTextVNode as _, toDisplayString as N } from "vue";
 import * as y from "@cypress-design/icon-registry";
-import { ICON_COLOR_PROP_NAMES as P } from "@cypress-design/icon-registry";
-import { DetailsAnimation as V } from "@cypress-design/details-animation";
+import { ICON_COLOR_PROP_NAMES as O } from "@cypress-design/icon-registry";
+import { DetailsAnimation as P } from "@cypress-design/details-animation";
 const v = ({
   body: s,
   compiledClasses: o,
@@ -10,19 +10,23 @@ const v = ({
   interactiveColorsOnGroup: h,
   ...d
 }) => {
-  const c = Object.keys(d).reduce((a, n) => (!P.includes(n) && n !== "name" && (a[n] = d[n]), a), {}), l = {
+  const c = Object.keys(d).reduce(
+    (a, n) => (!O.includes(n) && n !== "name" && (a[n] = d[n]), a),
+    {}
+  ), l = {
     width: e,
     height: e,
     viewBox: `0 0 ${e} ${e}`,
     fill: "none",
     innerHTML: s,
     ...c
+    // add all standard attributes back to the svg tag
   };
   return o.length && (l.class = o.join(" ")), l;
 }, Z = (s) => {
   const { sizeWithDefault: o, compiledClasses: e } = y.getComponentAttributes({ ...s, availableSizes: ["16", "24"] }), t = {
-    16: '<path d="M3 13 13 3M3 3l10 10" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-    24: '<path d="M4 20 20 4M4 4l16 16" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
+    16: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13 13 3M3 3l10 10" class="icon-dark"/>',
+    24: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 20 20 4M4 4l16 16" class="icon-dark"/>'
   }[o];
   if (!t)
     throw Error(`Icon "action-delete-large" is not available in size ${o}`);
@@ -32,9 +36,9 @@ const v = ({
     body: t,
     compiledClasses: e
   }));
-}, W = (s) => {
+}, V = (s) => {
   const { sizeWithDefault: o, compiledClasses: e } = y.getComponentAttributes({ ...s, availableSizes: ["16"] }), t = {
-    16: '<path d="M12.95 12.95a7 7 0 1 1-9.9-9.9 7 7 0 0 1 9.9 9.9Z" stroke="currentColor" stroke-width="2" class="icon-dark"/><path d="m6 8 1.5 2L10 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-dark"/>'
+    16: '<path stroke="currentColor" stroke-width="2" d="M12.95 12.95a7 7 0 1 1-9.9-9.9 7 7 0 0 1 9.9 9.9Z" class="icon-dark"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 8 1.5 2L10 6" class="icon-dark"/>'
   }[o];
   if (!t)
     throw Error(`Icon "checkmark-outline" is not available in size ${o}`);
@@ -44,10 +48,10 @@ const v = ({
     body: t,
     compiledClasses: e
   }));
-}, L = (s) => {
+}, W = (s) => {
   const { sizeWithDefault: o, compiledClasses: e } = y.getComponentAttributes({ ...s, availableSizes: ["8", "16"] }), t = {
-    8: '<path d="m1 2.5 3 3 3-3" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-    16: '<path d="m4 6 4 4 4-4" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
+    8: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 2.5 3 3 3-3" class="icon-dark"/>',
+    16: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4 6 4 4 4-4" class="icon-dark"/>'
   }[o];
   if (!t)
     throw Error(`Icon "chevron-down-small" is not available in size ${o}`);
@@ -59,7 +63,7 @@ const v = ({
   }));
 }, $ = (s) => {
   const { sizeWithDefault: o, compiledClasses: e } = y.getComponentAttributes({ ...s, availableSizes: ["16"] }), t = {
-    16: '<path fill-rule="evenodd" clip-rule="evenodd" d="M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-8a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm1 5a1 1 0 0 0-2 0v3a1 1 0 0 0 2 0V5Zm-1 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" fill="currentColor" class="icon-dark"/>'
+    16: '<path fill="currentColor" fill-rule="evenodd" d="M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-8a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm1 5a1 1 0 0 0-2 0v3a1 1 0 0 0 2 0V5Zm-1 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" class="icon-dark" clip-rule="evenodd"/>'
   }[o];
   if (!t)
     throw Error(`Icon "warning-circle" is not available in size ${o}`);
@@ -69,19 +73,22 @@ const v = ({
     body: t,
     compiledClasses: e
   }));
-}, G = {
+}, L = {
   xs: "py-[4px] px-[8px] leading-[22px] text-[14px]",
   sm: "py-[8px] px-[12px] leading-[22px] text-[14px]",
   md: "py-[12px] px-[16px] leading-[24px] text-[16px]",
   lg: "p-[16px] leading-[24px] text-[16px]"
-}, U = "lg", D = {
+}, G = "lg", U = {
   neutral: {
     headerClass: "text-gray-800 bg-gray-100",
     bodyClass: "bg-gray-50 text-gray-500",
     borderClass: "border-gray-100",
     detailsHeaderClass: "text-gray-600",
+    /* <tw-keep strokeColor="gray-600"/> */
     iconCloseColor: "gray-600",
+    /* <tw-keep strokeColor="gray-500"/> */
     iconColor: "gray-500",
+    /* <tw-keep strokeColor="gray-300"/> */
     iconChevronColor: "gray-300"
   },
   info: {
@@ -89,8 +96,11 @@ const v = ({
     bodyClass: "bg-indigo-50 text-indigo-500",
     borderClass: "border-indigo-100",
     detailsHeaderClass: "text-indigo-600",
+    /* <tw-keep strokeColor="indigo-500"/> */
     iconCloseColor: "indigo-500",
+    /* <tw-keep strokeColor="indigo-500"/> */
     iconColor: "indigo-500",
+    /* <tw-keep strokeColor="indigo-300"/> */
     iconChevronColor: "indigo-300"
   },
   warning: {
@@ -98,8 +108,11 @@ const v = ({
     bodyClass: "bg-orange-50 text-orange-500",
     borderClass: "border-orange-100",
     detailsHeaderClass: "text-orange-600",
+    /* <tw-keep strokeColor="orange-500"/> */
     iconCloseColor: "orange-500",
+    /* <tw-keep strokeColor="orange-400"/> */
     iconColor: "orange-400",
+    /* <tw-keep strokeColor="orange-300"/> */
     iconChevronColor: "orange-300"
   },
   error: {
@@ -107,8 +120,11 @@ const v = ({
     bodyClass: "bg-red-50 text-red-500",
     borderClass: "border-red-100",
     detailsHeaderClass: "text-red-600",
+    /* <tw-keep strokeColor="red-500"/> */
     iconCloseColor: "red-500",
+    /* <tw-keep strokeColor="red-400"/> */
     iconColor: "red-400",
+    /* <tw-keep strokeColor="red-300"/> */
     iconChevronColor: "red-300"
   },
   success: {
@@ -116,11 +132,14 @@ const v = ({
     bodyClass: "bg-jade-50 text-jade-600",
     borderClass: "border-jade-100",
     detailsHeaderClass: "text-jade-600",
+    /* <tw-keep strokeColor="jade-600"/> */
     iconCloseColor: "jade-600",
+    /* <tw-keep strokeColor="jade-500"/> */
     iconColor: "jade-500",
+    /* <tw-keep strokeColor="jade-300"/> */
     iconChevronColor: "jade-300"
   }
-}, q = "info", F = "Additional details", J = { class: "flex-1 font-medium" }, ee = /* @__PURE__ */ R({
+}, q = "info", F = "Additional details", J = { class: "flex-1 font-medium" }, ee = /* @__PURE__ */ M({
   __name: "Alert",
   props: {
     type: { default: q },
@@ -129,31 +148,31 @@ const v = ({
     noIcon: { type: Boolean },
     notRounded: { type: Boolean },
     duration: null,
-    size: { default: U }
+    size: { default: G }
   },
   emits: ["dismiss"],
   setup(s, { emit: o }) {
-    const e = s, t = z(!1), h = T(), d = z(null), c = z(null), l = f(() => D[e.type]);
+    const e = s, t = z(!1), h = R(), d = z(null), c = z(null), l = f(() => U[e.type] ?? {});
     let a;
     j(() => {
       e.duration && (a = setTimeout(n, e.duration));
     }), j(() => {
-      d.value && c.value && new V(d.value, c.value);
-    }), I(() => {
+      d.value && c.value && new P(d.value, c.value);
+    }), T(() => {
       a && clearTimeout(a);
     });
     function n() {
       t.value = !0, o("dismiss"), a && (clearTimeout(a), a = void 0);
     }
     const u = f(() => ({
-      strokeColor: D[e.type].iconColor,
+      strokeColor: l.value.iconColor,
       class: "my-[4px] mr-[8px]"
     })), w = f(() => {
       switch (e.type) {
         case "info":
           return null;
         case "success":
-          return () => i(W, u.value);
+          return () => i(V, u.value);
         case "warning":
           return () => i($, u.value);
         case "error":
@@ -161,16 +180,16 @@ const v = ({
         default:
           return null;
       }
-    }), M = f(() => G[e.size]);
+    }), D = f(() => L[e.size] ?? {});
     return (b, K) => t.value ? g("", !0) : (C(), x("div", {
       key: 0,
       class: p(["overflow-hidden text-left", e.notRounded ? void 0 : "rounded"])
     }, [
       m("div", {
-        class: p(["flex", [r(l).headerClass, r(M)]])
+        class: p(["flex", [r(l).headerClass, r(D)]])
       }, [
-        k(b.$slots, "icon", A(B(r(u))), () => [
-          !e.noIcon && r(w) ? (C(), E(H(r(w)), A(_({ key: 0 }, r(u))), null, 16)) : g("", !0)
+        k(b.$slots, "icon", A(I(r(u))), () => [
+          !e.noIcon && r(w) ? (C(), B(E(r(w)), A(H({ key: 0 }, r(u))), null, 16)) : g("", !0)
         ]),
         m("div", J, [
           k(b.$slots, "default")
@@ -194,18 +213,18 @@ const v = ({
       ], 2)) : g("", !0),
       r(h).details ? (C(), x("details", {
         key: 1,
-        class: p(["p-[16px] border-t-1", [r(l).bodyClass, r(l).borderClass]]),
+        class: p(["p-[16px] border-t border-t-1", [r(l).bodyClass, r(l).borderClass]]),
         ref_key: "detailsRef",
         ref: d
       }, [
         m("summary", {
           class: p(["flex font-medium cursor-pointer details-none", r(l).detailsHeaderClass])
         }, [
-          S(r(L), {
+          S(r(W), {
             strokeColor: r(l).iconChevronColor,
             class: "icon my-[4px] mr-[8px] transition transform -rotate-90 open:rotate-0"
           }, null, 8, ["strokeColor"]),
-          N(" " + O(e.detailsTitle), 1)
+          _(" " + N(e.detailsTitle), 1)
         ], 2),
         m("div", {
           ref_key: "contentRef",
@@ -222,6 +241,6 @@ const v = ({
 export {
   ee as default
 };
-
-/* <windicss-keep class="my-[4px] mr-[8px] overflow-hidden text-left rounded flex flex-1 font-medium m-[4px] ml-[8px] h-[16px] p-[16px] border-t-1 cursor-pointer details-none transition transform -rotate-90 open:rotate-0 py-[4px] px-[8px] leading-[22px] text-[14px] py-[8px] px-[12px] py-[12px] px-[16px] leading-[24px] text-[16px] text-gray-800 bg-gray-100 bg-gray-50 text-gray-500 border-gray-100 text-gray-600 text-indigo-700 bg-indigo-100 bg-indigo-50 text-indigo-500 border-indigo-100 text-indigo-600 text-orange-700 bg-orange-100 bg-orange-50 text-orange-500 border-orange-100 text-orange-600 text-red-700 bg-red-100 bg-red-50 text-red-500 border-red-100 text-red-600 text-jade-700 bg-jade-100 bg-jade-50 text-jade-600 border-jade-100 icon-dark-gray-600 icon-dark-gray-500 icon-dark-gray-300 icon-dark-indigo-500 icon-dark-indigo-300 icon-dark-orange-500 icon-dark-orange-400 icon-dark-orange-300 icon-dark-red-500 icon-dark-red-400 icon-dark-red-300 icon-dark-jade-600 icon-dark-jade-500 icon-dark-jade-300"> */
 //# sourceMappingURL=index.es.mjs.map
+
+/* <windicss-keep class="my-[4px] mr-[8px] overflow-hidden text-left rounded flex flex-1 font-medium m-[4px] ml-[8px] h-[16px] p-[16px] border-t border-t-1 cursor-pointer details-none transition transform -rotate-90 open:rotate-0 py-[4px] px-[8px] leading-[22px] text-[14px] py-[8px] px-[12px] py-[12px] px-[16px] leading-[24px] text-[16px] text-gray-800 bg-gray-100 bg-gray-50 text-gray-500 border-gray-100 text-gray-600 text-indigo-700 bg-indigo-100 bg-indigo-50 text-indigo-500 border-indigo-100 text-indigo-600 text-orange-700 bg-orange-100 bg-orange-50 text-orange-500 border-orange-100 text-orange-600 text-red-700 bg-red-100 bg-red-50 text-red-500 border-red-100 text-red-600 text-jade-700 bg-jade-100 bg-jade-50 text-jade-600 border-jade-100 icon-dark-gray-600 icon-dark-gray-500 icon-dark-gray-300 icon-dark-indigo-500 icon-dark-indigo-300 icon-dark-orange-500 icon-dark-orange-400 icon-dark-orange-300 icon-dark-red-500 icon-dark-red-400 icon-dark-red-300 icon-dark-jade-600 icon-dark-jade-500 icon-dark-jade-300"> */