Remove "framework"

src/style/animations/animations.scss

@@ -0,0 +1,9 @@
+html[animations='off'] {
+  &,
+  *,
+  *::before,
+  *::after {
+    transition: none !important;
+    animation: none !important;
+  }
+}

src/style/animations/animations.ts

@@ -0,0 +1,5 @@
+export const turnOnAnimations = () =>
+  document.body.parentElement.setAttribute('animations', 'on');
+
+export const turnOffAnimations = () =>
+  document.body.parentElement.setAttribute('animations', 'off');

src/style/dark-mode/dark-mode.scss

@@ -0,0 +1,5 @@
+@mixin in-dark-mode() {
+  html[theme='dark'] {
+    @content;
+  }
+}

src/style/dark-mode/dark-mode.ts

@@ -0,0 +1,8 @@
+export const isSystemLevelDarkModeEnabled = (): boolean =>
+  matchMedia && matchMedia('(prefers-color-scheme: dark)').matches;
+
+export const turnOnDarkMode = () =>
+  document.body.parentElement.setAttribute('theme', 'dark');
+
+export const turnOnLightMode = () =>
+  document.body.parentElement.setAttribute('theme', 'light');

src/style/mixins.scss

@@ -1,4 +1,16 @@
-@import '../framework/framework';
+$breakpoint-width: 925px !default;
+
+@mixin on-small-screen() {
+  @media (max-width: $breakpoint-width - 1px) {
+    @content;
+  }
+}
+
+@mixin on-large-screen() {
+  @media (min-width: $breakpoint-width) {
+    @content;
+  }
+}
 
 @mixin center-children() {
   display: flex;

src/style/vars.scss

@@ -1,4 +1,6 @@
-@import '../framework/framework';
+@use 'mixins' as *;
+@use 'dark-mode/dark-mode' as *;
+@use 'animations/animations' as *;
 
 :root {
   --transition-time: 250ms;