ui-optago 1.0.0 → 1.0.1

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.
Files changed (5) hide show
  1. package/README.md +14 -2
  2. package/package.json +1 -1
  3. package/ui-optago.css +21 -12
  4. package/ui-optago.html +60 -29
  5. package/ui-optago.js +1 -1
package/README.md CHANGED
@@ -1,6 +1,9 @@
1
1
  # UI Óptago
2
2
 
3
- Design System da **Óptago** — componentes UI em **CSS puro** + **JS vanilla**, sem Tailwind e sem build obrigatório. Tema escuro por padrão, tema claro automático, verde-lima `#C0FF6B` como cor de destaque e o octógono da marca como motivo visual.
3
+ [![npm](https://img.shields.io/npm/v/ui-optago.svg)](https://www.npmjs.com/package/ui-optago)
4
+ [![license](https://img.shields.io/npm/l/ui-optago.svg)](./LICENSE)
5
+
6
+ Design System da **[Óptago](https://optago.com.br)** — componentes UI em **CSS puro** + **JS vanilla**, sem Tailwind e sem build obrigatório. Tema escuro por padrão, tema claro automático, verde-lima `#C0FF6B` como cor de destaque e o octógono da marca como motivo visual.
4
7
 
5
8
  ## Instalação
6
9
 
@@ -15,13 +18,22 @@ npm install ui-optago
15
18
  <script src="node_modules/ui-optago/ui-optago.js"></script>
16
19
  ```
17
20
 
18
- **Via CDN (após publicado no npm):**
21
+ **Via CDN** (não precisa instalar nada — adicione ao `<head>`):
19
22
 
20
23
  ```html
21
24
  <link rel="stylesheet" href="https://unpkg.com/ui-optago/ui-optago.css">
22
25
  <script src="https://unpkg.com/ui-optago/ui-optago.js"></script>
23
26
  ```
24
27
 
28
+ Em produção, fixe a versão para não sofrer quebras em atualizações:
29
+
30
+ ```html
31
+ <link rel="stylesheet" href="https://unpkg.com/ui-optago@1.0.0/ui-optago.css">
32
+ <script src="https://unpkg.com/ui-optago@1.0.0/ui-optago.js"></script>
33
+ ```
34
+
35
+ > Também funciona via jsDelivr: `https://cdn.jsdelivr.net/npm/ui-optago/ui-optago.css`
36
+
25
37
  **Ou copie os arquivos direto** (`ui-optago.css` e `ui-optago.js`) para o seu projeto:
26
38
 
27
39
  ```html
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ui-optago",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Design System Óptago — componentes UI em CSS puro + JS vanilla, com tema claro/escuro, verde-lima (#C0FF6B) e app shell com sidebar colapsável.",
5
5
  "author": "Óptago <cowork@optago.com.br> (https://optago.com.br)",
6
6
  "license": "MIT",
package/ui-optago.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* ============================================================================
2
- UI ÓPTAGO — Design System v1.0
2
+ UI ÓPTAGO — Design System v1.0.1
3
3
  CSS puro, sem dependências. Tema escuro por padrão.
4
4
  Para tema claro: adicione a classe "light" ao <html> (o ui-optago.js
5
5
  gerencia isso automaticamente via localStorage).
@@ -206,6 +206,7 @@ html.light :focus-visible {
206
206
  height: 100vh;
207
207
  height: 100dvh;
208
208
  overflow: hidden;
209
+ overflow: clip;
209
210
  }
210
211
 
211
212
  .op-app-body {
@@ -214,6 +215,11 @@ html.light :focus-visible {
214
215
  display: flex;
215
216
  flex-direction: column;
216
217
  position: relative;
218
+ /* "clip" impede que .op-glow (ou qualquer filho absoluto) vaze para fora e
219
+ torne o documento rolável — sem isso, clicar em âncoras rola o viewport
220
+ e esconde o header. Nota: overflow no <body> é propagado ao viewport
221
+ pelo navegador, então o clip do .op-app sozinho não resolve. */
222
+ overflow: clip;
217
223
  }
218
224
 
219
225
  /* Header */
@@ -258,13 +264,8 @@ html.light .op-header { box-shadow: 0 8px 24px -14px rgba(15,23,42,.18); }
258
264
  display: flex; align-items: center; justify-content: center;
259
265
  flex-shrink: 0;
260
266
  }
261
- .op-brand-mark::after {
262
- content: "";
263
- width: 10px; height: 10px;
264
- background: #000;
265
- -webkit-clip-path: var(--op-oct); clip-path: var(--op-oct);
266
- }
267
- html.light .op-brand-mark { background: #000; }
267
+
268
+
268
269
  html.light .op-brand-mark::after { background: var(--op-accent); }
269
270
  .op-brand-name {
270
271
  font-family: var(--op-font-display);
@@ -1547,7 +1548,7 @@ html.light .op-modal { background: rgba(15,23,42,.5); }
1547
1548
  -webkit-clip-path: var(--op-oct); clip-path: var(--op-oct);
1548
1549
  flex-shrink: 0;
1549
1550
  }
1550
- html.light .op-section-head i { color: #3F6212; background: #EDFBD4; }
1551
+ html.light .op-section-head i { color: #3F6212; background: var(--op-accent); }
1551
1552
  .op-section-head h2 { margin: 0; font-size: 1.5rem; }
1552
1553
 
1553
1554
  /* ----------------------------------------------------------------------------
@@ -1567,13 +1568,21 @@ html.light .op-section-head i { color: #3F6212; background: #EDFBD4; }
1567
1568
  pointer-events: none;
1568
1569
  z-index: 0;
1569
1570
  }
1570
- html.light .op-glow { opacity: .22; }
1571
1571
  .op-glow-info { background: var(--op-info); }
1572
- html.light .op-glow-info { opacity: .14; }
1573
1572
  .op-glow-sm { width: 260px; height: 200px; }
1574
1573
  .op-glow-lg { width: 700px; height: 460px; }
1575
1574
  .op-glow-strong { opacity: .12; }
1576
- html.light .op-glow-strong { opacity: .32; }
1575
+
1576
+ /* No tema claro o verde-lima #C0FF6B é claro demais para aparecer sobre fundo
1577
+ branco com opacidade baixa. Usamos um verde mais saturado + mix-blend-mode:
1578
+ multiply (tinge o fundo em vez de clarear) para o glow ficar visível. */
1579
+ html.light .op-glow {
1580
+ background: #9AE600;
1581
+ opacity: .40;
1582
+ mix-blend-mode: multiply;
1583
+ }
1584
+ html.light .op-glow-info { background: #3B82F6; opacity: .28; }
1585
+ html.light .op-glow-strong { opacity: .55; }
1577
1586
 
1578
1587
  /* ----------------------------------------------------------------------------
1579
1588
  20c. MODAIS — VARIANTES EXTRAS
package/ui-optago.html CHANGED
@@ -3,9 +3,29 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>UI Óptago — Design System</title>
7
6
 
8
- <!-- UI Óptago: o JS injeta fontes e ícones automaticamente e aplica o tema salvo -->
7
+ <!-- SEO -->
8
+ <title>UI Óptago | Design System em CSS puro & JS vanilla</title>
9
+ <meta name="description" content="Design System da Óptago: biblioteca de componentes UI em CSS puro e JavaScript vanilla, com tema claro/escuro, verde-lima #C0FF6B e app shell com sidebar colapsável. Sem Tailwind, sem build.">
10
+ <meta name="keywords" content="design system, ui, css puro, componentes, vanilla js, dark mode, óptago">
11
+ <meta name="author" content="Óptago">
12
+ <meta name="theme-color" content="#050505" media="(prefers-color-scheme: dark)">
13
+ <meta name="theme-color" content="#EEF2F7" media="(prefers-color-scheme: light)">
14
+ <link rel="canonical" href="https://optago.com.br/">
15
+
16
+ <!-- Open Graph / redes sociais -->
17
+ <meta property="og:type" content="website">
18
+ <meta property="og:title" content="UI Óptago Design System">
19
+ <meta property="og:description" content="Componentes UI em CSS puro e JS vanilla, com tema claro/escuro e o verde-lima da marca Óptago.">
20
+ <meta property="og:locale" content="pt_BR">
21
+ <meta property="og:site_name" content="Óptago">
22
+ <meta name="twitter:card" content="summary_large_image">
23
+ <meta name="twitter:title" content="UI Óptago Design System">
24
+ <meta name="twitter:description" content="Componentes UI em CSS puro e JS vanilla, com tema claro/escuro e o verde-lima da marca Óptago.">
25
+
26
+ <!-- Favicon: octógono verde-lima da marca, embutido em SVG (sem arquivo externo) -->
27
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><polygon points=%2230,4 70,4 96,30 96,70 70,96 30,96 4,70 4,30%22 fill=%22%23C0FF6B%22/></svg>">
28
+
9
29
  <link rel="stylesheet" href="ui-optago.css">
10
30
  <script src="ui-optago.js"></script>
11
31
  </head>
@@ -15,7 +35,7 @@
15
35
  <!-- ==================== COLUNA PRINCIPAL (header + main + footer) ==================== -->
16
36
  <div class="op-app-body">
17
37
 
18
- <!-- Glows de fundo (verde-lima desfocado) — ficam atrás do conteúdo -->
38
+ <!-- Glows de fundo (verde-lima desfocado) ficam atrás do conteúdo -->
19
39
  <div class="op-glow op-glow-lg" style="top:-140px; left:22%;"></div>
20
40
  <div class="op-glow op-glow-sm" style="bottom:10%; left:-80px;"></div>
21
41
  <div class="op-glow op-glow-info op-glow-sm" style="bottom:-60px; right:8%;"></div>
@@ -29,8 +49,8 @@
29
49
  </div>
30
50
  <div class="op-header-divider"></div>
31
51
  <div class="op-header-group">
32
- <strong style="font-family:var(--op-font-display); font-size:.875rem;">UI Components</strong>
33
- <span class="op-badge op-badge-brand op-badge-pill"><span class="op-dot op-dot-pulse"></span>v1.0</span>
52
+ <strong style="font-family:var(--op-font-display); font-size:.875rem;">UI</strong>
53
+ <span class="op-badge op-badge-brand op-badge-pill"><span class="op-dot op-dot-pulse"></span>v1.0.1</span>
34
54
  </div>
35
55
  </div>
36
56
  <div class="op-header-group">
@@ -38,6 +58,7 @@
38
58
  <i class="ph ph-moon op-icon-moon"></i>
39
59
  <i class="ph ph-sun op-icon-sun" style="display:none"></i>
40
60
  </button>
61
+
41
62
  <!-- Hamburguer: aparece só no mobile para abrir o drawer -->
42
63
  <button class="op-btn op-btn-icon op-mobile-only" data-op-sidebar-mobile>
43
64
  <i class="ph ph-list"></i>
@@ -52,11 +73,21 @@
52
73
  <section class="op-mb-4">
53
74
  <h1>Design System Óptago</h1>
54
75
  <p class="op-text-muted" style="max-width:640px;">
55
- Biblioteca completa de componentes em <strong>CSS puro</strong> — sem Tailwind, sem build.
76
+ Biblioteca completa de componentes em <strong>CSS puro</strong> sem Tailwind, sem build.
56
77
  Inclua <code>ui-optago.css</code> e <code>ui-optago.js</code> no seu projeto e use as classes
57
78
  com prefixo <code>op-</code>. Em cada bloco abaixo, use <strong>Copiar</strong> para levar o
58
79
  HTML direto pro seu projeto, ou <strong>Ver código</strong> para inspecionar.
59
80
  </p>
81
+
82
+ <div class="op-alert op-alert-info op-mt-2 ">
83
+ <i class="ph ph-cloud-arrow-down"></i>
84
+ <div style="min-width:0; flex:1;">
85
+ <p class="op-alert-title">Usar via CDN</p>
86
+ <p class="op-alert-text op-mb-1">Sem baixar nada adicione as duas linhas ao <code>&lt;head&gt;</code>:</p>
87
+ <pre class="op-demo-code is-visible" style="border:1px solid var(--op-border); border-radius:var(--op-radius-sm); margin:0;">&lt;link rel="stylesheet" href="https://unpkg.com/ui-optago/ui-optago.css"&gt;
88
+ &lt;script src="https://unpkg.com/ui-optago/ui-optago.js"&gt;&lt;/script&gt;</pre>
89
+ </div>
90
+ </div>
60
91
  </section>
61
92
 
62
93
  <!-- ==================== 1. CORES ==================== -->
@@ -68,19 +99,19 @@
68
99
  <div class="op-grid-4 op-mb-4">
69
100
  <div class="op-card op-card-hover" style="padding:0; overflow:hidden;">
70
101
  <div style="height:72px; background:#000;"></div>
71
- <div style="padding:.875rem 1rem;"><strong>Preto — Base</strong><br><code class="op-text-muted op-text-xs">#000000</code></div>
102
+ <div style="padding:.875rem 1rem;"><strong>Preto Base</strong><br><code class="op-text-muted op-text-xs">#000000</code></div>
72
103
  </div>
73
104
  <div class="op-card op-card-hover" style="padding:0; overflow:hidden;">
74
105
  <div style="height:72px; background:#C0FF6B;"></div>
75
- <div style="padding:.875rem 1rem;"><strong>Verde-lima — Destaque</strong><br><code class="op-text-muted op-text-xs">#C0FF6B · --op-accent</code></div>
106
+ <div style="padding:.875rem 1rem;"><strong>Verde-lima Destaque</strong><br><code class="op-text-muted op-text-xs">#C0FF6B · --op-accent</code></div>
76
107
  </div>
77
108
  <div class="op-card op-card-hover" style="padding:0; overflow:hidden;">
78
109
  <div style="height:72px; background:#D5D5D5;"></div>
79
- <div style="padding:.875rem 1rem;"><strong>Cinza-claro — Texto</strong><br><code class="op-text-muted op-text-xs">#D5D5D5 · --op-text</code></div>
110
+ <div style="padding:.875rem 1rem;"><strong>Cinza-claro Texto</strong><br><code class="op-text-muted op-text-xs">#D5D5D5 · --op-text</code></div>
80
111
  </div>
81
112
  <div class="op-card op-card-hover" style="padding:0; overflow:hidden;">
82
113
  <div style="height:72px; background:#656565;"></div>
83
- <div style="padding:.875rem 1rem;"><strong>Cinza-chumbo — Apoio</strong><br><code class="op-text-muted op-text-xs">#656565 · --op-muted</code></div>
114
+ <div style="padding:.875rem 1rem;"><strong>Cinza-chumbo Apoio</strong><br><code class="op-text-muted op-text-xs">#656565 · --op-muted</code></div>
84
115
  </div>
85
116
  </div>
86
117
 
@@ -116,14 +147,14 @@
116
147
  </div>
117
148
  <div class="op-demo">
118
149
  <div class="op-demo-preview" id="d-tipografia">
119
- <h1>Heading 1 — Chakra Petch</h1>
120
- <h2>Heading 2 — Seções</h2>
121
- <h3>Heading 3 — Cards e blocos</h3>
122
- <h4>Heading 4 — Subtítulos</h4>
150
+ <h1>Heading 1 Chakra Petch</h1>
151
+ <h2>Heading 2 Seções</h2>
152
+ <h3>Heading 3 Cards e blocos</h3>
153
+ <h4>Heading 4 Subtítulos</h4>
123
154
  <p>Parágrafo padrão em <strong>Inter</strong>. Criamos e mantemos produtos próprios e sob medida,
124
155
  sempre com a mesma régua: proteger dados, reduzir atrito e manter tudo no ar.</p>
125
156
  <p class="op-text-muted">Texto secundário / muted para descrições e apoio.</p>
126
- <p class="op-text-mono op-text-sm">JetBrains Mono — dados técnicos, códigos e rótulos. <span class="op-text-accent">optago.com.br · 0 cookies</span></p>
157
+ <p class="op-text-mono op-text-sm">JetBrains Mono dados técnicos, códigos e rótulos. <span class="op-text-accent">optago.com.br · 0 cookies</span></p>
127
158
  <p>Atalho de teclado: <kbd>Ctrl</kbd> + <kbd>K</kbd> · código inline: <code>--op-accent: #C0FF6B</code></p>
128
159
  </div>
129
160
  <div class="op-demo-bar">
@@ -318,7 +349,7 @@
318
349
  <label class="op-switch"><input type="checkbox"> <span>Modo manutenção</span></label>
319
350
  </div>
320
351
  <div class="op-field" style="max-width:320px;">
321
- <label class="op-label" for="f-range">Range — 75%</label>
352
+ <label class="op-label" for="f-range">Range 75%</label>
322
353
  <input class="op-range" id="f-range" type="range" min="0" max="100" value="75">
323
354
  </div>
324
355
  </div>
@@ -412,12 +443,12 @@
412
443
  </div>
413
444
  </div>
414
445
 
415
- <h3 class="op-mt-3 op-mb-2"><i class="ph ph-lightning op-text-accent"></i> Tabela avançada — Tabulator</h3>
446
+ <h3 class="op-mt-3 op-mb-2"><i class="ph ph-lightning op-text-accent"></i> Tabela avançada Tabulator</h3>
416
447
  <p class="op-text-muted op-text-sm op-mb-2">
417
448
  Para tabelas com ordenação, paginação e filtros, use a variante com
418
449
  <a href="https://tabulator.info" target="_blank" rel="noopener">Tabulator</a> e tema Óptago.
419
450
  A biblioteca é carregada sob demanda: <code>OptagoUI.tabulator('#minhaTabela', opções)</code>
420
- — clique nos cabeçalhos para ordenar.
451
+ clique nos cabeçalhos para ordenar.
421
452
  </p>
422
453
  <div class="op-demo">
423
454
  <div class="op-demo-preview" id="d-tabulator-wrap">
@@ -638,7 +669,7 @@ OptagoUI.tabulator('#minhaTabela', {
638
669
  <p class="op-text-muted" style="margin:0;">Ajuste preferências, chaves de API e integrações.</p>
639
670
  </div>
640
671
  <div class="op-tab-panel" data-op-tab-panel="logs">
641
- <p class="op-text-mono op-text-sm" style="margin:0;">[12:04:31] INFO — serviço reiniciado com sucesso</p>
672
+ <p class="op-text-mono op-text-sm" style="margin:0;">[12:04:31] INFO serviço reiniciado com sucesso</p>
642
673
  </div>
643
674
  </div>
644
675
  <div data-op-tab-group="exemplo2" class="op-mb-3">
@@ -704,7 +735,7 @@ OptagoUI.tabulator('#minhaTabela', {
704
735
  <div class="op-accordion">
705
736
  <details open>
706
737
  <summary>O que é a Óptago?</summary>
707
- <div class="op-accordion-body">Criamos e mantemos produtos próprios (Comanda Rápida, Stats Rails, Brasil Buscador) e prestamos serviços sob medida — sempre com a mesma régua: segurança, privacidade e performance.</div>
738
+ <div class="op-accordion-body">Criamos e mantemos produtos próprios (Comanda Rápida, Stats Rails, Brasil Buscador) e prestamos serviços sob medida sempre com a mesma régua: segurança, privacidade e performance.</div>
708
739
  </details>
709
740
  <details>
710
741
  <summary>O site usa cookies?</summary>
@@ -829,7 +860,7 @@ OptagoUI.tabulator('#minhaTabela', {
829
860
  <span class="op-timeline-marker is-warning"></span>
830
861
  <span class="op-timeline-time">Hoje · 11:20</span>
831
862
  <p class="op-timeline-title">Alerta de uso de disco</p>
832
- <p class="op-timeline-text">Volume principal atingiu 85% — limpeza automática agendada.</p>
863
+ <p class="op-timeline-text">Volume principal atingiu 85% limpeza automática agendada.</p>
833
864
  </li>
834
865
  <li class="op-timeline-item">
835
866
  <span class="op-timeline-marker is-danger"></span>
@@ -856,22 +887,22 @@ OptagoUI.tabulator('#minhaTabela', {
856
887
  <section id="efeitos" class="op-mb-4" style="scroll-margin-top:1rem;">
857
888
  <div class="op-section-head">
858
889
  <i class="ph ph-sparkle"></i>
859
- <h2>Efeitos — Glow verde-lima</h2>
890
+ <h2>Efeitos Glow verde-lima</h2>
860
891
  </div>
861
892
  <p class="op-text-muted op-text-sm op-mb-2">
862
- Manchas desfocadas de verde-lima para dar profundidade ao fundo — esta própria página usa três
893
+ Manchas desfocadas de verde-lima para dar profundidade ao fundo esta própria página usa três
863
894
  (topo e cantos). Posicione <code>.op-glow</code> dentro de um container com
864
895
  <code>position:relative</code>; o conteúdo por cima deve ter <code>z-index</code> maior.
865
896
  Variações: <code>op-glow-sm</code>, <code>op-glow-lg</code>, <code>op-glow-strong</code>, <code>op-glow-info</code>.
866
897
  </p>
867
898
  <div class="op-demo">
868
899
  <div class="op-demo-preview" style="padding:0;">
869
- <div id="d-efeitos" style="position:relative; overflow:hidden; padding:3.5rem 2rem; border-radius:0;">
900
+ <div id="d-efeitos" style="position:relative; overflow:clip; padding:3.5rem 2rem; border-radius:0;">
870
901
  <div class="op-glow op-glow-strong" style="top:-120px; left:-60px;"></div>
871
902
  <div class="op-glow op-glow-sm op-glow-strong" style="bottom:-100px; right:10%;"></div>
872
903
  <div style="position:relative; z-index:1; text-align:center; max-width:520px; margin:0 auto;">
873
904
  <h2 style="margin-bottom:.5rem;">Hero com glow de fundo</h2>
874
- <p class="op-text-muted op-mb-2">Segurança, privacidade e performance — a mesma régua em todos os produtos.</p>
905
+ <p class="op-text-muted op-mb-2">Segurança, privacidade e performance a mesma régua em todos os produtos.</p>
875
906
  <button class="op-btn op-btn-primary"><i class="ph ph-rocket-launch"></i> Começar agora</button>
876
907
  </div>
877
908
  </div>
@@ -943,13 +974,13 @@ OptagoUI.tabulator('#minhaTabela', {
943
974
  <section id="layout" class="op-mb-4" style="scroll-margin-top:1rem;">
944
975
  <div class="op-section-head">
945
976
  <i class="ph ph-layout"></i>
946
- <h2>Layout — App Shell</h2>
977
+ <h2>Layout App Shell</h2>
947
978
  </div>
948
979
  <div class="op-alert op-alert-info op-mb-2">
949
980
  <i class="ph ph-info"></i>
950
981
  <div>
951
982
  <p class="op-alert-title">Esta própria página usa o app shell</p>
952
- <p class="op-alert-text">Header, footer e sidebar (direita) são fixos — apenas o conteúdo central rola. A sidebar colapsa no desktop (só ícones + tooltip) e vira drawer no mobile.</p>
983
+ <p class="op-alert-text">Header, footer e sidebar (direita) são fixos apenas o conteúdo central rola. A sidebar colapsa no desktop (só ícones + tooltip) e vira drawer no mobile.</p>
953
984
  </div>
954
985
  </div>
955
986
  <div class="op-demo">
@@ -979,8 +1010,8 @@ OptagoUI.tabulator('#minhaTabela', {
979
1010
 
980
1011
  <!-- FOOTER (fixo) -->
981
1012
  <footer class="op-footer">
982
- <span>ÓPTAGO © 2026 — Design System v1.0</span>
983
- <span>optago.com.br · 0 cookies</span>
1013
+ <span>ÓPTAGO © 2026 Design System v1.0.1</span>
1014
+ <span><a href="https://optago.com.br" target="_blank" rel="noopener">optago.com.br</a> · 0 cookies</span>
984
1015
  </footer>
985
1016
  </div>
986
1017
 
package/ui-optago.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /* ============================================================================
2
- UI ÓPTAGO — Design System v1.0 (JavaScript)
2
+ UI ÓPTAGO — Design System v1.0.1 (JavaScript)
3
3
  Sem dependências de build. Carregue no <head> SEM defer para evitar
4
4
  flash de tema errado (FOUC):
5
5