Merge pull request #4140 from traPtitech/feat/tertiary_form_button

formButtonにtertiaryを追加

src/components/UI/FormButton.vue

@@ -6,19 +6,24 @@
     :data-color="color"
   >
     <div :class="$style.label">{{ label }}</div>
-    <loading-spinner v-if="loading" :class="$style.spinner" />
+    <loading-spinner
+      v-if="loading"
+      :class="$style.spinner"
+      :color="spinnerColor"
+    />
   </button>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import LoadingSpinner from '/@/components/UI/LoadingSpinner.vue'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     label?: string
     loading?: boolean
     disabled?: boolean
-    color?: 'primary' | 'secondary' | 'error'
+    color?: 'primary' | 'secondary' | 'error' | 'tertiary'
   }>(),
   {
     label: '',
@@ -27,6 +32,15 @@ withDefaults(
     color: 'primary' as const
   }
 )
+
+const spinnerColor = computed(() => {
+  switch (props.color) {
+    case 'tertiary':
+      return 'accent-primary'
+    default:
+      return 'white'
+  }
+})
 </script>
 
 <style lang="scss" module>
@@ -52,6 +66,10 @@ withDefaults(
     @include color-ui-secondary;
     border-color: $theme-ui-secondary-default;
   }
+  &[data-color='tertiary'] {
+    @include color-accent-primary;
+    border-color: $theme-accent-primary-default;
+  }
   &[data-color='error'] {
     color: $theme-accent-error-default;
     border-color: $theme-accent-error-default;

src/components/UI/LoadingSpinner.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-type SpinnerColor = 'white' | 'ui-secondary'
+type SpinnerColor = 'white' | 'ui-secondary' | 'accent-primary'
 
 withDefaults(
   defineProps<{
@@ -33,6 +33,10 @@ $spinner-width: 0.35em;
     --spinner-color: #{$theme-ui-secondary-default};
     --spinner-gap-color: var(--specific-loading-spinner-gap-ui-secondary);
   }
+  &[data-color='accent-primary'] {
+    --spinner-color: #{$theme-accent-primary-default};
+    --spinner-gap-color: transparent;
+  }
 }
 .spinner {
   position: relative;