fu-kit 0.0.1-beta.2 → 0.0.1-beta.3

package/src/scss/ui.scss

@@ -1,62 +1,46 @@
 @mixin scrollbar-awesome($transparent: false) {
   &::-webkit-scrollbar-track {
-    background-color: transparent;
+    background-color: var(--ui-pal-bg);
   }
 
   &::-webkit-scrollbar {
-    @if ($transparent) {
-      background-color: transparent;
-    }
-
-    background-color: pal($pal-block);
-    width: 2px;
-    height: 2px;
+    width: var(--ui-lt-scroll-width);
+    height: var(--ui-lt-scroll-width);
+    border-radius: var(--ui-lt-scroll-width);
+    background-color: var(--ui-pal-bg);
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: pal($pal-prime);
-  }
-}
-
-@mixin scrollbar-awesome-bold() {
-  &::-webkit-scrollbar-track {
+    border: 1px solid var(--ui-pal-bg);
+    border-radius: var(--ui-lt-scroll-width);
     background-color: transparent;
   }
 
-  &::-webkit-scrollbar {
-    width: 0.5em;
-    height: 0.5em;
-    border-radius: 0.25em;
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: pal($pal-prime);
-    border: 1px solid transparent;
-    border-radius: 0.25em;
-  }
-
-  &:hover::-webkit-scrollbar {
-    background-color: pal($pal-block);
+  ::-webkit-scrollbar-corner {
+    background-color: transparent !important;
+    border: 0 none !important;
+    box-shadow: none !important;
   }
 
-  &:hover::-webkit-scrollbar-thumb {
-    background-color: pal($pal-prime);
+  &:focus::-webkit-scrollbar-thumb,
+  &:hover::-webkit-scrollbar-thumb, {
+    background-color: var(--ui-pal);
   }
 }
 
 @mixin scrollbar-invisible() {
   &::-webkit-scrollbar {
-    width: 0; // Remove scrollbar space
-    background: transparent; // Optional: just make scrollbar invisible
-    display: none; // Safari and Chrome
+    width: 0;
+    background-color: transparent;
+    display: none;
   }
 
-  // Optional: show position indicator in red
   &::-webkit-scrollbar-thumb {
-    background: transparent;
+    background-color: transparent;
   }
 
-  -ms-overflow-style: none; // IE 10+
-  scrollbar-width: none; // Firefox
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
+
+

package/src/scss/utils.scss

@@ -0,0 +1,36 @@
+@use 'sass:color';
+
+@function pow($x, $n) {
+  $ret: 1;
+  @if $n >= 0 {
+    @for $i from 1 through $n {
+      $ret: $ret * $x;
+    }
+  } @else {
+    @for $i from $n to 0 {
+      $ret: $ret / $x;
+    }
+  }
+  @return $ret;
+}
+
+@function to-fixed($float, $digits: 2) {
+  $pow: pow(10, $digits);
+  @return round($float * $pow) / $pow;
+}
+
+@function hex2rgb($hex) {
+  @return color.red($hex), color.green($hex), color.blue($hex)
+}
+
+@function hex2hsl($hex) {
+  @return to-fixed(color.hue($hex)), to-fixed(color.saturation($hex)), to-fixed(color.lightness($hex))
+}
+
+@function pal-hsl($color-code, $opacity:1) {
+  @if ($opacity < 1) {
+    @return hsla(var(--#{$color-code}), #{$opacity})
+  } @else {
+    @return hsl(var(--#{$color-code}))
+  }
+}

package/src/styles.scss

@@ -0,0 +1,15 @@
+:root {
+  --lt-header-height: 64px;
+  --lt-footer-height: 64px;
+  --lt-horizontal-padding: 16px;
+}
+
+body {
+  font-family: var(--typo-font-text);
+  color: var(--pal-text);
+  background: var(--pal-bg);
+}
+
+#app {
+  @include scrollbar-awesome();
+}

package/src/utils/media.js

@@ -0,0 +1 @@
+// make a Signal-based memorable scroll listener here

package/src/utils/woosh.js

@@ -0,0 +1,2 @@
+// framework startup
+// consider getting rid of SCSS mixins and overrider root vars with JS.

package/vue.config.js

@@ -5,10 +5,7 @@ module.exports = {
       sass: {
         sourceMap: true,
         prependData: `
-          @import '@/scss/colors';
-          @import '@/scss/media';
-          @import '@/scss/typo';
-          @import '@/scss/ui';
+          @import './scss';
         `,
       },
     },

package/src/views/Home.vue

@@ -1,24 +0,0 @@
-<template>
-  <div class="home">
-    <fu-button>Btn!</fu-button>
-    <fu-text v-model="test" />
-  </div>
-</template>
-
-<script>
-import { ref }  from 'vue'
-
-import FuButton from '@/components/FuButton.vue'
-import FuText   from '@/components/FuText.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    FuText,
-    FuButton,
-  },
-  setup () {
-    const test = ref('')
-  },
-}
-</script>