feat: start porting LESS to Tailwind

.editorconfig

@@ -5,7 +5,7 @@ charset = utf-8
 end_of_line = lf
 insert_final_newline = true
 
-[*.{js,ts,jsx,tsx,css,less,json}]
+[*.{js,ts,jsx,tsx,css,less,json,cjs,mjs}]
 indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true

package.json

@@ -8,6 +8,7 @@
   "type": "module",
   "dependencies": {
     "@anatoliygatt/use-prefers-reduced-motion": "^1.0.11",
+    "@ant-design/colors": "^7.0.0",
     "@ant-design/icons": "^5.2.5",
     "@ant-design/pro-layout": "^7.16.9",
     "@ctrl/tinycolor": "^4.0.1",

src/App.tsx

@@ -8,7 +8,7 @@ import { Provider } from "react-redux";
 import { initStore } from "@store/init";
 
 import { AppLayout } from "@layout/AppLayout";
-import { AppServices } from "@global/AppServices";
+import { InnerAppServices } from "@global/InnerAppServices.tsx";
 import { UpdateCheck } from "@global/UpdateCheck";
 import { StudyQueueHotkeyHandlerProvider } from "@comp/study-queue/StudyQueueHotkeyHandler";
 import { PresetModalProvider } from "@comp/preset-editor/PresetModalContext";
@@ -23,9 +23,11 @@ import { SyncPage } from "@pages/login/SyncPage";
 import { criticalError } from "@utils";
 import { ErrorBoundary } from "@comp/ErrorBoundary";
 
-import { wkTheme } from "@style/wkTheme.ts";
+import { getTheme } from "@global/theme";
 
 import Debug from "debug";
+import { ThemeProvider } from "@global/theme/ThemeContext.tsx";
+import { AppServices } from "@global/AppServices.tsx";
 const debug = Debug("kanjischool:app");
 
 export let store: ReturnType<typeof initStore>;
@@ -35,22 +37,25 @@ export default function App(): JSX.Element {
   if (!store) store = initStore();
 
   return <>
-    <ConfigProvider theme={wkTheme}>
-      {/* Have the update checker run at the highest level possible, as it is
+    <ThemeProvider>
+      {(themeName) => <ConfigProvider theme={getTheme(themeName).antTheme}>
+        {/* Have the update checker run at the highest level possible, as it is
         * responsible for registering the service worker. */}
-      <UpdateCheck />
+        <UpdateCheck />
 
-      <Provider store={store}>
-        {/* Highest level error boundary underneath the Redux store, to prevent
+        <Provider store={store}>
+          {/* Highest level error boundary underneath the Redux store, to prevent
           * nuking the data if something goes SUPER wrong. If the Redux store gets
           * re-initialized due to the uppermost App component re-rendering, it
           * will trigger further errors and probably cause confusion while
           * debugging. */}
-        <ErrorBoundary name="app-top-level">
-          <AppInner />
-        </ErrorBoundary>
-      </Provider>
-    </ConfigProvider>
+          <ErrorBoundary name="app-top-level">
+            <AppServices />
+            <AppInner />
+          </ErrorBoundary>
+        </Provider>
+      </ConfigProvider>}
+    </ThemeProvider>
   </>;
 }
 
@@ -95,7 +100,7 @@ function AppInner(): JSX.Element {
     <StudyQueueHotkeyHandlerProvider>
       <ErrorBoundary name="app-layout-and-services">
         <AppLayout />
-        <AppServices />
+        <InnerAppServices />
       </ErrorBoundary>
     </StudyQueueHotkeyHandlerProvider>
   </PresetModalProvider>;

src/components/ConditionalLink.tsx

@@ -54,7 +54,7 @@ export const ConditionalLink: FC<Props> = ({
       </Link>
     )
     : (
-      <span className="conditional-link-disabled" {...props}>
+      <span className="cursor-pointer text-primary" {...props}>
         {children}
       </span>
     );

src/components/OrdinalNumber.tsx

@@ -2,8 +2,6 @@
 // This file is part of KanjiSchool under AGPL-3.0.
 // Full details: https://github.com/Lemmmy/KanjiSchool/blob/master/LICENSE
 
-import classNames from "classnames";
-
 import { nts } from "@utils";
 
 interface Props {
@@ -24,9 +22,8 @@ export function OrdinalNumber({
   className
 }: Props): JSX.Element {
   const suffix = getOrdinalSuffix(value);
-  const classes = classNames("ordinal-number", className);
-  return <span className={classes}>
-    <span className="ordinal-number-value">{nts(value)}</span>
-    <span className="ordinal-number-suffix">{suffix}</span>
+  return <span className={className}>
+    <span>{nts(value)}</span>
+    <span className="align-super text-sm">{suffix}</span>
   </span>;
 }

src/components/study-queue/StudyQueueModal.tsx

@@ -81,7 +81,7 @@ export function StudyQueueModal(): JSX.Element | null {
       >
         <SubjectGrid
           size="tiny"
-          className="color-by-type"
+          colorBy="type"
           hasVocabulary
           hideInQueue
           alignLeft

src/components/subjects/CharacterImage.tsx

@@ -15,19 +15,26 @@ interface Props {
   subjectId: number;
   size?: number;
   className?: string;
+  sizeClassName?: string;
 }
 
 export const CharacterImage = React.memo(({
   subjectId,
   size,
-  className
+  className,
+  sizeClassName = "w-[32px] h-[32px] text-[32px]"
 }: Props) => {
   const image = useSelector((s: RootState) => s.sync.images?.[subjectId]?.svg);
 
   const memoImg: JSX.Element | undefined = useMemo(() => {
     if (!image) return;
 
-    const classes = classNames("subject-characters", "character-image", className);
+    const classes = classNames(
+      "leading-none fill-none [stroke:currentColor] [stroke-linecap:square] [stroke-miterlimit:2] [stroke-width:68px]",
+      className,
+      sizeClassName
+    );
+
     return <InlineSVG
       className={classes}
       src={image.replace(/<title>\w+?<\/title>/, "")} // lol

src/components/subjects/SrsStageShort.tsx

@@ -12,20 +12,32 @@ import { isPast, parseISO } from "date-fns";
 
 interface Props {
   assignment: StoredAssignment;
+  className?: string;
+  fontClassName?: string;
 }
 
-export function SrsStageShort({ assignment }: Props): JSX.Element {
+export function SrsStageShort({
+  assignment,
+  className,
+  fontClassName = "text-sm"
+}: Props): JSX.Element {
   const { srs_stage, available_at } = assignment.data;
   const availableNow = available_at ? isPast(parseISO(available_at)) : false;
 
-  const classes = classNames("txt", "srs", {
-    "now": availableNow
-  });
+  const classes = classNames(
+    "line-clamp-2 text-ellipsis leading-[1.35]",
+    className,
+    fontClassName,
+    {
+      "text-green": availableNow,
+      "text-desc": !availableNow
+    }
+  );
 
   return <span className={classes}>
     {stringifySrsStageShort(srs_stage)}
     {available_at && <>
-      <span className="sep">-</span>
+      <span className="inline-block mx-[0.3em]">-</span>
       {availableNow ? "Now" : <ShortDuration date={available_at} />}
     </>}
   </span>;

src/components/subjects/SubjectCharacters.tsx

@@ -5,7 +5,7 @@
 import React, { useMemo } from "react";
 import classNames from "classnames";
 
-import { ApiSubject, ApiSubjectRadicalInner } from "@api";
+import { ApiSubject, ApiSubjectRadicalInner, NormalizedSubjectType } from "@api";
 
 import { Textfit } from "react-textfit";
 import { CharacterImage } from "./CharacterImage";
@@ -25,14 +25,29 @@ interface Props {
   useCharBlocks?: boolean;
 
   className?: string;
+  fontClassName?: string;
+  imageClassName?: string;
+  imageSizeClassName?: string;
   style?: React.CSSProperties;
 }
 
+const colorClasses: Record<NormalizedSubjectType, string> = {
+  radical   : "text-radical",
+  kanji     : "text-kanji",
+  vocabulary: "text-vocabulary"
+};
+
 export const SubjectCharacters = React.memo(({
   subject,
-  textfit, min, max,
+  textfit,
+  min,
+  max,
   useCharBlocks,
-  className, style
+  className,
+  fontClassName = "text-[32px]",
+  imageClassName,
+  imageSizeClassName,
+  style
 }: Props): JSX.Element | null => {
   const objectType = subject.object;
   const normObjectType = normalizeVocabType(objectType);
@@ -57,8 +72,9 @@ export const SubjectCharacters = React.memo(({
   }
 
   const classes = classNames(
-    "subject-characters ja",
-    "type-" + normObjectType,
+    "font-ja",
+    colorClasses[normObjectType],
+    fontClassName,
     className,
     {
       "subject-characters-textfit": textfit,
@@ -69,7 +85,8 @@ export const SubjectCharacters = React.memo(({
   if (characterImages) {
     // Character image for radicals
     return <CharacterImage
-      className={classes}
+      className={classNames(classes, imageClassName)}
+      sizeClassName={imageSizeClassName}
       subjectId={subject.id}
       size={max}
     />;
@@ -79,9 +96,10 @@ export const SubjectCharacters = React.memo(({
       <Textfit
         mode="single"
         forceSingleModeWidth
-        min={min} max={max}
+        min={min}
+        max={max}
       >
-        {charBlocks ?? characters}
+        {charBlocks ?? characters ?? ""}
       </Textfit>
     </div>;
   } else {

src/components/subjects/lists/grid/GridItemGeneric.tsx

@@ -10,7 +10,6 @@ export function GridItemGeneric({
   ...rest
 }: SubjectGridItemProps): JSX.Element {
   return <SubjectGridItem
-    className="type-generic"
     subject={subject}
     {...rest}
   />;

src/components/subjects/lists/grid/GridItemKanji.tsx

@@ -23,17 +23,16 @@ export function GridItemKanji({
   const reading = hasReadings(subject) ? getOneReading(subject, onyomiInKatakana) : null;
 
   return <SubjectGridItem
-    className="type-kanji"
     subject={subject}
     {...rest}
   >
     {/* Primary meaning */}
-    {!hideMeaning && <span className="txt meaning kanji-meaning">
+    {!hideMeaning && <span className="text-xs leading-[1.3]">
       {meaning}
     </span>}
 
     {/* Primary reading */}
-    {!hideReading && reading && <span className="txt reading kanji-reading ja">
+    {!hideReading && reading && <span className="text-xs leading-[1.3] font-ja text-base">
       {reading}
     </span>}
   </SubjectGridItem>;

src/components/subjects/lists/grid/GridItemRadical.tsx

@@ -18,11 +18,10 @@ export function GridItemRadical({
 
   return <SubjectGridItem
     subject={subject}
-    className="type-radical"
     {...rest}
   >
     {/* Primary meaning */}
-    {!hideMeaning && <span className="txt meaning radical-meaning">
+    {!hideMeaning && <span className="text-xs leading-[1.3]">
       {meaning}
     </span>}
   </SubjectGridItem>;

src/components/subjects/lists/grid/GridItemVocab.tsx

@@ -16,7 +16,6 @@ export function GridItemVocab({
   }
 
   return <SubjectGridItem
-    className="type-vocab"
     subject={subject}
     {...rest}
   />;