@onereach/ui-components 2.73.1-beta.2282.0 → 2.74.0-beta.2287.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-loader-v3/OrLoader.stories3.ts

@@ -25,16 +25,16 @@ export default {
     },
 
     title: {
-      control: { type: 'text' },
+      control: { type: 'string' },
     },
 
     description: {
-      control: { type: 'text' },
+      control: { type: 'string' },
     },
   },
 
   parameters: {
-    layout: 'fullscreen',
+    layout: 'centered',
 
     docs: {
       page: OrLoaderDocs,
@@ -56,11 +56,7 @@ const Template: StoryFn<typeof OrLoader> = (args) => ({
     return { args };
   },
 
-  template: `
-    <div class="w-full min-h-[100px] p-md flex justify-center items-center">
-      <OrLoader class="w-2/5 max-w-[400px]" v-bind="args" />
-    </div>
-  `,
+  template: '<OrLoader v-bind="args" />',
 });
 
 export const Default = Template.bind({});
@@ -76,11 +72,3 @@ LinearWithText.args = {
   variant: 'linear',
   description: 'Promptly retrieving your data from the cloud',
 };
-LinearWithText.parameters = {
-  docs: {
-    description: {
-      story: 'By setting width on the component you may control the width of the linear loading indicator. \
-        Circular indicator size is controlled by the `size` prop.',
-    },
-  },
-};

package/src/components/or-loader-v3/OrLoader.vue

@@ -8,10 +8,7 @@
         {{ title }}
       </div>
     </template>
-    <div
-      :class="containerStyles"
-      :style="wrapperStyle"
-    >
+    <div :class="containerStyles">
       <template v-if="variant === 'circular'">
         <svg
           viewBox="0 0 16 16"
@@ -95,18 +92,11 @@ export default defineComponent({
       default: LoaderVariant.Circular,
     },
 
-    /**
-     * Defines a semantic color of the loading indicator.
-     * Use `'inherit'` option to set your own color from the parent (not recommended).
-     */
     color: {
       type: String as PropType<LoaderColor>,
       default: LoaderColor.Primary,
     },
 
-    /**
-     * Defines a diameter of the circular loader. Ignored for linear one.
-     */
     size: {
       type: String as PropType<LoaderSize>,
       default: LoaderSize.M,
@@ -153,21 +143,14 @@ export default defineComponent({
     // State
     const computedSize = computed(() => {
       switch (props.size) {
-        case LoaderSize.M:
+        case 'm':
           return 20;
 
-        case LoaderSize.S:
+        case 's':
           return 16;
       }
     });
 
-    /**
-     * Preserves circular loading indicator from shrinking caused by external styles.
-     */
-    const wrapperStyle = computed(() => {
-      return `min-width: ${computedSize.value}px;`;
-    });
-
     return {
       root,
       rootStyles,
@@ -175,7 +158,6 @@ export default defineComponent({
       titleStyles,
       descriptionStyles,
       computedSize,
-      wrapperStyle,
     };
   },
 });

package/src/components/or-loader-v3/styles.ts

@@ -2,9 +2,10 @@ import { LoaderColor } from './props';
 
 export const LoaderRoot: string[] = [
   // Layout
+  'contents',
   'flex',
   'flex-col',
-  'gap-md',
+  'space-y-md',
 ];
 
 export const LoaderRootColors: Record<LoaderColor, string[]> = {

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