@scrabble-solver/scrabble-solver 2.15.25 → 2.16.0-alpha.0

package/.next/trace-build

@@ -1 +1 @@
-[{"name":"run-typescript","duration":1839871,"timestamp":8669695789,"id":13,"parentId":1,"tags":{},"startTime":1777238332039,"traceId":"31012277f1d18357"},{"name":"run-webpack","duration":5956770,"timestamp":8671542760,"id":15,"parentId":1,"tags":{},"startTime":1777238333886,"traceId":"31012277f1d18357"},{"name":"static-check","duration":166808,"timestamp":8677579484,"id":2016,"parentId":1,"tags":{},"startTime":1777238339923,"traceId":"31012277f1d18357"},{"name":"static-generation","duration":871005,"timestamp":8677759211,"id":2034,"parentId":1,"tags":{},"startTime":1777238340102,"traceId":"31012277f1d18357"},{"name":"collect-build-traces","duration":3576476,"timestamp":8677746786,"id":2031,"parentId":1,"tags":{},"startTime":1777238340090,"traceId":"31012277f1d18357"},{"name":"telemetry-flush","duration":22,"timestamp":8681324409,"id":2046,"parentId":1,"tags":{},"startTime":1777238343667,"traceId":"31012277f1d18357"},{"name":"next-build","duration":11870716,"timestamp":8669453718,"id":1,"tags":{"buildMode":"default","version":"16.2.4","bundler":"webpack","has-custom-webpack-config":"true","use-build-worker":"false"},"startTime":1777238331797,"traceId":"31012277f1d18357"}]
+[{"name":"run-typescript","duration":1832072,"timestamp":29046060526,"id":13,"parentId":1,"tags":{},"startTime":1777330632146,"traceId":"5a0863a77c30228d"},{"name":"run-webpack","duration":6043991,"timestamp":29047895951,"id":15,"parentId":1,"tags":{},"startTime":1777330633981,"traceId":"5a0863a77c30228d"},{"name":"static-check","duration":194630,"timestamp":29054008471,"id":2025,"parentId":1,"tags":{},"startTime":1777330640094,"traceId":"5a0863a77c30228d"},{"name":"static-generation","duration":826329,"timestamp":29054211309,"id":2043,"parentId":1,"tags":{},"startTime":1777330640296,"traceId":"5a0863a77c30228d"},{"name":"collect-build-traces","duration":3614152,"timestamp":29054203599,"id":2040,"parentId":1,"tags":{},"startTime":1777330640289,"traceId":"5a0863a77c30228d"},{"name":"telemetry-flush","duration":23,"timestamp":29057818939,"id":2055,"parentId":1,"tags":{},"startTime":1777330643904,"traceId":"5a0863a77c30228d"},{"name":"next-build","duration":11985326,"timestamp":29045833640,"id":1,"tags":{"buildMode":"default","version":"16.2.4","bundler":"webpack","has-custom-webpack-config":"true","use-build-worker":"false"},"startTime":1777330631919,"traceId":"5a0863a77c30228d"}]

package/README.md

@@ -6,14 +6,14 @@ Available at: https://scrabble-solver.org/
 
 ## Scripts
 
-### `npm run build`
+### `bun run build`
 
 Run production build and place the output in `./next/`.
 
-### `npm run dev`
+### `bun run dev`
 
 Run development server with hot-reload.
 
-### `npm start`
+### `bun start`
 
 Run production server.

package/next.config.js

@@ -8,6 +8,7 @@ module.exports = {
   reactStrictMode: true,
   sassOptions: {
     loadPaths: ['./src', path.join(__dirname, '../../node_modules/include-media/dist')],
+    quietDeps: true,
   },
   webpack(config, { isServer, dev }) {
     config.module.rules.push({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.15.25",
+  "version": "2.16.0-alpha.0",
   "description": "Scrabble Solver 2 - App",
   "repository": {
     "type": "git",
@@ -22,19 +22,20 @@
     "debug": "NODE_OPTIONS='--inspect' next dev --webpack",
     "dev": "env-cmd next dev --webpack",
     "start": "env-cmd next start -p 3333",
+    "test": "bun test --timeout 180000 src",
     "type-check": "tsgo --noEmit"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
     "@kamilmielnik/trie": "^4.0.0",
     "@reduxjs/toolkit": "^2.11.2",
-    "@scrabble-solver/configs": "^2.15.25",
-    "@scrabble-solver/constants": "^2.15.25",
-    "@scrabble-solver/dictionaries": "^2.15.25",
-    "@scrabble-solver/logger": "^2.15.25",
-    "@scrabble-solver/solver": "^2.15.25",
-    "@scrabble-solver/types": "^2.15.25",
-    "@scrabble-solver/word-definitions": "^2.15.25",
+    "@scrabble-solver/configs": "^2.16.0-alpha.0",
+    "@scrabble-solver/constants": "^2.16.0-alpha.0",
+    "@scrabble-solver/dictionaries": "^2.16.0-alpha.0",
+    "@scrabble-solver/logger": "^2.16.0-alpha.0",
+    "@scrabble-solver/solver": "^2.16.0-alpha.0",
+    "@scrabble-solver/types": "^2.16.0-alpha.0",
+    "@scrabble-solver/word-definitions": "^2.16.0-alpha.0",
     "classnames": "^2.5.1",
     "env-cmd": "^11.0.0",
     "include-media": "^2.0.0",
@@ -69,5 +70,5 @@
     "@types/redux": "^3.6.31",
     "sass": "^1.99.0"
   },
-  "gitHead": "804532994a83eec4bd83e573744093865b5d1fa7"
+  "gitHead": "c9d35d0e7f7c187fbd2b0eaf04d621595e520bd9"
 }

package/src/@types/scss.d.ts

@@ -1,3 +1,8 @@
+declare module '*.module.scss' {
+  const classesMap: Record<string, string>;
+  export default classesMap;
+}
+
 declare module '*.scss' {
   const classesMap: Record<string, string>;
   export default classesMap;

package/src/components/Board/Board.module.scss

@@ -1,5 +1,5 @@
-@import 'styles/animations';
-@import 'styles/mixins';
+@use 'styles/animations';
+@use 'styles/mixins' as *;
 
 .board {
   display: grid;

package/src/components/Board/components/Actions/Actions.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .actions {
   display: flex;

package/src/components/Board/components/Cell/Cell.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 @mixin lighthouse-input-size-hack {
   // Hack for this Lighthouse warning:
@@ -10,21 +10,31 @@
     inset: -100%;
     width: 300%;
     height: 300%;
-    clip-path: inset((100% / 3));
+    clip-path: inset(calc(100% / 3));
   }
 
   [dir='ltr'] & {
     &.first3 {
       input {
         left: 0;
-        clip-path: polygon(0 (100% / 3), (100% / 3) (100% / 3), (100% / 3) (200% / 3), 0 (200% / 3));
+        clip-path: polygon(
+          0 calc(100% / 3),
+          calc(100% / 3) calc(100% / 3),
+          calc(100% / 3) calc(200% / 3),
+          0 calc(200% / 3)
+        );
       }
     }
 
     &.last3 {
       input {
         left: -200%;
-        clip-path: polygon((200% / 3) (100% / 3), 100% (100% / 3), 100% (200% / 3), (200% / 3) (200% / 3));
+        clip-path: polygon(
+          calc(200% / 3) calc(100% / 3),
+          100% calc(100% / 3),
+          100% calc(200% / 3),
+          calc(200% / 3) calc(200% / 3)
+        );
       }
     }
   }
@@ -34,7 +44,12 @@
       input {
         left: -200%;
         right: 0;
-        clip-path: polygon((200% / 3) (100% / 3), 100% (100% / 3), 100% (200% / 3), (200% / 3) (200% / 3));
+        clip-path: polygon(
+          calc(200% / 3) calc(100% / 3),
+          100% calc(100% / 3),
+          100% calc(200% / 3),
+          calc(200% / 3) calc(200% / 3)
+        );
       }
     }
 
@@ -42,7 +57,12 @@
       input {
         left: 0;
         right: -200%;
-        clip-path: polygon(0 (100% / 3), (100% / 3) (100% / 3), (100% / 3) (200% / 3), 0 (200% / 3));
+        clip-path: polygon(
+          0 calc(100% / 3),
+          calc(100% / 3) calc(100% / 3),
+          calc(100% / 3) calc(200% / 3),
+          0 calc(200% / 3)
+        );
       }
     }
   }

package/src/components/Board/components/InputPrompt/InputPrompt.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .inputPrompt {
   display: flex;

package/src/components/Button/Button.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .button {
   @include button-reset;

package/src/components/Dictionary/Dictionary.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .dictionary {
   position: relative;

package/src/components/DictionaryInput/DictionaryInput.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .dictionaryInput {
   @include focus-effect;

package/src/components/IconButton/IconButton.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .iconButton {
   @include button-reset;

package/src/components/Loading/Loading.module.scss

@@ -28,6 +28,6 @@
 }
 
 .tiles {
-  width: 100% * 2 / 3;
+  width: calc(100% * 2 / 3);
   height: 100%;
 }

package/src/components/Modal/Modal.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .modal,
 .closeButton {

package/src/components/NotFound/NotFound.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .notFound {
   display: flex;

package/src/components/PlainTiles/PlainTiles.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/animations';
+@use 'styles/animations';
 
 $delay: 150ms;
 $duration: 750ms;

package/src/components/Rack/Rack.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 @mixin lighthouse-input-size-hack {
   // Hack for this Lighthouse warning:
@@ -13,7 +13,12 @@
     bottom: 0;
     width: 300%;
     height: 300%;
-    clip-path: polygon((100% / 3) (200% / 3), (200% / 3) (200% / 3), (200% / 3) 100%, (100% / 3) 100%);
+    clip-path: polygon(
+      calc(100% / 3) calc(200% / 3),
+      calc(200% / 3) calc(200% / 3),
+      calc(200% / 3) 100%,
+      calc(100% / 3) 100%
+    );
   }
 
   [dir='ltr'] & {
@@ -22,7 +27,7 @@
     &:nth-child(3) {
       input {
         left: 0;
-        clip-path: polygon(0 (200% / 3), (100% / 3) (200% / 3), (100% / 3) 100%, 0 100%);
+        clip-path: polygon(0 calc(200% / 3), calc(100% / 3) calc(200% / 3), calc(100% / 3) 100%, 0 100%);
       }
     }
 
@@ -31,7 +36,7 @@
     &:nth-last-child(3) {
       input {
         left: -200%;
-        clip-path: polygon((200% / 3) (200% / 3), 100% (200% / 3), 100% 100%, (200% / 3) 100%);
+        clip-path: polygon(calc(200% / 3) calc(200% / 3), 100% calc(200% / 3), 100% 100%, calc(200% / 3) 100%);
       }
     }
   }
@@ -43,7 +48,7 @@
       input {
         left: -200%;
         right: 0;
-        clip-path: polygon((200% / 3) (200% / 3), 100% (200% / 3), 100% 100%, (200% / 3) 100%);
+        clip-path: polygon(calc(200% / 3) calc(200% / 3), 100% calc(200% / 3), 100% 100%, calc(200% / 3) 100%);
       }
     }
 
@@ -53,7 +58,7 @@
       input {
         left: 0;
         right: -200%;
-        clip-path: polygon(0 (200% / 3), (100% / 3) (200% / 3), (100% / 3) 100%, 0 100%);
+        clip-path: polygon(0 calc(200% / 3), calc(100% / 3) calc(200% / 3), calc(100% / 3) 100%, 0 100%);
       }
     }
   }

package/src/components/Rack/components/InputPrompt/InputPrompt.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .form {
   @include focus-effect;

package/src/components/Rack/components/RackTile/RackTile.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .rackTile {
   @include focus-effect;

package/src/components/Radio/Radio.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 $radio-size: 18px;
 $radio-inner-border: 2px;

package/src/components/Results/Results.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 

package/src/components/ResultsInput/ResultsInput.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .resultsInput {
   @include focus-effect;

package/src/components/Solver/Solver.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .solver {
   --spacing: var(--spacing--xl);

package/src/components/Solver/components/InsertButton/InsertButton.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .insertButton {
   @include media('>=s') {

package/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .resultCandidatePicker {
   position: relative;

package/src/components/Spinner/Spinner.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/animations';
+@use 'styles/animations';
 
 .spinner {
   width: var(--button--icon--size);

package/src/components/Tile/Tile.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .tile {
   --background-color: transparent;

package/src/hooks/useLocalStorage.ts

@@ -1,33 +1,11 @@
 import { useEffect } from 'react';
 
-import {
-  localStorage,
-  selectAutoGroupTiles,
-  selectBoard,
-  selectGame,
-  selectInputMode,
-  selectLocale,
-  selectRack,
-  selectShowCoordinates,
-  selectRemoveCellFilters,
-  useTypedSelector,
-} from '@/state';
+import { localStorage, selectBoard, selectRack, selectSettings, useTypedSelector } from '@/state';
 
 export const useLocalStorage = () => {
-  const autoGroupTiles = useTypedSelector(selectAutoGroupTiles);
   const board = useTypedSelector(selectBoard);
-  const game = useTypedSelector(selectGame);
-  const inputMode = useTypedSelector(selectInputMode);
-  const locale = useTypedSelector(selectLocale);
   const rack = useTypedSelector(selectRack);
-  const showCoordinates = useTypedSelector(selectShowCoordinates);
-  const removeCellFilters = useTypedSelector(selectRemoveCellFilters);
-
-  useEffect(() => {
-    if (autoGroupTiles) {
-      localStorage.setAutoGroupTiles(autoGroupTiles);
-    }
-  }, [autoGroupTiles]);
+  const settings = useTypedSelector(selectSettings);
 
   useEffect(() => {
     if (board) {
@@ -35,24 +13,6 @@ export const useLocalStorage = () => {
     }
   }, [board]);
 
-  useEffect(() => {
-    if (game) {
-      localStorage.setGame(game);
-    }
-  }, [game]);
-
-  useEffect(() => {
-    if (inputMode) {
-      localStorage.setInputMode(inputMode);
-    }
-  }, [inputMode]);
-
-  useEffect(() => {
-    if (locale) {
-      localStorage.setLocale(locale);
-    }
-  }, [locale]);
-
   useEffect(() => {
     if (rack) {
       localStorage.setRack(rack);
@@ -60,14 +20,6 @@ export const useLocalStorage = () => {
   }, [rack]);
 
   useEffect(() => {
-    if (showCoordinates) {
-      localStorage.setShowCoordinates(showCoordinates);
-    }
-  }, [showCoordinates]);
-
-  useEffect(() => {
-    if (removeCellFilters) {
-      localStorage.setRemoveCellFilters(removeCellFilters);
-    }
-  }, [removeCellFilters]);
+    localStorage.setSettings(settings);
+  }, [settings]);
 };

package/src/lib/isMac.ts

@@ -3,5 +3,5 @@ export const isMac = (): boolean => {
     return false;
   }
 
-  return globalThis.navigator.platform.startsWith('Mac') || globalThis.navigator.platform === 'iPhone';
+  return globalThis.navigator.platform.startsWith('Mac') || globalThis.navigator.platform.startsWith('iPhone');
 };

package/src/modals/MenuModal/MenuModal.module.scss

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .button {
   width: 100%;

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

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .character {
   display: flex;

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

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .content {
   position: relative;

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

@@ -1,4 +1,4 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
 
 .option {
   & + & {

package/src/parameters/index.ts

@@ -1,38 +1,39 @@
+import variables from '@/styles/variables.module.scss';
 import { ResultColumnId } from '@/types';
 
 export const BREAKPOINTS = {
-  xs: 480,
-  s: 768,
-  m: 992,
-  l: 1200,
-  xl: 1400,
+  xs: Number(variables.breakpointXs),
+  s: Number(variables.breakpointS),
+  m: Number(variables.breakpointM),
+  l: Number(variables.breakpointL),
+  xl: Number(variables.breakpointXl),
 };
 
 export const TRANSITION = 'var(--transition)';
 
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
 
-export const TRANSITION_DURATION = 100;
-export const TRANSITION_DURATION_LONG = 250;
-
-export const COLOR_BLUE = '#c7d8f9';
-export const COLOR_GREEN = '#bae3ba';
-export const COLOR_RED = '#f7c2aa';
-export const COLOR_YELLOW = '#efe3ae';
-
-export const COLOR_BONUS_CHARACTER_1 = '#f7f1d6';
-export const COLOR_BONUS_CHARACTER_2 = '#d6ebd6';
-export const COLOR_BONUS_CHARACTER_3 = '#dde4f6';
-export const COLOR_BONUS_CHARACTER_5 = '#fbe0d4';
-export const COLOR_BONUS_CHARACTER_MULTIPLIER_2 = '#b8d5ed';
-export const COLOR_BONUS_CHARACTER_MULTIPLIER_3 = '#86aed1';
-export const COLOR_BONUS_CHARACTER_MULTIPLIER_4 = '#3477b2';
-export const COLOR_BONUS_START = '#b284b8';
-export const COLOR_BONUS_WORD_MULTIPLIER_2 = '#fbc997';
-export const COLOR_BONUS_WORD_MULTIPLIER_3 = '#f19393';
-export const COLOR_BONUS_WORD_MULTIPLIER_4 = '#ed5e5e';
-export const COLOR_FILTERED = '#444';
-export const COLOR_BACKGROUND = '#f4f4f4';
+export const TRANSITION_DURATION = Number(variables.transitionDuration);
+export const TRANSITION_DURATION_LONG = Number(variables.transitionDurationLong);
+
+export const COLOR_BLUE = variables.colorBlue;
+export const COLOR_GREEN = variables.colorGreen;
+export const COLOR_RED = variables.colorRed;
+export const COLOR_YELLOW = variables.colorYellow;
+
+export const COLOR_BONUS_CHARACTER_1 = variables.colorYellowLight;
+export const COLOR_BONUS_CHARACTER_2 = variables.colorGreenLight;
+export const COLOR_BONUS_CHARACTER_3 = variables.colorBlueLight;
+export const COLOR_BONUS_CHARACTER_5 = variables.colorRedLight;
+export const COLOR_BONUS_CHARACTER_MULTIPLIER_2 = variables.colorBonusCharacterMultiplier2;
+export const COLOR_BONUS_CHARACTER_MULTIPLIER_3 = variables.colorBonusCharacterMultiplier3;
+export const COLOR_BONUS_CHARACTER_MULTIPLIER_4 = variables.colorBonusCharacterMultiplier4;
+export const COLOR_BONUS_START = variables.colorVioletLight;
+export const COLOR_BONUS_WORD_MULTIPLIER_2 = variables.colorBonusWordMultiplier2;
+export const COLOR_BONUS_WORD_MULTIPLIER_3 = variables.colorBonusWordMultiplier3;
+export const COLOR_BONUS_WORD_MULTIPLIER_4 = variables.colorBonusWordMultiplier4;
+export const COLOR_FILTERED = variables.colorForegroundSecondary;
+export const COLOR_BACKGROUND = variables.colorBackground;
 
 export const COLOR_BONUS_CHARACTER: Record<number, string> = {
   1: COLOR_BONUS_CHARACTER_1,
@@ -53,11 +54,11 @@ export const COLOR_BONUS_WORD: Record<number, string> = {
   4: COLOR_BONUS_WORD_MULTIPLIER_4,
 };
 
-export const SPACING_XS = 2;
-export const SPACING_S = 5;
-export const SPACING_M = 10;
-export const SPACING_L = 20;
-export const SPACING_XL = 40;
+export const SPACING_XS = Number(variables.spacingXs);
+export const SPACING_S = Number(variables.spacingS);
+export const SPACING_M = Number(variables.spacingM);
+export const SPACING_L = Number(variables.spacingL);
+export const SPACING_XL = Number(variables.spacingXl);
 
 export const COMPONENTS_SPACING = SPACING_XL;
 export const COMPONENTS_SPACING_SMALL = SPACING_L;
@@ -70,24 +71,24 @@ export const BOARD_TILE_FONT_SIZE_MIN = 14;
 export const BOARD_TILE_FONT_SIZE_POINTS_MIN = 10;
 export const BOARD_TILE_SIZE_MAX = RACK_TILE_SIZE_MAX;
 
-export const BORDER_COLOR = '#cdcdcd';
-export const BORDER_COLOR_LIGHT = '#d9d9d9';
-export const BORDER_RADIUS = 5;
-export const BORDER_WIDTH = 1;
+export const BORDER_COLOR = variables.borderColor;
+export const BORDER_COLOR_LIGHT = variables.borderColorLight;
+export const BORDER_RADIUS = Number(variables.borderRadius);
+export const BORDER_WIDTH = Number(variables.borderWidth);
 
-export const BUTTON_ICON_SIZE = 24;
+export const BUTTON_ICON_SIZE = Number(variables.buttonIconSize);
 export const BUTTON_PADDING_VERTICAL = SPACING_M;
 export const BUTTON_HEIGHT = BUTTON_ICON_SIZE + 2 * BUTTON_PADDING_VERTICAL + 2 * BORDER_WIDTH;
 
-export const DICTIONARY_HEIGHT = 260;
-export const DICTIONARY_HEIGHT_MOBILE = 110;
+export const DICTIONARY_HEIGHT = Number(variables.dictionaryHeight);
+export const DICTIONARY_HEIGHT_MOBILE = Number(variables.dictionaryHeightMobile);
 
 export const LOGO_ASPECT_RATIO = 682 / 166;
-export const LOGO_HEIGHT = 60;
-export const LOGO_HEIGHT_SMALL = 48;
+export const LOGO_HEIGHT = Number(variables.logoHeight);
+export const LOGO_HEIGHT_SMALL = Number(variables.logoHeightSmall);
 export const LOGO_SRC = '/logo.svg';
 
-export const MODAL_WIDTH = 370;
+export const MODAL_WIDTH = Number(variables.modalWidth);
 export const MODAL_HEADER_HEIGHT = 45;
 
 export const NAV_PADDING = SPACING_L;
@@ -133,10 +134,10 @@ export const RESULTS_COLUMN_WIDTH: Record<ResultColumnId, number | undefined> =
   [ResultColumnId.Word]: undefined,
   [ResultColumnId.WordsCount]: 55,
 };
-export const RESULTS_ITEM_HEIGHT = 40;
+export const RESULTS_ITEM_HEIGHT = Number(variables.resultsItemHeight);
 
 export const RESULTS_HEADER_HEIGHT = RESULTS_ITEM_HEIGHT;
 
-export const SOLVER_COLUMN_WIDTH = 580;
+export const SOLVER_COLUMN_WIDTH = Number(variables.solverColumnWidth);
 
-export const TEXT_INPUT_HEIGHT = 40;
+export const TEXT_INPUT_HEIGHT = Number(variables.textInputHeight);