UI/fonts: migrate all text-* classes

pkgs/webview-ui/app/src/Form/fields/Select.tsx

@@ -219,7 +219,7 @@ export function SelectInput(props: SelectInputpProps) {
             <span class="label-text text-neutral">{props.helperText}</span>
           )}
           {props.error && (
-            <span class="label-text-alt font-bold text-error">
+            <span class="label-text-alt font-bold text-error-700">
               {props.error}
             </span>
           )}

pkgs/webview-ui/app/src/Form/fields/TextInput.tsx

@@ -60,7 +60,9 @@ export function TextInput(props: TextInputProps) {
           <span class="label-text text-neutral">{props.helperText}</span>
         )}
         {props.error && (
-          <span class="label-text-alt font-bold text-error">{props.error}</span>
+          <span class="label-text-alt font-bold text-error-700">
+            {props.error}
+          </span>
         )}
       </div>
     </label>

pkgs/webview-ui/app/src/Form/form/index.tsx

@@ -132,7 +132,7 @@ interface UnsupportedProps {
 
 const Unsupported = (props: UnsupportedProps) => (
   <div>
-    {props.error && <div class="font-bold text-error">{props.error}</div>}
+    {props.error && <div class="font-bold text-error-700">{props.error}</div>}
     <span>
       Invalid or unsupported schema entry of type:{" "}
       <b>{JSON.stringify(props.schema.type)}</b>
@@ -193,7 +193,7 @@ export function StringField<T extends FieldValues, R extends ResponseData>(
     props.schema.type !== "integer"
   ) {
     return (
-      <span class="text-error">
+      <span class="text-error-700">
         Error cannot render the following as String input.
         <Unsupported schema={props.schema} />
       </span>
@@ -339,7 +339,9 @@ interface OptionSchemaProps {
 }
 export function OptionSchema(props: OptionSchemaProps) {
   return (
-    <Switch fallback={<option class="text-error">Item spec unhandled</option>}>
+    <Switch
+      fallback={<option class="text-error-700">Item spec unhandled</option>}
+    >
       <Match when={typeof props.itemSpec === "string" && props.itemSpec}>
         {(o) => <option>{o()}</option>}
       </Match>
@@ -444,7 +446,7 @@ export function ArrayFields<T extends FieldValues, R extends ResponseData>(
 ) {
   if (props.schema.type !== "array") {
     return (
-      <span class="text-error">
+      <span class="text-error-700">
         Error cannot render the following as array.
         <Unsupported schema={props.schema} />
       </span>
@@ -621,7 +623,7 @@ export function ArrayFields<T extends FieldValues, R extends ResponseData>(
                             </ListValueDisplay>
                           )}
                         </For>
-                        <span class="label-text-alt font-bold text-error">
+                        <span class="label-text-alt font-bold text-error-700">
                           {fieldArray.error}
                         </span>
 
@@ -703,7 +705,7 @@ export function ObjectFields<T extends FieldValues, R extends ResponseData>(
 ) {
   if (props.schema.type !== "object") {
     return (
-      <span class="text-error">
+      <span class="text-error-700">
         Error cannot render the following as Object
         <Unsupported schema={props.schema} />
       </span>
@@ -748,7 +750,7 @@ export function ObjectFields<T extends FieldValues, R extends ResponseData>(
                   />
                 )}
                 {typeof propSchema === "boolean" && (
-                  <span class="text-error">
+                  <span class="text-error-700">
                     Schema: Object of Boolean not supported
                   </span>
                 )}

pkgs/webview-ui/app/src/components/FileInput.tsx

@@ -92,7 +92,9 @@ export function FileInput(props: FileInputProps) {
           aria-errormessage={`${props.name}-error`}
         />
         {props.error && (
-          <span class="label-text-alt font-bold text-error">{props.error}</span>
+          <span class="label-text-alt font-bold text-error-700">
+            {props.error}
+          </span>
         )}
       </div>
     </div>

pkgs/webview-ui/app/src/components/SelectInput.tsx

@@ -47,7 +47,9 @@ export function SelectInput<T extends FieldValues, R extends ResponseData>(
       </select>
 
       {props.error && (
-        <span class="label-text-alt font-bold text-error">{props.error}</span>
+        <span class="label-text-alt font-bold text-error-700">
+          {props.error}
+        </span>
       )}
     </label>
   );

pkgs/webview-ui/app/src/components/TextInput.tsx

@@ -63,7 +63,9 @@ export function TextInput<T extends FieldValues, R extends ResponseData>(
         </Show>
       </div>
       {props.error && (
-        <span class="label-text-alt font-bold text-error">{props.error}</span>
+        <span class="label-text-alt font-bold text-error-700">
+          {props.error}
+        </span>
       )}
     </label>
   );

pkgs/webview-ui/app/src/layout/header.tsx

@@ -59,7 +59,7 @@ export const Header = (props: HeaderProps) => {
         <span class="flex flex-col">
           <Show when={query.data}>
             {(meta) => [
-              <span class="text-primary">{meta().name}</span>,
+              <span class="text-primary-800">{meta().name}</span>,
               <span class="text-neutral">{meta()?.description}</span>,
             ]}
           </Show>

pkgs/webview-ui/app/src/routes/clans/create.tsx

@@ -103,7 +103,7 @@ export const CreateClan = () => {
             {(field, props) => (
               <label class="form-control w-full">
                 <div class="label">
-                  <span class="label-text block after:ml-0.5 after:text-primary after:content-['*']">
+                  <span class="label-text block after:ml-0.5 after:text-primary-800 after:content-['*']">
                     Name
                   </span>
                 </div>

pkgs/webview-ui/app/src/routes/clans/details.tsx

@@ -74,8 +74,8 @@ const EditClanForm = (props: EditClanFormProps) => {
           <>
             <figure class="p-1">
               <div class="flex flex-col items-center">
-                <div class="text-3xl text-primary">{curr_name()}</div>
+                <div class="text-3xl text-primary-800">{curr_name()}</div>
-                <div class="text-secondary">Wide settings</div>
+                <div class="text-secondary-800">Wide settings</div>
               </div>
             </figure>
             <figure>
@@ -100,7 +100,7 @@ const EditClanForm = (props: EditClanFormProps) => {
         )}
       </Field>
       <div class="card-body">
-        <span class="text-xl text-primary">General</span>
+        <span class="text-xl text-primary-800">General</span>
         <Field
           name="name"
           validate={[required("Please enter a unique name for the clan.")]}
@@ -108,7 +108,7 @@ const EditClanForm = (props: EditClanFormProps) => {
           {(field, props) => (
             <label class="form-control w-full">
               <div class="label">
-                <span class="label-text block after:ml-0.5 after:text-primary after:content-['*']">
+                <span class="label-text block after:ml-0.5 after:text-primary-800 after:content-['*']">
                   Name
                 </span>
               </div>
@@ -226,9 +226,9 @@ const AdminModuleForm = (props: AdminModuleFormProps) => {
   return (
     <Form onSubmit={handleSubmit}>
       <div class="card-body">
-        <span class="text-xl text-primary">Administration</span>
+        <span class="text-xl text-primary-800">Administration</span>
         <div class="grid grid-cols-12 gap-2">
-          <span class="col-span-12 text-lg text-neutral">
+          <span class="col-span-12 text-lg text-neutral-800">
             Each of the following keys can be used to authenticate on machines
           </span>
           <For each={keys()}>

pkgs/webview-ui/app/src/routes/clans/list.tsx

@@ -59,7 +59,7 @@ const ClanItem = (props: ClanItemProps) => {
 
   return (
     <div class="stat">
-      <div class="stat-figure text-primary">
+      <div class="stat-figure text-primary-800">
         <div class="join">
           <button
             class="join-item btn-sm"

pkgs/webview-ui/app/src/routes/machines/details.tsx

@@ -431,7 +431,7 @@ const MachineForm = (props: MachineDetailsProps) => {
           </div>
         </figure>
         <div class="card-body">
-          <span class="text-xl text-primary">General</span>
+          <span class="text-xl text-primary-800">General</span>
           {/*
           <Field name="machine.tags" type="string[]">
             {(field, props) => field.value}
@@ -536,14 +536,14 @@ const MachineForm = (props: MachineDetailsProps) => {
           {(module) => (
             <>
               <div class="divider"></div>
-              <span class="text-xl text-primary">{module.name}</span>
+              <span class="text-xl text-primary-800">{module.name}</span>
               {module.component}
             </>
           )}
         </For>
         <div class="divider"></div>
 
-        <span class="text-xl text-primary">Actions</span>
+        <span class="text-xl text-primary-800">Actions</span>
         <div class="my-4 flex flex-col gap-6">
           <span class="max-w-md text-neutral">
             Installs the system for the first time. Used to bootstrap the remote

pkgs/webview-ui/app/src/routes/modules/list.tsx

@@ -14,7 +14,7 @@ const ModuleListItem = (props: { name: string; info: ModuleInfo }) => {
 
   return (
     <div class="stat">
-      <div class="stat-figure text-primary">
+      <div class="stat-figure text-primary-800">
         <div class="join">more</div>
       </div>
 

pkgs/webview-ui/app/src/routes/welcome/index.tsx

@@ -18,7 +18,7 @@ export const Welcome = () => {
               Build your own
             </button>
             <button
-              class="link w-full text-right text-primary"
+              class="link w-full text-right text-primary-800"
               onClick={async () => {
                 const uri = await registerClan();
                 if (uri) {

pkgs/webview-ui/app/tailwind.config.ts

@@ -5,23 +5,7 @@ import core from "./tailwind/core-plugin";
 /** @type {import('tailwindcss').Config} */
 const config = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
-  theme: {
+  theme: {},
-    colors: {
-      secondary: {
-        50: "#f7f9f9",
-        100: "#e7f2f4",
-        200: "#d7e8ea",
-        300: "#afc6ca",
-        400: "#8fb2b6",
-        500: "#7b9a9e",
-        600: "#4f747a",
-        700: "#415e63",
-        800: "#445f64",
-        900: "#2b4347",
-        950: "#0d1415",
-      },
-    },
-  },
   daisyui: {
     themes: [
       {