@scrabble-solver/scrabble-solver 2.10.7 → 2.10.9

package/src/hooks/useLocalStorage/useLocalStorageRack.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce } from 'react-use';
 
@@ -7,6 +7,7 @@ import { localStorage, rackSlice, selectRack, useTypedSelector } from 'state';
 const useLocalStorageRack = (): void => {
   const dispatch = useDispatch();
   const rack = useTypedSelector(selectRack);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffectOnce(() => {
     const persistedRack = localStorage.getRack();
@@ -14,13 +15,15 @@ const useLocalStorageRack = (): void => {
     if (persistedRack) {
       dispatch(rackSlice.actions.init(persistedRack));
     }
+
+    setIsLoaded(true);
   });
 
   useEffect(() => {
-    if (rack) {
+    if (rack && isLoaded) {
       localStorage.setRack(rack);
     }
-  }, [rack]);
+  }, [isLoaded, rack]);
 };
 
 export default useLocalStorageRack;

package/src/i18n/de.json

@@ -22,6 +22,7 @@
   "dictionary.empty-state.not-allowed": "Dieses Wort ist nicht erlaubt.",
   "dictionary.empty-state.uninitialized": "Die Wörterbuchdefinition des letzten markierten Wortes wird hier angezeigt.",
   "dictionary.input.placeholder": "Durchsuche Wörterbuch...",
+  "dictionary.input.title": "Durch Kommas getrennte Wörter",
   "empty-state.error": "Fehler",
   "empty-state.info": "Info",
   "empty-state.success": "Juhuu!",

package/src/i18n/en.json

@@ -22,6 +22,7 @@
   "dictionary.empty-state.not-allowed": "This word is not allowed.",
   "dictionary.empty-state.uninitialized": "Dictionary definition of the most recently highlighted word will be shown here.",
   "dictionary.input.placeholder": "Search dictionary...",
+  "dictionary.input.title": "Comma-separated words",
   "empty-state.error": "Error",
   "empty-state.info": "Info",
   "empty-state.success": "Yeah!",

package/src/i18n/es.json

@@ -22,6 +22,7 @@
   "dictionary.empty-state.not-allowed": "Esta palabra no es aceptable.",
   "dictionary.empty-state.uninitialized": "Aquí se mostrará la definición del diccionario de la última palabra resaltada.",
   "dictionary.input.placeholder": "Busca el diccionario...",
+  "dictionary.input.title": "Palabras separadas por comas",
   "empty-state.error": "Error",
   "empty-state.info": "Info",
   "empty-state.success": "Sí!",

package/src/i18n/fa.json

@@ -22,6 +22,7 @@
   "dictionary.empty-state.not-allowed": "این کلمه مجاز نیست.",
   "dictionary.empty-state.uninitialized": "معنی لغت اینجا نمایش داده خواهد شد.",
   "dictionary.input.placeholder": "جستجو در فرهنگ لغت ...",
+  "dictionary.input.title": "کلمات جدا شده با کاما",
   "empty-state.error": "خطا",
   "empty-state.info": "اطلاعات",
   "empty-state.success": "حله!",

package/src/i18n/fr.json

@@ -22,6 +22,7 @@
   "dictionary.empty-state.not-allowed": "Ce mot n'est pas pas acceptable.",
   "dictionary.empty-state.uninitialized": "La définition dictionaire du dernier mot surligné sera affichée ici.",
   "dictionary.input.placeholder": "Rechercher dans le dictionnaire...",
+  "dictionary.input.title": "Mots séparées par des virgules",
   "empty-state.error": "Erreur",
   "empty-state.info": "Info",
   "empty-state.success": "Ouais!",

package/src/i18n/pl.json

@@ -22,6 +22,7 @@
   "dictionary.empty-state.not-allowed": "To słowo nie jest dopuszczalne w grach.",
   "dictionary.empty-state.uninitialized": "Tu zostanie wyświetlona słownikowa definicja ostatnio podświetlonego słowa.",
   "dictionary.input.placeholder": "Szukaj w słowniku...",
+  "dictionary.input.title": "Słowa rozdzielone przecinkiem",
   "empty-state.error": "Błąd",
   "empty-state.info": "Info",
   "empty-state.success": "Hurra!",

package/src/icons/Flag.svg

@@ -1,4 +1,4 @@
-<!-- https://icons.getbootstrap.com/icons/flag-fill/ -->
+<!-- https://icons.getbootstrap.com/icons/flag/ -->
 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12.435 12.435 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A19.626 19.626 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a19.587 19.587 0 0 0 1.349-.476l.019-.007.004-.002h.001" fill="currentColor" />
+  <path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12.435 12.435 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A19.626 19.626 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a19.587 19.587 0 0 0 1.349-.476l.019-.007.004-.002h.001M14 1.221c-.22.078-.48.167-.766.255-.81.252-1.872.523-2.734.523-.886 0-1.592-.286-2.203-.534l-.008-.003C7.662 1.21 7.139 1 6.5 1c-.669 0-1.606.229-2.415.478A21.294 21.294 0 0 0 3 1.845v6.433c.22-.078.48-.167.766-.255C4.576 7.77 5.638 7.5 6.5 7.5c.847 0 1.548.28 2.158.525l.028.01C9.32 8.29 9.86 8.5 10.5 8.5c.668 0 1.606-.229 2.415-.478A21.317 21.317 0 0 0 14 7.655V1.222z" fill="currentColor" />
 </svg>

package/src/icons/FlagFill.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/flag-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12.435 12.435 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A19.626 19.626 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a19.587 19.587 0 0 0 1.349-.476l.019-.007.004-.002h.001" fill="currentColor" />
+</svg>

package/src/icons/Square.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/square/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" fill="currentColor" />
+</svg>

package/src/icons/SquareFill.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/square-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2z" fill="currentColor" />
+</svg>

package/src/icons/index.ts

@@ -19,6 +19,7 @@ export { default as Eraser } from './Eraser.svg';
 export { default as ExclamationSquareFill } from './ExclamationSquareFill.svg';
 export { default as ExclamationTriangleFill } from './ExclamationTriangleFill.svg';
 export { default as Flag } from './Flag.svg';
+export { default as FlagFill } from './FlagFill.svg';
 export { default as FlagEs } from './FlagEs.svg';
 export { default as FlagFa } from './FlagFa.svg';
 export { default as FlagFr } from './FlagFr.svg';
@@ -34,4 +35,6 @@ export { default as Sack } from './Sack.svg';
 export { default as Search } from './Search.svg';
 export { default as SortDown } from './SortDown.svg';
 export { default as SortUp } from './SortUp.svg';
+export { default as Square } from './Square.svg';
+export { default as SquareFill } from './SquareFill.svg';
 export { default as Star } from './Star.svg';

package/src/modals/RemainingTilesModal/components/Character/Character.module.scss

@@ -5,7 +5,7 @@
   transition: var(--transition);
 
   &.finished {
-    opacity: 0.2;
+    opacity: var(--opacity--disabled);
   }
 
   &.overused {

package/src/modals/ResultsModal/ResultsModal.module.scss

@@ -3,5 +3,5 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: white;
+  background-color: var(--color--white);
 }

package/src/modals/SettingsModal/components/AutoGroupTilesSetting/AutoGroupTilesSetting.tsx

@@ -40,12 +40,11 @@ const AutoGroupTilesSetting: FunctionComponent<Props> = ({ className, disabled }
 
   return (
     <div className={className}>
-      {options.map((option, index) => (
+      {options.map((option) => (
         <Radio
           checked={value === parseValue(option.value)}
           className={styles.option}
           disabled={disabled}
-          id={`autoGroupTiles-${index}`}
           key={option.value}
           name="autoGroupTiles"
           value={option.value}

package/src/modals/SettingsModal/components/ConfigSetting/ConfigSetting.module.scss

@@ -9,5 +9,5 @@
 .label {
   display: flex;
   align-items: center;
-  font-family: 'Open Sans', sans-serif;
+  font-family: var(--font--family--latin);
 }

package/src/modals/SettingsModal/components/ConfigSetting/ConfigSetting.tsx

@@ -22,12 +22,11 @@ const ConfigSetting: FunctionComponent<Props> = ({ className, disabled }) => {
 
   return (
     <div className={className}>
-      {options.map((option, index) => (
+      {options.map((option) => (
         <Radio
           checked={configId === option.value}
           className={styles.option}
           disabled={disabled}
-          id={`configId-${index}`}
           key={option.value}
           name="configId"
           value={option.value}

package/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.module.scss

@@ -1,17 +1,8 @@
 @import 'styles/mixins';
 
 .option {
-  margin-bottom: var(--spacing--m);
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  &:hover,
-  &.checked {
-    .flag {
-      box-shadow: var(--box-shadow);
-    }
+  & + & {
+    margin-top: var(--spacing--m);
   }
 }
 
@@ -19,10 +10,10 @@
   display: flex;
   align-items: center;
   gap: var(--spacing--l);
-  font-family: 'Open Sans', sans-serif;
+  font-family: var(--font--family--latin);
 
   &.fa {
-    font-family: 'Vazirmatn', 'Open Sans', sans-serif;
+    font-family: var(--font--family--arabic);
   }
 }
 
@@ -30,17 +21,16 @@
   $height: 32px;
 
   height: $height;
-  box-shadow: var(--box-shadow--null);
   transition: var(--transition);
 
-  &.es {
-    $aspect-ratio: 1.5;
+  &.de {
+    $aspect-ratio: 1.6;
 
     width: $height * $aspect-ratio;
   }
 
-  &.fr {
-    $aspect-ratio: 1.6;
+  &.es {
+    $aspect-ratio: 1.5;
 
     width: $height * $aspect-ratio;
   }
@@ -51,6 +41,12 @@
     width: $height * $aspect-ratio;
   }
 
+  &.fr {
+    $aspect-ratio: 1.6;
+
+    width: $height * $aspect-ratio;
+  }
+
   &.gb {
     $aspect-ratio: 2;
 
@@ -68,10 +64,4 @@
 
     width: $height * $aspect-ratio;
   }
-
-  &.de {
-    $aspect-ratio: 1.6;
-
-    width: $height * $aspect-ratio;
-  }
 }

package/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.tsx

@@ -25,14 +25,13 @@ const LocaleSetting: FunctionComponent<Props> = ({ className, disabled }) => {
 
   return (
     <div className={className}>
-      {options.map(({ Icon, ...option }, index) => (
+      {options.map(({ Icon, ...option }) => (
         <Radio
           checked={locale === option.value}
           className={classNames(styles.option, className, {
             [styles.checked]: locale === option.value,
           })}
           disabled={disabled}
-          id={`locale-${index}`}
           key={option.value}
           name="locale"
           value={option.value}

package/src/pages/_app.tsx

@@ -3,6 +3,7 @@ import Head from 'next/head';
 import { FunctionComponent } from 'react';
 import { Provider } from 'react-redux';
 
+import { SeoMessage } from 'components';
 import { createAppStore } from 'state';
 
 import 'styles/global.scss';
@@ -10,10 +11,16 @@ import 'styles/global.scss';
 const DESCRIPTION =
   // eslint-disable-next-line max-len
   'Scrabble Solver 2 - Free and open-source analysis tool for Scrabble and Literaki. Quickly find top scoring words using given letters and board state. Available in English, French, German, Polish & Spanish.';
+
 const KEYWORDS = [
+  'Scrabble Solver',
   'Scrabble',
   'Solver',
+  'Board',
   'Open-source',
+  'Open',
+  'Source',
+  'Word',
   'Finder',
   'Cheating',
   'Literaki',
@@ -22,6 +29,7 @@ const KEYWORDS = [
   'Français',
   'Deutsch',
   'Polski',
+  'فارسی',
   'Español',
   'SOWPODS',
   'TWL06',
@@ -55,11 +63,7 @@ const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
     </Head>
 
     <Provider store={store}>
-      <p style={{ fontSize: 0 }}>
-        Scrabble Solver 2 is a free and open-source analysis tool for Scrabble and Literaki. Quickly find top scoring
-        words using given letters and board state. Available in English, French, German, Polish & Spanish. Source code
-        is available on GitHub - contributions are welcome!
-      </p>
+      <SeoMessage />
       <Component {...pageProps} />
     </Provider>
   </>

package/src/pages/index.module.scss

@@ -6,8 +6,7 @@
   height: 100%;
   opacity: 0;
   overflow: auto;
-  transition: var(--transition);
-  transition-duration: var(--transition--duration--long);
+  transition: var(--transition--long);
 
   &.initialized {
     opacity: 1;

package/src/pages/index.tsx

@@ -76,6 +76,10 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     }
   }, []);
 
+  if (!isClient) {
+    return null;
+  }
+
   return (
     <>
       <SvgFontFix />
@@ -100,14 +104,12 @@ const Index: FunctionComponent<Props> = ({ version }) => {
           </div>
         </div>
 
-        {isClient && (
-          <Solver
-            className={styles.solver}
-            height={solverHeight}
-            width={solverWidth}
-            onShowResults={() => setShowResults(true)}
-          />
-        )}
+        <Solver
+          className={styles.solver}
+          height={solverHeight}
+          width={solverWidth}
+          onShowResults={() => setShowResults(true)}
+        />
       </div>
 
       <MenuModal

package/src/parameters/index.ts

@@ -6,6 +6,9 @@ export const BREAKPOINTS = {
   xl: 1400,
 };
 
+export const EASE_OUT_CUBIC = 'cubic-bezier(0.33, 1, 0.68, 1)'; // https://easings.net/#easeOutCubic
+export const TRANSITION = 'var(--transition)';
+
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
 
 export const INITIALIZATION_DURATION = 100;
@@ -21,6 +24,7 @@ export const COLOR_YELLOW = '#efe3ae';
 export const COMPONENTS_SPACING = 40;
 export const COMPONENTS_SPACING_SMALL = 20;
 
+export const BOARD_CELL_ACTIONS_OFFSET = 3;
 export const BOARD_CELL_BORDER_WIDTH = 1;
 export const BOARD_TILE_FONT_SIZE_MIN = 14;
 export const BOARD_TILE_FONT_SIZE_POINTS_MIN = 10;
@@ -72,3 +76,11 @@ export const REMAINING_TILES_TILE_SIZE = 50;
 export const RESULTS_HEADER_HEIGHT = 34;
 export const RESULTS_ITEM_HEIGHT = 40;
 export const RESULTS_INPUT_HEIGHT = 40;
+
+export const TILE_APPEAR_DURATION = 200;
+
+export const TILE_APPEAR_KEYFRAMES = [
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(10%)', offset: 0.5 },
+  { transform: 'translateY(0)' },
+];

package/src/state/slices/boardSlice.ts

@@ -19,6 +19,11 @@ const boardSlice = createSlice({
       return newBoard;
     },
 
+    change: (_state, action: PayloadAction<Board>) => {
+      const board = action.payload;
+      return board;
+    },
+
     changeCellValue: (state, action: PayloadAction<{ value: string; x: number; y: number }>) => {
       const newBoard = state.clone();
       const { value, x, y } = action.payload;
@@ -32,11 +37,6 @@ const boardSlice = createSlice({
       return newBoard;
     },
 
-    change: (_state, action: PayloadAction<Board>) => {
-      const board = action.payload;
-      return board;
-    },
-
     init: (_state, action: PayloadAction<Board>) => {
       const board = action.payload;
       return board;

package/src/styles/animations.scss

@@ -8,6 +8,16 @@
   }
 }
 
+@keyframes show {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
 @keyframes progress {
   0% {
     clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);

package/src/styles/global.scss

@@ -53,6 +53,6 @@ h4 {
 }
 
 [lang='fa-IR'] {
-  --font--family: 'Vazirmatn', 'Open Sans', sans-serif;
-  --font--family--title: 'Vazirmatn', 'Lato', sans-serif;
+  --font--family: 'Vazirmatn', sans-serif;
+  --font--family--title: 'Vazirmatn', sans-serif;
 }

package/src/styles/mixins.scss

@@ -16,6 +16,8 @@ $media-expressions: (
  * It does not work when applied on input elements.
  */
 @mixin focus-effect {
+  --focus-effect--size: 6px;
+
   position: relative;
 
   &::after {
@@ -25,10 +27,10 @@ $media-expressions: (
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: 1;
+    z-index: var(--z-index--focus-effect);
     transition: var(--transition);
     border-radius: var(--border--radius);
-    box-shadow: 0 0 0 var(--box-shadow--focus--spread) transparent;
+    box-shadow: 0 0 0 var(--focus-effect--size) transparent;
     pointer-events: none;
   }
 
@@ -39,7 +41,7 @@ $media-expressions: (
     }
 
     &::after {
-      box-shadow: 0 0 0 var(--box-shadow--focus--spread) var(--color--focus);
+      box-shadow: 0 0 0 var(--focus-effect--size) var(--color--focus);
     }
   }
 }
@@ -86,3 +88,58 @@ $media-expressions: (
   text-shadow: $size 0 $color, (-$size) 0 $color, 0 $size $color, 0 (-$size) $color, (-$size) (-$size) $color,
     (-$size) $size $color, $size (-$size) $color, $size $size $color;
 }
+
+@mixin lighthouse-input-size-hack {
+  // Hack for this Lighthouse warning:
+  // > Interactive elements like buttons and links should be large enough (48x48px), and have
+  // > enough space around them, to be easy enough to tap without overlapping onto other elements.
+
+  input {
+    position: absolute;
+    top: -100%;
+    left: -100%;
+    width: 300%;
+    height: 300%;
+    clip-path: inset((100% / 3));
+  }
+
+  [dir='ltr'] & {
+    &:nth-child(1),
+    &:nth-child(2),
+    &:nth-child(3) {
+      input {
+        left: 0;
+        clip-path: polygon(0 (100% / 3), (100% / 3) (100% / 3), (100% / 3) (200% / 3), 0 (200% / 3));
+      }
+    }
+
+    &:nth-last-child(1),
+    &:nth-last-child(2),
+    &:nth-last-child(3) {
+      input {
+        left: -200%;
+        clip-path: polygon((200% / 3) (100% / 3), 100% (100% / 3), 100% (200% / 3), (200% / 3) (200% / 3));
+      }
+    }
+  }
+
+  [dir='rtl'] & {
+    &:nth-child(1),
+    &:nth-child(2),
+    &:nth-child(3) {
+      input {
+        left: -200%;
+        clip-path: polygon((200% / 3) (100% / 3), 100% (100% / 3), 100% (200% / 3), (200% / 3) (200% / 3));
+      }
+    }
+
+    &:nth-last-child(1),
+    &:nth-last-child(2),
+    &:nth-last-child(3) {
+      input {
+        left: 0;
+        clip-path: polygon(0 (100% / 3), (100% / 3) (100% / 3), (100% / 3) (200% / 3), 0 (200% / 3));
+      }
+    }
+  }
+}

package/src/styles/variables.scss

@@ -1,55 +1,63 @@
 $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
 
 :root {
+  --border: var(--border--width) solid var(--border--color);
   --border--color: #cdcdcd;
   --border--color--light: #d9d9d9;
   --border--radius: 5px;
   --border--width: 1px;
-  --border: var(--border--width) solid var(--border--color);
 
+  --box-shadow: 0 0 var(--box-shadow--blur) var(--box-shadow--spread) var(--box-shadow--color);
   --box-shadow--blur: 10px;
+  --box-shadow--color: rgba(0, 0, 0, 0.15);
   --box-shadow--spread: 1px;
-  --box-shadow--offset: 1px;
-  --box-shadow--offset--negative: calc(-1 * var(--box-shadow--offset));
-  --box-shadow--color: #{rgba(#000, 0.15)};
-  --box-shadow: 0 0 var(--box-shadow--blur) var(--box-shadow--spread) var(--box-shadow--color);
-  --box-shadow--focus--spread: 6px;
   --box-shadow--null: 0 0 var(--box-shadow--blur) var(--box-shadow--spread) transparent;
   --box-shadow--error: 0 0 var(--box-shadow--blur) var(--box-shadow--spread) var(--color--error);
 
-  --color--background: #f4f4f4;
-  --color--background--secondary: #111;
-  --color--background--overlay: rgba(255, 255, 255, 0.65);
-  --color--error: hsl(0deg, 92%, 62%);
-  --color--success: #00a900;
-  --color--info: var(--color--dark-blue);
-  --color--warning: hsl(35deg, 90%, 60%);
-  --color--focus: #{rgba(#268fff, 0.5)};
-  --color--foreground: #222;
-  --color--foreground--secondary: #444;
-  --color--inactive: #cdcdcd;
-  --color--primary: var(--color--violet);
-
-  --color--yellow: #efe3ae;
-  --color--yellow--light: #f7f1d6;
-  --color--green: #bae3ba;
-  --color--green--light: #d6ebd6;
+  --color--white: #ffffff;
   --color--blue: #c7d8f9;
   --color--blue--light: #dde4f6;
-  --color--light-blue: #7bb5e5;
-  --color--light-blue--light: #b8d5ed;
-  --color--dark-blue: #1868ad;
-  --color--dark-blue--light: #86aed1;
+  --color--green: #bae3ba;
+  --color--green--light: #d6ebd6;
   --color--red: #f7c2aa;
   --color--red--light: #fbe0d4;
   --color--violet: #78387f;
   --color--violet--light: #b284b8;
-  --color--orange: #fbc997;
-  --color--pink: #f19393;
+  --color--yellow: #efe3ae;
+  --color--yellow--light: #f7f1d6;
+
+  --color--focus: #{rgba(#268fff, 0.5)};
+  --color--inactive: #cdcdcd;
+  --color--background: #f4f4f4;
+  --color--background--element: var(--color--white);
+  --color--background--overlay: rgba(255, 255, 255, 0.65);
+  --color--foreground: #222;
+  --color--foreground--secondary: #444;
+  --color--error: hsl(0, 92%, 62%);
+  --color--error--opposite: var(--color--white);
+  --color--info: #1868ad;
+  --color--success: #00a900;
+  --color--warning: hsl(35, 90%, 60%);
+  --color--primary: var(--color--violet);
+  --color--primary--opposite: var(--color--white);
+
+  --color--bonus--character--1: var(--color--yellow--light);
+  --color--bonus--character--2: var(--color--green--light);
+  --color--bonus--character--3: var(--color--blue--light);
+  --color--bonus--character--5: var(--color--red--light);
+  --color--bonus--character-multiplier--2: #b8d5ed;
+  --color--bonus--character-multiplier--3: #86aed1;
+  --color--bonus--start: var(--color--violet--light);
+  --color--bonus--word-multiplier--2: #fbc997;
+  --color--bonus--word-multiplier--3: #f19393;
+  --color--tooltip--background: #222;
+  --color--tooltip--foreground: var(--color--white);
 
   --font--family: 'Open Sans', sans-serif;
-  --font--family--title: 'Lato', sans-serif;
+  --font--family--latin: 'Open Sans', sans-serif;
+  --font--family--arabic: 'Vazirmatn', sans-serif;
   --font--family--monospace: 'Roboto Mono', monospace;
+  --font--family--title: 'Lato', sans-serif;
   --font--size--h1: 30px;
   --font--size--h2: 22px;
   --font--size--h3: 18px;
@@ -66,13 +74,17 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --spacing--xl: 40px;
   --spacing--xxl: 80px;
 
+  --transition: all var(--transition--duration) var(--transition--easing);
+  --transition--long: all var(--transition--duration--long) var(--transition--easing);
   --transition--duration: 100ms;
   --transition--duration--long: 250ms;
   --transition--easing: #{$easeOutSine};
-  --transition: all var(--transition--duration) var(--transition--easing);
 
+  --z-index--focus-effect: 1;
+  --z-index--actions: 2;
   --z-index--modal: 100;
   --z-index--close-button: 101;
+  --z-index--tooltip: 102;
 
   --dictionary--height: 260px;
   --modal--width: 370px;
@@ -80,6 +92,4 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --square-button--size: 32px;
   --button--icon--size: 24px;
   --text-input--height: 40px;
-  --tooltip--background: #222;
-  --tooltip--foreground: #fff;
 }