@gyramais/gyra-design 0.2.50 → 0.2.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ContextMenu/index.js +1 -1
- package/dist/components/ContextMenu/index.js.map +1 -1
- package/dist/components/DropdownMenu/index.js +1 -1
- package/dist/components/DropdownMenu/index.js.map +1 -1
- package/dist/components/MultiSelectPicker/index.js +7 -7
- package/dist/components/MultiSelectPicker/index.js.map +1 -1
- package/dist/components/OperatorPicker/index.js +1 -1
- package/dist/components/OperatorPicker/index.js.map +1 -1
- package/dist/components/Rail/Rail.d.ts +6 -1
- package/dist/components/Rail/index.js +6 -6
- package/dist/components/Rail/index.js.map +1 -1
- package/dist/components/Rail/types.d.ts +12 -2
- package/dist/components/RuleSearchPicker/index.js +1 -1
- package/dist/components/RuleSearchPicker/index.js.map +1 -1
- package/dist/components/SegmentedPicker/index.js +1 -1
- package/dist/components/SegmentedPicker/index.js.map +1 -1
- package/dist/emails/balance-sheet-finalized/components/Rail/Rail.d.ts +6 -1
- package/dist/emails/balance-sheet-finalized/components/Rail/types.d.ts +12 -2
- package/dist/emails/balance-sheet-finalized/index.d.ts +33 -64
- package/dist/emails/email/components/Rail/Rail.d.ts +6 -1
- package/dist/emails/email/components/Rail/types.d.ts +12 -2
- package/dist/emails/email/index.d.ts +94 -64
- package/dist/index.css +143 -10
- package/package.json +1 -1
|
@@ -30,7 +30,12 @@ type RailProps = {
|
|
|
30
30
|
steps: Array<RailStepData>;
|
|
31
31
|
/** Rotulo acessivel da lista. Default: "Esteira". */
|
|
32
32
|
ariaLabel?: string;
|
|
33
|
-
/**
|
|
33
|
+
/**
|
|
34
|
+
* Etapa em foco na execucao ao vivo (modo run). Sem ela, o proprio Rail
|
|
35
|
+
* assume a etapa que roda ou aguarda. Execucao encerrada nao tem etapa
|
|
36
|
+
* atual, e ninguem ganha elevacao: sombra que sobrevive ao fim da execucao
|
|
37
|
+
* aponta para nada.
|
|
38
|
+
*/
|
|
34
39
|
activeStepId?: string;
|
|
35
40
|
/** Etapa selecionada no construtor (modo edit). */
|
|
36
41
|
selectedStepId?: string;
|
|
@@ -9,7 +9,7 @@ import React from "react";
|
|
|
9
9
|
/** edit = construtor. run = acompanhamento ao vivo. Mesma arvore. */
|
|
10
10
|
export type RailMode = "edit" | "run";
|
|
11
11
|
/** Os 4 tipos de etapa. Espelha `StepKind` do gyra-operation. */
|
|
12
|
-
export type RailStepKind = "ANALYSIS" | "DEEPEN" | "CHECKPOINT" | "RELATIONSHIPS";
|
|
12
|
+
export type RailStepKind = "ANALYSIS" | "DEEPEN" | "CHECKPOINT" | "RELATIONSHIPS" | "RESULT" | "OFFER_REVIEW" | "COMMITTEE" | "AUTHORITY";
|
|
13
13
|
/**
|
|
14
14
|
* A condicao do conector: sempre avaliada contra a ULTIMA decisao registrada
|
|
15
15
|
* na esteira. Espelha `Gate` do gyra-operation.
|
|
@@ -43,7 +43,8 @@ export type RailLeaf = {
|
|
|
43
43
|
* Uma etapa da esteira (o dado; o componente que a desenha se chama RailStep).
|
|
44
44
|
*
|
|
45
45
|
* Anatomia do cartao, nas duas linhas que ele tem:
|
|
46
|
-
* linha 1: glifo do tipo (chip
|
|
46
|
+
* linha 1: glifo do tipo (chip de 24px na cor do tipo, tooltip com o nome
|
|
47
|
+
* do tipo) + `title`
|
|
47
48
|
* + `meta` (chips pequenos) e, a direita, o estado (run) ou as
|
|
48
49
|
* acoes de ordenar/remover (edit, so no hover).
|
|
49
50
|
* linha 2: `policyControl` (edit) ou `policyName` (run) para Analise e
|
|
@@ -75,6 +76,15 @@ export type RailStepData = {
|
|
|
75
76
|
* `policyName`. Ignorado no modo run.
|
|
76
77
|
*/
|
|
77
78
|
policyControl?: React.ReactNode;
|
|
79
|
+
/**
|
|
80
|
+
* O nome da etapa E o nome da politica (o caso default, e o mais comum).
|
|
81
|
+
* Nesse caso a politica NAO ganha uma linha propria: no modo edit o seletor
|
|
82
|
+
* inline sobe para a linha 1 e vira o proprio nome; no run, a linha 2 some.
|
|
83
|
+
* Sem isto o cartao imprimia a mesma string duas vezes, empilhada.
|
|
84
|
+
*
|
|
85
|
+
* Sem valor, o RailStep compara `title` com `policyName`.
|
|
86
|
+
*/
|
|
87
|
+
policyIsTitle?: boolean;
|
|
78
88
|
/**
|
|
79
89
|
* A condicao do conector que fica ACIMA desta etapa. A primeira etapa da
|
|
80
90
|
* esteira nao tem conector, entao o campo e ignorado nela.
|
|
@@ -1,64 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
import "./components/Menubar/index.css";
|
|
35
|
-
import "./components/Modal/index.css";
|
|
36
|
-
import "./components/Popover/index.css";
|
|
37
|
-
import "./components/ProcessingChip/index.css";
|
|
38
|
-
import "./components/Progress/index.css";
|
|
39
|
-
import "./components/RadioGroup/index.css";
|
|
40
|
-
import "./components/Rail/index.css";
|
|
41
|
-
import "./components/RichInput/index.css";
|
|
42
|
-
import "./components/Row/index.css";
|
|
43
|
-
import "./components/ScoreBar/index.css";
|
|
44
|
-
import "./components/SegmentedPicker/index.css";
|
|
45
|
-
import "./components/SegmentedToggle/index.css";
|
|
46
|
-
import "./components/Select/index.css";
|
|
47
|
-
import "./components/Selector/index.css";
|
|
48
|
-
import "./components/SelectTree/index.css";
|
|
49
|
-
import "./components/PickerPopover/index.css";
|
|
50
|
-
import "./components/MultiSelectPicker/index.css";
|
|
51
|
-
import "./components/RuleSearchPicker/index.css";
|
|
52
|
-
import "./components/OperatorPicker/index.css";
|
|
53
|
-
import "./components/ContextMenu/index.css";
|
|
54
|
-
import "./components/StatusTag/index.css";
|
|
55
|
-
import "./components/Switch/index.css";
|
|
56
|
-
import "./components/SyncChip/index.css";
|
|
57
|
-
import "./components/Table/index.css";
|
|
58
|
-
import "./components/Tabs/index.css";
|
|
59
|
-
import "./components/Tag/index.css";
|
|
60
|
-
import "./components/Tooltip/index.css";
|
|
61
|
-
import "./components/Stepper/index.css";
|
|
62
|
-
import "./components/TourGuide/index.css";
|
|
63
|
-
import theme from "./theme";
|
|
64
|
-
export default theme;
|
|
1
|
+
/**
|
|
2
|
+
* Preset do email "Análise financeira concluída" enviado quando o gyra-ai
|
|
3
|
+
* finaliza a extração de um balanço (feature Finsights — CU-86aherfzc).
|
|
4
|
+
*
|
|
5
|
+
* Esta é uma **camada fina de mapeamento de domínio** sobre o
|
|
6
|
+
* `buildEmail` genérico: recebe os campos crus que o gyra-ai produz
|
|
7
|
+
* (score, risk, recommendation, xlsxUrl, ...) e monta o `EmailLayoutInput`
|
|
8
|
+
* com as decisões visuais (cor do risco, tom do veredito, textos padrão).
|
|
9
|
+
*
|
|
10
|
+
* Pra criar outro preset (ex: `password-reset`, `report-finalized`,
|
|
11
|
+
* `batch-finalized`), criar uma pasta nova em `src/emails/<name>/` que
|
|
12
|
+
* importe `buildEmail` e exporte uma função `<name>Email(payload)` com a
|
|
13
|
+
* mesma assinatura: `{ subject, html }`.
|
|
14
|
+
*/
|
|
15
|
+
export type BalanceSheetFinalizedPayload = {
|
|
16
|
+
firstName?: string;
|
|
17
|
+
companyName?: string;
|
|
18
|
+
score?: number | string;
|
|
19
|
+
risk?: string;
|
|
20
|
+
recommendation?: string;
|
|
21
|
+
xlsxUrl?: string;
|
|
22
|
+
reportUrl?: string;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* Monta `{ subject, html }` do email "Análise financeira concluída" a
|
|
26
|
+
* partir do payload do gyra-ai (score, risco, recomendação, XLS, etc).
|
|
27
|
+
* Usado pelo gyra-communication (envio via SendGrid) e pelo Storybook
|
|
28
|
+
* (preview).
|
|
29
|
+
*/
|
|
30
|
+
export declare function balanceSheetFinalizedEmail(payload: BalanceSheetFinalizedPayload): {
|
|
31
|
+
subject: string;
|
|
32
|
+
html: string;
|
|
33
|
+
};
|
|
@@ -30,7 +30,12 @@ type RailProps = {
|
|
|
30
30
|
steps: Array<RailStepData>;
|
|
31
31
|
/** Rotulo acessivel da lista. Default: "Esteira". */
|
|
32
32
|
ariaLabel?: string;
|
|
33
|
-
/**
|
|
33
|
+
/**
|
|
34
|
+
* Etapa em foco na execucao ao vivo (modo run). Sem ela, o proprio Rail
|
|
35
|
+
* assume a etapa que roda ou aguarda. Execucao encerrada nao tem etapa
|
|
36
|
+
* atual, e ninguem ganha elevacao: sombra que sobrevive ao fim da execucao
|
|
37
|
+
* aponta para nada.
|
|
38
|
+
*/
|
|
34
39
|
activeStepId?: string;
|
|
35
40
|
/** Etapa selecionada no construtor (modo edit). */
|
|
36
41
|
selectedStepId?: string;
|
|
@@ -9,7 +9,7 @@ import React from "react";
|
|
|
9
9
|
/** edit = construtor. run = acompanhamento ao vivo. Mesma arvore. */
|
|
10
10
|
export type RailMode = "edit" | "run";
|
|
11
11
|
/** Os 4 tipos de etapa. Espelha `StepKind` do gyra-operation. */
|
|
12
|
-
export type RailStepKind = "ANALYSIS" | "DEEPEN" | "CHECKPOINT" | "RELATIONSHIPS";
|
|
12
|
+
export type RailStepKind = "ANALYSIS" | "DEEPEN" | "CHECKPOINT" | "RELATIONSHIPS" | "RESULT" | "OFFER_REVIEW" | "COMMITTEE" | "AUTHORITY";
|
|
13
13
|
/**
|
|
14
14
|
* A condicao do conector: sempre avaliada contra a ULTIMA decisao registrada
|
|
15
15
|
* na esteira. Espelha `Gate` do gyra-operation.
|
|
@@ -43,7 +43,8 @@ export type RailLeaf = {
|
|
|
43
43
|
* Uma etapa da esteira (o dado; o componente que a desenha se chama RailStep).
|
|
44
44
|
*
|
|
45
45
|
* Anatomia do cartao, nas duas linhas que ele tem:
|
|
46
|
-
* linha 1: glifo do tipo (chip
|
|
46
|
+
* linha 1: glifo do tipo (chip de 24px na cor do tipo, tooltip com o nome
|
|
47
|
+
* do tipo) + `title`
|
|
47
48
|
* + `meta` (chips pequenos) e, a direita, o estado (run) ou as
|
|
48
49
|
* acoes de ordenar/remover (edit, so no hover).
|
|
49
50
|
* linha 2: `policyControl` (edit) ou `policyName` (run) para Analise e
|
|
@@ -75,6 +76,15 @@ export type RailStepData = {
|
|
|
75
76
|
* `policyName`. Ignorado no modo run.
|
|
76
77
|
*/
|
|
77
78
|
policyControl?: React.ReactNode;
|
|
79
|
+
/**
|
|
80
|
+
* O nome da etapa E o nome da politica (o caso default, e o mais comum).
|
|
81
|
+
* Nesse caso a politica NAO ganha uma linha propria: no modo edit o seletor
|
|
82
|
+
* inline sobe para a linha 1 e vira o proprio nome; no run, a linha 2 some.
|
|
83
|
+
* Sem isto o cartao imprimia a mesma string duas vezes, empilhada.
|
|
84
|
+
*
|
|
85
|
+
* Sem valor, o RailStep compara `title` com `policyName`.
|
|
86
|
+
*/
|
|
87
|
+
policyIsTitle?: boolean;
|
|
78
88
|
/**
|
|
79
89
|
* A condicao do conector que fica ACIMA desta etapa. A primeira etapa da
|
|
80
90
|
* esteira nao tem conector, entao o campo e ignorado nela.
|
|
@@ -1,64 +1,94 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
import
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Email transacional genérico — Gyra+ design system.
|
|
3
|
+
*
|
|
4
|
+
* **FONTE DA VERDADE** dos layouts de email transacional. Usado por
|
|
5
|
+
* qualquer fluxo que precise mandar email no padrão visual Gyra+:
|
|
6
|
+
* - reset de senha, confirmação de cadastro, alertas internos
|
|
7
|
+
* - finalização de processamento (Finsights, batch-report, etc)
|
|
8
|
+
* - notificações de operação/crédito
|
|
9
|
+
* - convites, mudança de plano, alerts de billing...
|
|
10
|
+
*
|
|
11
|
+
* **TS puro**: sem React, sem DOM, sem browser globals. Apenas funções que
|
|
12
|
+
* retornam string HTML. Funciona igual em qualquer runtime Node (Nest) ou
|
|
13
|
+
* bundle browser (Next).
|
|
14
|
+
*
|
|
15
|
+
* **Email-safe**: tabelas + inline-style (clients ignoram <style> externo,
|
|
16
|
+
* flexbox e Material Symbols). Gradientes têm fallback sólido.
|
|
17
|
+
*
|
|
18
|
+
* Tokens visuais alinhados com gyra-design: azul #1256FF (acao/primary),
|
|
19
|
+
* roxo #7C4EFF (IA/parecer), neutrals Apple-gray, fonte Inter.
|
|
20
|
+
*
|
|
21
|
+
* **Como usar:**
|
|
22
|
+
* ```ts
|
|
23
|
+
* import { buildEmail } from '@gyramais/gyra-design/dist/emails/email';
|
|
24
|
+
*
|
|
25
|
+
* const html = buildEmail({
|
|
26
|
+
* preheader: 'Senha redefinida com sucesso',
|
|
27
|
+
* greeting: 'Olá, Maria',
|
|
28
|
+
* title: 'Sua senha foi redefinida',
|
|
29
|
+
* paragraphs: ['Tudo certo. Você já pode entrar com a nova senha.'],
|
|
30
|
+
* buttons: [{ label: 'Entrar', url: 'https://app.gyramais.com/login' }],
|
|
31
|
+
* footerNote: 'Se não foi você, redefina novamente clicando em "Esqueci minha senha".',
|
|
32
|
+
* });
|
|
33
|
+
* ```
|
|
34
|
+
*
|
|
35
|
+
* Pra emails recorrentes (mesmo conteudo, payload variavel), criar um
|
|
36
|
+
* **preset** em `src/emails/<preset-name>/index.ts` que monta o
|
|
37
|
+
* `EmailLayoutInput` a partir de campos de dominio e delega aqui. Ver
|
|
38
|
+
* `balance-sheet-finalized` como exemplo.
|
|
39
|
+
*/
|
|
40
|
+
export type EmailButton = {
|
|
41
|
+
label: string;
|
|
42
|
+
url: string;
|
|
43
|
+
/** primary = botão azul preenchido, secondary = outline. Default primary. */
|
|
44
|
+
variant?: 'primary' | 'secondary';
|
|
45
|
+
};
|
|
46
|
+
export type EmailHighlight = {
|
|
47
|
+
/** label pequeno em cima (ex: "Score", "Nivel de risco"). */
|
|
48
|
+
label: string;
|
|
49
|
+
/** valor grande em baixo (ex: "820", "Baixo"). */
|
|
50
|
+
value: string;
|
|
51
|
+
/** cor do valor (ex: cor do risco). Default: tinta padrao Apple-gray. */
|
|
52
|
+
color?: string;
|
|
53
|
+
};
|
|
54
|
+
/** Tom semantico do chip de veredito do bloco Parecer GYRA+IA. */
|
|
55
|
+
export type AiParecerTone = 'ok' | 'warn' | 'danger' | 'info';
|
|
56
|
+
export type EmailAiParecer = {
|
|
57
|
+
/** chip de veredito (ex: "Médio", "Consistente"). Opcional. */
|
|
58
|
+
verdict?: string;
|
|
59
|
+
verdictTone?: AiParecerTone;
|
|
60
|
+
/** corpo do parecer. */
|
|
61
|
+
text: string;
|
|
62
|
+
/** rodape do bloco (ex: "GYRA+IA · Confiança 96%"). Opcional. */
|
|
63
|
+
footer?: string;
|
|
64
|
+
};
|
|
65
|
+
export type EmailLayoutInput = {
|
|
66
|
+
/** Texto invisivel no preheader (preview no inbox). */
|
|
67
|
+
preheader?: string;
|
|
68
|
+
/** Linha curta acima do titulo (ex: "Olá, Maria"). */
|
|
69
|
+
greeting?: string;
|
|
70
|
+
/** Titulo principal (H1). */
|
|
71
|
+
title: string;
|
|
72
|
+
/** Paragrafos de corpo (sub-frases). */
|
|
73
|
+
paragraphs?: string[];
|
|
74
|
+
/** Cards lado-a-lado (1 a N). Largura dividida igualmente. */
|
|
75
|
+
highlights?: EmailHighlight[];
|
|
76
|
+
/** Bloco "Parecer GYRA+IA" (faixa roxa com chip + texto + rodape). */
|
|
77
|
+
aiParecer?: EmailAiParecer;
|
|
78
|
+
/** Botoes de acao. Multiplos viram lado-a-lado. */
|
|
79
|
+
buttons?: EmailButton[];
|
|
80
|
+
/** Texto pequeno no rodape do card (disclaimer, instrucoes extras). */
|
|
81
|
+
footerNote?: string;
|
|
82
|
+
};
|
|
83
|
+
/**
|
|
84
|
+
* Monta o HTML completo de um email no padrão Gyra+: logo no topo, card
|
|
85
|
+
* principal com greeting + título + parágrafos + highlights (chips lado a
|
|
86
|
+
* lado) + bloco "Parecer GYRA+IA" + botões, e rodapé padrão.
|
|
87
|
+
*
|
|
88
|
+
* Email-safe (tabelas + inline-style, sem flexbox, sem <style>). Funciona
|
|
89
|
+
* em Gmail, Outlook (Windows/Web/Mac), Apple Mail, Thunderbird, mobile.
|
|
90
|
+
*
|
|
91
|
+
* Todas as seções (greeting, paragraphs, highlights, aiParecer, buttons,
|
|
92
|
+
* footerNote) são **opcionais** — só `title` é obrigatório.
|
|
93
|
+
*/
|
|
94
|
+
export declare function buildEmail(input: EmailLayoutInput): string;
|
package/dist/index.css
CHANGED
|
@@ -1149,6 +1149,11 @@ video {
|
|
|
1149
1149
|
--gyra-blue-subtle: #F5F8FF;
|
|
1150
1150
|
--gyra-teal: #1FB58A;
|
|
1151
1151
|
--gyra-teal-light: #E6F7F1;
|
|
1152
|
+
/* Teal escurecido para texto/glifo sobre --gyra-teal-light (o brand teal
|
|
1153
|
+
puro da 2,36:1 ali e reprova em AA). Par medido: 4,77:1 sobre
|
|
1154
|
+
--gyra-teal-light e 5,29:1 sobre branco, na mesma faixa dos
|
|
1155
|
+
--status-*-text. */
|
|
1156
|
+
--gyra-teal-text: #0F7A60;
|
|
1152
1157
|
--gyra-black: #1D1D1F;
|
|
1153
1158
|
|
|
1154
1159
|
/* ---- Neutrals (Apple gray scale) ----------------------------------- */
|
|
@@ -7377,7 +7382,7 @@ h6 {
|
|
|
7377
7382
|
|
|
7378
7383
|
Escala: tipografia 15 (nome) / 13 (linha 2) / 12 (estado, conector, motivo);
|
|
7379
7384
|
espacamento em multiplos de 4: padding do cartao 12, gap entre linhas 2,
|
|
7380
|
-
gap entre cartoes
|
|
7385
|
+
gap entre cartoes 20 (via o conector de 44px: 24 de pilula + 10 + 10).
|
|
7381
7386
|
|
|
7382
7387
|
Armadilha do repositorio: o index.css global tem `* { outline: none
|
|
7383
7388
|
!important }` e `*:focus { box-shadow: none !important }`. Anel de foco
|
|
@@ -7432,16 +7437,38 @@ h6 {
|
|
|
7432
7437
|
display: none;
|
|
7433
7438
|
}
|
|
7434
7439
|
|
|
7440
|
+
/* Linha do tempo (modo run): o trilho fica preenchido ate a etapa atual e
|
|
7441
|
+
apagado depois. E a mesma linha de 1px, so que agora ela diz onde a
|
|
7442
|
+
execucao esta sem precisar de mais nada na tela. */
|
|
7443
|
+
.gyramais-rail-run .gyramais-rail-item.is-tracked .gyramais-rail-connector::before,
|
|
7444
|
+
.gyramais-rail-run .gyramais-rail-item.is-tracked .gyramais-rail-step::before {
|
|
7445
|
+
background: var(--gyra-blue);
|
|
7446
|
+
}
|
|
7447
|
+
/* Na etapa atual o preenchimento para no marcador (23px, a mesma altura em
|
|
7448
|
+
que a primeira etapa comeca a desenhar o trilho). */
|
|
7449
|
+
.gyramais-rail-run .gyramais-rail-item.is-current .gyramais-rail-step::before {
|
|
7450
|
+
background: linear-gradient(
|
|
7451
|
+
to bottom,
|
|
7452
|
+
var(--gyra-blue) 23px,
|
|
7453
|
+
var(--color-border-secondary) 23px
|
|
7454
|
+
);
|
|
7455
|
+
}
|
|
7456
|
+
/* A primeira etapa ja desenha a partir do marcador: se ela e a atual, nao
|
|
7457
|
+
sobra nada preenchido abaixo dele. */
|
|
7458
|
+
.gyramais-rail-run .gyramais-rail-item:first-child.is-current .gyramais-rail-step::before {
|
|
7459
|
+
background: var(--color-border-secondary);
|
|
7460
|
+
}
|
|
7461
|
+
|
|
7435
7462
|
/* ---- Conector (pilula de 24px alinhada ao trilho) ----------------------- */
|
|
7436
7463
|
|
|
7437
7464
|
.gyramais-rail-connector {
|
|
7438
7465
|
position: relative;
|
|
7439
7466
|
display: flex;
|
|
7440
|
-
min-height:
|
|
7467
|
+
min-height: 44px;
|
|
7441
7468
|
align-items: center;
|
|
7442
7469
|
gap: 6px;
|
|
7443
|
-
padding-top:
|
|
7444
|
-
padding-bottom:
|
|
7470
|
+
padding-top: 10px;
|
|
7471
|
+
padding-bottom: 10px;
|
|
7445
7472
|
}
|
|
7446
7473
|
|
|
7447
7474
|
.gyramais-rail-gate-editor {
|
|
@@ -7698,10 +7725,36 @@ h6 {
|
|
|
7698
7725
|
background-color: var(--gyra-blue-subtle);
|
|
7699
7726
|
}
|
|
7700
7727
|
|
|
7701
|
-
/*
|
|
7702
|
-
|
|
7728
|
+
/* Elevacao SO na etapa atual do modo run: sombra sutil e borda um tom mais
|
|
7729
|
+
forte. Todo o resto da esteira continua plano, senao a elevacao deixa de
|
|
7730
|
+
apontar para onde a execucao esta. */
|
|
7731
|
+
.gyramais-rail-run .gyramais-rail-step.is-active .gyramais-rail-step-card.gyramais-card {
|
|
7732
|
+
border-color: var(--color-border-strong);
|
|
7733
|
+
box-shadow: var(--shadow-dropdown);
|
|
7734
|
+
}
|
|
7735
|
+
|
|
7736
|
+
/* O unico cartao que pede acao humana: acento ambar na borda esquerda. Sem
|
|
7737
|
+
piscar e sem animacao; o botao primario "Decidir" vem do consumer. O
|
|
7738
|
+
padding esquerdo cai 2px para compensar os 2px extras da borda e o
|
|
7739
|
+
conteudo nao andar. */
|
|
7740
|
+
.gyramais-rail-run .gyramais-rail-step.is-waiting .gyramais-rail-step-card.gyramais-card {
|
|
7741
|
+
border-left-width: 3px;
|
|
7742
|
+
border-left-color: var(--color-warning);
|
|
7743
|
+
padding-left: 10px;
|
|
7744
|
+
}
|
|
7745
|
+
|
|
7746
|
+
/* Etapa que nao disparou: cartao apagado. A opacidade fica no CONTEUDO, nao no
|
|
7747
|
+
cartao inteiro: no cartao ela tambem apagava o glifo, e o #8E8E93 que vale
|
|
7748
|
+
3,26:1 sobre o branco chegava a tela como #C7C7C9, 1,69:1. Medir o token nao
|
|
7749
|
+
e medir o pixel. Borda e conteudo recebem o apagamento explicito; o glifo
|
|
7750
|
+
fica de fora e chega inteiro. */
|
|
7703
7751
|
.gyramais-rail-step.is-skipped .gyramais-rail-step-card.gyramais-card {
|
|
7704
7752
|
border-style: dashed;
|
|
7753
|
+
border-color: var(--color-border-secondary);
|
|
7754
|
+
}
|
|
7755
|
+
.gyramais-rail-step.is-skipped .gyramais-rail-step-main,
|
|
7756
|
+
.gyramais-rail-step.is-skipped .gyramais-rail-step-side,
|
|
7757
|
+
.gyramais-rail-step.is-skipped .gyramais-rail-step-content {
|
|
7705
7758
|
opacity: 0.5;
|
|
7706
7759
|
}
|
|
7707
7760
|
.gyramais-rail-step.is-disabled .gyramais-rail-step-card.gyramais-card {
|
|
@@ -7714,8 +7767,9 @@ h6 {
|
|
|
7714
7767
|
gap: 10px;
|
|
7715
7768
|
}
|
|
7716
7769
|
|
|
7717
|
-
/* Glifo do tipo: chip
|
|
7718
|
-
|
|
7770
|
+
/* Glifo do tipo: chip de 24px. O tipo vive aqui e no tooltip, nunca como
|
|
7771
|
+
texto no cartao. O fundo neutro e o fallback; cada tipo pinta o seu logo
|
|
7772
|
+
abaixo. */
|
|
7719
7773
|
.gyramais-rail-step-glyph {
|
|
7720
7774
|
display: inline-flex;
|
|
7721
7775
|
height: 24px;
|
|
@@ -7728,10 +7782,75 @@ h6 {
|
|
|
7728
7782
|
color: var(--color-text-secondary);
|
|
7729
7783
|
margin-top: -2px;
|
|
7730
7784
|
}
|
|
7731
|
-
|
|
7785
|
+
|
|
7786
|
+
/* Cor semantica por FAMILIA de consulta, nao por tipo. Duas cores, e as duas
|
|
7787
|
+
se distinguem de verdade:
|
|
7788
|
+
azul = analise (Analise e Aprofundar consultam o mesmo relatorio),
|
|
7789
|
+
teal = vinculos (consulta OUTROS documentos).
|
|
7790
|
+
A cor e REDUNDANTE de proposito: o glifo e o tooltip continuam carregando o
|
|
7791
|
+
tipo, entao quem nao distingue as cores nao perde informacao nenhuma.
|
|
7792
|
+
|
|
7793
|
+
Por que Aprofundar NAO ganha uma cor propria (intencional, medido): o par
|
|
7794
|
+
#EEF1FB x #EBF4FF tinha dE2000 = 2,7, no limiar de percepcao (JND ~2,3), ou
|
|
7795
|
+
seja, prometia quatro sinais e entregava tres. Nao ha no design system um
|
|
7796
|
+
quarto fundo diluido que fique a dE >= 8 dos outros dois sem roubar a cor de
|
|
7797
|
+
um estado (verde/vermelho). Entre inventar um sinal que ninguem enxerga e
|
|
7798
|
+
assumir a familia, assumimos a familia: uma camada E uma analise a mais
|
|
7799
|
+
sobre o mesmo relatorio, e o glifo (camadas x alvo) separa as duas.
|
|
7800
|
+
Medido (dE2000 entre os fundos): azul x teal 10,7; azul x neutro 3,8 (o
|
|
7801
|
+
neutro nao e um sinal, e a ausencia dele).
|
|
7802
|
+
|
|
7803
|
+
Por que o Checkpoint perdeu o ambar: no resto do produto ambar significa
|
|
7804
|
+
ESTADO ("aguardando"). Um checkpoint parado ficava ambar por dois motivos
|
|
7805
|
+
diferentes (tipo e estado) no mesmo cartao, sem como saber qual. O
|
|
7806
|
+
checkpoint tambem nao consulta fonte nenhuma, entao nao pertence a familia
|
|
7807
|
+
nenhuma: chip neutro, e o ambar volta a significar so estado.
|
|
7808
|
+
Contraste medido do glifo sobre o proprio chip: azul 4,90:1, teal 4,77:1,
|
|
7809
|
+
neutro 5,50:1 (todos acima de 4,5:1). */
|
|
7810
|
+
.gyramais-rail-step.is-analysis .gyramais-rail-step-glyph,
|
|
7811
|
+
.gyramais-rail-step.is-deepen .gyramais-rail-step-glyph {
|
|
7732
7812
|
background-color: var(--gyra-blue-light);
|
|
7733
7813
|
color: var(--gyra-blue);
|
|
7734
7814
|
}
|
|
7815
|
+
/* O chip neutro do Checkpoint ganha CONTORNO, nao outra cor: sobre o cartao
|
|
7816
|
+
branco o fundo #F5F5F7 esta a dE2000 2,25 (no limiar de percepcao) e quase
|
|
7817
|
+
nao lia como chip. A borda #E8E8ED e uma aresta, nao um pigmento: resolve a
|
|
7818
|
+
leitura sem mexer nas distancias medidas entre os fundos (azul x neutro
|
|
7819
|
+
3,8) nem no contraste do glifo (5,50:1). */
|
|
7820
|
+
.gyramais-rail-step.is-checkpoint .gyramais-rail-step-glyph {
|
|
7821
|
+
border-width: 1px;
|
|
7822
|
+
border-color: var(--color-border-secondary);
|
|
7823
|
+
background-color: var(--color-gray-50);
|
|
7824
|
+
color: var(--color-text-secondary);
|
|
7825
|
+
}
|
|
7826
|
+
.gyramais-rail-step.is-relationships .gyramais-rail-step-glyph {
|
|
7827
|
+
background-color: var(--gyra-teal-light);
|
|
7828
|
+
color: var(--gyra-teal-text);
|
|
7829
|
+
}
|
|
7830
|
+
.gyramais-rail-step.is-result .gyramais-rail-step-glyph,
|
|
7831
|
+
.gyramais-rail-step.is-offer_review .gyramais-rail-step-glyph,
|
|
7832
|
+
.gyramais-rail-step.is-authority .gyramais-rail-step-glyph {
|
|
7833
|
+
background-color: var(--gyra-blue-light);
|
|
7834
|
+
color: var(--gyra-blue);
|
|
7835
|
+
}
|
|
7836
|
+
.gyramais-rail-step.is-committee .gyramais-rail-step-glyph {
|
|
7837
|
+
color: #5945b8;
|
|
7838
|
+
background: #f0edff;
|
|
7839
|
+
}
|
|
7840
|
+
/* Etapa que nao rodou nao merece o pigmento do tipo: o cartao inteiro ja
|
|
7841
|
+
esta translucido e a cor cheia so competiria com quem rodou.
|
|
7842
|
+
|
|
7843
|
+
E ela tambem nao herda o chip NEUTRO: o neutro e o tipo Checkpoint, e o
|
|
7844
|
+
mesmo fundo em dois papeis fazia o cinza significar duas coisas. Aqui o chip
|
|
7845
|
+
simplesmente nao existe (sem fundo, sem contorno), que e o que a etapa pulada
|
|
7846
|
+
e: ausencia. O glifo assenta no branco do cartao e, com a opacidade fora do
|
|
7847
|
+
cartao (acima), o #8E8E93 chega a tela inteiro: 3,26:1 medido no pixel
|
|
7848
|
+
renderizado, e nao no token (WCAG 1.4.11 pede 3:1). */
|
|
7849
|
+
.gyramais-rail-step.is-skipped .gyramais-rail-step-glyph {
|
|
7850
|
+
border-width: 0px;
|
|
7851
|
+
background-color: transparent;
|
|
7852
|
+
color: var(--color-text-tertiary);
|
|
7853
|
+
}
|
|
7735
7854
|
|
|
7736
7855
|
.gyramais-rail-step-main {
|
|
7737
7856
|
display: flex;
|
|
@@ -7848,7 +7967,7 @@ h6 {
|
|
|
7848
7967
|
padding-left: 6px;
|
|
7849
7968
|
padding-right: 4px;
|
|
7850
7969
|
font-size: var(--fs-subheadline);
|
|
7851
|
-
font-weight:
|
|
7970
|
+
font-weight: 400;
|
|
7852
7971
|
line-height: 18px;
|
|
7853
7972
|
color: var(--color-text-primary);
|
|
7854
7973
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
@@ -7857,6 +7976,20 @@ h6 {
|
|
|
7857
7976
|
animation-duration: 150ms;
|
|
7858
7977
|
font-family: inherit;
|
|
7859
7978
|
}
|
|
7979
|
+
/* Mesmo papel, mesmo peso nos dois modos: a linha da politica e 13/400 no
|
|
7980
|
+
edit (aqui) e 13/400 no run (`.gyramais-rail-step-text`). O que diz que
|
|
7981
|
+
este e clicavel e o chevron e o hover, nao meio grau de peso. */
|
|
7982
|
+
|
|
7983
|
+
/* Quando o nome da etapa E a politica, o seletor sobe para a linha 1 e passa
|
|
7984
|
+
a ser o titulo: 15/600, a mesma tipografia de `.gyramais-rail-step-name`.
|
|
7985
|
+
Nao ha dois textos, ha um so, e ele e clicavel. */
|
|
7986
|
+
.gyramais-rail-step-line1.is-policy-title .gyramais-rail-inline-select {
|
|
7987
|
+
height: 20px;
|
|
7988
|
+
font-size: var(--fs-body);
|
|
7989
|
+
font-weight: 600;
|
|
7990
|
+
line-height: 20px;
|
|
7991
|
+
letter-spacing: var(--tracking-normal);
|
|
7992
|
+
}
|
|
7860
7993
|
.gyramais-rail-inline-select:hover:not(:disabled) {
|
|
7861
7994
|
background-color: var(--color-surface-active);
|
|
7862
7995
|
}
|