bge-ui 1.0.21 → 1.0.23

package/src/icons/MonoFile.vue

@@ -0,0 +1,48 @@
+<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
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.20017 3C5.93495 3 5.6806 3.10536 5.49306 3.29289C5.30552 3.48043 5.20017 3.73478 5.20017 4C5.20017 4.26522 5.30552 4.51957 5.49306 4.70711C5.6806 4.89464 5.93495 5 6.20017 5H18.2002C18.4654 5 18.7197 4.89464 18.9073 4.70711C19.0948 4.51957 19.2002 4.26522 19.2002 4C19.2002 3.73478 19.0948 3.48043 18.9073 3.29289C18.7197 3.10536 18.4654 3 18.2002 3H6.20017ZM4.38017 6C4.08975 6.00011 3.80284 6.06347 3.53938 6.18567C3.27592 6.30787 3.04224 6.48598 2.85457 6.70762C2.6669 6.92926 2.52976 7.18911 2.45267 7.46911C2.37558 7.74911 2.36039 8.04254 2.40817 8.329L4.07417 18.329C4.15205 18.796 4.39307 19.2202 4.75434 19.5262C5.11562 19.8322 5.57373 20.0001 6.04717 20H18.3532C18.8266 20.0001 19.2847 19.8322 19.646 19.5262C20.0073 19.2202 20.2483 18.796 20.3262 18.329L21.9922 8.329C22.0399 8.04254 22.0248 7.74911 21.9477 7.46911C21.8706 7.18911 21.7334 6.92926 21.5458 6.70762C21.3581 6.48598 21.1244 6.30787 20.861 6.18567C20.5975 6.06347 20.3106 6.00011 20.0202 6H4.38017ZM4.38017 8H20.0202L18.3532 18H6.04717L4.38017 8Z"
+      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: 'MonoFile',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoFullscreen.vue

@@ -0,0 +1,73 @@
+<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="M5 3C3.89543 3 3 3.89543 3 5V9H5V5H9V3H5Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M15 3V5H19V9H21V5C21 3.89543 20.1046 3 19 3H15Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M21 15H19V19H15V21H19C20.1046 21 21 20.1046 21 19V15Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M9 21V19H5V15H3V19C3 20.1046 3.89543 21 5 21H9Z"
+      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: 'MonoFullscreen',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoHelp.vue

@@ -10,20 +10,37 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M16 10C16 7.79 14.21 6 12 6C9.54757 6 8.42562 7.5491 7.86719 9.91797L9.68359 10.4922C10.0579 9.1436 10.5517 8 12 8C13.1 8 14 8.9 14 10C14 10.8792 13.4203 11.3236 12.7705 11.8217C11.9421 12.4566 11 13.1787 11 15H13C13 13.9046 13.711 13.2833 14.4408 12.6455C15.21 11.9733 16 11.2829 16 10Z"
+      d="M16 10C16 7.79 14.21 6 12 6C9.86096 6 8.73408 7.17849 8.11047 9.05153C7.95012 9.53314 8.2414 10.0363 8.7254 10.1893C9.24901 10.3548 9.79034 10.0466 9.99798 9.53826C10.3627 8.6454 10.912 8 12 8C13.1 8 14 8.9 14 10C14 10.8792 13.4203 11.3236 12.7705 11.8217C11.9421 12.4566 11 13.1787 11 15H13C13 13.9046 13.711 13.2833 14.4408 12.6455C15.21 11.9733 16 11.2829 16 10Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M12 17.7307C12.5523 17.7307 13 17.283 13 16.7307C13 16.1784 12.5523 15.7307 12 15.7307C11.4477 15.7307 11 16.1784 11 16.7307C11 17.283 11.4477 17.7307 12 17.7307Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
     />
-    <path d="M13 17.7307V15.7307H11V17.7307H13Z" fill="currentColor" />
     <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,
@@ -39,39 +56,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/MonoInternational.vue

@@ -12,11 +12,15 @@
     <path
       d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM13.6826 15.9496C12.5869 16.016 11.4131 16.016 10.3174 15.9496C10.4526 16.7361 10.6259 17.4435 10.8274 18.0478C11.0794 18.8039 11.3575 19.3437 11.6177 19.6739C11.7052 19.7849 11.8398 20 12.0019 20C12.1468 19.987 12.3044 19.7728 12.3823 19.6739C12.6425 19.3437 12.9206 18.8039 13.1726 18.0478C13.3741 17.4435 13.5474 16.7361 13.6826 15.9496ZM19.513 14.7548C19.2483 14.8687 18.9695 14.9736 18.6803 15.07C17.8278 15.3542 16.8324 15.5816 15.7405 15.7405C15.5816 16.8324 15.3542 17.8278 15.07 18.6803C14.9736 18.9695 14.8687 19.2483 14.7548 19.513C16.957 18.7053 18.7053 16.957 19.513 14.7548ZM4.48693 14.7547C5.29463 16.957 7.04296 18.7053 9.24517 19.513C9.13131 19.2483 9.02639 18.9695 8.93 18.6803C8.64583 17.8278 8.41836 16.8324 8.25952 15.7405C7.16765 15.5816 6.17233 15.3541 5.3199 15.07C5.03063 14.9736 4.75171 14.8686 4.48693 14.7547ZM10.0718 10.0718C9.97457 11.3542 9.97456 12.6458 10.0718 13.9282C11.3542 14.0254 12.6458 14.0254 13.9282 13.9282C14.0254 12.6458 14.0254 11.3542 13.9282 10.0718C12.6458 9.97456 11.3542 9.97456 10.0718 10.0718ZM15.9496 10.3174C16.016 11.4131 16.016 12.5869 15.9496 13.6826C16.7361 13.5474 17.4435 13.3741 18.0478 13.1726C18.8039 12.9206 19.3437 12.6425 19.6739 12.3823C19.784 12.2955 20 12.1585 20 11.9981C19.9869 11.8532 19.7728 11.6956 19.6739 11.6177C19.3437 11.3575 18.8039 11.0794 18.0478 10.8274C17.4435 10.6259 16.7361 10.4526 15.9496 10.3174ZM8.05044 10.3175C7.26396 10.4527 6.55663 10.6259 5.95236 10.8274C5.19625 11.0794 4.65651 11.3575 4.32633 11.6177C4.08682 11.8064 4.01366 11.9502 4.00315 11.9847C3.95762 12.1341 4.23255 12.3084 4.32633 12.3823C4.65651 12.6425 5.19625 12.9206 5.95236 13.1726C6.55663 13.3741 7.26396 13.5473 8.05044 13.6825C7.98396 12.5869 7.98397 11.4131 8.05044 10.3175ZM9.24526 4.48693C7.04301 5.29465 5.29465 7.04301 4.48693 9.24526C4.75171 9.13137 5.03063 9.02642 5.3199 8.93C6.17233 8.64585 7.16767 8.41838 8.25955 8.25955C8.41839 7.16767 8.64585 6.17234 8.93 5.3199C9.02642 5.03063 9.13137 4.75171 9.24526 4.48693ZM14.7547 4.48693C14.8686 4.75171 14.9736 5.03063 15.07 5.3199C15.3541 6.17233 15.5816 7.16765 15.7404 8.25952C16.8324 8.41836 17.8278 8.64584 18.6803 8.93C18.9695 9.0264 19.2483 9.13131 19.513 9.24517C18.7053 7.04296 16.957 5.29463 14.7547 4.48693ZM12 4.00009C11.8612 3.99965 11.6884 4.23658 11.6177 4.32633C11.3575 4.65651 11.0794 5.19625 10.8274 5.95236C10.6259 6.55663 10.4527 7.26396 10.3175 8.05044C11.4131 7.98397 12.5869 7.98396 13.6825 8.05044C13.5473 7.26396 13.3741 6.55663 13.1726 5.95236C12.9206 5.19625 12.6425 4.65651 12.3823 4.32633C12.3116 4.23658 12.1388 3.99965 12 4.00009Z"
       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,
@@ -32,39 +36,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/MonoLess.vue

@@ -9,11 +9,18 @@
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <rect x="3" y="11" width="18" height="2" fill="currentColor" />
+    <path
+      d="M3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 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,
@@ -29,39 +36,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/MonoLink.vue

@@ -0,0 +1,46 @@
+<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="M7.75492 9.87797C7.58273 9.70579 7.35363 9.60236 7.1106 9.58708C6.86758 9.5718 6.62733 9.64572 6.43492 9.79497L6.34092 9.87797L4.21993 12C3.20482 13.0162 2.62754 14.3892 2.61149 15.8255C2.59544 17.2618 3.1419 18.6473 4.13405 19.686C5.1262 20.7246 6.4853 21.3339 7.92081 21.3836C9.35631 21.4333 10.7543 20.9195 11.8159 19.952L11.9979 19.778L14.1189 17.657C14.3002 17.4774 14.406 17.2354 14.4146 16.9804C14.4233 16.7254 14.3341 16.4768 14.1655 16.2854C13.9968 16.094 13.7613 15.9743 13.5073 15.9508C13.2533 15.9273 12.9998 16.0017 12.7989 16.159L12.7049 16.242L10.5839 18.364C9.9402 19.008 9.07083 19.3758 8.16035 19.3893C7.24988 19.4028 6.36999 19.0609 5.70746 18.4362C5.04493 17.8116 4.65193 16.9533 4.61187 16.0436C4.57181 15.1339 4.88786 14.2444 5.49292 13.564L5.63392 13.414L7.75492 11.293C7.8479 11.2001 7.92166 11.0898 7.97198 10.9684C8.02231 10.847 8.04821 10.7169 8.04821 10.5855C8.04821 10.4541 8.02231 10.3239 7.97198 10.2025C7.92166 10.0811 7.8479 9.97084 7.75492 9.87797ZM14.8279 9.17097C14.6557 8.99879 14.4266 8.89536 14.1836 8.88008C13.9406 8.8648 13.7003 8.93872 13.5079 9.08797L13.4129 9.17097L9.17092 13.414C8.99158 13.5939 8.88745 13.8354 8.8797 14.0894C8.87194 14.3433 8.96114 14.5907 9.12917 14.7812C9.29721 14.9718 9.53148 15.0913 9.7844 15.1154C10.0373 15.1395 10.2899 15.0664 10.4909 14.911L10.5849 14.828L14.8279 10.586C14.9209 10.4931 14.9947 10.3828 15.045 10.2614C15.0953 10.14 15.1212 10.0099 15.1212 9.87847C15.1212 9.74705 15.0953 9.61693 15.045 9.49553C14.9947 9.37413 14.9209 9.26384 14.8279 9.17097ZM19.7779 4.22097C18.7771 3.2202 17.4291 2.64376 16.0141 2.61153C14.5992 2.57931 13.2262 3.09379 12.1809 4.04797L11.9989 4.22197L9.87792 6.34197C9.69667 6.52151 9.59089 6.76354 9.58224 7.01852C9.57359 7.27349 9.66272 7.52213 9.83139 7.71355C10.0001 7.90496 10.2355 8.02467 10.4895 8.04817C10.7436 8.07167 10.997 7.99719 11.1979 7.83997L11.2919 7.75697L13.4129 5.63597C14.0566 4.99195 14.926 4.62415 15.8365 4.61066C16.747 4.59716 17.6269 4.93903 18.2894 5.56369C18.9519 6.18835 19.3449 7.04662 19.385 7.95631C19.425 8.866 19.109 9.75549 18.5039 10.436L18.3629 10.586L16.2419 12.706C16.0607 12.8855 15.9549 13.1275 15.9462 13.3825C15.9376 13.6375 16.0267 13.8861 16.1954 14.0775C16.3641 14.269 16.5995 14.3887 16.8535 14.4122C17.1076 14.4357 17.361 14.3612 17.5619 14.204L17.6559 14.121L19.7759 12C20.8073 10.9685 21.3867 9.56962 21.3867 8.11097C21.3867 6.65232 20.8073 5.25341 19.7759 4.22197L19.7779 4.22097Z"
+      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: 'MonoLink',
+})
+</script>
+<style lang="scss">
+.bge-fill-bg-red {
+  fill: var(--bg-red);
+}
+
+.bge-fill-bg-green {
+  fill: var(--bg-green);
+}
+</style>

package/src/icons/MonoLogout.vue

@@ -9,15 +9,27 @@
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="M13 2H11V14H13V2Z" fill="currentColor" />
     <path
-      d="M4 12C4 8.86038 5.80844 6.14131 8.44503 4.83103L7.55497 3.04C4.26468 4.67514 2 8.07218 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 8.07218 19.7353 4.67514 16.445 3.04L15.555 4.83103C18.1916 6.14131 20 8.86038 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12Z"
+      d="M13 3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3V13C11 13.5523 11.4477 14 12 14C12.5523 14 13 13.5523 13 13V3Z"
       fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M4 12C4 9.21721 5.42073 6.7648 7.57959 5.33093C8.03964 5.02537 8.24578 4.4301 8 3.93552C7.75422 3.44094 7.1507 3.23516 6.68319 3.5292C3.87129 5.29775 2 8.42958 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 8.42958 20.1287 5.29775 17.3168 3.5292C16.8493 3.23516 16.2458 3.44094 16 3.93552C15.7542 4.4301 15.9604 5.02537 16.4204 5.33093C18.5793 6.7648 20 9.21721 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 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,
@@ -33,39 +45,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/MonoMenu.vue

@@ -9,13 +9,36 @@
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="M2 4H22V6H2V4Z" fill="currentColor" />
-    <path d="M2 11H22V13H2V11Z" fill="currentColor" />
-    <path d="M22 18H2V20H22V18Z" fill="currentColor" />
+    <path
+      d="M2 5C2 4.44772 2.44772 4 3 4H21C21.5523 4 22 4.44772 22 5C22 5.55228 21.5523 6 21 6H3C2.44772 6 2 5.55228 2 5Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z"
+      fill="currentColor"
+      style="
+        fill: currentColor;
+        fill: color(display-p3 0.5 0.5 0.5);
+        fill-opacity: 1;
+      "
+    />
+    <path
+      d="M22 19C22 18.4477 21.5523 18 21 18H3C2.44772 18 2 18.4477 2 19C2 19.5523 2.44772 20 3 20H21C21.5523 20 22 19.5523 22 19Z"
+      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,
@@ -31,39 +54,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/MonoMoon.vue

@@ -12,13 +12,17 @@
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M14.5757 4.42346C14.8508 5.23243 15 6.09928 15 7C15 11.4183 11.4183 15 7 15C6.09928 15 5.23243 14.8508 4.42346 14.5757C5.49544 17.7301 8.48312 20 12 20C16.4183 20 20 16.4183 20 12C20 8.48312 17.7301 5.49544 14.5757 4.42346ZM12.045 3.75067C11.5657 3.00829 12.1241 1.95434 13.0863 2.05841C18.0987 2.6005 22 6.84397 22 12C22 17.5228 17.5228 22 12 22C6.84397 22 2.6005 18.0987 2.05841 13.0863C1.95434 12.1241 3.0083 11.5657 3.75067 12.045C4.68655 12.6492 5.80078 13 7 13C10.3137 13 13 10.3137 13 7C13 5.80078 12.6492 4.68655 12.045 3.75067Z"
+      d="M14.5757 4.42348C14.8508 5.23244 15 6.09929 15 7.00001C15 11.4183 11.4183 15 7 15C6.09928 15 5.23243 14.8508 4.42347 14.5758C5.49544 17.7301 8.48312 20 12 20C16.4183 20 20 16.4183 20 12C20 8.48314 17.7301 5.49546 14.5757 4.42348ZM12.045 3.75068C11.5657 3.00831 12.1241 1.95436 13.0863 2.05842C18.0987 2.60051 22 6.84399 22 12C22 17.5229 17.5228 22 12 22C6.84397 22 2.6005 18.0987 2.05841 13.0863C1.95434 12.1241 3.0083 11.5657 3.75067 12.045C4.68655 12.6492 5.80078 13 7 13C10.3137 13 13 10.3137 13 7.00001C13 5.8008 12.6492 4.68656 12.045 3.75068Z"
       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>