gigafibre-fsm/apps/ops/src/pages/ThemePage.vue

<template>
  <q-page class="q-pa-md" style="max-width:980px">
    <div class="row items-center q-mb-xs">
      <div class="text-h5">Thème &amp; couleurs</div>
      <q-space />
      <q-btn flat no-caps icon="restart_alt" label="Réinitialiser" @click="reset" class="q-mr-sm" />
      <q-btn unelevated no-caps color="primary" icon="save" label="Enregistrer" @click="save" />
    </div>
    <div class="text-caption text-grey-7 q-mb-md">
      Les couleurs principales de l'app, regroupées. Modifie en direct (aperçu immédiat) puis « Enregistrer ».
      Les éléments qui utilisent les variables <code>--ops-*</code> suivent automatiquement — objectif : réduire et uniformiser la palette.
    </div>

    <div class="q-mb-lg">
      <div class="text-subtitle2 q-mb-xs">Palettes de départ</div>
      <q-btn outline no-caps color="green-7" icon="eco" label="Moderne (défaut)" @click="applyPreset('default')" class="q-mr-sm q-mb-xs">
        <q-tooltip>Vert accessible + neutres — la palette par défaut, inspirée de la marque</q-tooltip>
      </q-btn>
      <q-btn outline no-caps color="green-6" icon="bolt" label="Vif (lime)" @click="applyPreset('vif')" class="q-mr-sm q-mb-xs">
        <q-tooltip>Vert lime éclatant (#22c11f) — plus vibrant, contraste texte moindre sur boutons pleins</q-tooltip>
      </q-btn>
      <q-btn outline no-caps color="primary" icon="palette" label="Classique (indigo)" @click="applyPreset('indigo')" class="q-mb-xs" />
    </div>

    <div class="row q-col-gutter-md">
      <div v-for="g in groups" :key="g.title" class="col-12 col-md-6">
        <q-card flat bordered>
          <q-card-section>
            <div class="text-subtitle1 text-weight-bold">{{ g.title }}</div>
            <div v-if="g.hint" class="text-caption text-grey-6 q-mb-sm">{{ g.hint }}</div>
            <div v-for="t in g.tokens" :key="t.var" class="row items-center q-py-xs no-wrap" style="gap:10px">
              <input type="color" :value="work[t.var]" @input="e => set(t, e.target.value)"
                style="width:40px;height:34px;border:1px solid var(--ops-border);border-radius:8px;padding:2px;background:none;cursor:pointer;flex:0 0 auto" />
              <div class="col">
                <div class="text-body2">{{ t.label }}</div>
                <code class="text-caption text-grey-6">{{ t.var }}</code>
              </div>
              <q-input dense outlined v-model="work[t.var]" @update:model-value="v => set(t, v)" style="width:104px;flex:0 0 auto" />
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>

    <q-card flat bordered class="q-mt-md">
      <q-card-section>
        <div class="text-subtitle1 text-weight-bold q-mb-sm">Aperçu</div>
        <div class="row items-center q-gutter-sm">
          <q-btn unelevated color="primary" no-caps label="Bouton accent" />
          <q-btn outline color="primary" no-caps label="Contour" />
          <span class="ops-badge active">Actif</span>
          <span class="ops-badge open">Ouvert</span>
          <span class="ops-badge inactive">Inactif</span>
          <q-badge color="positive" label="Succès" />
          <q-badge color="warning" label="Attention" />
          <q-badge color="negative" label="Erreur" />
          <a href="#" @click.prevent style="color:var(--ops-accent);font-weight:600">Lien accent</a>
        </div>
        <div class="q-mt-sm" style="background:var(--ops-bg);border:1px solid var(--ops-border);border-radius:8px;padding:10px">
          <span style="color:var(--ops-text)">Texte principal sur fond de page.</span>
          <span style="color:var(--ops-text-muted)"> · texte discret</span>
        </div>
      </q-card-section>
    </q-card>

    <div class="text-caption text-grey-6 q-mt-md">
      Enregistré dans ce navigateur (aperçu). Pour appliquer à toute l'équipe, on baked la palette choisie dans <code>css/app.scss</code>.
      Les couleurs encore codées en dur dans certaines pages (≈2000) ne suivront qu'après migration vers les variables.
    </div>
  </q-page>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { useQuasar } from 'quasar'
import { THEME_GROUPS, PRESETS, applyTheme, saveTheme, resetTheme, currentValues } from 'src/composables/useTheme'

const $q = useQuasar()
const groups = THEME_GROUPS
const work = reactive({})
onMounted(() => { Object.assign(work, currentValues()) })

function set (t, val) { if (!val) return; work[t.var] = val; applyTheme({ ...work }) }
function applyPreset (name) { Object.assign(work, PRESETS[name]); applyTheme({ ...work }) }
function save () { saveTheme({ ...work }); $q.notify({ type: 'positive', message: 'Thème enregistré (ce navigateur)' }) }
function reset () { resetTheme(); Object.assign(work, currentValues()); $q.notify({ type: 'info', message: 'Thème réinitialisé (défaut)' }) }
</script>