/* ========================================================================== Badges : une identité visuelle par information -------------------------------------------------------------------------- FICHIER GÉNÉRÉ. Source : scripts de palette (OKLCH + mesure de contraste). Il se relit et se versionne comme du code ordinaire, mais ne se modifie pas à la main : les couleurs sont calculées, pas choisies à l'œil. Le principe : deux badges qui ne disent pas la même chose ne portent jamais la même couleur. Regrouper les statuts par famille les rendait illisibles, une course « Récupérée » et une course « En transit » portaient le même bleu et il fallait lire le libellé pour les distinguer. Chaque valeur a donc son identité propre, faite de trois signaux : la TEINTE, propre à elle seule ; le POIDS, qui dit la nature de l'information : doux (fond pâle) le parcours avance, plein (fond saturé) c'est terminé, contour (sans fond) hors parcours normal, ou simple catégorie ; l'ICÔNE, posée côté PHP par OrderStatuses et FinanceLabels. Deux teintes voisines ne se confondent pas si leur poids diffère : un bleu pâle et un bleu plein ne se ressemblent en rien. C'est ce qui permet de tenir 35 valeurs lisibles là où la seule couleur en saturait cinq. Trois familles, qui ne peuvent pas être prises l'une pour l'autre : .status-pill.st les 20 statuts d'une course, les 5 d'un règlement ; .tag.st les 10 types d'écriture du grand livre (catégories) ; .fd-dot--st la pastille d'un filtre, qui sert de légende. Contrastes mesurés : texte >= 4.50:1 dans les deux thèmes (seuil AA : 4.5), filet des contours >= 3.12:1 (seuil des éléments d'interface : 3). Le garde-fou vit dans tests/playwright/status_pills.spec.js, qui relève ce que le NAVIGATEUR calcule et refuse deux apparences identiques dans une même famille. Feuille partagée par le back-office et les deux PWA : une même information a la même allure partout. ========================================================================== */ :root { --s-pending-payment-bg: #fdf1ed; --s-pending-payment-ink: #c54300; --s-pending-payment-line: transparent; --s-pending-payment-key: #c54300; --s-pending-bg: #fff2e1; --s-pending-ink: #986500; --s-pending-line: transparent; --s-pending-key: #986500; --s-pending-qualification-bg: #f7f6df; --s-pending-qualification-ink:#797208; --s-pending-qualification-line:transparent; --s-pending-qualification-key:#797208; --s-qualified-bg: #eafae6; --s-qualified-ink: #258200; --s-qualified-line: transparent; --s-qualified-key: #258200; --s-qualifying-bg: #dffbf7; --s-qualifying-ink: #0c7e74; --s-qualifying-line: transparent; --s-qualifying-key: #0c7e74; --s-picked-up-bg: #e4f8fd; --s-picked-up-ink: #0d7b8f; --s-picked-up-line: transparent; --s-picked-up-key: #0d7b8f; --s-in-transit-bg: #eef5fe; --s-in-transit-ink: #016ed6; --s-in-transit-line: transparent; --s-in-transit-key: #016ed6; --s-assigned-bg: #f4f3fd; --s-assigned-ink: #7956e0; --s-assigned-line: transparent; --s-assigned-key: #7956e0; --s-waiting-relay-bg: #ffeefd; --s-waiting-relay-ink: #b33cad; --s-waiting-relay-line: transparent; --s-waiting-relay-key: #b33cad; --s-out-for-final-delivery-bg:#0675e2; --s-out-for-final-delivery-ink:#ffffff; --s-out-for-final-delivery-line:transparent; --s-out-for-final-delivery-key:#0675e2; --s-arrived-bg: #9f53cf; --s-arrived-ink: #ffffff; --s-arrived-line: transparent; --s-arrived-key: #9f53cf; --s-delivered-bg: #07893e; --s-delivered-ink: #ffffff; --s-delivered-line: transparent; --s-delivered-key: #07893e; --s-failed-bg: #d63d3e; --s-failed-ink: #ffffff; --s-failed-line: transparent; --s-failed-key: #d63d3e; --s-returned-bg: #be5a0a; --s-returned-ink: #ffffff; --s-returned-line: transparent; --s-returned-key: #be5a0a; --s-cancelled-bg: #72767e; --s-cancelled-ink: #ffffff; --s-cancelled-line: transparent; --s-cancelled-key: #72767e; --s-qualification-failed-bg: transparent; --s-qualification-failed-ink: #cd2e73; --s-qualification-failed-line:#cf5582; --s-qualification-failed-key: #cd2e73; --s-return-proposed-bg: transparent; --s-return-proposed-ink: #bd4d00; --s-return-proposed-line: #d16022; --s-return-proposed-key: #bd4d00; --s-return-in-progress-bg: transparent; --s-return-in-progress-ink: #846e00; --s-return-in-progress-line: #9e840e; --s-return-in-progress-key: #846e00; --s-return-approved-bg: transparent; --s-return-approved-ink: #068222; --s-return-approved-line: #399e43; --s-return-approved-key: #068222; --s-cancelled-out-of-scope-bg:transparent; --s-cancelled-out-of-scope-ink:#6c7078; --s-cancelled-out-of-scope-line:#82868f; --s-cancelled-out-of-scope-key:#6c7078; --s-set-pending-bg: #fef1e9; --s-set-pending-ink: #aa5a04; --s-set-pending-line: transparent; --s-set-pending-key: #aa5a04; --s-set-remitted-bg: #defbfc; --s-set-remitted-ink: #0f7d82; --s-set-remitted-line: transparent; --s-set-remitted-key: #0f7d82; --s-set-paid-bg: #f1f4fe; --s-set-paid-ink: #4e61e6; --s-set-paid-line: transparent; --s-set-paid-key: #4e61e6; --s-set-settled-bg: #058484; --s-set-settled-ink: #ffffff; --s-set-settled-line: transparent; --s-set-settled-key: #058484; --s-set-disputed-bg: transparent; --s-set-disputed-ink: #ba3ba5; --s-set-disputed-line: #be5bac; --s-set-disputed-key: #ba3ba5; --s-gp-pending-bg: #fdf3de; --s-gp-pending-ink: #8a6b0b; --s-gp-pending-line: transparent; --s-gp-pending-key: #8a6b0b; --s-gp-partially-created-bg: #e9f7fe; --s-gp-partially-created-ink: #0f799f; --s-gp-partially-created-line:transparent; --s-gp-partially-created-key: #0f799f; --s-gp-completed-bg: #0f8669; --s-gp-completed-ink: #ffffff; --s-gp-completed-line: transparent; --s-gp-completed-key: #0f8669; --s-gp-cancelled-bg: transparent; --s-gp-cancelled-ink: #6c7078; --s-gp-cancelled-line: #82868f; --s-gp-cancelled-key: #6c7078; --s-tx-client-collection-bg: transparent; --s-tx-client-collection-ink: #0f7d82; --s-tx-client-collection-line:#0a999f; --s-tx-client-collection-key: #0f7d82; --s-tx-merchant-due-bg: transparent; --s-tx-merchant-due-ink: #0178a8; --s-tx-merchant-due-line: #0791ca; --s-tx-merchant-due-key: #0178a8; --s-tx-driver-earning-bg: transparent; --s-tx-driver-earning-ink: #4f63e7; --s-tx-driver-earning-line: #667ce5; --s-tx-driver-earning-key: #4f63e7; --s-tx-platform-revenue-bg: transparent; --s-tx-platform-revenue-ink: #984bcf; --s-tx-platform-revenue-line: #a167cf; --s-tx-platform-revenue-key: #984bcf; --s-tx-attempt-fee-charge-bg: transparent; --s-tx-attempt-fee-charge-ink:#c23594; --s-tx-attempt-fee-charge-line:#c6599e; --s-tx-attempt-fee-charge-key:#c23594; --s-tx-return-fee-charge-bg: transparent; --s-tx-return-fee-charge-ink: #cb307c; --s-tx-return-fee-charge-line:#cd5689; --s-tx-return-fee-charge-key: #cb307c; --s-tx-driver-remittance-bg: transparent; --s-tx-driver-remittance-ink: #ad5a00; --s-tx-driver-remittance-line:#c96900; --s-tx-driver-remittance-key: #ad5a00; --s-tx-merchant-settlement-bg:transparent; --s-tx-merchant-settlement-ink:#886e00; --s-tx-merchant-settlement-line:#a1830c; --s-tx-merchant-settlement-key:#886e00; --s-tx-cash-variance-bg: transparent; --s-tx-cash-variance-ink: #557c00; --s-tx-cash-variance-line: #6a9708; --s-tx-cash-variance-key: #557c00; --s-tx-driver-payout-bg: transparent; --s-tx-driver-payout-ink: #06805b; --s-tx-driver-payout-line: #019e70; --s-tx-driver-payout-key: #06805b; --s-src-celtiis-bg: transparent; --s-src-celtiis-ink: #b45605; --s-src-celtiis-line: #cf6305; --s-src-celtiis-key: #b45605; --s-src-bana-chat-bg: transparent; --s-src-bana-chat-ink: #7c7208; --s-src-bana-chat-line: #95880a; --s-src-bana-chat-key: #7c7208; --s-src-whatsapp-bg: transparent; --s-src-whatsapp-ink: #048046; --s-src-whatsapp-line: #02a058; --s-src-whatsapp-key: #048046; --s-src-pwa-bg: transparent; --s-src-pwa-ink: #007c88; --s-src-pwa-line: #0e97a5; --s-src-pwa-key: #007c88; --s-src-api-bg: transparent; --s-src-api-ink: #006de1; --s-src-api-line: #4085e4; --s-src-api-key: #006de1; --s-src-support-bg: transparent; --s-src-support-ink: #8b50d8; --s-src-support-line: #966cd7; --s-src-support-key: #8b50d8; --s-src-autre-bg: transparent; --s-src-autre-ink: #6c7078; --s-src-autre-line: #82868f; --s-src-autre-key: #6c7078; } /* Le back-office pose data-theme="dark" avant le premier rendu (il résout lui-même la préférence système) : pas de media query ici, sinon les PWA, volontairement claires, basculeraient avec l'OS du livreur. */ :root[data-theme="dark"] { --s-pending-payment-bg: #3a1d13; --s-pending-payment-ink: #f25914; --s-pending-payment-line: transparent; --s-pending-payment-key: #f25914; --s-pending-bg: #332207; --s-pending-ink: #bd7f00; --s-pending-line: transparent; --s-pending-key: #bd7f00; --s-pending-qualification-bg: #292707; --s-pending-qualification-ink:#999000; --s-pending-qualification-line:transparent; --s-pending-qualification-key:#999000; --s-qualified-bg: #192c15; --s-qualified-ink: #33a307; --s-qualified-line: transparent; --s-qualified-key: #33a307; --s-qualifying-bg: #002d29; --s-qualifying-ink: #149f92; --s-qualifying-line: transparent; --s-qualifying-key: #149f92; --s-picked-up-bg: #002c34; --s-picked-up-ink: #029bb5; --s-picked-up-line: transparent; --s-picked-up-key: #029bb5; --s-in-transit-bg: #15273d; --s-in-transit-ink: #268cfe; --s-in-transit-line: transparent; --s-in-transit-key: #268cfe; --s-assigned-bg: #26223c; --s-assigned-ink: #9375fe; --s-assigned-line: transparent; --s-assigned-key: #9375fe; --s-waiting-relay-bg: #331d31; --s-waiting-relay-ink: #d45ccc; --s-waiting-relay-line: transparent; --s-waiting-relay-key: #d45ccc; --s-out-for-final-delivery-bg:#0675e2; --s-out-for-final-delivery-ink:#ffffff; --s-out-for-final-delivery-line:transparent; --s-out-for-final-delivery-key:#0675e2; --s-arrived-bg: #9f53cf; --s-arrived-ink: #ffffff; --s-arrived-line: transparent; --s-arrived-key: #9f53cf; --s-delivered-bg: #07893e; --s-delivered-ink: #ffffff; --s-delivered-line: transparent; --s-delivered-key: #07893e; --s-failed-bg: #d63d3e; --s-failed-ink: #ffffff; --s-failed-line: transparent; --s-failed-key: #d63d3e; --s-returned-bg: #be5a0a; --s-returned-ink: #ffffff; --s-returned-line: transparent; --s-returned-key: #be5a0a; --s-cancelled-bg: #72767e; --s-cancelled-ink: #ffffff; --s-cancelled-line: transparent; --s-cancelled-key: #72767e; --s-qualification-failed-bg: transparent; --s-qualification-failed-ink: #f05290; --s-qualification-failed-line:#c94f7c; --s-qualification-failed-key: #f05290; --s-return-proposed-bg: transparent; --s-return-proposed-ink: #ec6306; --s-return-proposed-line: #cb5a1a; --s-return-proposed-key: #ec6306; --s-return-in-progress-bg: transparent; --s-return-in-progress-ink: #a78b01; --s-return-in-progress-line: #977e0d; --s-return-in-progress-key: #a78b01; --s-return-approved-bg: transparent; --s-return-approved-ink: #01a42c; --s-return-approved-line: #31983d; --s-return-approved-key: #01a42c; --s-cancelled-out-of-scope-bg:transparent; --s-cancelled-out-of-scope-ink:#898d96; --s-cancelled-out-of-scope-line:#7c8089; --s-cancelled-out-of-scope-key:#898d96; --s-set-pending-bg: #371f0c; --s-set-pending-ink: #d57207; --s-set-pending-line: transparent; --s-set-pending-key: #d57207; --s-set-remitted-bg: #022c2e; --s-set-remitted-ink: #019ea5; --s-set-remitted-line: transparent; --s-set-remitted-key: #019ea5; --s-set-paid-bg: #1e243d; --s-set-paid-ink: #6982fd; --s-set-paid-line: transparent; --s-set-paid-key: #6982fd; --s-set-settled-bg: #058484; --s-set-settled-ink: #ffffff; --s-set-settled-line: transparent; --s-set-settled-key: #058484; --s-set-disputed-bg: transparent; --s-set-disputed-ink: #db5bc4; --s-set-disputed-line: #b855a6; --s-set-disputed-key: #db5bc4; --s-gp-pending-bg: #302406; --s-gp-pending-ink: #ae8810; --s-gp-pending-line: transparent; --s-gp-pending-key: #ae8810; --s-gp-partially-created-bg: #062a39; --s-gp-partially-created-ink: #0f98c7; --s-gp-partially-created-line:transparent; --s-gp-partially-created-key: #0f98c7; --s-gp-completed-bg: #0f8669; --s-gp-completed-ink: #ffffff; --s-gp-completed-line: transparent; --s-gp-completed-key: #0f8669; --s-gp-cancelled-bg: transparent; --s-gp-cancelled-ink: #898d96; --s-gp-cancelled-line: #7c8089; --s-gp-cancelled-key: #898d96; --s-tx-client-collection-bg: transparent; --s-tx-client-collection-ink: #159ca2; --s-tx-client-collection-line:#0d9298; --s-tx-client-collection-key: #159ca2; --s-tx-merchant-due-bg: transparent; --s-tx-merchant-due-ink: #0596d2; --s-tx-merchant-due-line: #058ac2; --s-tx-merchant-due-key: #0596d2; --s-tx-driver-earning-bg: transparent; --s-tx-driver-earning-ink: #6b83fe; --s-tx-driver-earning-line: #6076de; --s-tx-driver-earning-key: #6b83fe; --s-tx-platform-revenue-bg: transparent; --s-tx-platform-revenue-ink: #b76bf1; --s-tx-platform-revenue-line: #9b61c9; --s-tx-platform-revenue-key: #b76bf1; --s-tx-attempt-fee-charge-bg: transparent; --s-tx-attempt-fee-charge-ink:#e457b2; --s-tx-attempt-fee-charge-line:#bf5297; --s-tx-attempt-fee-charge-key:#e457b2; --s-tx-return-fee-charge-bg: transparent; --s-tx-return-fee-charge-ink: #ef549a; --s-tx-return-fee-charge-line:#c75083; --s-tx-return-fee-charge-key: #ef549a; --s-tx-driver-remittance-bg: transparent; --s-tx-driver-remittance-ink: #d87202; --s-tx-driver-remittance-line:#bf6509; --s-tx-driver-remittance-key: #d87202; --s-tx-merchant-settlement-bg:transparent; --s-tx-merchant-settlement-ink:#aa8a00; --s-tx-merchant-settlement-line:#9a7d0b; --s-tx-merchant-settlement-key:#aa8a00; --s-tx-cash-variance-bg: transparent; --s-tx-cash-variance-ink: #6c9b05; --s-tx-cash-variance-line: #659003; --s-tx-cash-variance-key: #6c9b05; --s-tx-driver-payout-bg: transparent; --s-tx-driver-payout-ink: #0ba173; --s-tx-driver-payout-line: #00976b; --s-tx-driver-payout-key: #0ba173; --s-src-celtiis-bg: transparent; --s-src-celtiis-ink: #e16c00; --s-src-celtiis-line: #c65e01; --s-src-celtiis-key: #e16c00; --s-src-bana-chat-bg: transparent; --s-src-bana-chat-ink: #9b8f0c; --s-src-bana-chat-line: #8e8209; --s-src-bana-chat-key: #9b8f0c; --s-src-whatsapp-bg: transparent; --s-src-whatsapp-ink: #0ba35b; --s-src-whatsapp-line: #0e9955; --s-src-whatsapp-key: #0ba35b; --s-src-pwa-bg: transparent; --s-src-pwa-ink: #019caa; --s-src-pwa-line: #10919d; --s-src-pwa-key: #019caa; --s-src-api-bg: transparent; --s-src-api-ink: #368cfe; --s-src-api-line: #397fdd; --s-src-api-key: #368cfe; --s-src-support-bg: transparent; --s-src-support-ink: #a86ff9; --s-src-support-line: #9065d0; --s-src-support-key: #a86ff9; --s-src-autre-bg: transparent; --s-src-autre-ink: #898d96; --s-src-autre-line: #7c8089; --s-src-autre-key: #898d96; } /* -------------------------------------------------------------------------- Les porteurs. Les classes de statut, en bas, ne font que fournir les valeurs ; ce sont ces règles-ci qui les appliquent. -------------------------------------------------------------------------- */ /* Teinte nue, pour un élément qui n'est pas une pastille : la tuile d'icône des listes de l'espace commerçant, par exemple. */ .st { background: var(--st-bg); color: var(--st-ink); border-color: var(--st-line, transparent); } .status-pill.st { display: inline-flex; align-items: center; gap: .4em; padding: .2em .68em; border: 1px solid var(--st-line, transparent); border-radius: 999px; background: var(--st-bg); color: var(--st-ink); font-size: .73rem; font-weight: 600; line-height: 1.5; white-space: nowrap; } /* L'icône EST le repère : le point qui précédait les pastilles ferait doublon. */ .status-pill.st::before { content: none; } .status-pill.st > .bi { font-size: 1em; line-height: 1; flex-shrink: 0; } .status-pill.st.status-pill-lg { font-size: .8rem; padding: .3em .85em; } /* -------------------------------------------------------------------------- Trois rôles que la pastille d'état ne doit pas endosser -------------------------------------------------------------------------- Tout ce qui est court et encadré finissait en pastille colorée : un nombre de courses, un code de zone et un statut de facture avaient la même allure, et la couleur promettait un sens qu'ils n'avaient pas. Chacun prend ici une silhouette qui dit son rôle avant sa valeur. Les jetons portent une valeur de repli : cette feuille sert aussi l'espace commerçant, qui n'a pas le même jeu de jetons que le back-office. -------------------------------------------------------------------------- */ /* Une ÉTIQUETTE nomme une catégorie (type de tarif, code de zone, « Avoir »). Coins droits et contour fin : elle ne se lit pas comme un état. */ .tag { display: inline-flex; align-items: center; gap: .3em; padding: .18em .5em; border: 1px solid var(--line, #e5e7eb); border-radius: var(--r-xs, 8px); background: transparent; color: var(--ink-600, #4b5563); font-size: .7rem; font-weight: 550; white-space: nowrap; } .tag > .bi { font-size: .95em; line-height: 1; flex-shrink: 0; } .tag--code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .04em; } .tag--strong { border-color: var(--ink-400, #9ca3af); color: var(--ink-800, #1f2937); } /* Un COMPTEUR porte un nombre, pas un état : fond neutre, chiffres alignés d'une ligne à l'autre. Il ne vire au rouge que s'il compte un problème. */ .count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; padding: .12em .45em; border-radius: var(--r-pill, 999px); background: var(--surface-inset, #f1f5f9); color: var(--ink-700, #374151); font-size: .72rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.5; } .count--alert { background: var(--danger-wash, #fdeceb); color: var(--danger, #c62828); } .count--warn { background: var(--warn-wash, #fdf5da); color: var(--warn, #a16207); } /* ACTIF / INACTIF est un interrupteur, pas une étape : une pastille pleine ou creuse, sur le texte courant. Le vert plein de « Livrée » ne doit pas servir à dire « ce tarif est actif » : ce n'est pas la même nouvelle. */ .state { display: inline-flex; align-items: center; gap: .4em; font-size: .76rem; font-weight: 550; color: var(--ink-700, #374151); white-space: nowrap; } .state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .state.is-on::before { background: var(--ok, #15803d); box-shadow: 0 0 0 2.5px var(--ok-wash, #e8f7ee); } .state.is-off::before { background: transparent; border: 1.5px solid var(--ink-400, #9ca3af); } .state.is-off { color: var(--ink-500, #6b7280); } /* Une ÉCRITURE du grand livre nomme une catégorie, pas un état : coins droits et contour fin, la même silhouette que .tag. Aucune ne peut être prise pour une pastille d'état, et chacune a sa teinte. */ .tag.st { background: transparent; border-color: var(--st-line); color: var(--st-ink); } /* La pastille d'un filtre reprend EXACTEMENT la couleur du statut qu'elle coche : le filtre apprend la légende au passage. */ .fd-dot--st { background: var(--st-key); } /* Idem pour un filtre dont la puce porte une icône plutôt qu'une pastille (les canaux de création). */ .fd-chip-ico { font-size: .9em; line-height: 1; background: transparent; } /* La tuile d'un canal dans les réglages : elle portait le dégradé de marque pour les quatre, donc il fallait lire le libellé. Elle prend la couleur du canal, la même que dans la liste des courses et dans le filtre. */ .settings-badge.st { background: transparent; color: var(--st-ink); border: 1.5px solid var(--st-line); } /* Filet de bord des listes (PWA livreur) : reprend la couleur du statut. Pas --st-ink : sur un badge plein l'encre est blanche, le filet disparaitrait. --st-key est la couleur qui IDENTIFIE le statut, quel que soit le poids. */ .st-stripe { border-left-color: var(--st-key) !important; } /* -------------------------------------------------------------------------- Une classe par statut. -------------------------------------------------------------------------- */ .st-pending-payment { --st-bg: var(--s-pending-payment-bg); --st-ink: var(--s-pending-payment-ink); --st-line: var(--s-pending-payment-line); --st-key: var(--s-pending-payment-key); } .st-pending { --st-bg: var(--s-pending-bg); --st-ink: var(--s-pending-ink); --st-line: var(--s-pending-line); --st-key: var(--s-pending-key); } .st-pending-qualification { --st-bg: var(--s-pending-qualification-bg); --st-ink: var(--s-pending-qualification-ink); --st-line: var(--s-pending-qualification-line); --st-key: var(--s-pending-qualification-key); } .st-qualified { --st-bg: var(--s-qualified-bg); --st-ink: var(--s-qualified-ink); --st-line: var(--s-qualified-line); --st-key: var(--s-qualified-key); } .st-qualifying { --st-bg: var(--s-qualifying-bg); --st-ink: var(--s-qualifying-ink); --st-line: var(--s-qualifying-line); --st-key: var(--s-qualifying-key); } .st-picked-up { --st-bg: var(--s-picked-up-bg); --st-ink: var(--s-picked-up-ink); --st-line: var(--s-picked-up-line); --st-key: var(--s-picked-up-key); } .st-in-transit { --st-bg: var(--s-in-transit-bg); --st-ink: var(--s-in-transit-ink); --st-line: var(--s-in-transit-line); --st-key: var(--s-in-transit-key); } .st-assigned { --st-bg: var(--s-assigned-bg); --st-ink: var(--s-assigned-ink); --st-line: var(--s-assigned-line); --st-key: var(--s-assigned-key); } .st-waiting-relay { --st-bg: var(--s-waiting-relay-bg); --st-ink: var(--s-waiting-relay-ink); --st-line: var(--s-waiting-relay-line); --st-key: var(--s-waiting-relay-key); } .st-out-for-final-delivery { --st-bg: var(--s-out-for-final-delivery-bg); --st-ink: var(--s-out-for-final-delivery-ink); --st-line: var(--s-out-for-final-delivery-line); --st-key: var(--s-out-for-final-delivery-key); } .st-arrived { --st-bg: var(--s-arrived-bg); --st-ink: var(--s-arrived-ink); --st-line: var(--s-arrived-line); --st-key: var(--s-arrived-key); } .st-delivered { --st-bg: var(--s-delivered-bg); --st-ink: var(--s-delivered-ink); --st-line: var(--s-delivered-line); --st-key: var(--s-delivered-key); } .st-failed { --st-bg: var(--s-failed-bg); --st-ink: var(--s-failed-ink); --st-line: var(--s-failed-line); --st-key: var(--s-failed-key); } .st-returned { --st-bg: var(--s-returned-bg); --st-ink: var(--s-returned-ink); --st-line: var(--s-returned-line); --st-key: var(--s-returned-key); } .st-cancelled { --st-bg: var(--s-cancelled-bg); --st-ink: var(--s-cancelled-ink); --st-line: var(--s-cancelled-line); --st-key: var(--s-cancelled-key); } .st-qualification-failed { --st-bg: var(--s-qualification-failed-bg); --st-ink: var(--s-qualification-failed-ink); --st-line: var(--s-qualification-failed-line); --st-key: var(--s-qualification-failed-key); } .st-return-proposed { --st-bg: var(--s-return-proposed-bg); --st-ink: var(--s-return-proposed-ink); --st-line: var(--s-return-proposed-line); --st-key: var(--s-return-proposed-key); } .st-return-in-progress { --st-bg: var(--s-return-in-progress-bg); --st-ink: var(--s-return-in-progress-ink); --st-line: var(--s-return-in-progress-line); --st-key: var(--s-return-in-progress-key); } .st-return-approved { --st-bg: var(--s-return-approved-bg); --st-ink: var(--s-return-approved-ink); --st-line: var(--s-return-approved-line); --st-key: var(--s-return-approved-key); } .st-cancelled-out-of-scope { --st-bg: var(--s-cancelled-out-of-scope-bg); --st-ink: var(--s-cancelled-out-of-scope-ink); --st-line: var(--s-cancelled-out-of-scope-line); --st-key: var(--s-cancelled-out-of-scope-key); } .st-set-pending { --st-bg: var(--s-set-pending-bg); --st-ink: var(--s-set-pending-ink); --st-line: var(--s-set-pending-line); --st-key: var(--s-set-pending-key); } .st-set-remitted { --st-bg: var(--s-set-remitted-bg); --st-ink: var(--s-set-remitted-ink); --st-line: var(--s-set-remitted-line); --st-key: var(--s-set-remitted-key); } .st-set-paid { --st-bg: var(--s-set-paid-bg); --st-ink: var(--s-set-paid-ink); --st-line: var(--s-set-paid-line); --st-key: var(--s-set-paid-key); } .st-set-settled { --st-bg: var(--s-set-settled-bg); --st-ink: var(--s-set-settled-ink); --st-line: var(--s-set-settled-line); --st-key: var(--s-set-settled-key); } .st-set-disputed { --st-bg: var(--s-set-disputed-bg); --st-ink: var(--s-set-disputed-ink); --st-line: var(--s-set-disputed-line); --st-key: var(--s-set-disputed-key); } .st-gp-pending { --st-bg: var(--s-gp-pending-bg); --st-ink: var(--s-gp-pending-ink); --st-line: var(--s-gp-pending-line); --st-key: var(--s-gp-pending-key); } .st-gp-partially-created { --st-bg: var(--s-gp-partially-created-bg); --st-ink: var(--s-gp-partially-created-ink); --st-line: var(--s-gp-partially-created-line); --st-key: var(--s-gp-partially-created-key); } .st-gp-completed { --st-bg: var(--s-gp-completed-bg); --st-ink: var(--s-gp-completed-ink); --st-line: var(--s-gp-completed-line); --st-key: var(--s-gp-completed-key); } .st-gp-cancelled { --st-bg: var(--s-gp-cancelled-bg); --st-ink: var(--s-gp-cancelled-ink); --st-line: var(--s-gp-cancelled-line); --st-key: var(--s-gp-cancelled-key); } .st-tx-client-collection { --st-bg: var(--s-tx-client-collection-bg); --st-ink: var(--s-tx-client-collection-ink); --st-line: var(--s-tx-client-collection-line); --st-key: var(--s-tx-client-collection-key); } .st-tx-merchant-due { --st-bg: var(--s-tx-merchant-due-bg); --st-ink: var(--s-tx-merchant-due-ink); --st-line: var(--s-tx-merchant-due-line); --st-key: var(--s-tx-merchant-due-key); } .st-tx-driver-earning { --st-bg: var(--s-tx-driver-earning-bg); --st-ink: var(--s-tx-driver-earning-ink); --st-line: var(--s-tx-driver-earning-line); --st-key: var(--s-tx-driver-earning-key); } .st-tx-platform-revenue { --st-bg: var(--s-tx-platform-revenue-bg); --st-ink: var(--s-tx-platform-revenue-ink); --st-line: var(--s-tx-platform-revenue-line); --st-key: var(--s-tx-platform-revenue-key); } .st-tx-attempt-fee-charge { --st-bg: var(--s-tx-attempt-fee-charge-bg); --st-ink: var(--s-tx-attempt-fee-charge-ink); --st-line: var(--s-tx-attempt-fee-charge-line); --st-key: var(--s-tx-attempt-fee-charge-key); } .st-tx-return-fee-charge { --st-bg: var(--s-tx-return-fee-charge-bg); --st-ink: var(--s-tx-return-fee-charge-ink); --st-line: var(--s-tx-return-fee-charge-line); --st-key: var(--s-tx-return-fee-charge-key); } .st-tx-driver-remittance { --st-bg: var(--s-tx-driver-remittance-bg); --st-ink: var(--s-tx-driver-remittance-ink); --st-line: var(--s-tx-driver-remittance-line); --st-key: var(--s-tx-driver-remittance-key); } .st-tx-merchant-settlement { --st-bg: var(--s-tx-merchant-settlement-bg); --st-ink: var(--s-tx-merchant-settlement-ink); --st-line: var(--s-tx-merchant-settlement-line); --st-key: var(--s-tx-merchant-settlement-key); } .st-tx-cash-variance { --st-bg: var(--s-tx-cash-variance-bg); --st-ink: var(--s-tx-cash-variance-ink); --st-line: var(--s-tx-cash-variance-line); --st-key: var(--s-tx-cash-variance-key); } .st-tx-driver-payout { --st-bg: var(--s-tx-driver-payout-bg); --st-ink: var(--s-tx-driver-payout-ink); --st-line: var(--s-tx-driver-payout-line); --st-key: var(--s-tx-driver-payout-key); } .st-src-celtiis { --st-bg: var(--s-src-celtiis-bg); --st-ink: var(--s-src-celtiis-ink); --st-line: var(--s-src-celtiis-line); --st-key: var(--s-src-celtiis-key); } .st-src-bana-chat { --st-bg: var(--s-src-bana-chat-bg); --st-ink: var(--s-src-bana-chat-ink); --st-line: var(--s-src-bana-chat-line); --st-key: var(--s-src-bana-chat-key); } .st-src-whatsapp { --st-bg: var(--s-src-whatsapp-bg); --st-ink: var(--s-src-whatsapp-ink); --st-line: var(--s-src-whatsapp-line); --st-key: var(--s-src-whatsapp-key); } .st-src-pwa { --st-bg: var(--s-src-pwa-bg); --st-ink: var(--s-src-pwa-ink); --st-line: var(--s-src-pwa-line); --st-key: var(--s-src-pwa-key); } .st-src-api { --st-bg: var(--s-src-api-bg); --st-ink: var(--s-src-api-ink); --st-line: var(--s-src-api-line); --st-key: var(--s-src-api-key); } .st-src-support { --st-bg: var(--s-src-support-bg); --st-ink: var(--s-src-support-ink); --st-line: var(--s-src-support-line); --st-key: var(--s-src-support-key); } .st-src-autre { --st-bg: var(--s-src-autre-bg); --st-ink: var(--s-src-autre-ink); --st-line: var(--s-src-autre-line); --st-key: var(--s-src-autre-key); }