@onereach/ui-components 2.74.16-beta.2374.0 → 2.75.0-beta.2377.0

package/src/components/or-code/theme.ts

@@ -0,0 +1,213 @@
+import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+
+// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
+
+const chalky = 'var(--c-warning-darken-20)',
+  coral = 'var(--c-error)',
+  cyan = '#56b6c2',
+  invalid = 'var(--c-white)',
+  ivory = 'var(--c-neutral-6)',
+  stone = 'var(--c-neutral-5)', // Brightened compared to original to increase contrast
+  malibu = '#61afef',
+  sage = 'var(--c-success)',
+  whiskey = 'var(--c-warning-darken-5)',
+  violet = '#c678dd',
+  darkBackground = 'var(--c-neutral-1)',
+  highlightBackground = 'var(--c-neutral-2)',
+  background = 'var(--c-neutral-1)',
+  tooltipBackground = 'var(--c-neutral-2)',
+  selection = 'var(--c-neutral-3)',
+  cursor = 'var(--c-primary)';
+
+/// The colors used in the theme, as CSS color strings.
+export const color = {
+  chalky,
+  coral,
+  cyan,
+  invalid,
+  ivory,
+  stone,
+  malibu,
+  sage,
+  whiskey,
+  violet,
+  darkBackground,
+  highlightBackground,
+  background,
+  tooltipBackground,
+  selection,
+  cursor,
+};
+
+/// The editor theme styles for One Dark.
+export const orCodeTheme = EditorView.theme({
+  '&': {
+    color: ivory,
+    backgroundColor: background,
+  },
+
+  '.cm-content': {
+    caretColor: cursor,
+  },
+
+  '.cm-button': {
+    background: highlightBackground,
+    color: 'var(--c-neutral-6)',
+    border: 0,
+    borderRadius: 'var(--s-2)',
+  },
+
+  '.cm-panel.cm-search input[type=checkbox]': {
+    display: 'inline-block',
+    verticalAlign: 'middle',
+  },
+
+  '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+    backgroundColor: selection,
+  },
+
+  '.cm-panels': {
+    backgroundColor: darkBackground,
+    color: ivory,
+  },
+  '.cm-panels.cm-panels-top': { borderBottom: '2px solid var(--c-neutral-2)' },
+  '.cm-panels.cm-panels-bottom': { borderTop: '2px solid var(--c-neutral-2)' },
+
+  '.cm-searchMatch': {
+    backgroundColor: 'var(--c-neutral-1)',
+    outline: '1px solid var(--c-neutral-2)',
+  },
+  '.cm-searchMatch.cm-searchMatch-selected': {
+    backgroundColor: '#6199ff2f',
+  },
+
+  '.cm-activeLine': { backgroundColor: '#6699ff0b' },
+  '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
+
+  '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+    backgroundColor: '#bad0f847',
+  },
+
+  '.cm-gutters': {
+    backgroundColor: background,
+    color: stone,
+    border: 'none',
+  },
+
+  '.cm-activeLineGutter': {
+    backgroundColor: highlightBackground,
+  },
+
+  '.cm-foldPlaceholder': {
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: '#ddd',
+  },
+
+  '.cm-tooltip': {
+    border: 'none',
+    backgroundColor: tooltipBackground,
+  },
+  '.cm-tooltip .cm-tooltip-arrow:before': {
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent',
+  },
+  '.cm-tooltip .cm-tooltip-arrow:after': {
+    borderTopColor: tooltipBackground,
+    borderBottomColor: tooltipBackground,
+  },
+  '.cm-tooltip-autocomplete': {
+    '& > ul > li[aria-selected]': {
+      backgroundColor: highlightBackground,
+      color: ivory,
+    },
+  },
+  '.cm-textfield': {
+    outline: 'none',
+    background: background,
+    color: 'var(--c-neutral-6)',
+    backgroundColor: 'var(--c-neutral-1)',
+    border: '1px solid var(--c-neutral-2)',
+    borderRadius: 'var(--s-2)',
+  },
+}, { dark: true });
+
+/// The highlighting style for code in the One Dark theme.
+export const orCodeHighlightStyle = HighlightStyle.define([
+  {
+    tag: t.keyword,
+    color: violet,
+  },
+  {
+    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+    color: coral,
+  },
+  {
+    tag: [t.function(t.variableName), t.labelName],
+    color: malibu,
+  },
+  {
+    tag: [t.color, t.constant(t.name), t.standard(t.name)],
+    color: whiskey,
+  },
+  {
+    tag: [t.definition(t.name), t.separator],
+    color: ivory,
+  },
+  {
+    tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
+    color: chalky,
+  },
+  {
+    tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],
+    color: cyan,
+  },
+  {
+    tag: [t.meta, t.comment],
+    color: stone,
+  },
+  {
+    tag: t.strong,
+    fontWeight: 'bold',
+  },
+  {
+    tag: t.emphasis,
+    fontStyle: 'italic',
+  },
+  {
+    tag: t.strikethrough,
+    textDecoration: 'line-through',
+  },
+  {
+    tag: t.link,
+    color: stone,
+    textDecoration: 'underline',
+  },
+  {
+    tag: t.heading,
+    fontWeight: 'bold',
+    color: coral,
+  },
+  {
+    tag: [t.atom, t.bool, t.special(t.variableName)],
+    color: whiskey,
+  },
+  {
+    tag: [t.processingInstruction, t.string, t.inserted],
+    color: sage,
+  },
+  {
+    tag: t.invalid,
+    color: invalid,
+  },
+]);
+
+/// Extension to enable the One Dark theme (both the editor theme and
+/// the highlight style).
+const theme: Extension = [orCodeTheme, syntaxHighlighting(orCodeHighlightStyle)];
+
+export default theme;

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-sidebar-v3/OrSidebar.stories3.ts

@@ -104,7 +104,7 @@ const DefaultTemplate: StoryFn<typeof OrSidebar> = (args) => ({
         class="theme-background-surface-1 dark:theme-background-surface-1-dark text-on-background dark:text-on-background-dark"
         style="flex-grow: 1; overflow: auto; padding: 16px"
       >
-        ${Faker.lorem.paragraphs(100)}
+        ${Faker.lorem.paragraphs(10)}
       </div>
       <OrSidebar
         v-bind="args"

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>',
 
 });