Merge pull request #117 from akai-org/frontend

Frontend

.github/CODEOWNERS

@@ -0,0 +1,20 @@
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# these users will be requested for
+# review when someone opens a pull request.
+
+* @marcol13 @Fuligor
+
+# These owners will be the owners for frontend part
+# of this repo. Unless a later match takes precedence,
+# these users will be requested for
+# review when someone opens a pull request.
+
+/ui/ @marcol13 @PixelSculptor @A-Wodnicki @martao02p @agradecki @Arashayo
+
+# These owners will be the owners for backend part
+# of this repo. Unless a later match takes precedence,
+# these users will be requested for
+# review when someone opens a pull request.
+
+/api/ @Fuligor @kyrstke @Maksymilian-Plywaczyk @PiotrLas @Arashayo

.github/workflows/update-tokens.yml

@@ -0,0 +1,26 @@
+name: Tokens Studio
+on:
+  push:
+    branches:
+      - figma-tokens
+    paths:
+      - 'ui/tokens/**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+        run:
+          working-directory: ./ui
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Node.js environment
+        uses: actions/[email protected]
+      - run: npx token-transformer tokens/tokens.json tokens/transformed-tokens.json
+      - run: npx npx style-dictionary build --config tokens/style-dictionary-config.json
+      - run: npm ci
+      - run: npx stylelint src/assets/styles/abstracts/_variables.scss --fix
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: 'chore: update css tokens'

ui/src/assets/styles/abstracts/_functions.scss

@@ -0,0 +1,3 @@
+@function px-to-rem-converter($px-value, $base: 16px) {
+  @return calc(($px-value * 1px) / $base * 1rem);
+}

ui/src/assets/styles/abstracts/_index.scss

@@ -1 +1,2 @@
 @forward 'variables';
+@forward 'mixins';

ui/src/assets/styles/abstracts/_mixins.scss

@@ -0,0 +1,92 @@
+@use 'functions' as utils;
+@use 'variables' as vars;
+
+@mixin flex-position(
+  $flex-dir: row,
+  $justify: flex-start,
+  $align-items: flex-start,
+  $wrap: nowrap
+) {
+  display: flex;
+  flex-direction: $flex-dir;
+  justify-content: $justify;
+  align-items: $align-items;
+  flex-wrap: wrap;
+}
+
+@mixin font-size-config(
+  $font_size,
+  $line_height: normal,
+  $font_weight: 500,
+  $font_style: normal
+) {
+  font-size: utils.px-to-rem-converter($font_size);
+  font-weight: $font_weight;
+  font-style: $font_style;
+  line-height: $line_height;
+}
+
+@mixin border-config(
+  $border_width: vars.$border-width-md,
+  $border_style: solid,
+  $border_color,
+  $border_radius: 0.3rem
+) {
+  border-width: utils.px-to-rem-converter($border_width);
+  border-style: $border_style;
+  border-color: $border_color;
+  border-radius: $border_radius;
+  -webkit-border-radius: $border_radius;
+  -moz-border-radius: $border_radius;
+  -ms-border-radius: $border_radius;
+  -o-border-radius: $border_radius;
+}
+
+@mixin custom-outline(
+  $outline_width: 2,
+  $outline_style: dashed,
+  $outline_color: vars.$alternative-a100,
+  $outline_offset: 5
+) {
+  outline-style: $outline_style;
+  outline-width: utils.px-to-rem-converter($outline_width);
+  outline-offset: utils.px-to-rem-converter($outline_offset);
+  outline-color: $outline_color;
+}
+
+@mixin custom-range-input-thumb {
+  width: 20%;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+
+  &::-webkit-slider-runnable-track {
+    width: inherit;
+    cursor: pointer;
+    background: vars.$alternative-a100;
+    border-radius: utils.px-to-rem-converter(10);
+  }
+
+  &::-webkit-slider-thumb {
+    width: utils.px-to-rem-converter(15);
+    height: utils.px-to-rem-converter(15);
+    border-radius: 50%;
+  }
+
+  &:focus::-webkit-slider-runnable-track {
+    background-color: vars.$alternative-a700;
+  }
+
+  &::-moz-range-track {
+    width: inherit;
+    cursor: pointer;
+    background: vars.$alternative-a100;
+    border-radius: utils.px-to-rem-converter(10);
+  }
+
+  &::-moz-range-thumb {
+    width: utils.px-to-rem-converter(15);
+    height: utils.px-to-rem-converter(15);
+    border-radius: 50%;
+  }
+}

ui/src/assets/styles/abstracts/_variables.scss

@@ -1,28 +1,62 @@
-/* Colors */
-$color-primary: #1b67dc;
-$color-primary-dark: #003c9a;
-$color-secondary: #a181fa;
-$color-tone-shift: #fa8071;
-$color-white: #fff;
-$color-mid-tone: #b8b8b8;
-$color-black: #282828;
-$color-bg: #2c333f;
-$color-secondary-medium: #614E98;
-$color-secondary-dark: #7D19CB;
-$color-red: #FA3E49;
-
-/* Typography */
-$font-xxl: 64px;
-$font-xl: 48px;
-$font-l: 36px;
-$font-m: 24px;
-$font-s: 20px;
-$font-xs: 16px;
-$font-xxs: 12px;
-
-/* Spacings */
-$spacing-xxl: 76px;
-$spacing-xl: 57px;
-$spacing-l: 43px;
-$spacing-m: 28px;
-$spacing-s: 24px;
+// Do not edit directly
+// Generated on Sun, 16 Jul 2023 21:46:53 GMT
+
+// border
+$border-radius-sm: 2px 2px 2px 2px;
+$border-radius-md: 5px 5px 5px 5px;
+$border-radius-round: 50% 50% 50% 50%;
+
+// colors
+$primary-p100: #ffd5d4;
+$primary-p300: #fbb2b0;
+$primary-p500: #fb817e;
+$primary-p700: #e05f5c;
+$primary-p900: #b23330;
+$secondary-s100: #c7fff9;
+$secondary-s300: #7ef7ea;
+$secondary-s500: #0cd0bb;
+$secondary-s700: #1aa395;
+$secondary-s900: #005c52;
+$alternative-a100: #c9dfff;
+$alternative-a300: #69a4ff;
+$alternative-a500: #1b67dc;
+$alternative-a700: #0f4699;
+$alternative-a900: #002a6b;
+$communicates-success: #17d87f;
+$communicates-warning: #f88f0a;
+$communicates-error: #f04438;
+
+// gray-scale
+$grayscale-g100: #ccc;
+$grayscale-g300: #999;
+$grayscale-g500: #666;
+$grayscale-g700: #333;
+$grayscale-g900: #171717;
+
+// fonts
+$font-size-button-sm: 12;
+$font-size-button-md: 18;
+$font-size-button-lg: 22;
+$font-size-p: 20;
+$font-size-h4: 24;
+$font-size-h3: 36;
+$font-size-h2: 48;
+$font-size-h1: 64;
+$font-size-base: 16;
+
+// color base
+$base-black: #141414;
+$base-white: #fcfcfc;
+
+// borders
+$border-width-md: 5;
+
+// font ligatures
+$line-height-h1: 76.16;
+$line-height-h2: 57.008;
+$line-height-h3: 43.008;
+$line-height-h4: 28;
+$line-height-base: 16;
+$line-height-p: 24;
+
+$token-set-order-0: global;

ui/src/assets/styles/base/_globals.scss

@@ -1,26 +1,31 @@
-@use '../abstracts/' as *;
-@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
-
-body {
-  font-family: Poppins, sans-serif;
-}
-
-h1 {
-  font-size: $font-xxl;
-}
-
-h2 {
-  font-size: $font-xl;
-}
-
-h3 {
-  font-size: $font-l;
-}
-
-h4 {
-  font-size: $font-m;
-}
-
-p {
-  font-size: $font-s;
-}
+@use '../abstracts/' as *;
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;700&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Poppins, sans-serif;
+}
+
+h1 {
+  font-size: $font-size-h1;
+}
+
+h2 {
+  font-size: $font-size-h2;
+}
+
+h3 {
+  font-size: $font-size-h3;
+}
+
+h4 {
+  font-size: $font-size-h4;
+}
+
+p {
+  font-size: $font-size-p;
+}

ui/src/assets/styles/index.scss

@@ -1,2 +1,2 @@
-@use 'abstracts';
-@use 'base';
+@forward 'abstracts/_index';
+@forward 'base';

ui/src/components/Button/Button.jsx

@@ -34,7 +34,6 @@ const Button = ({ variant, onClick, children, style }) => {
 export const buttonVariants = [
   'blue',
   'dark-blue',
-  'purple',
   'light-red',
   'black',
   'white'

ui/src/components/Button/Button.module.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/abstracts/_variables.scss';
+@import '../../assets/styles/abstracts/_variables';
 
 @mixin universal {
   padding: 1em;
@@ -7,37 +7,31 @@
 }
 
 .blue {
-  color: $color-white;
-  background-color: $color-primary;
+  color: $base-white;
+  background-color: $alternative-a700;
   @include universal;
 }
 
 .dark-blue {
-  color: $color-white;
-  background-color: $color-primary-dark;
-  @include universal;
-}
-
-.purple {
-  color: $color-white;
-  background-color: $color-secondary;
+  color: $base-white;
+  background-color: $alternative-a900;
   @include universal;
 }
 
 .light-red {
-  color: $color-black;
-  background-color: $color-tone-shift;
+  color: $base-black;
+  background-color: $primary-p500;
   @include universal;
 }
 
 .black {
-  color: $color-white;
-  background-color: $color-black;
+  color: $base-white;
+  background-color: $base-black;
   @include universal;
 }
 
 .white {
-  color: $color-black;
-  background-color: $color-white;
+  color: $base-black;
+  background-color: $base-white;
   @include universal;
 }

ui/src/components/ButtonIcon/ButtonIcon.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Icon, iconNames } from '../Icon/Icon'
+import { Icon, iconNames, iconColors } from '../Icon/Icon'
 import styles from './ButtonIcon.module.scss'
 import classNames from 'classnames'
 
@@ -22,7 +22,7 @@ export function ButtonIcon({
 ButtonIcon.propTypes = {
   name: PropTypes.oneOf(Object.keys(iconNames)).isRequired,
   className: PropTypes.string,
-  color: PropTypes.oneOf(['blue', 'navy', 'purple', 'orange', 'white', 'black', 'grey', 'red']),
+  color: PropTypes.oneOf(iconColors),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   onClick: PropTypes.func
 }