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

package/package.json

@@ -1,36 +1,36 @@
-{
-  "name": "fu-kit",
-  "version": "0.0.1-beta.2",
-  "description": "extremely simple (not) UI-kit for vue",
-  "main": "components.js",
-  "scripts": {
-    "serve": "vue-cli-service serve --mode development",
-    "build": "vue-cli-service build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vovchisko/fu-kit.git"
-  },
-  "keywords": [
-    "ui",
-    "ui-kit",
-    "vue"
-  ],
-  "author": "@vovchisko",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/vovchisko/fu-kit/issues"
-  },
-  "homepage": "https://github.com/vovchisko/fu-kit#readme",
-  "dependencies": {
-    "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2"
-  }
-}
+{
+  "name": "fu-kit",
+  "version": "0.0.1-beta.3",
+  "description": "extremely simple (not) UI-kit for vue",
+  "main": "components.js",
+  "scripts": {
+    "serve": "vue-cli-service serve --port 4000 --mode development",
+    "build": "vue-cli-service build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vovchisko/fu-kit.git"
+  },
+  "keywords": [
+    "ui",
+    "ui-kit",
+    "vue"
+  ],
+  "author": "@vovchisko",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/vovchisko/fu-kit/issues"
+  },
+  "homepage": "https://github.com/vovchisko/fu-kit#readme",
+  "dependencies": {
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0-0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2"
+  }
+}

package/reset.scss

@@ -0,0 +1,60 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+address, article, aside, blockquote, details, dialog, dd, div, dl, dt, fieldset, figcaption,
+figure, footer, form, hgroup, hr, li, main, nav,
+ol, p, pre, section, table, ul {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: var(--typo-font-text);
+  line-height: 1.2;
+}
+
+h1, h2, h3, h4, h5, h6, header {
+  font-family: var(--typo-font-heading);
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  line-height: 1.2;
+}
+
+input, button, textarea, select, span, b, small {
+  box-sizing: border-box;
+  line-height: 1.2;
+}
+
+h1 {
+  @include typo(700);
+}
+
+h2 {
+  @include typo(600);
+}
+
+h3 {
+  @include typo(500);
+}
+
+h4 {
+  @include typo(400);
+}
+
+h5 {
+  @include typo(300);
+}
+
+p {
+  @include typo(200);
+}
+
+small {
+  @include typo(100);
+}
+
+label {
+  @include typo(100);
+  display: block;
+}

package/root.scss

@@ -0,0 +1,130 @@
+:root {
+
+  // RAW RGB VALUES
+  --rgb-white: #{hex2rgb(#FFFFFF)};
+  --rgb-light: #{hex2rgb(#FEFEFE)};
+  --rgb-grey100: #{hex2rgb(#F4F4F4)};
+  --rgb-grey200: #{hex2rgb(#DCDCDC)};
+  --rgb-grey300: #{hex2rgb(#BFBFBF)};
+  --rgb-grey400: #{hex2rgb(#A5A5A5)};
+  --rgb-grey500: #{hex2rgb(#878787)};
+  --rgb-grey600: #{hex2rgb(#6C6C6C)};
+  --rgb-grey700: #{hex2rgb(#515151)};
+  --rgb-grey800: #{hex2rgb(#363636)};
+  --rgb-grey900: #{hex2rgb(#1C1C1C)};
+  --rgb-dark: #{hex2rgb(#151515)};
+  --rgb-black: #{hex2rgb(#000000)};
+
+  --rgb-brand: #{hex2rgb(#8347A8)};
+  --rgb-primary: #{hex2rgb(#2E88F1)};
+  --rgb-secondary: #{hex2rgb(#434F5F)};
+  --rgb-positive: #{hex2rgb(#6DBE2C)};
+  --rgb-warning: #{hex2rgb(#FFA927)};
+  --rgb-negative: #{hex2rgb(#FF4B4B)};
+
+  // Format palette colors: "--pal-{code}": #RGB
+
+  --pal-white: rgb(var(--rgb-white));
+  --pal-light: rgb(var(--rgb-light));
+  --pal-grey100: rgb(var(--rgb-grey100));
+  --pal-grey200: rgb(var(--rgb-grey200));
+  --pal-grey300: rgb(var(--rgb-grey300));
+  --pal-grey400: rgb(var(--rgb-grey400));
+  --pal-grey500: rgb(var(--rgb-grey500));
+  --pal-grey600: rgb(var(--rgb-grey600));
+  --pal-grey700: rgb(var(--rgb-grey700));
+  --pal-grey800: rgb(var(--rgb-grey800));
+  --pal-grey900: rgb(var(--rgb-grey900));
+  --pal-dark: rgb(var(--rgb-dark));
+  --pal-black: rgb(var(--rgb-black));
+
+  --pal-brand: rgb(var(--rgb-brand));
+  --pal-primary: rgb(var(--rgb-primary));
+  --pal-secondary: rgb(var(--rgb-secondary));
+  --pal-positive: rgb(var(--rgb-positive));
+  --pal-warning: rgb(var(--rgb-warning));
+  --pal-negative: rgb(var(--rgb-negative));
+
+  --pal-acc-brand: rgb(var(--rgb-white));
+  --pal-acc-primary: rgb(var(--rgb-white));
+  --pal-acc-secondary: rgb(var(--rgb-white));
+  --pal-acc-positive: rgb(var(--rgb-white));
+  --pal-acc-warning: rgb(var(--rgb-white));
+  --pal-acc-negative: rgb(var(--rgb-white));
+
+  --pal-text: rgb(var(--rgb-dark));
+  --pal-text-dimm: rgb(var(--rgb-grey600));
+  --pal-block: rgb(var(--rgb-grey100));
+  --pal-block-border: rgb(var(--rgb-grey200));
+  --pal-bg: rgb(var(--rgb-white));
+  --pal-overlay: rgba(var(--rgb-dark), 0.2);
+  --pal-link: rgb(var(--rgb-primary));
+  --pal-link-active: rgb(var(--rgb-brand));
+
+  --ui-pal: var(--pal-primary);
+  --ui-pal-bg: var(--pal-bg);
+  --ui-pal-acc: var(--pal-acc-primary);
+  --ui-pal-lateral: rgb(var(--rgb-grey200));
+  --ui-pal-text: rgb(var(--rgb-dark));
+  --ui-pal-text-select: rgb(var(--rgb-light));
+  --ui-pal-placeholder: rgb(var(--rgb-grey300));
+  --ui-pal-disabled: rgb(var(--rgb-grey100));
+  --ui-pal-disabled-border: rgb(var(--rgb-grey300));
+
+  --ui-transition: all linear 120ms;
+  --ui-lt-h: 36px;
+  --ui-lt-border-style: solid;
+  --ui-lt-border-width: 1px;
+  --ui-lt-border-radius: var(--lt-border-radius-inner);
+  --ui-lt-disabled-border-style: dashed;
+  --ui-lt-scroll-width: 12px;
+
+  --typo-font-heading: 'Segoe UI', San Francisco, Roboto, Lucida Sans;
+  --typo-font-text: 'Segoe UI', San Francisco, Roboto, Lucida Sans;
+  --typo-font-mono: monospace;
+
+  // font-size
+  // format font-size vars: "--lt-{code}": 14px;
+  --typo-h100: 12px;
+  --typo-h200: 14px;
+  --typo-h300: 16px;
+  --typo-h400: 18px;
+  --typo-h500: 22px;
+  --typo-h600: 26px;
+  --typo-h700: 30px;
+  --typo-h800: 36px;
+  --typo-h900: 42px;
+
+  // line-height vars (typo usually has the same number part)
+  // format font-size vars: "--typo-{code}": 14px;
+  --typo-lh100: 14px;
+  --typo-lh200: 16px;
+  --typo-lh300: 18px;
+  --typo-lh400: 22px;
+  --typo-lh500: 26px;
+  --typo-lh600: 32px;
+  --typo-lh700: 42px;
+  --typo-lh800: 48px;
+  --typo-lh900: 64px;
+
+  // spacing vars
+  --lt-sp100: 2px;
+  --lt-sp200: 4px;
+  --lt-sp300: 8px;
+  --lt-sp400: 16px;
+  --lt-sp500: 32px;
+  --lt-sp600: 64px;
+  --lt-sp700: 128px;
+  --lt-sp800: 256px;
+  --lt-sp900: 512px;
+
+  --lt-border-radius: 9px;
+  --lt-border-radius-inner: 5px;
+
+  --lt-z-1: 1;
+  --lt-z-back: -1;
+  --lt-z-pop: 1000;
+  --lt-z-nav: 2000;
+  --lt-z-modal-backdrop: 3000;
+  --lt-z-modal: 3001;
+}

package/scss.scss

@@ -1,3 +1,5 @@
-@mixin halp() {
-  background: bisque;
-}
+@import "./src/scss/utils";
+@import "./src/scss/media";
+@import "./src/scss/colors";
+@import "./src/scss/typo";
+@import "./src/scss/ui";

package/src/App.vue

@@ -1,30 +1,122 @@
-<template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </div>
-  <router-view/>
-</template>
-
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
-</style>
+<template>
+  <header class="app_header">
+    <h1 class="app_header-logo">
+      <router-link to="/" active-class="_active" class="app_header-logo-link">FU*KIT COMPONENTS</router-link>
+    </h1>
+  </header>
+
+  <main class="app_main">
+    <nav class="app_main-nav">
+      <router-link to="/" active-class="_active" class="app_main-nav-link">Home</router-link>
+      <router-link to="/sandbox" active-class="_active" class="app_main-nav-link">Sandbox</router-link>
+      <router-link to="/typo" active-class="_active" class="app_main-nav-link">Typography</router-link>
+      <router-link to="/button" active-class="_active" class="app_main-nav-link">Button</router-link>
+      <router-link to="/select" active-class="_active" class="app_main-nav-link">Select</router-link>
+      <router-link to="/text" active-class="_active" class="app_main-nav-link">Text</router-link>
+      <router-link to="/textarea" active-class="_active" class="app_main-nav-link">Textarea</router-link>
+      <router-link to="/sidebar" active-class="_active" class="app_main-nav-link">Sidebar</router-link>
+    </nav>
+    <div class="app_main-page">
+      <router-view />
+    </div>
+  </main>
+
+  <footer class="app_footer">
+    <small class="app_footer-copy">This is a char in brackets (a) 2021</small>
+  </footer>
+</template>
+<style lang="scss">
+  .brand {
+    --ui-pal: var(--pal-brand);
+  }
+
+  .primary {
+    --ui-pal: var(--pal-primary);
+  }
+
+  .secondary {
+    --ui-pal: var(--pal-secondary);
+  }
+
+  .positive {
+    --ui-pal: var(--pal-positive);
+  }
+
+  .warning {
+    --ui-pal: var(--pal-warning);
+  }
+
+  .negative {
+    --ui-pal: var(--pal-negative);
+  }
+</style>
+<style lang="scss" scoped>
+.app {
+  &_header {
+    grid-area: header;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--lt-header-height);
+    padding: 0 var(--lt-horizontal-padding);
+
+    &-logo {
+      &-link {
+        @include typo(400);
+
+        color: color(black);
+        text-decoration: none;
+      }
+    }
+  }
+
+  &_main {
+    min-height: calc(100vh - var(--lt-header-height) - var(--lt-footer-height));
+    display: flex;
+
+    &-page {
+      padding: 0 var(--lt-horizontal-padding);
+      flex: 1;
+    }
+
+    &-nav {
+      @include spacing-padding(200);
+
+      padding: 0 var(--lt-horizontal-padding);
+      position: sticky;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      border-right: var(--ui-lt-border-width) solid color(grey100);
+      display: flex;
+      flex-direction: column;
+      gap: spacing(200);
+      min-width: 200px;
+
+      &-link {
+        width: 10em;
+        display: block;
+        text-decoration: none;
+
+        &._active {
+          color: black;
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  &_footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--lt-footer-height);
+    padding: 0 var(--lt-horizontal-padding);
+
+    &-copy {
+      @include typo(100);
+      color: color(grey400);
+    }
+  }
+}
+</style>

package/src/Home.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="home">
+    <div class="home_splash">
+      <div class="home_splash-hero">
+        <div class="home_splash-hero-epic">Fu</div>
+        <div class="home_splash-hero-sub">
+          <p>fu-kit</p>
+          <p>v0.0.1</p>
+        </div>
+      </div>
+      <h2 class="home_splash-slogan">Unreasonable UI<br>for unreasonable man.</h2>
+
+      <fu-copy value="npm i fu-kit" class="home_splash-copy">📋 npm i fu-kit</fu-copy>
+
+      <p class="home_text">Just the right amount of UI for your Vue 3 Application!</p>
+      <p class="home_text">Flexible, but not too much.</p>
+      <p class="home_text">Customizable, but not a "options-creep".</p>
+      <p class="home_text">Not too bad, not too good.</p>
+      <p class="home_text">Just right.</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import FuCopy from '@/components/FuCopy.vue'
+
+export default {
+  name: 'Home',
+  components: { FuCopy },
+}
+</script>
+<style lang="scss" scoped>
+.home {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  min-width: 0;
+
+  &_splash {
+    @include spacing-padding(600, 500);
+
+    --typo-font-text: Georgia, serif;
+    --typo-font-heading: Georgia, serif;
+
+    color: var(--pal-white);
+    aspect-ratio: 1 / 1.1;
+    width: 780px;
+    max-width: 100%;
+    min-height: 800px;
+    background-image: url('~@/assets/splash-screen.jpg');
+    background-size: cover;
+    background-position: 50%;
+
+    &-hero {
+      @include spacing-padding(200);
+
+      letter-spacing: 1px;
+      font-weight: normal;
+      height: 200px;
+      width: 200px;
+      border: 1px solid var(--pal-grey400);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      &-epic {
+        display: block;
+        font-size: 120px;
+        color: #c53838;
+      }
+
+      &-sub {
+        @include typo(500);
+        @include spacing-padding(300);
+
+        display: flex;
+        justify-content: space-between;
+
+        & p {
+          @include typo(500);
+        }
+      }
+    }
+
+    &-slogan {
+      @include typo(600);
+      @include spacing-margin(500, 300);
+    }
+
+    &-copy {
+      @include typo(400);
+      @include spacing-padding(100, 400);
+      @include spacing-margin(500, 300);
+
+      --ui-pal: var(--pal-light);
+
+      border: 1px solid rgba(var(--rgb-light), 0.2);
+      font-weight: 600;
+      border-radius: 3px;
+    }
+  }
+
+  &_text {
+    @include typo(200);
+    @include spacing-margin(100, 300);
+
+    text-shadow: 0 1px 1px black;
+    color: var(--pal-light);
+  }
+}
+</style>

package/src/components/FuButton.vue

@@ -1,27 +1,104 @@
-<template>
-  <button
-      v-bind="$attrs"
-      :type="$attrs.type || 'button'"
-      class="fu-button"
-  >
-    <slot />
-  </button>
-</template>
-
-<script>
-console.log('fu button: loaded')
-export default {
-  name: 'fu-button',
-  setup(){
-    console.log('fu button: setup!')
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.fu-button {
-  background: deeppink;
-  color: white;
-  border: 0 none;
-}
-</style>
+<template>
+  <button
+      v-bind="{
+        ...$attrs,
+        type: $attrs.type || 'button',
+        class: 'fu-button' + (hollow ? ' _hollow' : ''),
+      }"
+      @mouseup="mUp"
+  >
+    <slot />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'fu-button',
+  props: {
+    hollow: { type: Boolean, default: false },
+  },
+  setup (props) {
+    const mUp = (e) => e.target.blur()
+    return { hollow: props.hollow, mUp }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.fu-button {
+  @include typo(200);
+  @include spacing-padding(300, 400);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  font-family: var(--typo-font-text);
+  min-height: var(--ui-lt-h);
+  border-width: var(--ui-lt-border-width);
+  border-style: var(--ui-lt-border-style);
+  border-color: var(--ui-pal);
+  border-radius: var(--ui-lt-border-radius);
+  transition: var(--ui-transition);
+  background: var(--ui-pal);
+  color: var(--ui-pal-acc);
+  line-height: 1;
+  will-change: box-shadow, transform;
+
+  outline: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+
+  & > * {
+    pointer-events: none;
+  }
+
+  &:hover {
+    text-decoration: none;
+    box-shadow: 0 4px 12px -4px var(--ui-pal);
+  }
+
+  &:focus {
+    box-shadow: 0 4px 12px -4px var(--ui-pal);
+  }
+
+  &:active {
+    transform: translateY(2px);
+    transition-duration: 20ms;
+    box-shadow: 0 3px 4px -2px var(--ui-pal);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: var(--ui-pal-disabled);
+    border-color: var(--ui-pal-disabled-border);
+    border-style: var(--ui-lt-disabled-border-style);
+    color: var(--ui-pal-disabled-border);
+    box-shadow: none;
+  }
+
+  &._hollow {
+    background: transparent;
+    color: var(--ui-pal);
+
+    &:hover {
+      box-shadow: 0 3px 10px -4px var(--ui-pal);
+      color: var(--ui-pal);
+    }
+
+    &:focus {
+      box-shadow: 0 3px 10px -4px var(--ui-pal);
+    }
+
+    &:active {
+      box-shadow: 0 1px 4px -2px var(--ui-pal);
+    }
+
+    &:disabled {
+      color: var(--ui-pal-disabled-border);
+      box-shadow: none;
+    }
+  }
+}
+</style>