fu-kit 0.7.1 → 1.0.0

package/src/components/UiTextarea.vue

@@ -1,117 +1,117 @@
-<template>
-  <div
-      :class="{'_disabled': $attrs.disabled !== undefined || $attrs.readOnly  !== undefined }"
-      class="ui-text"
-      v-bind="{ class: $attrs.class }"
-  >
-    <textarea
-        ref="textarea"
-        :value="modelValue"
-        class="ui-text_textarea"
-        v-bind="{...$attrs, class: undefined}"
-        @input="handleInput"
-    />
-  </div>
-</template>
-
-<script>
-import { defineComponent, onMounted, ref } from 'vue'
-
-export default defineComponent({
-  name: 'ui-textarea',
-  props: {
-    modelValue: {
-      type: [ String, Number ],
-      default: '',
-    },
-    autoResize: { type: Boolean, default: false },
-  },
-  emits: [ 'update:modelValue' ],
-  setup (props, { emit }) {
-    const textarea = ref(null)
-    const handleInput = async (e) => {
-      emit('update:modelValue', e.target.value)
-      resize(e.target)
-    }
-    const resize = (elm) => {
-      if (!props.autoResize) return
-      elm.style.height = 'auto'
-      elm.style.height = `${ elm.scrollHeight }px`
-    }
-    onMounted(() => resize(textarea.value))
-
-    return { handleInput, textarea }
-  },
-})
-</script>
-<style lang="scss" scoped>
-@import "../../scss";
-
-.ui-text {
-  @include typo(200);
-
-  padding: 0;
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: stretch;
-  border-style: var(--ui-lt-border-style);
-  border-width: var(--ui-lt-border-width);
-  border-color: var(--ui-pal-lateral);
-  border-radius: var(--ui-lt-border-radius);
-  transition-duration: 240ms;
-  transition-timing-function: ease-in-out;
-  transition-property: border-color, box-shadow;
-  min-height: var(--ui-lt-h);
-  background: var(--ui-pal-bg);
-
-  &_textarea {
-    @include scrollbar-awesome();
-    @include typo(200);
-    padding: spacing(200, 300);
-    margin: spacing(100, 100, 100, 0);
-
-    color: var(--ui-pal-text);
-    caret-color: var(--ui-pal);
-    border: 0 none;
-    outline: none;
-    background: transparent;
-    box-sizing: border-box;
-    flex: 1;
-    display: block;
-    min-width: var(--ui-textarea-min-w, 0);
-    max-width: var(--ui-textarea-max-w, unset);
-    resize: var(--ui-textarea-resize, vertical);
-    min-height: var(--ui-textarea-min-h, 4em);
-    max-height: var(--ui-textarea-max-h, 400px);
-    height: var(--ui-lt-h);
-    font-family: var(--typo-font-ui);
-
-    &::selection {
-      background-color: var(--ui-pal);
-      color: var(--ui-pal-text-select);
-    }
-
-    &[disabled], &[read-only] {
-      cursor: text;
-      color: var(--ui-pal-disabled-border);
-    }
-  }
-
-  &:hover {
-    outline: none;
-    box-shadow: 0 5px 12px -4px rgb(var(--rgb-front), 0.2);
-  }
-
-  &:focus-within {
-    outline: none;
-    box-shadow: 0 0 0 0 var(--ui-pal);
-    border-color: var(--ui-pal);
-  }
-
-  &._disabled {
-    border: var(--ui-lt-border-width) var(--ui-lt-disabled-border-style) var(--ui-pal-disabled-border);
-    box-shadow: none;
-  }
-}
-</style>
+<template>
+  <div
+      :class="{'_disabled': $attrs.disabled !== undefined || $attrs.readOnly  !== undefined }"
+      class="ui-text"
+      v-bind="{ class: $attrs.class }"
+  >
+    <textarea
+        ref="textarea"
+        :value="modelValue"
+        class="ui-text_textarea"
+        v-bind="{...$attrs, class: undefined}"
+        @input="handleInput"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, onMounted, ref } from 'vue'
+
+export default defineComponent({
+  name: 'ui-textarea',
+  props: {
+    modelValue: {
+      type: [ String, Number ],
+      default: '',
+    },
+    autoResize: { type: Boolean, default: false },
+  },
+  emits: [ 'update:modelValue' ],
+  setup (props, { emit }) {
+    const textarea = ref(null)
+    const handleInput = async (e) => {
+      emit('update:modelValue', e.target.value)
+      resize(e.target)
+    }
+    const resize = (elm) => {
+      if (!props.autoResize) return
+      elm.style.height = 'auto'
+      elm.style.height = `${ elm.scrollHeight }px`
+    }
+    onMounted(() => resize(textarea.value))
+
+    return { handleInput, textarea }
+  },
+})
+</script>
+<style lang="scss" scoped>
+@import "../../scss";
+
+.ui-text {
+  @include typo(200);
+
+  padding: 0;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: stretch;
+  border-style: var(--ui-lt-border-style);
+  border-width: var(--ui-lt-border-width);
+  border-color: var(--ui-pal-lateral);
+  border-radius: var(--ui-lt-border-radius);
+  transition-duration: 240ms;
+  transition-timing-function: ease-in-out;
+  transition-property: border-color, box-shadow;
+  min-height: var(--ui-lt-h);
+  background: var(--ui-pal-bg);
+
+  &_textarea {
+    @include scrollbar-awesome();
+    @include typo(200);
+    padding: spacing(200, 300);
+    margin: spacing(100, 100, 100, 0);
+
+    color: var(--ui-pal-text);
+    caret-color: var(--ui-pal);
+    border: 0 none;
+    outline: none;
+    background: transparent;
+    box-sizing: border-box;
+    flex: 1;
+    display: block;
+    min-width: var(--ui-textarea-min-w, 0);
+    max-width: var(--ui-textarea-max-w, unset);
+    resize: var(--ui-textarea-resize, vertical);
+    min-height: var(--ui-textarea-min-h, 4em);
+    max-height: var(--ui-textarea-max-h, 400px);
+    height: var(--ui-lt-h);
+    font-family: var(--typo-font-ui);
+
+    &::selection {
+      background-color: var(--ui-pal);
+      color: var(--ui-pal-text-select);
+    }
+
+    &[disabled], &[read-only] {
+      cursor: text;
+      color: var(--ui-pal-disabled-border);
+    }
+  }
+
+  &:hover {
+    outline: none;
+    box-shadow: 0 5px 12px -4px rgb(var(--rgb-front), 0.2);
+  }
+
+  &:focus-within {
+    outline: none;
+    box-shadow: 0 0 0 0 var(--ui-pal);
+    border-color: var(--ui-pal);
+  }
+
+  &._disabled {
+    border: var(--ui-lt-border-width) var(--ui-lt-disabled-border-style) var(--ui-pal-disabled-border);
+    box-shadow: none;
+  }
+}
+</style>

package/src/entry.js

@@ -1,21 +1,23 @@
-/* eslint-disable import/prefer-default-export */
-
-export { default as UiButton }         from './components/UiButton.vue'
-export { default as UiButtonLink }     from './components/UiButtonLink.vue'
-export { default as UiCodeView }       from './components/UiCodeView.vue'
-export { default as UiCodeInput }      from './components/UiCodeInput.vue'
-export { default as UiCopy }           from './components/UiCopy.vue'
-export { default as UiSelect }         from './components/UiSelect.vue'
-export { default as UiSelectX }        from './components/UiSelectX.vue'
-export { default as UiModal }          from './components/UiModal.vue'
-export { default as UiSidebar }        from './components/UiSidebar.vue'
-export { default as UiText }           from './components/UiText.vue'
-export { default as UiTextarea }       from './components/UiTextarea.vue'
-export { default as UiCheck }          from './components/UiCheck.vue'
-export { default as UiDropdown }       from './components/UiDropdown.vue'
-export { default as UiDropdownItem }   from './components/UiDropdownItem.vue'
-export { default as UiIconProvider }   from './components/UiIconProvider.vue'
-export { default as UiIcon }           from './components/UiIcon.vue'
-export { default as UiProgressRadial } from './components/UiProgressRadial.vue'
-
-export { default as browserTheme } from './utils/browserTheme.js'
+/* eslint-disable import/prefer-default-export */
+
+export { default as UiButton }         from './components/UiButton.vue'
+export { default as UiButtonLink }     from './components/UiButtonLink.vue'
+export { default as UiButtonRoute }    from './components/UiButtonRoute.vue'
+export { default as UiCodeView }       from './components/UiCodeView.vue'
+export { default as UiCodeInput }      from './components/UiCodeInput.vue'
+export { default as UiCopy }           from './components/UiCopy.vue'
+export { default as UiSelect }         from './components/UiSelect.vue'
+export { default as UiSelectX }        from './components/UiSelectX.vue'
+export { default as UiModal }          from './components/UiModal.vue'
+export { default as UiSidebar }        from './components/UiSidebar.vue'
+export { default as UiText }           from './components/UiText.vue'
+export { default as UiTextarea }       from './components/UiTextarea.vue'
+export { default as UiCheck }          from './components/UiCheck.vue'
+export { default as UiDropdown }       from './components/UiDropdown.vue'
+export { default as UiDropdownItem }   from './components/UiDropdownItem.vue'
+export { default as UiIconProvider }   from './components/UiIconProvider.vue'
+export { default as UiIcon }           from './components/UiIcon.vue'
+export { default as UiProgressRadial } from './components/UiProgressRadial.vue'
+export { default as UiImg }            from './components/UiImg.vue'
+
+export { default as browserTheme } from './utils/browserTheme.js'

package/src/scss-kit/colors.scss

@@ -26,7 +26,6 @@
 //
 //  COLOR HELPERS
 //
-
 @function pal($color-code, $opacity:1) {
   @if ($opacity < 1) {
     @return rgba(var(--pal-#{$color-code}), #{$opacity})
@@ -37,9 +36,9 @@
 
 @function pal-acc($color-code, $opacity:1) {
   @if ($opacity < 1) {
-    @return rgba(var(--pal-acc-#{$color-code}), #{$opacity})
+    @return rgba(var(--pal-#{$color-code}-acc), #{$opacity})
   } @else {
-    @return rgb(var(--pal-acc-#{$color-code}))
+    @return rgb(var(--pal-#{$color-code}-acc))
   }
 }
 

package/src/scss-kit/media.scss

@@ -1,7 +1,7 @@
 $ui-media-breakpoints: (
-    xs: 812px, // everything at this point and below is a mobile. (<= iphoneX)
-    sm: 1200px, // everything equal or below can be considered as a tablet.
-    md: 1440px, // ~15" laptop display and below.
+        xs: 812px, // everything at this point and below is a mobile. (<= iphoneX)
+        sm: 1200px, // everything equal or below can be considered as a tablet.
+        md: 1440px, // ~15" laptop display and below.
   // everything else above is a ~17" laptop or a large screen. (default)
 ) !default;
 
@@ -20,4 +20,3 @@ $ui-media-breakpoints: (
     @content;
   }
 }
-

package/src/scss-kit/pal_dark.scss

@@ -19,10 +19,10 @@
   --rgb-warning: #{hex2rgb(#ff7300)};
   --rgb-negative: #{hex2rgb(#ff3535)};
 
-  --rgb-link: #{hex2rgb(#0072bd)};
-  --rgb-link-active: #{hex2rgb(#0095ff)};
-  --rgb-link-hover: #{hex2rgb(#0095ff)};
-  --rgb-link-visited: #{hex2rgb(#6250ff)};
+  --rgb-link: #{hex2rgb(#48b4ff)};
+  --rgb-link-active: #{hex2rgb(#59caec)};
+  --rgb-link-hover: #{hex2rgb(#59caec)};
+  --rgb-link-visited: #{hex2rgb(#b38dff)};
 
   --pal-back: rgb(var(--rgb-back));
   --pal-grey100: rgb(var(--rgb-grey100));
@@ -42,11 +42,11 @@
   --pal-warning: rgb(var(--rgb-warning));
   --pal-negative: rgb(var(--rgb-negative));
 
-  --pal-acc-primary: rgb(var(--rgb-front));
-  --pal-acc-secondary: rgb(var(--rgb-front));
-  --pal-acc-positive: rgb(var(--rgb-front));
-  --pal-acc-warning: rgb(var(--rgb-front));
-  --pal-acc-negative: rgb(var(--rgb-front));
+  --pal-primary-acc: rgb(var(--rgb-front));
+  --pal-secondary-acc: rgb(var(--rgb-front));
+  --pal-positive-acc: rgb(var(--rgb-front));
+  --pal-warning-acc: rgb(var(--rgb-front));
+  --pal-negative-acc: rgb(var(--rgb-front));
 
   --pal-text: rgb(var(--rgb-grey900));
   --pal-text-dimm: rgb(var(--rgb-grey600));
@@ -63,7 +63,7 @@
   --ui-rgb: var(--rgb-primary);
   --ui-pal: var(--pal-primary);
   --ui-pal-bg: var(--pal-grey100);
-  --ui-pal-acc: var(--pal-acc-primary);
+  --ui-pal-acc: var(--pal-primary-acc);
   --ui-pal-lateral: var(--pal-grey300);
   --ui-pal-text: var(--pal-front);
   --ui-pal-text-select: var(--pal-front);

package/src/scss-kit/pal_fu.scss

@@ -14,15 +14,15 @@
   --rgb-front: #{hex2rgb(#FFFFFF)};
 
   --rgb-primary: #{hex2rgb(#ff7300)};
-  --rgb-secondary: #{hex2rgb(#ff4400)};
-  --rgb-positive: #{hex2rgb(#ffecdd)};
+  --rgb-secondary: #{hex2rgb(#ffecdd)};
+  --rgb-positive: #{hex2rgb(#ff4400)};
   --rgb-warning: #{hex2rgb(#ffc500)};
   --rgb-negative: #{hex2rgb(#ff3535)};
 
-  --rgb-link: #{hex2rgb(#0072bd)};
-  --rgb-link-active: #{hex2rgb(#0095ff)};
-  --rgb-link-hover: #{hex2rgb(#0095ff)};
-  --rgb-link-visited: #{hex2rgb(#6250ff)};
+  --rgb-link: #{hex2rgb(#48b4ff)};
+  --rgb-link-active: #{hex2rgb(#59caec)};
+  --rgb-link-hover: #{hex2rgb(#59caec)};
+  --rgb-link-visited: #{hex2rgb(#b38dff)};
 
   --pal-back: rgb(var(--rgb-back));
   --pal-grey100: rgb(var(--rgb-grey100));
@@ -42,11 +42,11 @@
   --pal-warning: rgb(var(--rgb-warning));
   --pal-negative: rgb(var(--rgb-negative));
 
-  --pal-acc-primary: rgb(var(--rgb-front));
-  --pal-acc-secondary: rgb(var(--rgb-front));
-  --pal-acc-positive: rgb(var(--rgb-back));
-  --pal-acc-warning: rgb(var(--rgb-front));
-  --pal-acc-negative: rgb(var(--rgb-front));
+  --pal-primary-acc: rgb(var(--rgb-front));
+  --pal-secondary-acc: rgb(var(--rgb-back));
+  --pal-positive-acc: rgb(var(--rgb-front));
+  --pal-warning-acc: rgb(var(--rgb-front));
+  --pal-negative-acc: rgb(var(--rgb-front));
 
   --pal-text: rgb(var(--rgb-grey900));
   --pal-text-dimm: rgb(var(--rgb-grey600));
@@ -63,7 +63,7 @@
   --ui-rgb: var(--rgb-primary);
   --ui-pal: var(--pal-primary);
   --ui-pal-bg: var(--pal-grey100);
-  --ui-pal-acc: var(--pal-acc-primary);
+  --ui-pal-acc: var(--pal-primary-acc);
   --ui-pal-lateral: var(--pal-grey300);
   --ui-pal-text: var(--pal-front);
   --ui-pal-text-select: var(--pal-front);

package/src/scss-kit/pal_light.scss

@@ -42,11 +42,11 @@
   --pal-warning: rgb(var(--rgb-warning));
   --pal-negative: rgb(var(--rgb-negative));
 
-  --pal-acc-primary: rgb(var(--rgb-back));
-  --pal-acc-secondary: rgb(var(--rgb-back));
-  --pal-acc-positive: rgb(var(--rgb-back));
-  --pal-acc-warning: rgb(var(--rgb-back));
-  --pal-acc-negative: rgb(var(--rgb-back));
+  --pal-primary-acc: rgb(var(--rgb-back));
+  --pal-secondary-acc: rgb(var(--rgb-back));
+  --pal-positive-acc: rgb(var(--rgb-back));
+  --pal-warning-acc: rgb(var(--rgb-back));
+  --pal-negative-acc: rgb(var(--rgb-back));
 
   --pal-text: rgb(var(--rgb-grey900));
   --pal-text-dimm: rgb(var(--rgb-grey600));
@@ -63,7 +63,7 @@
   --ui-rgb: var(--rgb-primary);
   --ui-pal: var(--pal-primary);
   --ui-pal-bg: var(--pal-bg);
-  --ui-pal-acc: var(--pal-acc-primary);
+  --ui-pal-acc: var(--pal-primary-acc);
   --ui-pal-lateral: rgb(var(--rgb-grey200));
   --ui-pal-text: rgb(var(--rgb-front));
   --ui-pal-text-select: rgb(var(--rgb-back));

package/src/scss-kit/typo.scss

@@ -1,39 +1,39 @@
-@function typo-h($h) {
-  @return var(--typo-h#{$h});
-}
-
-@function typo-lh($l) {
-  @return var(--typo-lh#{$l});
-}
-
-@mixin typo($h, $l:null) {
-  font-size: typo-h($h);
-
-  @if ($l) {
-    line-height: typo-lh($l);
-  }
-}
-
-@function _spacing($spacing-code) {
-  @if (
-      $spacing-code == 0 or
-      $spacing-code == auto or
-      $spacing-code == unset or
-      $spacing-code == null
-  ) {
-    @return $spacing-code;
-  }
-
-  @return var(--lt-sp#{$spacing-code});
-}
-
-@function spacing($t, $r: null, $b: null, $l: null) {
-  @return _spacing($t) _spacing($r) _spacing($b) _spacing($l)
-}
-
-@mixin ellipsis($display: block) {
-  display: $display;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+@function typo-h($h) {
+  @return var(--typo-h#{$h});
+}
+
+@function typo-lh($l) {
+  @return var(--typo-lh#{$l});
+}
+
+@mixin typo($h, $l:null) {
+  font-size: typo-h($h);
+
+  @if ($l) {
+    line-height: typo-lh($l);
+  }
+}
+
+@function _spacing($spacing-code) {
+  @if (
+          $spacing-code == 0 or
+      $spacing-code == auto or
+      $spacing-code == unset or
+      $spacing-code == null
+  ) {
+    @return $spacing-code;
+  }
+
+  @return var(--lt-sp#{$spacing-code});
+}
+
+@function spacing($t, $r: null, $b: null, $l: null) {
+  @return _spacing($t) _spacing($r) _spacing($b) _spacing($l);
+}
+
+@mixin ellipsis($display: block) {
+  display: $display;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/scss-kit/typo_default.scss

@@ -1,4 +1,4 @@
-$spacing_growth_k: 2;
+$spacing_growth_k: 3;
 
 @mixin typo_default {
   --ui-lt-h: 36px;
@@ -24,6 +24,7 @@ $spacing_growth_k: 2;
   --typo-font-mono: monospace;
 
   // font-sizes
+  --typo-h50: 10px;
   --typo-h100: 12px;
   --typo-h200: 14px;
   --typo-h300: 16px;
@@ -35,6 +36,7 @@ $spacing_growth_k: 2;
   --typo-h900: 42px;
 
   // line heights
+  --typo-lh50: 12px;
   --typo-lh100: 14px;
   --typo-lh200: 16px;
   --typo-lh300: 18px;
@@ -68,4 +70,4 @@ $spacing_growth_k: 2;
   --lt-z-modal: 3001;
 
   --ui-transition: linear 120ms;
-}
+}

package/src/scss-kit/ui.scss

@@ -1,49 +1,49 @@
-@mixin scrollbar-awesome($hide: false) {
-  &::-webkit-scrollbar-track {
-    background-color: var(--ui-scroll-bg, inherit);
-  }
-
-  &::-webkit-scrollbar {
-    width: var(--ui-scroll-width);
-    height: var(--ui-scroll-width);
-    border-radius: var(--ui-scroll-width);
-    background-color: var(--ui-scroll-bg, inherit);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border: 1px solid var(--ui-scroll-bg, inherit);
-    border-radius: var(--ui-scroll-width);
-    @if ($hide) {
-      background-color: inherit;
-    } @else {
-      background-color: var(--ui-pal);
-    }
-  }
-
-  ::-webkit-scrollbar-corner {
-    background-color: transparent !important;
-    border: 0 none !important;
-    box-shadow: none !important;
-  }
-  @if ($hide) {
-    &:focus::-webkit-scrollbar-thumb,
-    &:hover::-webkit-scrollbar-thumb, {
-      background-color: var(--ui-pal);
-    }
-  }
-}
-
-@mixin scrollbar-invisible() {
-  &::-webkit-scrollbar {
-    width: 0;
-    background-color: transparent;
-    display: none;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-  }
-
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
+@mixin scrollbar-awesome($hide: false) {
+  &::-webkit-scrollbar-track {
+    background-color: var(--ui-scroll-bg, inherit);
+  }
+
+  &::-webkit-scrollbar {
+    width: var(--ui-scroll-width);
+    height: var(--ui-scroll-width);
+    border-radius: var(--ui-scroll-width);
+    background-color: var(--ui-scroll-bg, inherit);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 1px solid var(--ui-scroll-bg, inherit);
+    border-radius: var(--ui-scroll-width);
+    @if ($hide) {
+      background-color: inherit;
+    } @else {
+      background-color: var(--ui-pal);
+    }
+  }
+
+  ::-webkit-scrollbar-corner {
+    background-color: transparent !important;
+    border: 0 none !important;
+    box-shadow: none !important;
+  }
+  @if ($hide) {
+    &:focus::-webkit-scrollbar-thumb,
+    &:hover::-webkit-scrollbar-thumb, {
+      background-color: var(--ui-pal);
+    }
+  }
+}
+
+@mixin scrollbar-invisible() {
+  &::-webkit-scrollbar {
+    width: 0;
+    background-color: transparent;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}