bge-ui 1.0.21 → 1.0.23

package/src/icons/MonoCommenceUp.vue

@@ -0,0 +1,55 @@
+<template>
+  <svg
+    :style="`width: 1em; height: 1em; font-size: ${size}px; ${
+      color ? 'color:' + color + ';' : ''
+    };`"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4 4C3.44772 4 3 4.44772 3 5C3 5.55229 3.44772 6 4 6L20 6C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4L4 4Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M5.70711 15.7779C6.09764 16.1684 6.7308 16.1684 7.12132 15.7779L11.0711 11.8281L11.0712 20C11.0712 20.5523 11.5189 21 12.0712 21C12.6235 21 13.0712 20.5523 13.0712 20L13.0711 11.8282L17.0208 15.7779C17.4113 16.1684 18.0445 16.1684 18.435 15.7779C18.8255 15.3874 18.8255 14.7542 18.435 14.3637L12.7782 8.70682C12.3877 8.31629 11.7545 8.31629 11.364 8.70681L5.70711 14.3637C5.31658 14.7542 5.31658 15.3874 5.70711 15.7779Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+  </svg>
+</template>
+<script lang="ts" setup>
+defineProps({
+  size: {
+    default: 24,
+    type: [Number, String],
+  },
+  color: {
+    default: '',
+    type: String,
+  },
+})
+defineOptions({
+  name: 'MonoCommenceUp',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoComplete.vue

@@ -12,13 +12,17 @@
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M21.442 6.8538L11.0113 18.227L2.86041 10.9222L4.1952 9.43284L10.8737 15.4181L19.968 5.50198L21.442 6.8538Z"
+      d="M20.705 6.17788C21.112 6.55117 21.1394 7.18374 20.7661 7.59077L11.6795 17.4984C11.3092 17.9022 10.6831 17.9328 10.2751 17.5672L3.6051 11.5896C3.19382 11.221 3.15921 10.5888 3.5278 10.1775C3.89639 9.76623 4.52861 9.73162 4.9399 10.1002L10.8737 15.4181L19.2921 6.23895C19.6654 5.83193 20.298 5.80458 20.705 6.17788Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -34,39 +38,11 @@ defineOptions({
 })
 </script>
 <style lang="scss">
-.bge-color-svg {
-  --icon-theme: #fff833;
-  --icon-gray: #9baec2;
-  --icon-gay-dark: #526375;
-
-  .dark & {
-    --icon-theme: #ffff38;
-    --icon-gray: #708397;
-    --icon-gay-dark: #32404d;
-  }
-}
-
-.bge-fill-icon-theme {
-  fill: var(--icon-theme);
-}
-
-.bge-fill-icon-gray {
-  fill: var(--icon-gray);
-}
-
-.bge-fill-gay-dark {
-  fill: var(--icon-gay-dark);
-}
-
-.bge-stroke-icon-theme {
-  stroke: var(--icon-theme);
-}
-
-.bge-stroke-icon-gray {
-  stroke: var(--icon-gray);
+.bge-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>

package/src/icons/MonoCopy.vue

@@ -9,17 +9,29 @@
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="M20 4H9V6H7V2H22V17H18V15H20V4Z" fill="currentColor" />
+    <path
+      d="M20 4H9V6H7V4C7 2.89543 7.89543 2 9 2H20C21.1046 2 22 2.89543 22 4V15C22 16.1046 21.1046 17 20 17H18V15H20V4Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M2 22V7H17V22H2ZM4 9H15V20H4V9Z"
+      d="M4 22C2.89543 22 2 21.1046 2 20V9C2 7.89543 2.89543 7 4 7H15C16.1046 7 17 7.89543 17 9V20C17 21.1046 16.1046 22 15 22H4ZM4 9H15V20H4V9Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -35,39 +47,11 @@ defineOptions({
 })
 </script>
 <style lang="scss">
-.bge-color-svg {
-  --icon-theme: #fff833;
-  --icon-gray: #9baec2;
-  --icon-gay-dark: #526375;
-
-  .dark & {
-    --icon-theme: #ffff38;
-    --icon-gray: #708397;
-    --icon-gay-dark: #32404d;
-  }
-}
-
-.bge-fill-icon-theme {
-  fill: var(--icon-theme);
-}
-
-.bge-fill-icon-gray {
-  fill: var(--icon-gray);
-}
-
-.bge-fill-gay-dark {
-  fill: var(--icon-gay-dark);
-}
-
-.bge-stroke-icon-theme {
-  stroke: var(--icon-theme);
-}
-
-.bge-stroke-icon-gray {
-  stroke: var(--icon-gray);
+.bge-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>

package/src/icons/MonoEdit.vue

@@ -12,19 +12,28 @@
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M3 3H12.5V5H5V19H19V11H21V21H3V3Z"
+      d="M3 4.99999C3 3.89542 3.89543 2.99999 5 2.99999H12.5C13.0523 2.99999 13.5 3.4477 13.5 3.99999C13.5 4.55227 13.0523 4.99999 12.5 4.99999H5V19H19V11C19 10.4477 19.4477 9.99999 20 9.99999C20.5523 9.99999 21 10.4477 21 11V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V4.99999Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M9.29289 13.2929L19.2929 3.29289L20.7071 4.70711L10.7071 14.7071L9.29289 13.2929Z"
+      d="M10 14C9.60948 13.6095 9.60948 12.9763 10 12.5858L19.5858 2.99999C19.9763 2.60946 20.6095 2.60946 21 2.99998C21.3905 3.39051 21.3905 4.02367 21 4.4142L11.4142 14C11.0237 14.3905 10.3905 14.3905 10 14Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -40,39 +49,11 @@ defineOptions({
 })
 </script>
 <style lang="scss">
-.bge-color-svg {
-  --icon-theme: #fff833;
-  --icon-gray: #9baec2;
-  --icon-gay-dark: #526375;
-
-  .dark & {
-    --icon-theme: #ffff38;
-    --icon-gray: #708397;
-    --icon-gay-dark: #32404d;
-  }
-}
-
-.bge-fill-icon-theme {
-  fill: var(--icon-theme);
-}
-
-.bge-fill-icon-gray {
-  fill: var(--icon-gray);
-}
-
-.bge-fill-gay-dark {
-  fill: var(--icon-gay-dark);
-}
-
-.bge-stroke-icon-theme {
-  stroke: var(--icon-theme);
-}
-
-.bge-stroke-icon-gray {
-  stroke: var(--icon-gray);
+.bge-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>

package/src/icons/MonoEmail01.vue

@@ -12,13 +12,17 @@
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M2 20V4H22V20H2ZM18.8379 6H5.16204L12 11.6983L18.8379 6ZM4 7.63505V18H20V7.63503L12 14.3017L4 7.63505Z"
+      d="M4 20C2.89543 20 2 19.1046 2 18V6C2 4.89543 2.89543 4 4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H4ZM18.8379 6H5.16204L12 11.6983L18.8379 6ZM4 7.63505V18H20V7.63503L12.6402 13.7682C12.2693 14.0773 11.7306 14.0773 11.3598 13.7682L4 7.63505Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -34,39 +38,11 @@ defineOptions({
 })
 </script>
 <style lang="scss">
-.bge-color-svg {
-  --icon-theme: #fff833;
-  --icon-gray: #9baec2;
-  --icon-gay-dark: #526375;
-
-  .dark & {
-    --icon-theme: #ffff38;
-    --icon-gray: #708397;
-    --icon-gay-dark: #32404d;
-  }
-}
-
-.bge-fill-icon-theme {
-  fill: var(--icon-theme);
-}
-
-.bge-fill-icon-gray {
-  fill: var(--icon-gray);
-}
-
-.bge-fill-gay-dark {
-  fill: var(--icon-gay-dark);
-}
-
-.bge-stroke-icon-theme {
-  stroke: var(--icon-theme);
-}
-
-.bge-stroke-icon-gray {
-  stroke: var(--icon-gray);
+.bge-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>

package/src/icons/MonoEmail02.vue

@@ -9,16 +9,29 @@
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <path
+      d="M6 8C5.44772 8 5 8.44772 5 9C5 9.55228 5.44772 10 6 10C6.55228 10 7 9.55228 7 9C7 8.44772 6.55228 8 6 8Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M17 17.5H22V7.5C22 5.29086 20.2091 3.5 18 3.5H6.25C3.90279 3.5 2 5.40279 2 7.75V17.5H15V21.5H17V17.5ZM18 5.5H9.85622C10.2642 6.15251 10.5 6.92372 10.5 7.75V15.5H20V7.5C20 6.39543 19.1046 5.5 18 5.5ZM4 7.75C4 6.50736 5.00736 5.5 6.25 5.5C7.49264 5.5 8.5 6.50736 8.5 7.75V15.5H4V7.75Z"
+      d="M20 17.5H17V20.5C17 21.0523 16.5523 21.5 16 21.5C15.4477 21.5 15 21.0523 15 20.5V17.5H4C2.89543 17.5 2 16.6046 2 15.5V7.75C2 5.40279 3.90279 3.5 6.25 3.5H18C20.2091 3.5 22 5.29086 22 7.5V15.5C22 16.6046 21.1046 17.5 20 17.5ZM9.85622 5.5H18C19.1046 5.5 20 6.39543 20 7.5V15.5H10.5V7.75C10.5 6.92372 10.2642 6.15251 9.85622 5.5ZM6.25 5.5C5.00736 5.5 4 6.50736 4 7.75V15.5H8.5V7.75C8.5 6.50736 7.49264 5.5 6.25 5.5Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -34,39 +47,11 @@ defineOptions({
 })
 </script>
 <style lang="scss">
-.bge-color-svg {
-  --icon-theme: #fff833;
-  --icon-gray: #9baec2;
-  --icon-gay-dark: #526375;
-
-  .dark & {
-    --icon-theme: #ffff38;
-    --icon-gray: #708397;
-    --icon-gay-dark: #32404d;
-  }
-}
-
-.bge-fill-icon-theme {
-  fill: var(--icon-theme);
-}
-
-.bge-fill-icon-gray {
-  fill: var(--icon-gray);
-}
-
-.bge-fill-gay-dark {
-  fill: var(--icon-gay-dark);
-}
-
-.bge-stroke-icon-theme {
-  stroke: var(--icon-theme);
-}
-
-.bge-stroke-icon-gray {
-  stroke: var(--icon-gray);
+.bge-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>

package/src/icons/{MonoAssets.vue → MonoExclamationmark.vue}

@@ -10,21 +10,37 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M7 12L12 7L17 12L12 17L7 12ZM12 9.85714L14.1429 12L12 14.1429L9.85714 12L12 9.85714Z"
+      d="M12 7C12.5523 7 13 7.44772 13 8V12.5C13 13.0523 12.5523 13.5 12 13.5C11.4477 13.5 11 13.0523 11 12.5V8C11 7.44772 11.4477 7 12 7Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -36,43 +52,15 @@ defineProps({
   },
 })
 defineOptions({
-  name: 'MonoAssets',
+  name: 'MonoExclamationmark',
 })
 </script>
 <style lang="scss">
-.bge-color-svg {
-  --icon-theme: #fff833;
-  --icon-gray: #9baec2;
-  --icon-gay-dark: #526375;
-
-  .dark & {
-    --icon-theme: #ffff38;
-    --icon-gray: #708397;
-    --icon-gay-dark: #32404d;
-  }
-}
-
-.bge-fill-icon-theme {
-  fill: var(--icon-theme);
-}
-
-.bge-fill-icon-gray {
-  fill: var(--icon-gray);
-}
-
-.bge-fill-gay-dark {
-  fill: var(--icon-gay-dark);
-}
-
-.bge-stroke-icon-theme {
-  stroke: var(--icon-theme);
-}
-
-.bge-stroke-icon-gray {
-  stroke: var(--icon-gray);
+.bge-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>

package/src/icons/MonoEye.vue

@@ -12,19 +12,17 @@
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M12 9C10.3432 9 9 10.3432 9 12C9 13.6568 10.3432 15 12 15C13.6568 15 15 13.6568 15 12C15 10.3432 13.6568 9 12 9ZM11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12Z"
-      fill="currentColor"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M12 5C8.89044 5 6.1648 6.67673 4.29077 8.2301C3.33956 9.01854 2.57228 9.8047 2.04241 10.3937C1.77689 10.6888 1.56947 10.9362 1.42684 11.1119C1.35548 11.1997 1.30024 11.2698 1.26193 11.3191C1.24277 11.3438 1.22785 11.3633 1.21725 11.3772L1.20461 11.3939L1.20075 11.399L1.19893 11.4014L0.752281 12L1.19854 12.598L2 12C1.19854 12.598 1.19944 12.5992 1.19944 12.5992L1.20075 12.601L1.20461 12.6061L1.21725 12.6228C1.22785 12.6367 1.24277 12.6562 1.26193 12.6809C1.30024 12.7302 1.35548 12.8003 1.42684 12.8881C1.56947 13.0638 1.77689 13.3112 2.04241 13.6063C2.57228 14.1953 3.33956 14.9815 4.29077 15.7699C6.1648 17.3233 8.89044 19 12 19C15.1096 19 17.8352 17.3233 19.7092 15.7699C20.6604 14.9815 21.4277 14.1953 21.9576 13.6063C22.2231 13.3112 22.4305 13.0638 22.5732 12.8881C22.6445 12.8003 22.6998 12.7302 22.7381 12.6809C22.7572 12.6562 22.7722 12.6367 22.7828 12.6228L22.7954 12.6061L22.7993 12.601L22.8011 12.5986L23.2477 12L22.8015 11.402L22 12C22.8015 11.402 22.8006 11.4008 22.8006 11.4008L22.7993 11.399L22.7954 11.3939L22.7828 11.3772C22.7722 11.3633 22.7572 11.3438 22.7381 11.3191C22.6998 11.2698 22.6445 11.1997 22.5732 11.1119C22.4305 10.9362 22.2231 10.6888 21.9576 10.3937C21.4277 9.8047 20.6604 9.01854 19.7092 8.2301C17.8352 6.67673 15.1096 5 12 5ZM22 12L22.8011 12.5986C22.8011 12.5986 22.8015 12.598 22 12ZM2 12L1.19893 11.4014C1.19893 11.4014 1.19854 11.402 2 12ZM3.52929 12.2687C3.44309 12.1729 3.36395 12.083 3.29219 12C3.36395 11.917 3.44309 11.8271 3.52929 11.7313C4.01148 11.1953 4.70865 10.4815 5.5671 9.7699C7.31235 8.32327 9.58671 7 12 7C14.4133 7 16.6877 8.32327 18.4329 9.7699C19.2913 10.4815 19.9885 11.1953 20.4707 11.7313C20.5569 11.8271 20.636 11.917 20.7078 12C20.636 12.083 20.5569 12.1729 20.4707 12.2687C19.9885 12.8047 19.2913 13.5185 18.4329 14.2301C16.6877 15.6767 14.4133 17 12 17C9.58671 17 7.31235 15.6767 5.5671 14.2301C4.70865 13.5185 4.01148 12.8047 3.52929 12.2687Z"
+      d="M4 12.001V12C4.003 11.984 4.017 11.896 4.095 11.723C4.181 11.532 4.32 11.292 4.519 11.015C4.917 10.462 5.512 9.823 6.264 9.217C7.777 7.996 9.812 7 12 7C14.188 7 16.223 7.996 17.736 9.216C18.488 9.822 19.083 10.461 19.481 11.014C19.681 11.291 19.819 11.531 19.905 11.722C19.983 11.895 19.997 11.983 20 11.999V12C19.997 12.016 19.983 12.104 19.905 12.277C19.819 12.468 19.68 12.708 19.481 12.985C19.083 13.538 18.488 14.177 17.736 14.783C16.224 16.004 14.189 17 12 17C9.812 17 7.777 16.004 6.264 14.784C5.512 14.178 4.917 13.539 4.519 12.986C4.35491 12.7644 4.2129 12.5273 4.095 12.278C4.05129 12.1902 4.01935 12.0971 4 12.001ZM12 5C9.217 5 6.752 6.254 5.009 7.659C4.132 8.365 3.409 9.133 2.896 9.846C2.639 10.202 2.425 10.559 2.271 10.901C2.123 11.23 2 11.611 2 12C2 12.388 2.123 12.771 2.27 13.099C2.425 13.441 2.64 13.799 2.896 14.154C3.409 14.867 4.132 15.634 5.009 16.341C6.752 17.746 9.217 19 12 19C14.783 19 17.248 17.746 18.991 16.341C19.868 15.635 20.591 14.867 21.104 14.154C21.361 13.798 21.575 13.441 21.729 13.099C21.877 12.771 22 12.389 22 12C22 11.612 21.877 11.229 21.73 10.901C21.5567 10.5295 21.347 10.1761 21.104 9.846C20.591 9.133 19.868 8.366 18.991 7.659C17.248 6.254 14.783 5 12 5ZM11 12C11 11.7348 11.1054 11.4804 11.2929 11.2929C11.4804 11.1054 11.7348 11 12 11C12.2652 11 12.5196 11.1054 12.7071 11.2929C12.8946 11.4804 13 11.7348 13 12C13 12.2652 12.8946 12.5196 12.7071 12.7071C12.5196 12.8946 12.2652 13 12 13C11.7348 13 11.4804 12.8946 11.2929 12.7071C11.1054 12.5196 11 12.2652 11 12ZM12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -40,39 +38,11 @@ defineOptions({
 })
 </script>
 <style lang="scss">
-.bge-color-svg {
-  --icon-theme: #fff833;
-  --icon-gray: #9baec2;
-  --icon-gay-dark: #526375;
-
-  .dark & {
-    --icon-theme: #ffff38;
-    --icon-gray: #708397;
-    --icon-gay-dark: #32404d;
-  }
-}
-
-.bge-fill-icon-theme {
-  fill: var(--icon-theme);
-}
-
-.bge-fill-icon-gray {
-  fill: var(--icon-gray);
-}
-
-.bge-fill-gay-dark {
-  fill: var(--icon-gay-dark);
-}
-
-.bge-stroke-icon-theme {
-  stroke: var(--icon-theme);
-}
-
-.bge-stroke-icon-gray {
-  stroke: var(--icon-gray);
+.bge-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>

package/src/icons/MonoEyeClose.vue

@@ -12,19 +12,26 @@
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M4 2.58578L2.58579 4L5.73306 7.14727C5.21003 7.49974 4.72729 7.86827 4.29077 8.2301C3.33956 9.01854 2.57228 9.8047 2.04241 10.3937C1.77689 10.6888 1.56947 10.9362 1.42684 11.1119C1.35548 11.1997 1.30024 11.2698 1.26193 11.3191C1.24277 11.3438 1.22785 11.3633 1.21725 11.3772L1.20461 11.3939L1.20075 11.399L1.19893 11.4014L0.752281 12L1.19854 12.598L2 12C1.19854 12.598 1.19944 12.5992 1.19944 12.5992L1.20075 12.601L1.20461 12.6061L1.21725 12.6228C1.22785 12.6367 1.24277 12.6562 1.26193 12.6809C1.30024 12.7302 1.35548 12.8003 1.42684 12.8881C1.56947 13.0638 1.77689 13.3112 2.04241 13.6063C2.57228 14.1953 3.33956 14.9815 4.29077 15.7699C6.1648 17.3233 8.89044 19 12 19C13.6183 19 15.1327 18.5459 16.4771 17.8913L20 21.4142L21.4142 20L4 2.58578ZM7.17764 8.59185C6.6039 8.95606 6.06405 9.35798 5.5671 9.7699C4.70865 10.4815 4.01148 11.1953 3.52929 11.7313C3.44309 11.8271 3.36395 11.917 3.29219 12C3.36395 12.083 3.44309 12.1729 3.52929 12.2687C4.01148 12.8047 4.70865 13.5185 5.5671 14.2301C7.31235 15.6767 9.58671 17 12 17C13.0229 17 14.0208 16.7623 14.964 16.3782L13.2934 14.7076C12.9018 14.895 12.4631 15 12 15C10.3432 15 9 13.6568 9 12C9 11.5369 9.10495 11.0982 9.29237 10.7066L7.17764 8.59185ZM2 12L1.19893 11.4014C1.19893 11.4014 1.19854 11.402 2 12Z"
+      d="M3.29266 3.29265C2.90214 3.68317 2.90214 4.31634 3.29266 4.70686L5.71416 7.12836C5.4678 7.3012 5.23247 7.47885 5.009 7.65898C4.132 8.36498 3.409 9.13298 2.896 9.84598C2.639 10.202 2.425 10.559 2.271 10.901C2.123 11.23 2 11.611 2 12C2 12.388 2.123 12.771 2.27 13.099C2.425 13.441 2.64 13.799 2.896 14.154C3.409 14.867 4.132 15.634 5.009 16.341C6.752 17.746 9.217 19 12 19C13.6397 19 15.1691 18.5647 16.5054 17.9196L19.2931 20.7073C19.6836 21.0978 20.3168 21.0978 20.7073 20.7073C21.0979 20.3168 21.0979 19.6836 20.7073 19.2931L4.70688 3.29265C4.31635 2.90212 3.68319 2.90212 3.29266 3.29265ZM14.989 16.4031L13.2929 14.7071C12.8929 14.8981 12.4517 15 12 15C11.2044 15 10.4413 14.6839 9.87868 14.1213C9.31607 13.5587 9 12.7956 9 12C9 11.5483 9.10187 11.1071 9.29289 10.7071L7.15385 8.56805C6.84096 8.77344 6.54357 8.99137 6.264 9.21698C5.512 9.82298 4.917 10.462 4.519 11.015C4.32 11.292 4.181 11.532 4.095 11.723C4.02024 11.8888 4.00428 11.9765 4.00044 11.9976L4 12V12.001C4.01935 12.0971 4.05129 12.1902 4.095 12.278C4.2129 12.5273 4.35491 12.7644 4.519 12.986C4.917 13.539 5.512 14.178 6.264 14.784C7.777 16.004 9.812 17 12 17C13.0448 17 14.0545 16.7731 14.989 16.4031Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M20.4707 12.2687C19.9926 12.8002 19.3031 13.5065 18.4547 14.212L19.8742 15.6316C20.7494 14.8902 21.4587 14.1609 21.9576 13.6063C22.2231 13.3112 22.4305 13.0638 22.5732 12.8881C22.6445 12.8003 22.6998 12.7302 22.7381 12.6809C22.7572 12.6562 22.7722 12.6367 22.7828 12.6228L22.7954 12.6061L22.7993 12.601L22.8011 12.5986L23.2477 12L22.8015 11.402L22 12C22.8015 11.402 22.8006 11.4008 22.8006 11.4008L22.7993 11.399L22.7954 11.3939L22.7828 11.3772C22.7722 11.3633 22.7572 11.3438 22.7381 11.3191C22.6998 11.2698 22.6445 11.1997 22.5732 11.1119C22.4305 10.9362 22.2231 10.6888 21.9576 10.3937C21.4277 9.8047 20.6604 9.01854 19.7092 8.2301C17.8352 6.67673 15.1096 5 12 5C11.1603 5 10.3485 5.12228 9.57402 5.33138L11.2811 7.03844C11.5191 7.01321 11.7588 7 12 7C14.4133 7 16.6877 8.32327 18.4329 9.7699C19.2913 10.4815 19.9885 11.1953 20.4707 11.7313C20.5569 11.8271 20.636 11.917 20.7078 12C20.636 12.083 20.5569 12.1729 20.4707 12.2687ZM22 12L22.8011 12.5986C22.8011 12.5986 22.8015 12.598 22 12Z"
+      d="M19.481 12.985C19.2132 13.3571 18.8562 13.7681 18.4222 14.1818L19.8373 15.5969C20.3395 15.1143 20.7671 14.6223 21.104 14.154C21.361 13.798 21.575 13.441 21.729 13.099C21.877 12.771 22 12.389 22 12C22 11.612 21.877 11.229 21.73 10.901C21.5567 10.5295 21.347 10.1761 21.104 9.84598C20.591 9.13298 19.868 8.36598 18.991 7.65898C17.248 6.25398 14.783 4.99998 12 4.99998C11.1527 4.99998 10.3349 5.11622 9.55791 5.31757L11.2762 7.03588C11.5152 7.0123 11.7567 6.99998 12 6.99998C14.188 6.99998 16.223 7.99598 17.736 9.21598C18.488 9.82198 19.083 10.461 19.481 11.014C19.681 11.291 19.819 11.531 19.905 11.722C19.9798 11.8878 19.9957 11.9755 19.9996 11.9966L20 11.999V12L19.9996 12.0024C19.9957 12.0235 19.9798 12.1112 19.905 12.277C19.819 12.468 19.68 12.708 19.481 12.985Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
   </svg>
 </template>
 <script lang="ts" setup>
-import { defineProps } from 'vue'
 defineProps({
   size: {
     default: 24,
@@ -40,39 +47,11 @@ defineOptions({
 })
 </script>
 <style lang="scss">
-.bge-color-svg {
-  --icon-theme: #fff833;
-  --icon-gray: #9baec2;
-  --icon-gay-dark: #526375;
-
-  .dark & {
-    --icon-theme: #ffff38;
-    --icon-gray: #708397;
-    --icon-gay-dark: #32404d;
-  }
-}
-
-.bge-fill-icon-theme {
-  fill: var(--icon-theme);
-}
-
-.bge-fill-icon-gray {
-  fill: var(--icon-gray);
-}
-
-.bge-fill-gay-dark {
-  fill: var(--icon-gay-dark);
-}
-
-.bge-stroke-icon-theme {
-  stroke: var(--icon-theme);
-}
-
-.bge-stroke-icon-gray {
-  stroke: var(--icon-gray);
+.bge-fill-bg-red {
+  fill: var(--bg-red);
 }
 
-.bge-stroke-gay-dark {
-  stroke: var(--icon-gay-dark);
+.bge-fill-bg-green {
+  fill: var(--bg-green);
 }
 </style>