@weavy/uikit-react 12.1.0 → 14.0.0

package/src/scss/theme/_palette.scss

@@ -1,165 +0,0 @@
-@use "sass:map";
-@use "sass:list";
-@use "sass:string";
-@use "sass:math";
-@use "sass:color";
-
-// RYB COLOR WHEEL
-// HSL mapping based on http://computergraphics.stackexchange.com/questions/1748/function-to-convert-hsv-angle-to-ryb-angle
-// Matching bootstrap and MD colors
-$color-names: (
-    "red": null,
-    "deep-orange": null,
-    "orange": null,
-    "amber": null,
-    "yellow": null,
-    "lime": null,
-    "light-green": null,
-    "green": null,
-    "teal": null,
-    "cyan": null,
-    "light-blue": null,
-    "blue": null,
-    "indigo": null,
-    "deep-purple": null,
-    "purple": null,
-    "pink": null
-) !default;
-
-// Matching MD shades
-// Added 950 for dark theme compatibility
-$color-shades: (
-    "50": 95,
-    "100": 90,
-    "200": 80,
-    "300": 70,
-    "400": 60,
-    "500": 50,
-    "600": 42,
-    "700": 36,
-    "800": 28,
-    "900": 22,
-    "950": 16
-) !default;
-
-// color mapping
-$ryb-rgb-mapping: (
-  (0, 0) // Red
-  (50, 35) // Orange
-  (110, 60) // Yellow
-  (165, 120) // Green
-  (210, 180) // Cyan
-  (285, 240) // Blue
-  (330, 300) // Purple
-  (360, 360) // Red (same as 0)
-) !default;
-
-// saturation mapping
-$hue-sat-mapping: (
-  (0, 85) // Red
-  (110, 100) // Yellow
-  (165, 60) // Green
-  (210, 88) // Cyan
-  (285, 97) // Blue
-  (330, 65) // Purple
-  (360, 85) // Red (same as 0)
-) !default;
-
-@function ryb-hue($h, $reverse: false) {
-  $deg: $h % 360;
-
-  $from: 1;
-  $to: 2;
-
-  @if $reverse {
-      $from: 2;
-      $to: 1;
-  }
-
-  $lower: 1;
-  $upper: 2;
-
-  @while $deg > list.nth(list.nth($ryb-rgb-mapping, $upper), $from) {
-      $lower: $upper;
-      $upper: $upper + 1;
-  }
-
-  $lower-from: list.nth(list.nth($ryb-rgb-mapping, $lower), $from);
-  $lower-to: list.nth(list.nth($ryb-rgb-mapping, $lower), $to);
-  $upper-from: list.nth(list.nth($ryb-rgb-mapping, $upper), $from);
-  $upper-to: list.nth(list.nth($ryb-rgb-mapping, $upper), $to);
-
-  $percent: math.div(($deg - $lower-from), ($upper-from - $lower-from));
-  $hue: $lower-to + ($upper-to - $lower-to) * $percent;
-
-  @return $hue;
-}
-
-@function ryb-saturation($rybHue, $saturation, $reverse: false) {
-  $deg: $rybHue % 360;
-  $sat: math.clamp(0, $saturation, 100);
-
-  $index: 1;
-  $value: 2;
-
-  $lower: 1;
-  $upper: 2;
-
-  @while $deg > list.nth(list.nth($hue-sat-mapping, $upper), $index) {
-      $lower: $upper;
-      $upper: $upper + 1;
-  }
-
-  $lower-index: list.nth(list.nth($hue-sat-mapping, $lower), $index);
-  $upper-index: list.nth(list.nth($hue-sat-mapping, $upper), $index);
-  $lower-value: list.nth(list.nth($hue-sat-mapping, $lower), $value);
-  $upper-value: list.nth(list.nth($hue-sat-mapping, $upper), $value);
-
-  $percent: math.div(($deg - $lower-index), ($upper-index - $lower-index));
-  $interpolation: math.div(($lower-value + ($upper-value - $lower-value) * $percent), 100);
-
-  @if $reverse {
-    @return math.div($sat, $interpolation);
-  } @else {
-    @return $sat * $interpolation;
-  }
-
-}
-
-@function hsl-to-ryb-as-hsl($h, $s, $l) {
-    $hue: math.floor(ryb-hue($h));
-    $saturation: ryb-saturation($h, $s) * 1%;
-    $lightness: $l * 1%;
-    @return hsl($hue, $saturation, $lightness);
-}
-
-@function generate-colors($base-color) {
-    $h: ryb-hue(math.div(hue($base-color), 1deg), true);
-    $divisions: list.length($color-names);
-
-    // 33% is minimum threshold to not get all colors gray
-    $normalizedS: math.clamp(ryb-saturation($h, 33), math.div(saturation($base-color), 1%), ryb-saturation($h, 100));
-    $s: ryb-saturation($h, $normalizedS, true);
-
-    $distance: math.div(360, $divisions);
-
-    $start-offset: $h % $distance;
-
-    // Clone
-    $generated-colors: map.merge($color-names, ());
-
-    @for $i from 1 through $divisions  {
-      $ih: $start-offset + ($i - 1) * $distance;
-      $il: map.get($color-shades, "500");
-      $iname: list.nth(map.keys($color-names), $i);
-      $icolor: hsl-to-ryb-as-hsl($ih, $s, $il);
-      //@debug $iname $icolor;
-      $generated-colors: map.set($generated-colors, $iname, $icolor);
-    }
-
-    @return $generated-colors;
-}
-
-@function color-shade($color, $shade, $shades: $color-shades) {
-  @return color.change($color, $lightness: map.get($shades, $shade) * 1%)
-}

package/src/scss/theme/_preview-icon.scss

@@ -1,41 +0,0 @@
-@use "variables" as *;
-
-
-// big file type icon
-.wy-content-icon {
-  background-color: $body-bg;
-  border-radius: $border-radius-lg;
-
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  
-  text-align: center;
-  padding: 1rem 2rem;
-
-  .wy-icon-stack, .wy-icon {
-    width: 8rem;
-    height: 8rem;    
-  }
-
-  .wy-dark & {
-    background-color: rgba($dark, $opacity-backdrop);
-    color: $navbar-dark-color;
-
-    a {
-      color: $primary-300;
-    }
-    .wy-icon {
-      color: $icon-light-color;
-    }
-
-    .wy-icon-stack {
-      .wy-icon:last-child {
-        background-color: rgba($dark, $opacity-backdrop);
-      }
-    }
-
-  }
-
-}
-  

package/src/scss/theme/_reboot.scss

@@ -1,41 +0,0 @@
-@use "sass:selector";
-@use "variables" as *;
-
-// General style reboot selector for all classes starting with wy-
-[class^="wy-"], [class*=" wy-"] {
-  // Cherry-picked and ported from bootstrap/scss/reboot
-  &, & * {
-
-    &, &::before, &::after {
-      box-sizing: border-box;
-    }
-
-    &[hidden] {
-      display: none !important;
-    }
-
-    &[role="button"] {
-      cursor: pointer;
-    }
-  }
-
-  #{selector.append("a", &)}, & a {
-    text-decoration: $link-decoration;
-
-    &:hover {
-      text-decoration: $link-hover-decoration;
-    }
-
-    &:not([href]):not([class]) {
-
-      &, &:hover {
-        text-decoration: none;
-      }
-    }
-  }
-
-  #{selector.append("p", &)}, & p {
-    margin-top: 0;
-    margin-bottom: $paragraph-margin-bottom;
-  }
-}

package/src/scss/theme/_root.scss

@@ -1,2 +0,0 @@
-@import "config";
-@import "bootstrap/root";

package/src/scss/theme/_scroll.scss

@@ -1,55 +0,0 @@
-@use "sass:selector";
-@use "mixins/scrollbar";
-
-.wy-scroll-y {
-  @include scrollbar.scroll-y;
-
-  &:not(.wy-scroll-x) {
-    overflow-x: hidden;
-    touch-action: pan-y;
-  }
-}
-
-.wy-scroll-x {
-  @include scrollbar.scroll-x;
-
-  &:not(.wy-scroll-y) {
-    overflow-y: hidden;
-    touch-action: pan-x;
-  }
-}
-
-.wy-scrollbars {
-  // custom scrollbar styling
-  // use overlay scrollbars if supported
-
-  &.wy-scroll-y, .wy-scroll-y {
-    @supports (overflow-y: overlay) {
-      overflow-y: overlay;
-    }
-
-    @include scrollbar.custom-scrollbar;
-
-    // scrollbar offsets
-    @include scrollbar.scrollbar-top-padding(#{'var(--wy-scrollbar-adjust-top, 0)'});
-    @include scrollbar.scrollbar-bottom-padding(#{'var(--wy-scrollbar-adjust-bottom, 0)'});
-  }
-}
-
-// prevent scroll when opening modals etc.
-.wy-block-scroll {
-  overflow: hidden !important;
-}
-
-// element for detecting scrollbar capabilities (visibility, overlay etc.)
-.wy-scrollbar-detection {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 8rem;
-  height: 8rem;
-  overflow: scroll;
-  z-index: -99999;
-  pointer-events: none;
-  visibility: hidden;
-}

package/src/scss/theme/_search.scss

@@ -1,68 +0,0 @@
-@use "config" as *;
-@use "bs/forms";
-@use "icons";
-@use "spinner";
-@use "tables";
-
-input[type="search"]::-webkit-search-cancel-button {
-  // REVIEW: can we use close.svg?
-  -webkit-appearance: none;
-}
-
-.wy-search-form {
-  position: relative;
-  padding-top: .5rem;
-  padding-bottom: .5rem;
-
-  [type=reset] {
-    display: none;
-  }
-
-  .wy-button-icon {
-    position: absolute;
-    top: .25rem;
-    border-radius: 50%;
-    top: .5rem;
-    //left: .5rem;
-    padding: 0.25rem;
-    z-index: 4;
-  }
-}
-
-.wy-search-input {
-  @extend %form-control, %form-control-sm;
-  background: $light;
-  border-color: transparent;
-  padding-left: 2rem;
-
-  &:focus {
-    background: $light;
-    border-color: transparent;
-  }
-
-}
-
-.wy-searching .wy-search-form,
-.wy-searching.wy-search-form {
-  [type=reset] {
-    display: inline;
-  }
-
-  [type=submit] {
-    display: none;
-  }
-}
-
-.wy-search-result-table {
-  @extend %table,
-  %table-icons;
-
-  td:nth-child(2) {
-    @include text-truncate();
-  }
-}
-
-.wy-search-no-result {
-  color: $text-muted;
-  text-align: center;
-}

package/src/scss/theme/_turbo.scss

@@ -1,17 +0,0 @@
-@use "colors" as *;
-
-.turbo-progress-bar {
-  background-color: $primary;
-  height: .25rem;
-}
-
-[data-turbo-link] {
-  cursor: pointer;
-}
-
-
-html[data-turbo-preview] {
-  main {
-    opacity: .6;
-  }
-}

package/src/scss/theme/_variables.scss

@@ -1,139 +0,0 @@
-// 1. Introduce Weavy theme variables
-@import "colors"; // weavy color system
-
-$appbar-height: 3rem;
-$footerbar-height: 3.5rem;
-
-$opacity-backdrop: .95;
-
-// TODO: remove the following $client- variables (used in dropin-js)
-$client-panel-width: 24rem; // 384px, previously 375px;
-$client-zindex: 2147483647; // max possible z-index
-$client-border-radius: .25rem;
-$client-icon-size: 2.5rem;
-$client-alert-background: $primary-200;
-$client-alert-color: $primary-800;
-
-// Additional font sizes and weights
-//$font-size-xxs: .625rem; // 7.5pt/10px
-$font-size-xs: .75rem; // 9pt/12px
-//$font-weight-thin: 100;
-//$font-weight-extralight: 200;
-$font-weight-medium: 500;
-//$font-weight-extrabold: 800;
-//$font-weight-black: 900;
-//$font-weight-extrablack: 950;
-
-// Material design buttons and icons
-$btn-hover-bg: rgba(0, 0, 0, .04);
-$btn-active-bg: rgba(0, 0, 0, .12);
-$icon-color: rgba(0, 0, 0, .54);
-$icon-hover-color: rgba(0, 0, 0, .87);
-$icon-light-color: rgba(255, 255, 255, .70);
-$icon-light-hover-color: rgba(255, 255, 255, 1);
-$icon-color-primary: rgba($primary-700, .87);
-$icon-hover-color-primary: rgba($primary-700, 1);
-$icon-light-color-primary: rgba($primary-300, .87);
-$icon-light-hover-color-primary: rgba($primary-300, 1);
-
-// Material design animation and shadows from https://fezvrasta.github.io/bootstrap-material-design/
-$md-animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
-$md-animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);
-$md-animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1);
-$md-animation-curve-default: $md-animation-curve-fast-out-slow-in;
-$md-animation-duration: .2s;
-$md-animation-duration-fast: .1s;
-$md-shadow-umbra-opacity: 0.2;
-$md-shadow-penumbra-opacity: 0.14;
-$md-shadow-ambient-opacity: 0.12;
-$md-shadow-focus: 0 0 .5rem rgba($black, .18), 0 .5rem 1rem rgba($black, .36);
-$md-shadow-2dp: 0 .125rem .125rem 0 rgba($black, $md-shadow-penumbra-opacity), 0 .1875rem .0625rem -.125rem rgba($black, $md-shadow-umbra-opacity), 0 .0625rem .3125rem 0 rgba($black, $md-shadow-ambient-opacity);
-$md-shadow-3dp: 0 .1875rem .25rem 0 rgba($black, $md-shadow-penumbra-opacity), 0 .1875rem .1875rem -.125rem rgba($black, $md-shadow-umbra-opacity), 0 .0625rem .5rem 0 rgba($black, $md-shadow-ambient-opacity);
-$md-shadow-4dp: 0 .25rem .3125rem 0 rgba($black, $md-shadow-penumbra-opacity), 0 .0625rem .625rem 0 rgba($black, $md-shadow-ambient-opacity), 0 .125rem .25rem -.0625rem rgba($black, $md-shadow-umbra-opacity);
-$md-shadow-6dp: 0 .375rem .625rem 0 rgba($black, $md-shadow-penumbra-opacity), 0 .0625rem 1.5rem 0 rgba($black, $md-shadow-ambient-opacity), 0 .1875rem .3125rem -.0625rem rgba($black, $md-shadow-umbra-opacity);
-$md-shadow-8dp: 0 .5rem .625rem .0625rem rgba($black, $md-shadow-penumbra-opacity), 0 .1875rem 1.25rem .125rem rgba($black, $md-shadow-ambient-opacity), 0 .3125rem .3125rem -.1875rem rgba($black, $md-shadow-umbra-opacity);
-$md-shadow-16dp: 0 1rem 2.25rem .125rem rgba($black, $md-shadow-penumbra-opacity), 0 .375rem 1.875rem .3125rem rgba($black, $md-shadow-ambient-opacity), 0 .5rem .625rem -.3125rem rgba($black, $md-shadow-umbra-opacity);
-$md-shadow-24dp: 0 .5625rem 4.375rem .5rem rgba($black, $md-shadow-penumbra-opacity), 0 1.0625rem 1.3125rem -.4375rem rgba($black, $md-shadow-ambient-opacity), 0 2.25rem 3.5rem .1875rem rgba($black, $md-shadow-umbra-opacity);
-
-// 2. Override bootstrap variables
-
-// Options
-$enable-shadows: true;
-$enable-smooth-scroll: false;
-$enable-grid-classes: false;
-
-// Prefix for :root CSS variables
-$prefix: wy-;
-
-// Body
-$body-color: $gray-950;
-
-// Links
-$link-decoration: none;
-
-// Components
-$border-color: $gray-200;
-
-$box-shadow: $md-shadow-8dp;
-$box-shadow-sm: $md-shadow-4dp;
-$box-shadow-lg: $md-shadow-16dp;
-$box-shadow-inset: 0;
-
-$component-active-color: $gray-900; // $white
-$component-active-bg: $gray-100; // $primary
-
-// Tables
-$table-hover-bg: $light;
-$table-border-color: $gray-100;
-
-// Buttons
-$btn-box-shadow: unset; 
-$btn-focus-box-shadow: unset;
-$btn-active-box-shadow: unset;
-
-// Forms
-$input-focus-border-color: tint-color($primary, 50%);
-
-// Navbar
-$navbar-padding-x: .5rem;
-
-$navbar-dark-color: rgba($white, .62);
-$navbar-dark-hover-color: rgba($white, .95);
-
-$navbar-light-color: rgba($black, .69);
-$navbar-light-hover-color: rgba($black, .88);
-$navbar-light-active-color: $black;
-
-// Dropdowns
-$dropdown-padding-y: .25rem;
-$dropdown-spacer: .25rem;
-$dropdown-border-width: 0;
-$dropdown-divider-margin-y: .25rem;
-$dropdown-box-shadow: $md-shadow-2dp;
-
-$dropdown-link-color: $body-color;
-$dropdown-link-hover-bg: $light;
-
-$dropdown-item-padding-y: .75rem;
-$dropdown-item-padding-x: .75rem;
-
-// Cards
-$card-cap-bg: $white;
-
-// Toasts
-$toast-max-width: auto;
-$toast-font-size: 1rem;
-$toast-color: $gray-200;
-$toast-background-color: $gray-800;
-
-// Modals
-$modal-header-border-width: 0;
-
-// List group
-$list-group-hover-bg: $light;
-
-$list-group-action-active-color: $component-active-color;
-$list-group-action-active-bg: $component-active-bg;
-
-// 3. Import default bootstrap variables
-@import "bootstrap/variables";

package/src/scss/theme/bootstrap/_accordion.scss

@@ -1,146 +0,0 @@
-//
-// Base styles
-//
-
-.accordion {
-  // scss-docs-start accordion-css-vars
-  --#{$prefix}accordion-color: #{color-contrast($accordion-bg)};
-  --#{$prefix}accordion-bg: #{$accordion-bg};
-  --#{$prefix}accordion-transition: #{$accordion-transition};
-  --#{$prefix}accordion-border-color: #{$accordion-border-color};
-  --#{$prefix}accordion-border-width: #{$accordion-border-width};
-  --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
-  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
-  --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
-  --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
-  --#{$prefix}accordion-btn-color: #{$accordion-color};
-  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
-  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
-  --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
-  --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
-  --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
-  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
-  --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
-  --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
-  --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
-  --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
-  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
-  --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
-  // scss-docs-end accordion-css-vars
-}
-
-.accordion-button {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
-  @include font-size($font-size-base);
-  color: var(--#{$prefix}accordion-btn-color);
-  text-align: left; // Reset button style
-  background-color: var(--#{$prefix}accordion-btn-bg);
-  border: 0;
-  @include border-radius(0);
-  overflow-anchor: none;
-  @include transition(var(--#{$prefix}accordion-transition));
-
-  &:not(.collapsed) {
-    color: var(--#{$prefix}accordion-active-color);
-    background-color: var(--#{$prefix}accordion-active-bg);
-    box-shadow: inset 0 calc(var(--#{$prefix}accordion-border-width) * -1) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
-
-    &::after {
-      background-image: var(--#{$prefix}accordion-btn-active-icon);
-      transform: var(--#{$prefix}accordion-btn-icon-transform);
-    }
-  }
-
-  // Accordion icon
-  &::after {
-    flex-shrink: 0;
-    width: var(--#{$prefix}accordion-btn-icon-width);
-    height: var(--#{$prefix}accordion-btn-icon-width);
-    margin-left: auto;
-    content: "";
-    background-image: var(--#{$prefix}accordion-btn-icon);
-    background-repeat: no-repeat;
-    background-size: var(--#{$prefix}accordion-btn-icon-width);
-    @include transition(var(--#{$prefix}accordion-btn-icon-transition));
-  }
-
-  &:hover {
-    z-index: 2;
-  }
-
-  &:focus {
-    z-index: 3;
-    border-color: var(--#{$prefix}accordion-btn-focus-border-color);
-    outline: 0;
-    box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
-  }
-}
-
-.accordion-header {
-  margin-bottom: 0;
-}
-
-.accordion-item {
-  color: var(--#{$prefix}accordion-color);
-  background-color: var(--#{$prefix}accordion-bg);
-  border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
-
-  &:first-of-type {
-    @include border-top-radius(var(--#{$prefix}accordion-border-radius));
-
-    .accordion-button {
-      @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
-    }
-  }
-
-  &:not(:first-of-type) {
-    border-top: 0;
-  }
-
-  // Only set a border-radius on the last item if the accordion is collapsed
-  &:last-of-type {
-    @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
-
-    .accordion-button {
-      &.collapsed {
-        @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
-      }
-    }
-
-    .accordion-collapse {
-      @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
-    }
-  }
-}
-
-.accordion-body {
-  padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
-}
-
-
-// Flush accordion items
-//
-// Remove borders and border-radius to keep accordion items edge-to-edge.
-
-.accordion-flush {
-  .accordion-collapse {
-    border-width: 0;
-  }
-
-  .accordion-item {
-    border-right: 0;
-    border-left: 0;
-    @include border-radius(0);
-
-    &:first-child { border-top: 0; }
-    &:last-child { border-bottom: 0; }
-
-    .accordion-button {
-      @include border-radius(0);
-    }
-  }
-}