fix(style): consistent input colors

front/src/components/ui/Input.vue

@@ -7,16 +7,23 @@ import { color } from "~/composables/color.ts";
 import Button from "~/components/ui/Button.vue"
 import Layout from "~/components/ui/Layout.vue"
 
-const { icon, placeholder, ...restProps } = defineProps<{
+const props = withDefaults(
-  icon?: string,
+  defineProps<{
-  placeholder?: string,
+    icon?: string;
-  password?: true,
+    placeholder?: string;
-  search?: true,
+    password?: true;
-  numeric?: true,
+    search?: true;
-  label?: string,
+    numeric?: true;
+    label?: string;
+    autofocus?: boolean;
+    raised?: boolean;
+  }>(),
+  {
+    raised: false, // Default value
+  }
+);
 
-  autofocus? : boolean
+const { icon, placeholder, ...restProps } = props;
-}>()
 
 // TODO(A11y): Add `inputmode="numeric" pattern="[0-9]*"` to input if model type is number:
 // https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
@@ -60,7 +67,7 @@ const model = defineModel<string|number>()
     </span>
 
     <input
-    v-bind="{...$attrs, ...attributes, ...color({}, ['default', 'raised', 'solid', 'secondary'])()}"
+    v-bind="{...$attrs, ...attributes, ...color(props, ['solid', 'default', 'secondary'])()}"
     v-model="model"
     ref="input"
     :placeholder="placeholder"

front/src/components/ui/Pills.vue

@@ -65,7 +65,7 @@ const deselectPill = (value:string) =>
     <!-- List of Pills -->
 
     <Layout flex gap-8
-      v-bind="color({}, ['solid', 'default', 'raised'])()"
+      v-bind="color({}, ['solid', 'default', 'secondary'])()"
       :class="$style.list"
     >
       <Pill outline raised

front/src/components/ui/button/Options.vue

@@ -7,7 +7,6 @@ import Button from '../Button.vue'
     icon="bi-three-dots-vertical"
     class="options-button"
     secondary
-    raised
     round
   />
 </template>

front/src/components/ui/input.scss

@@ -6,21 +6,22 @@
   --padding: 16px;
 
   > input {
-    background-color: var(--fw-bg-color);
+    border: none !important;
-    box-shadow: inset 0 0 0 4px var(--fw-border-color);
-    outline: none;
-    border:none;
     width: 100%;
-    padding: 9px 16px;
+    padding: 10px 16px;
-    padding: calc(var(--padding-v) - 1px) var(--padding) calc(var(--padding-v) + 1px) var(--padding);
-
     font-size: 14px;
     font-family: $font-main;
     line-height: 28px;
-    border: none;
     border-radius: var(--fw-border-radius);
     cursor: text;
 
+    @include light-theme {
+        &.raised {
+          background-color: #ffffff;
+          border-color: var(--border-color);
+        }
+    }
+
     &:hover {
       box-shadow: inset 0 0 0 4px var(--border-color);
     }

front/src/style/colors.scss

@@ -130,7 +130,7 @@
   .secondary {
     --color: var(--fw-gray-700);
     --background-color: var(--fw-gray-200);
-    --border-color:var(--fw-gray-700);
+    --border-color:var(--fw-gray-300);
 
     --hover-color:var(--fw-gray-800);
     --hover-background-color:var(--fw-gray-300);