@pareto-engineering/design-system 4.0.0-alpha.9 → 4.0.1-alpha.1

package/src/ui/a/XMLEditor/common/theme.jsx

@@ -0,0 +1,184 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { EditorView } from '@codemirror/view'
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { tags } from '@lezer/highlight'
+
+// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
+const chalky = '#e5c07b'
+const coral = '#e06c75'
+const cyan = '#56b6c2'
+const invalid = '#ffffff'
+const ivory = '#abb2bf'
+const stone = '#7d8799' // Brightened compared to original to increase contrast
+const malibu = '#61afef'
+const sage = '#98c379'
+const whiskey = '#d19a66'
+const violet = '#c678dd'
+const darkBackground = '#21252b'
+const highlightBackground = '#2c313a'
+const background = '#282c34'
+const tooltipBackground = '#353a42'
+const selection = '#3E4451'
+const cursor = '#528bff'
+/**
+The colors used in the theme, as CSS color strings.
+*/
+// 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.
+*/
+const oneDarkTheme = /* @__PURE__ */EditorView.theme({
+  '&':{
+    color          :ivory,
+    backgroundColor:background,
+  },
+  '.cm-content':{
+    caretColor:cursor,
+  },
+  '.cm-cursor, .cm-dropCursor'                                                                                                :{ borderLeftColor: cursor },
+  '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':{ backgroundColor: selection },
+  '.cm-panels'                                                                                                                :{ backgroundColor: darkBackground, color: ivory },
+  '.cm-panels.cm-panels-top'                                                                                                  :{ borderBottom: '2px solid black' },
+  '.cm-panels.cm-panels-bottom'                                                                                               :{ borderTop: '2px solid black' },
+  '.cm-searchMatch'                                                                                                           :{
+    backgroundColor:'#72a1ff59',
+    outline        :'1px solid #457dff',
+  },
+  '.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,
+    },
+  },
+}, { dark: true })
+/**
+The highlighting style for code in the One Dark theme.
+*/
+const oneDarkHighlightStyle = /* @__PURE__ */HighlightStyle.define([
+  {
+    tag  :tags.keyword,
+    color:violet,
+  },
+  {
+    tag  :[tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
+    color:coral,
+  },
+  {
+    tag  :[/* @__PURE__ */tags.function(tags.variableName), tags.labelName],
+    color:malibu,
+  },
+  {
+    tag:[tags.color, /* @__PURE__ */tags.constant(tags.name), /* @__PURE__ */tags.standard(
+      tags.name)],
+    color:whiskey,
+  },
+  {
+    tag  :[/* @__PURE__ */tags.definition(tags.name), tags.separator],
+    color:ivory,
+  },
+  {
+    tag:[tags.typeName, tags.className, tags.number, tags.changed,
+      tags.annotation, tags.modifier, tags.self, tags.namespace],
+    color:chalky,
+  },
+  {
+    tag:[tags.operator, tags.operatorKeyword, tags.url,
+      tags.escape, tags.regexp, tags.link, /* @__PURE__ */tags.special(tags.string)],
+    color:cyan,
+  },
+  {
+    tag  :[tags.meta, tags.comment],
+    color:stone,
+  },
+  {
+    tag       :tags.strong,
+    fontWeight:'bold',
+  },
+  {
+    tag      :tags.emphasis,
+    fontStyle:'italic',
+  },
+  {
+    tag           :tags.strikethrough,
+    textDecoration:'line-through',
+  },
+  {
+    tag           :tags.link,
+    color         :stone,
+    textDecoration:'underline',
+  },
+  {
+    tag       :tags.heading,
+    fontWeight:'bold',
+    color     :coral,
+  },
+  {
+    tag  :[tags.atom, tags.bool, /* @__PURE__ */tags.special(tags.variableName)],
+    color:whiskey,
+  },
+  {
+    tag  :[tags.processingInstruction, tags.string, tags.inserted],
+    color:sage,
+  },
+  {
+    tag  :tags.invalid,
+    color:invalid,
+  },
+])
+/**
+Extension to enable the One Dark theme (both the editor theme and
+the highlight style).
+*/
+const oneDark = [oneDarkTheme, /* @__PURE__ */syntaxHighlighting(oneDarkHighlightStyle)]
+
+export default oneDark

package/src/ui/a/XMLEditor/index.js

@@ -0,0 +1 @@
+export { default as XMLEditor } from './XMLEditor'

package/src/ui/a/XMLEditor/styles.scss

@@ -0,0 +1,24 @@
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.code-editor {
+  border-radius: 1em;
+  height: var(--height);
+  overflow: auto;
+  -ms-overflow-style: none;
+  resize: both;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  > .cm-editor {
+    height: 100%;
+
+    .cm-gutters {
+      display: flex;
+      justify-content: flex-end;
+      width: var(--gutter-width);
+    }
+  }
+}

package/src/ui/a/index.js

@@ -1,6 +1,7 @@
 export {
   AppContext, AppContextProvider, useApp, useTheme,
 } from './AppContext'
+export { BlurOverlay } from './BlurOverlay'
 export { ContentTree } from './ContentTree'
 export { Conversation } from './Conversation'
 export { DotInfo } from './DotInfo'
@@ -22,3 +23,8 @@ export { AnimatedBlobs } from './AnimatedBlobs'
 export { Tip } from './Tip'
 export { AnimatedGradient } from './AnimatedGradient'
 export { TextSteps } from './TextSteps'
+export { Removable } from './Removable'
+export { ToggleSwitch } from './ToggleSwitch'
+export { XMLEditor } from './XMLEditor'
+export { DatePicker } from './DatePicker'
+export { Tooltip } from './Tooltip'

package/src/ui/b/Button/Button.jsx

@@ -1,14 +1,12 @@
 /* @pareto-engineering/generator-front 0.2.4 */
 import * as React from 'react'
-import { useLayoutEffect } from 'react'
 import PropTypes from 'prop-types'
 
 // Package-level Imports
 import styleNames from '@pareto-engineering/bem/exports'
 import { LoadingCircle } from 'ui'
+import { Group } from './common'
 import './styles.scss'
-// Component-level imports
-// import('./styles.scss')
 
 // Helper Definition
 const baseClassName = styleNames.base
@@ -21,15 +19,17 @@ const Button = ({
   children,
   isLoading,
   color,
+  textColor,
   isCompact,
   isGhost,
   isSimple,
+  isGradient,
+  isSpaced,
   arrowDirection,
   ...otherProps
 }) => {
-  useLayoutEffect(() => {
-    import('./styles.scss')
-  }, [])
+  const buttonText = isSimple ? <span className={styleNames.modifierUnderlined}>{children}</span>
+    : children
 
   return (
     <button
@@ -39,10 +39,13 @@ const Button = ({
         componentClassName,
         userClassName,
         `x-${color}`,
+        textColor && `y-${textColor}`,
         isGhost && styleNames.modifierGhost,
         isCompact && styleNames.modifierCompact,
         isSimple && styleNames.modifierSimple,
-        arrowDirection && `arrow-${arrowDirection}`,
+        isGradient && styleNames.modifierGradient,
+        isSpaced && styleNames.modifierSpaced,
+        !isLoading && arrowDirection && `arrow-${arrowDirection}`,
       ]
         .filter((e) => e)
         .join(' ')}
@@ -53,11 +56,11 @@ const Button = ({
       {isLoading ? (
         <LoadingCircle
           style={{
-            '--x':'var(--on-x)',
+            '--x':'var(--stroke-color, var(--on-x))',
           }}
           heightWidth="1.15em"
         />
-      ) : children}
+      ) : buttonText}
     </button>
   )
 }
@@ -98,6 +101,16 @@ Button.propTypes = {
    */
   isSimple:PropTypes.bool,
 
+  /**
+   * Should this button have a gradient
+   */
+  isGradient:PropTypes.bool,
+
+  /**
+   * Should this button be spaced
+   */
+  isSpaced:PropTypes.bool,
+
   /**
    * The button color
    */
@@ -115,7 +128,9 @@ Button.propTypes = {
 }
 
 Button.defaultProps = {
-  color:'main1',
+  color:'main',
 }
 
+Button.Group = Group
+
 export default Button

package/src/ui/b/Button/common/Group/Group.jsx

@@ -0,0 +1,65 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'button-group'
+
+const Group = ({
+  id,
+  className: userClassName,
+  style,
+  children,
+  ...otherProps
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    {...otherProps}
+  >
+    {children}
+  </div>
+)
+
+Group.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The children JSX
+   */
+  children:PropTypes.node,
+}
+
+Group.defaultProps = {
+  // type:'snap-scroller',
+}
+
+export default Group

package/src/ui/b/Button/common/Group/index.js

@@ -0,0 +1 @@
+export { default as Group } from './Group'

package/src/ui/b/Button/common/Group/styles.scss

@@ -0,0 +1,11 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+.#{bem.$base}.button-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+}

package/src/ui/b/Button/common/index.js

@@ -0,0 +1 @@
+export { Group } from './Group'

package/src/ui/b/Button/styles.scss

@@ -20,7 +20,8 @@ $default-animation-time: .31s;
   font-weight: 400;
   justify-content: space-between;
   padding: $default-padding;
-  transition: all .25s;//var(--theme-default-paragraph);
+  transition: all .25s;
+  white-space: nowrap;//var(--theme-default-paragraph);
 
   &.arrow-right {
     &::after {
@@ -30,7 +31,7 @@ $default-animation-time: .31s;
       vertical-align: middle;
     }
 
-    &:hover {
+    &:hover:not(:disabled) {
       &::after {
         --final-position: 50%;
         animation: animateArrow $default-animation-time forwards;
@@ -46,7 +47,7 @@ $default-animation-time: .31s;
       vertical-align: middle;
     }
 
-    &:hover {
+    &:hover:not(:disabled) {
       &::before {
         --final-position: -50%;
         animation: animateArrow $default-animation-time forwards;
@@ -57,7 +58,10 @@ $default-animation-time: .31s;
   &:not(:disabled) {
     cursor: pointer;
 
-    &:hover {
+    &:hover
+    :not(.#{bem.$modifier-gradient})
+    :not(.#{bem.$modifier-ghost})
+    :not(.#{bem.$modifier-simple}) {
       background: var(--soft-x, var(--soft-#{$default-color}));
     }
 
@@ -66,6 +70,21 @@ $default-animation-time: .31s;
     }
   }
 
+  &.#{bem.$modifier-gradient} {
+    background-image: linear-gradient(
+      to right,
+      var(--hard-x) 30%,
+      var(--x) 50%,
+      var(--hard-x) 100%
+    );
+    background-position: left;
+    background-size: 200% auto;
+
+    &:not(:disabled):hover {
+      background-position: right center;
+    }
+  }
+
   &.#{bem.$modifier-compact} {
     padding: $compact-padding;
   }
@@ -73,7 +92,7 @@ $default-animation-time: .31s;
   &.#{bem.$modifier-ghost} {
     background: transparent;
     border: 1px solid var(--x, var(--#{$default-color}));
-    color: var(--x, var(--#{$default-color}));
+    color: var(--y, var(--x, var(--#{$default-color})));
 
     &:hover,
     &:focus,
@@ -84,27 +103,36 @@ $default-animation-time: .31s;
     &:not(:disabled) {
       &:hover {
         border: 1px solid var(--soft-x, var(--soft-#{$default-color}));
-        color: var(--soft-x, var(--soft-#{$default-color}));
+        color: var(--soft-y, var(--soft-x, var(--soft-#{$default-color})));
       }
 
       &:focus {
         border: 1px solid var(--hard-x, var(--hard-#{$default-color}));
-        color: var(--hard-x, var(--hard-#{$default-color}));
+        color: var(--hard-y, var(--hard-x, var(--hard-#{$default-color})));
       }
     }
 
     &:disabled {
-      border: 1px solid var(--x, var(--#{$default-color}));
-      color: var(--x, var(--#{$default-color}));
+      border: 1px solid var(--hard-disabled, var(--#{$default-color}));
+      color: var(--hard-disabled, var(--#{$default-color}));
     }
   }
 
+  &.#{bem.$modifier-spaced} {
+    margin-bottom: var(--spacing-2);
+    margin-top: var(--spacing-2);
+  }
+
   &.#{bem.$modifier-simple} {
     background: transparent;
     border: 1px solid transparent;
     color: var(--x, var(--#{$default-color}));
     padding: 0;
 
+    > .#{bem.$modifier-underlined} {
+      text-decoration: underline;
+    }
+
     &:disabled,
     &:hover,
     &:focus {
@@ -122,12 +150,12 @@ $default-animation-time: .31s;
     }
 
     &:disabled {
-      color: var(--x, var(--#{$default-color}));
+      color: var(--hard-disabled, var(--#{$default-color}));
     }
   }
 
   &:disabled {
-    background: var(--x);
+    background: var(--hard-disabled);
     filter: brightness(125%);
   }
 }

package/src/ui/b/Card/Card.jsx

@@ -1,8 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
@@ -11,6 +9,8 @@ import { ProgressBar } from 'ui'
 
 import { Group, Section } from './common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -27,35 +27,29 @@ const Card = ({
   children,
   progress,
   progressBarColor,
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      {progress && (
-        <ProgressBar
-          attached
-          color={progressBarColor}
-          progress={progress}
-          height=".5em"
-        />
-      )}
-      {children}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    {progress && (
+      <ProgressBar
+        attached
+        color={progressBarColor}
+        progress={progress}
+        height=".5em"
+      />
+    )}
+    {children}
+  </div>
+)
 
 Card.propTypes = {
   /**

package/src/ui/b/Card/common/Group/Group.jsx

@@ -1,14 +1,14 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
 import { SnapScroller } from 'ui'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -24,11 +24,8 @@ const Group = ({
   desktopType,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
   const Wrapper = type === 'snap-scroller' ? SnapScroller : 'div'
-  const wrapperProps = type === 'snap-scroller' ? { noScrollOnDesktop: true } : {}
+  const wrapperProps = (type === 'snap-scroller' && desktopType !== 'snap-scroller') ? { noScrollOnDesktop: true } : {}
 
   return (
     <Wrapper

package/src/ui/b/Card/common/Group/styles.scss

@@ -12,10 +12,6 @@ $default-spacing: var(--gap);
   &.snap-scroller {
     margin-left: calc($default-spacing * -1);
     margin-right: calc($default-spacing * -1);
-
-    > .#{bem.$base}.card {
-      height: 100%;
-    }
   }
 
   &.vertical-flexbox {
@@ -27,9 +23,6 @@ $default-spacing: var(--gap);
     &.desktop-grid {
       display: grid;
       grid-template-columns: repeat(var(--columns), 1fr);
-    }
-
-    &.snap-scroller {
       margin-left: unset;
       margin-right: unset;
     }

package/src/ui/b/Card/styles.scss

@@ -1,4 +1,5 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable selector-max-universal -- exception */
 
 @use "@pareto-engineering/bem";
 
@@ -38,6 +39,16 @@ $default-padding: 1.5em;
         width: 100%;
       }
     }
+
+    > * {
+      &:first-child {
+        margin-block-start: 0;
+      }
+
+      &:last-child {
+        margin-block-end: 0;
+      }
+    }
   }
 
   > .#{bem.$base}.section + .#{bem.$base}.section {