@weavy/uikit-react 12.1.0 → 14.0.0

package/src/scss/theme/_checkbox.scss

@@ -1,56 +1,52 @@
-@use "config" as *;
+@use "base/vars";
 
 // Include mixin in the relative class that should be suffixed with -check
-@mixin button-check {
-
+.wy-button {
   // From bootstrap/scss/forms/_form_check
   &-check {
     position: absolute;
     clip: rect(0, 0, 0, 0);
     pointer-events: none;
-  
+
     &[disabled] + &,
     &:disabled + & {
       pointer-events: none;
       filter: none;
-      opacity: $form-check-btn-check-disabled-opacity;
+      opacity: vars.$opacity-disabled;
     }
   }
-
   // From bootstrap/scss/_buttons
   &-check:focus + &,
   &:focus {
     outline: 0;
-    box-shadow: $btn-focus-box-shadow;
+    //box-shadow: vars.$btn-focus-box-shadow;
   }
-  &-check:checked + &,
+  /*&-check:checked + &,
   &-check:active + & {
-    @include box-shadow($btn-active-box-shadow);
+    box-shadow: vars.$btn-active-box-shadow;
   
     &:focus {
-      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+      box-shadow: vars.$btn-focus-box-shadow, vars.$btn-active-box-shadow;
     }
-  }
-
+  }*/
   // Custom icons
-  &-check + .#{wy}-button-icon {
+  &-check + .wy-button-icon {
     svg:last-child {
       display: none;
     }
   }
 
-  &-check:checked + .#{wy}-button-icon {
+  &-check:disabled + .wy-button-icon {
+    opacity: vars.$opacity-disabled;
+  }
+
+  &-check:checked + .wy-button-icon {
     svg:first-child {
       display: none;
     }
-  
+
     svg:last-child {
       display: inline-block;
     }
   }
 }
-
-// Create a suffixed subclass from .wy-button -> .wy-button-check
-.wy-button {
-  @include button-check;
-}

package/src/scss/theme/_code-vscode-dark.scss

@@ -0,0 +1,184 @@
+// Theme generated from VS Code using https://prism.dotenv.dev/
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #d4d4d4;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  text-align: left;
+  white-space: pre-wrap;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: break-word;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/*pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #1e1e1e;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #1e1e1e;
+}*/
+
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  color: white;
+  background: #1e1e1e;
+}
+
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+
+.token.prolog {
+  color: #8080ff;
+  
+}
+
+.token.comment {
+  color: #6A9955;
+  
+}
+
+.token.punctuation {
+  color: #6A9955;
+  
+}
+
+.token.builtin {
+  color: #4FC1FF;
+  
+}
+
+.token.number {
+  color: #B5CEA8;
+  
+}
+
+.token.variable {
+  color: #B5CEA8;
+  
+}
+
+.token.inserted {
+  color: #B5CEA8;
+  
+}
+
+.token.operator {
+  color: #D4D4D4;
+  
+}
+
+.token.constant {
+  color: #646695;
+  
+}
+
+.token.hexcode {
+  color: #646695;
+  
+}
+
+.token.tag {
+  color: #569CD6;
+  
+}
+
+.token.changed {
+  color: #569CD6;
+  
+}
+
+.token.function {
+  color: #569CD6;
+  
+}
+
+.token.keyword {
+  color: #569CD6;
+  
+}
+
+.token.attr-name {
+  color: #9CDCFE;
+  
+}
+
+.token.selector {
+  color: #9CDCFE;
+  
+}
+
+.token.property {
+  color: #9CDCFE;
+  
+}
+
+.token.deleted {
+  color: #CE9178;
+  
+}
+
+.token.string {
+  color: #CE9178;
+  
+}
+
+.token.regex {
+  color: #D16969;
+  
+}
+
+.token.char {
+  color: #D16969;
+  
+}
+
+.token.class-name {
+  color: #4EC9B0;
+  
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}

package/src/scss/theme/_code-vscode-light.scss

@@ -0,0 +1,179 @@
+// Theme generated from VS Code using https://prism.dotenv.dev/
+
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #000000;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  text-align: left;
+  white-space: pre-wrap;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: break-word;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/*pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #ffffff;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #ffffff;
+}*/
+
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  color: white;
+  background: #ffffff;
+}
+
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+
+
+.token.comment {
+  color: #008000;
+  
+}
+
+.token.builtin {
+  color: #0070C1;
+  
+}
+
+.token.number {
+  color: #098658;
+  
+}
+
+.token.variable {
+  color: #098658;
+  
+}
+
+.token.inserted {
+  color: #098658;
+  
+}
+
+.token.operator {
+  color: #000000;
+  
+}
+
+.token.constant {
+  color: #811F3F;
+  
+}
+
+.token.hexcode {
+  color: #811F3F;
+  
+}
+
+.token.regex {
+  color: #811F3F;
+  
+}
+
+.token.char {
+  color: #811F3F;
+  
+}
+
+.token.tag {
+  color: #800000;
+  
+}
+
+.token.attr-name {
+  color: #FF0000;
+  
+}
+
+.token.selector {
+  color: #FF0000;
+  
+}
+
+.token.property {
+  color: #FF0000;
+  
+}
+
+.token.deleted {
+  color: #A31515;
+  
+}
+
+.token.string {
+  color: #A31515;
+  
+}
+
+.token.changed {
+  color: #0451A5;
+  
+}
+
+.token.punctuation {
+  color: #0451A5;
+  
+}
+
+.token.function {
+  color: #0000FF;
+  
+}
+
+.token.keyword {
+  color: #0000FF;
+  
+}
+
+.token.class-name {
+  color: #267F99;
+  
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}

package/src/scss/theme/_code.scss

@@ -1,115 +1,10 @@
-@use "config" as *;
-
-// custom theme for syntax highlighting with Prism
-code[class*="language-"], pre[class*="language-"] {
-  color: $pre-color;
-  font-family: $font-family-code;
-  font-size: 1em;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  line-height: $line-height-base;
-  tab-size: 4;
-  hyphens: none;
-} 
-
-pre[class*="language-"] {
-  background: $white;
-  font-size: $code-font-size;
-  padding: 1rem;
-  margin: 0.5rem 0;
-  overflow: auto;
-}
-
-// token colors from https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vs.css
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.token.namespace {
-  opacity: .7;
-}
-
-.token.string {
-  color: #A31515;
-}
-
-.token.punctuation,
-.token.operator {
-  color: $pre-color;
-}
-
-.token.url,
-.token.symbol,
-.token.number,
-.token.boolean,
-.token.variable,
-.token.constant,
-.token.inserted {
-  color: #36acaa;
-}
-
-.token.atrule,
-.token.keyword,
-.token.attr-value,
-.language-autohotkey .token.selector,
-.language-json .token.boolean,
-.language-json .token.number,
-code[class*="language-css"] {
-  color: #0000ff;
-}
-
-.token.function {
-  color: $pre-color;
-}
-
-.token.deleted,
-.language-autohotkey .token.tag {
-  color: #9a050f;
-}
-
-.token.selector,
-.language-autohotkey .token.keyword {
-  color: #00009f;
-}
-
-.token.important {
-  color: #e90;
-}
-
-.token.important,
-.token.bold {
-  font-weight: $font-weight-bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.class-name,
-.language-json .token.property {
-  color: #2B91AF;
-}
-
-.token.tag,
-.token.selector {
-  color: #800000;
-}
-
-.token.attr-name,
-.token.property,
-.token.regex,
-.token.entity {
-  color: #ff0000;
-}
-
-.token.directive.tag .tag {
-  background: #ffff00;
-  color: $pre-color;
+// Themes generated from VS Code using https://prism.dotenv.dev/
+.wy-code {
+  :not(.wy-dark) &, &:not(.wy-dark) {
+    @import "code-vscode-light";
+  }
+
+  .wy-dark &, &.wy-dark {
+    @import "code-vscode-dark";
+  }
 }

package/src/scss/theme/_comment-editor-cm.scss

@@ -0,0 +1,97 @@
+@use "base/vars";
+@use "base/colors";
+@use "base/scroll";
+@use "base/svg";
+@use "comment-editor";
+
+.wy-comment-editor {
+  position: relative;
+
+  .ͼ1 .cm-scroller {
+    font-family: unset;
+    line-height: 1.5;
+  }
+
+  .ͼ1 .cm-widgetBuffer {
+    vertical-align: unset;
+  }
+
+  .ͼ1 .cm-placeholder {
+    color: #{colors.$outline};
+  }
+
+  .ͼ1.cm-editor {
+    @extend %comment-editor-textfield;
+
+    &.cm-focused {
+      /* default theme in codemirror seems difficult to override */
+      --wy-component-color: #{colors.$on-background};
+      color: var(--wy-component-color);
+      border-color: #{colors.$primary};
+      outline: 0;
+    }
+
+    .cm-content {
+      @extend %comment-editor-textcontent;
+    }
+
+    .cm-scroller {
+      overflow: auto;
+
+      .wy-scrollbars & {
+        @include scroll.custom-scrollbar;
+        // scrollbar offsets
+        @include scroll.scrollbar-top-padding(0.375rem);
+        @include scroll.scrollbar-bottom-padding(0.375rem);
+      }
+    }
+  }
+
+  .wy-is-invalid + .cm-editor {
+    border-color: colors.$error !important;
+  }
+  // autocomplete dropdown menu
+  .ͼ1 {
+    .cm-tooltip.cm-tooltip-autocomplete > ul {
+      font-family: unset;
+      max-height: 15rem; // room for 5 items
+
+      > li {
+        padding: 0;
+      }
+    }
+  }
+
+  .ͼ2 {
+    .cm-tooltip {
+      border: none;
+      background-clip: padding-box;
+      background-color: #{colors.$surface-2};
+      color: #{colors.$on-surface};
+      border-radius: vars.$border-radius;
+      box-shadow: vars.$shadow-level1;
+      overflow: hidden;
+      z-index: vars.$zindex-dropdown;
+    }
+
+    .cm-tooltip-autocomplete ul li[aria-selected] {
+      background: #{colors.$primary-container};
+      color: unset;
+    }
+  }
+
+  .cm-tooltip-autocomplete {
+    .cm-completionLabel {
+      display: none;
+    }
+
+    .wy-item-hover:hover, .wy-item-hover:focus {
+      background: #{colors.$surface-variant};
+    }
+
+    .wy-avatar {
+      width: 32px;
+      height: 32px;
+    }
+  }
+}