@onereach/ui-components 2.72.1 → 2.73.0-beta.2258.0

package/src/components/or-code/OrCode.vue

@@ -24,7 +24,7 @@
           <or-icon-button
             v-if="isShowingFullscreen"
             icon="fullscreen"
-            icon-color="neutral-3"
+            icon-color="neutral-4"
             class="fullscreen-button"
             @click="toggleFullscreen(true)"
           />
@@ -85,8 +85,9 @@ import { Language, LanguageSupport } from '@codemirror/language';
 import { EditorState, Extension, Transaction } from '@codemirror/state';
 import { ViewUpdate, keymap } from '@codemirror/view';
 import { indentWithTab } from '@codemirror/commands';
-import { useElementHover } from '@vueuse/core';
 import { basicSetup, EditorView } from 'codemirror';
+import { useElementHover, useMutationObserver, type MaybeElementRef } from '@vueuse/core';
+import { oneDark } from '@codemirror/theme-one-dark';
 import _ from 'lodash';
 import { defineComponent, PropType, ref, Ref } from 'vue-demi';
 import { OrIconButton } from '../or-button-v2';
@@ -185,6 +186,19 @@ export default defineComponent({
   emits: ['update:modelValue', 'focus', 'blur'],
 
   setup(props, { emit }) {
+    // theming refs
+    const parent: Element | null = document.querySelector('[data-theme]') || document.querySelector('html');
+    const themeEl = ref<HTMLElement | null>(parent as HTMLElement);
+    const isDark = ref<boolean>(parent?.getAttribute?.('data-theme') === 'dark');
+
+    const themeObserver = useMutationObserver(themeEl, (mutations) => {
+      const mutation = mutations.find((m) => m.attributeName === 'data-theme');
+      if (!mutation) return;
+      isDark.value = (mutation.target as HTMLElement)?.getAttribute?.('data-theme') === 'dark';
+    }, {
+      attributes: true,
+    });
+    // editor config
     const root = ref<HTMLDivElement>();
     const target = ref<HTMLDivElement>();
     const fullscreenTarget = ref<HTMLDivElement>();
@@ -206,6 +220,8 @@ export default defineComponent({
       fullscreenTarget,
       editor,
       isHovered,
+      isDark,
+      themeObserver,
     };
   },
 
@@ -226,8 +242,9 @@ export default defineComponent({
     localExtensions(): Extension[] {
       const { allowDrop, allowPaste, lineWrapping } = this;
       const ext = _.compact([
+        ...(this.isDark ? [oneDark] : []),
         // Toggle light/dark mode
-        EditorView.baseTheme({}),
+        this.isDark ? EditorView.theme({}, { dark: true }) : EditorView.baseTheme({}),
         // locale settings
         this.phrases ? EditorState.phrases.of(this.phrases) : undefined,
         // Parser language setting
@@ -259,11 +276,10 @@ export default defineComponent({
         // line wrapping
         lineWrapping ? EditorView.lineWrapping : undefined,
         keymap.of([indentWithTab]),
+        ...this.extensions,
       ]) as Extension[];
 
-      // Append Extensions (such as basic-setup)
-      if (this.extensions.length !== 0) _.merge(ext, this.extensions);
-      return ext;
+      return [...ext];
     },
     isShowingError(): boolean {
       return !!this.error && this.isInvalid;
@@ -313,6 +329,7 @@ export default defineComponent({
   },
 
   beforeUnmount() {
+    this.themeObserver.stop();
     this.editor?.destroy();
   },
 

package/src/components/or-notification/OrNotification.vue

@@ -115,7 +115,6 @@ export default defineComponent({
     warning: ($c-warning, $c-warning-lighten-45),
     success: ($c-success, $c-success-lighten-45),
   );
-
   /** TODO: Override when mobile design is ready to guarantee alignment of icons with first text row */
   --alignment-height: #{$lh-1};
 
@@ -178,4 +177,30 @@ export default defineComponent({
     }
   }
 }
+
+[data-theme="dark"] {
+  .or-notification {
+    $notification-types: (
+      info: ($c-neutral-6, $c-primary-darken-45),
+      error: ($c-neutral-6, $c-error-darken-45),
+      warning: ($c-neutral-6, $c-warning-darken-45),
+      success: ($c-neutral-6, $c-success-darken-45),
+    );
+
+    .or-icon {
+      color: $c-neutral-1;
+    }
+
+    @each $type, $colors in $notification-types {
+      &.is-type-#{$type} {
+        background-color: list.nth($colors, 2);
+        color: list.nth($colors, 1);
+
+        a {
+          color: list.nth($colors, 1);
+        }
+      }
+    }
+  }
+}
 </style>

package/src/components/or-skeleton/styles.scss

@@ -9,10 +9,10 @@
   }
 }
 
-.or-skeleton {
-  $c-skeleton-bg: #f6f8fd;
-  $c-skeleton-center: #fff;
+$c-skeleton-bg: #f6f8fd;
+$c-skeleton-center: #fff;
 
+.or-skeleton {
   overflow: hidden;
   position: relative;
   padding: 0;
@@ -33,3 +33,18 @@
     }
   }
 }
+
+
+[data-theme="dark"] {
+  $c-skeleton-dark-bg: $c-neutral-3;
+  $c-skeleton-dark-center: $c-neutral-2;
+
+  .or-skeleton {
+    background:  $c-skeleton-dark-bg;
+    &.is-animated {
+      &::before {
+        background: linear-gradient(90.14deg,  $c-skeleton-dark-bg 0.1%, $c-skeleton-dark-center 49.98%,  $c-skeleton-dark-bg 99.06%);
+      }
+    }
+  }
+}

package/src/components/or-stepper/OrStepper.stories.ts

@@ -30,7 +30,7 @@ const Template: Story = (_args, { argTypes }) => ({
   },
   //<component :key="slot.Id" :someProp="slotProps"></component>
   //<template #buttons="{onConfirm}"> here your button slot props <or-button content="slot-confirm" @click="onConfirm"/></template>
-  template: '<div><or-stepper v-bind="$props"> <template v-for="slot in slots" v-slot:[slot]="slotProps"><p class="bg-surface-5 rounded-sm p-2"> your slot named like content-{index} === {{slot}} ; slot props {{slotProps}}</p></template></or-stepper></div>',
+  template: '<div><or-stepper v-bind="$props"> <template v-for="slot in slots" v-slot:[slot]="slotProps"><p class="bg-surface-5 text-on-surface rounded-sm p-md"> your slot named like content-{index} === {{slot}} ; slot props {{slotProps}}</p></template></or-stepper></div>',
 
 });