設定ダイアログのリデザイン

src/components/Base/BaseCheckbox.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseCheckbox from "./BaseCheckbox.vue";
+
+const meta: Meta<typeof BaseCheckbox> = {
+  component: BaseCheckbox,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseCheckbox>;
+
+export const Default: Story = {
+  args: {
+    label: "Default",
+    checked: false,
+  },
+};
+
+export const Checked: Story = {
+  ...Default,
+  args: {
+    label: "Checked",
+    checked: true,
+  },
+};

src/components/Base/BaseCheckbox.vue

@@ -0,0 +1,56 @@
+<template>
+  <label class="root">
+    <CheckboxRoot v-model:checked="checked" class="CheckboxRoot">
+      <CheckboxIndicator class="CheckboxIndicator">
+        <QIcon class="check" name="check" />
+      </CheckboxIndicator>
+    </CheckboxRoot>
+    {{ label }}
+  </label>
+</template>
+
+<script setup lang="ts">
+import { CheckboxIndicator, CheckboxRoot } from "radix-vue";
+
+defineProps<{ label: string }>();
+
+const checked = defineModel<boolean>("checked");
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
+
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: vars.$gap-1;
+  cursor: pointer;
+}
+
+:deep(.CheckboxRoot) {
+  padding: 0;
+  background-color: colors.$background;
+  height: vars.$size-indicator;
+  width: vars.$size-indicator;
+  border: 1px solid colors.$border;
+  border-radius: vars.$radius-1;
+  color: white;
+  cursor: pointer;
+
+  &[data-state="checked"] {
+    background-color: colors.$primary;
+  }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+}
+
+.CheckboxIndicator {
+  display: grid;
+  place-items: center;
+}
+</style>

src/components/Base/BaseRowCard.vue

@@ -3,6 +3,7 @@
     class="row-card"
     :class="{ clickable: clickable }"
     role="listitem"
+    :tabindex="clickable ? 0 : -1"
     @click="(payload) => $emit('click', payload)"
   >
     <div class="text">
@@ -19,7 +20,7 @@
 defineProps<{
   title: string;
   description?: string;
-  clickable: boolean;
+  clickable?: boolean;
 }>();
 
 defineEmits<{
@@ -33,8 +34,8 @@ defineEmits<{
 @use "@/styles/v2/colors" as colors;
 
 .row-card {
-  display: grid;
-  grid-template-columns: 1fr auto;
+  display: flex;
+  flex-wrap: wrap;
   text-align: unset;
   align-items: center;
   border: 1px solid colors.$border;
@@ -64,10 +65,26 @@ defineEmits<{
 }
 
 .text {
-  flex-grow: 1;
+  flex: 1;
+  min-width: 240px;
+}
+
+.title {
+  font-weight: 700;
 }
 
 .description {
-  font-size: 0.75rem;
+  // TODO: html要素のfont-size指定が16pxになり次第remでの指定に変更する
+  // font-size: 0.75rem;
+  font-size: 12px;
+}
+
+.control {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: right;
+  align-items: center;
+  gap: vars.$gap-1;
+  margin-left: auto;
 }
 </style>

src/components/Base/BaseSelect.vue

@@ -0,0 +1,121 @@
+<template>
+  <SelectRoot v-model="model" :defaultValue :disabled>
+    <SelectTrigger class="SelectTrigger">
+      <SelectValue class="SelectValue" :placeholder />
+      <SelectIcon class="SelectIcon">
+        <!-- 暫定でq-iconを使用 -->
+        <QIcon name="keyboard_arrow_down" size="sm" />
+      </SelectIcon>
+    </SelectTrigger>
+
+    <SelectPortal>
+      <SelectContent
+        class="SelectContent"
+        position="popper"
+        :sideOffset="4"
+        :collisionPadding="8"
+        :arrowPadding="16"
+        avoidCollisions
+        hideWhenDetached
+      >
+        <SelectViewport>
+          <slot />
+        </SelectViewport>
+        <SelectArrow class="SelectArrow" />
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  SelectContent,
+  SelectPortal,
+  SelectRoot,
+  SelectIcon,
+  SelectArrow,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+} from "radix-vue";
+
+defineProps<{
+  placeholder?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+}>();
+
+const model = defineModel<string>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/mixin" as mixin;
+
+.SelectTrigger {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: vars.$size-control;
+  border-radius: vars.$radius-1;
+  padding-inline: vars.$padding-2 vars.$padding-1;
+  gap: vars.$gap-1;
+  border: 1px solid;
+  text-align: start;
+  transition: background-color vars.$transition-duration;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  color: colors.$display;
+  border-color: colors.$border;
+  background-color: colors.$control;
+
+  &:hover:not(:disabled) {
+    background-color: colors.$control-hovered;
+  }
+
+  &:active:not(:disabled) {
+    background-color: colors.$control-pressed;
+  }
+
+  &:active:not(:disabled) {
+    box-shadow: 0 0 0 transparent;
+  }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+
+  &[data-placeholder] {
+    color: colors.$display-sub;
+  }
+}
+
+.SelectIcon {
+  color: colors.$display;
+}
+
+:global([data-radix-popper-content-wrapper]) {
+  z-index: vars.$z-index-dropdown !important;
+}
+
+:global(.SelectContent) {
+  overflow: hidden;
+  display: flex;
+  border-radius: vars.$radius-2;
+  padding: vars.$padding-1;
+  color: colors.$display;
+  background-color: colors.$background;
+  border: 1px solid colors.$border;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  min-width: var(--radix-select-trigger-width);
+  max-width: var(--radix-select-content-available-width);
+  max-height: var(--radix-select-content-available-height);
+}
+
+:global(.SelectArrow) {
+  fill: colors.$background;
+  margin-top: -1px;
+  filter: drop-shadow(0 1px 0px colors.$border);
+}
+</style>

src/components/Base/BaseSelectItem.vue

@@ -0,0 +1,79 @@
+<template>
+  <SelectItem class="SelectItem" :value :disabled>
+    <SelectItemText>{{ label }}</SelectItemText>
+    <SelectItemIndicator class="SelectItemIndicator" />
+  </SelectItem>
+</template>
+
+<script setup lang="ts">
+import { SelectItem, SelectItemText, SelectItemIndicator } from "radix-vue";
+
+defineProps<{
+  value: string;
+  label: string;
+  disabled?: boolean;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
+
+.SelectItem {
+  color: colors.$display;
+  cursor: pointer;
+  position: relative;
+  min-height: vars.$size-control;
+  display: flex;
+  align-items: center;
+  background-color: colors.$clear;
+  border: none;
+  padding: vars.$padding-1 vars.$padding-2;
+  border-radius: vars.$radius-1;
+  transition: background-color vars.$transition-duration;
+
+  &:not([data-state="checked"]):hover {
+    background-color: colors.$clear-hovered;
+  }
+
+  &:not([data-state="checked"]):active {
+    background-color: colors.$clear-pressed;
+  }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+    outline-offset: -2px;
+  }
+
+  &[data-highlighted] {
+    background-color: colors.$clear-hovered;
+  }
+
+  &[data-state="checked"] {
+    background-color: colors.$selected;
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+.SelectItemIndicator {
+  position: absolute;
+  left: 6px;
+  height: 0;
+  width: 4px;
+  border-radius: 2px;
+  background-color: colors.$primary;
+  opacity: 0;
+  transition-duration: vars.$transition-duration;
+  transition-property: height opacity;
+}
+
+[data-state="checked"] > .SelectItemIndicator {
+  opacity: 1;
+  height: 16px;
+}
+</style>

src/components/Base/BaseToggleGroup.vue

@@ -37,8 +37,5 @@ defineEmits<{
 
 .ToggleGroup {
   display: inline-flex;
-  background-color: var(--mauve-6);
-  border-radius: 4px;
-  box-shadow: 0 2px 10px var(--black-a7);
 }
 </style>

src/components/Base/BaseToggleGroupItem.vue

@@ -25,11 +25,9 @@ defineProps<{
   align-items: center;
   height: vars.$size-control;
   border: 1px solid;
-  transition:
-    background-color vars.$transition-duration,
-    padding vars.$transition-duration;
+  transition-duration: vars.$transition-duration;
+  transition-property: background-color, color, padding, box-shadow;
   cursor: pointer;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 
   &:active:not(:disabled) {
     box-shadow: 0 0 0 transparent;
@@ -48,12 +46,13 @@ defineProps<{
     border-bottom-right-radius: vars.$radius-1;
   }
 
-  &[data-state="off"] {
+  &[aria-pressed="false"] {
     padding: 0
       calc(#{vars.$padding-1} + (#{vars.$size-icon} + #{vars.$gap-1}) / 2);
     color: colors.$display;
     border-color: colors.$border;
     background-color: colors.$control;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 
     &:hover:not(:disabled) {
       background-color: colors.$control-hovered;
@@ -64,7 +63,7 @@ defineProps<{
     }
   }
 
-  &[data-state="on"] {
+  &[aria-pressed="true"] {
     padding: 0 vars.$padding-1;
     color: colors.$display-oncolor;
     border-color: colors.$border;
@@ -91,7 +90,7 @@ defineProps<{
     opacity vars.$transition-duration;
 }
 
-[data-state="off"] > .check {
+[aria-pressed="false"] > .check {
   width: 0;
   opacity: 0;
   margin-right: 0;