fokus-styles 2.5.0 → 2.6.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 (181) hide show
  1. package/README.md +20 -2
  2. package/package.json +19 -16
  3. package/packages/fokus-cli/README.md +5 -0
  4. package/packages/fokus-icons/README.md +5 -0
  5. package/packages/fokus-react/README.md +5 -0
  6. package/CHANGELOG.md +0 -940
  7. package/dist/css/components.css.map +0 -1
  8. package/dist/css/components.min.css.map +0 -1
  9. package/dist/css/fokus-components.css.map +0 -1
  10. package/dist/css/fokus-components.min.css.map +0 -1
  11. package/dist/css/fokus-core.css.map +0 -1
  12. package/dist/css/fokus-core.min.css.map +0 -1
  13. package/dist/css/fokus-dark.css.map +0 -1
  14. package/dist/css/fokus-dark.min.css.map +0 -1
  15. package/dist/css/fokus-rtl.css.map +0 -1
  16. package/dist/css/fokus-rtl.min.css.map +0 -1
  17. package/dist/css/fokus-utilities.css.map +0 -1
  18. package/dist/css/fokus-utilities.min.css.map +0 -1
  19. package/dist/css/fokus.css.map +0 -1
  20. package/dist/css/fokus.min.css.map +0 -1
  21. package/dist/css/fonts.css.map +0 -1
  22. package/dist/css/fonts.min.css.map +0 -1
  23. package/dist/css/forms.css.map +0 -1
  24. package/dist/css/forms.min.css.map +0 -1
  25. package/dist/css/helpers.css.map +0 -1
  26. package/dist/css/helpers.min.css.map +0 -1
  27. package/dist/css/layout.css.map +0 -1
  28. package/dist/css/layout.min.css.map +0 -1
  29. package/dist/js/fokus.js.map +0 -7
  30. package/dist/js/fokus.min.js.map +0 -7
  31. package/docs/README.md +0 -86
  32. package/docs/comparison.md +0 -124
  33. package/docs/components/accordion.md +0 -104
  34. package/docs/components/alert-dialog.md +0 -99
  35. package/docs/components/alert.md +0 -104
  36. package/docs/components/avatar.md +0 -13
  37. package/docs/components/badge.md +0 -101
  38. package/docs/components/breadcrumb.md +0 -93
  39. package/docs/components/button-group.md +0 -13
  40. package/docs/components/button.md +0 -98
  41. package/docs/components/card.md +0 -111
  42. package/docs/components/carousel.md +0 -167
  43. package/docs/components/checkbox.md +0 -110
  44. package/docs/components/close-button.md +0 -13
  45. package/docs/components/code.md +0 -13
  46. package/docs/components/collapse.md +0 -78
  47. package/docs/components/combobox.md +0 -123
  48. package/docs/components/command-palette.md +0 -131
  49. package/docs/components/datatable.md +0 -173
  50. package/docs/components/datepicker.md +0 -137
  51. package/docs/components/divider.md +0 -57
  52. package/docs/components/dropdown.md +0 -103
  53. package/docs/components/empty-state.md +0 -65
  54. package/docs/components/file-upload-advanced.md +0 -116
  55. package/docs/components/file-upload.md +0 -93
  56. package/docs/components/icon-link.md +0 -13
  57. package/docs/components/input-group.md +0 -73
  58. package/docs/components/input.md +0 -90
  59. package/docs/components/list-group.md +0 -13
  60. package/docs/components/modal.md +0 -120
  61. package/docs/components/navbar.md +0 -74
  62. package/docs/components/nested-menu.md +0 -90
  63. package/docs/components/notification-center.md +0 -116
  64. package/docs/components/offcanvas.md +0 -102
  65. package/docs/components/pagination.md +0 -145
  66. package/docs/components/placeholder.md +0 -13
  67. package/docs/components/popover.md +0 -118
  68. package/docs/components/progress.md +0 -126
  69. package/docs/components/radio.md +0 -80
  70. package/docs/components/range.md +0 -83
  71. package/docs/components/rating.md +0 -91
  72. package/docs/components/ratio.md +0 -13
  73. package/docs/components/responsive.md +0 -19
  74. package/docs/components/scrollspy.md +0 -13
  75. package/docs/components/segmented-control.md +0 -82
  76. package/docs/components/select.md +0 -89
  77. package/docs/components/skeleton.md +0 -70
  78. package/docs/components/stepper.md +0 -107
  79. package/docs/components/switch.md +0 -97
  80. package/docs/components/table.md +0 -90
  81. package/docs/components/tabs.md +0 -104
  82. package/docs/components/tag.md +0 -144
  83. package/docs/components/tile.md +0 -112
  84. package/docs/components/timeline.md +0 -78
  85. package/docs/components/toast.md +0 -108
  86. package/docs/components/tooltip.md +0 -113
  87. package/docs/components/tree-view.md +0 -118
  88. package/docs/contributing/contributing.md +0 -18
  89. package/docs/getting-started/installation.md +0 -70
  90. package/docs/getting-started/usage.md +0 -105
  91. package/docs/guides/accessibility.md +0 -109
  92. package/docs/guides/charts.md +0 -73
  93. package/docs/guides/dark-mode.md +0 -90
  94. package/docs/guides/icons.md +0 -99
  95. package/docs/guides/javascript-api.md +0 -9
  96. package/docs/guides/layout-advanced.md +0 -118
  97. package/docs/guides/migration-clarus-to-fokus.md +0 -48
  98. package/docs/guides/migration-external.md +0 -123
  99. package/docs/guides/migration-v1.md +0 -63
  100. package/docs/guides/print.md +0 -30
  101. package/docs/guides/rtl-and-system-preferences.md +0 -28
  102. package/docs/guides/theming.md +0 -140
  103. package/docs/guides/utility-api.md +0 -9
  104. package/docs/prompts/prompt-plan.md +0 -45
  105. package/docs/reference/accessibility-matrix.md +0 -77
  106. package/docs/reference/browser-support.md +0 -75
  107. package/docs/reference/contrast-report.md +0 -54
  108. package/docs/reference/definitions.md +0 -868
  109. package/docs/reference/design-tokens.md +0 -208
  110. package/docs/reference/scss-architecture.md +0 -227
  111. package/docs/reference/size-baseline.json +0 -34
  112. package/docs/reference/stability.md +0 -89
  113. package/docs/showcase.md +0 -25
  114. package/mockup/README.md +0 -41
  115. package/mockup/assets/carousel-planning.png +0 -0
  116. package/mockup/assets/carousel-workspace.png +0 -0
  117. package/mockup/assets/example-theme.css +0 -19
  118. package/mockup/assets/example-theme.js +0 -11
  119. package/mockup/assets/showcase-contracts.js +0 -84
  120. package/mockup/assets/showcase.css +0 -91
  121. package/mockup/assets/showcase.js +0 -724
  122. package/mockup/content-data.html +0 -9
  123. package/mockup/examples/accordion-tabs-toast.html +0 -149
  124. package/mockup/examples/alert-dialog.html +0 -84
  125. package/mockup/examples/alerts.html +0 -115
  126. package/mockup/examples/badges-alerts.html +0 -109
  127. package/mockup/examples/buttons.html +0 -58
  128. package/mockup/examples/cards.html +0 -132
  129. package/mockup/examples/carousel.html +0 -126
  130. package/mockup/examples/charts.html +0 -102
  131. package/mockup/examples/check-radio-switch.html +0 -620
  132. package/mockup/examples/collapse.html +0 -69
  133. package/mockup/examples/combobox.html +0 -60
  134. package/mockup/examples/command-palette.html +0 -64
  135. package/mockup/examples/datatable.html +0 -113
  136. package/mockup/examples/datepicker.html +0 -62
  137. package/mockup/examples/divider.html +0 -45
  138. package/mockup/examples/dropdown-tooltip.html +0 -77
  139. package/mockup/examples/empty-state.html +0 -56
  140. package/mockup/examples/file-drop.html +0 -74
  141. package/mockup/examples/file-upload-advanced.html +0 -68
  142. package/mockup/examples/forms-advanced.html +0 -77
  143. package/mockup/examples/hover-card.html +0 -86
  144. package/mockup/examples/icons.html +0 -157
  145. package/mockup/examples/input-group.html +0 -74
  146. package/mockup/examples/js-foundation.html +0 -215
  147. package/mockup/examples/layout.html +0 -134
  148. package/mockup/examples/modal-select.html +0 -127
  149. package/mockup/examples/nested-menu.html +0 -73
  150. package/mockup/examples/notification-center.html +0 -86
  151. package/mockup/examples/offcanvas-popover.html +0 -133
  152. package/mockup/examples/pagination-breadcrumbs.html +0 -92
  153. package/mockup/examples/popover.html +0 -81
  154. package/mockup/examples/range.html +0 -69
  155. package/mockup/examples/rating.html +0 -103
  156. package/mockup/examples/segmented-control.html +0 -96
  157. package/mockup/examples/skeletons.html +0 -82
  158. package/mockup/examples/spinner-progress.html +0 -130
  159. package/mockup/examples/stepper.html +0 -119
  160. package/mockup/examples/tables-navbar.html +0 -89
  161. package/mockup/examples/tag.html +0 -115
  162. package/mockup/examples/theming.html +0 -68
  163. package/mockup/examples/tile.html +0 -107
  164. package/mockup/examples/timeline.html +0 -108
  165. package/mockup/examples/toast.html +0 -113
  166. package/mockup/examples/tooltip.html +0 -68
  167. package/mockup/examples/tree-view.html +0 -68
  168. package/mockup/feedback-actions.html +0 -9
  169. package/mockup/forms.html +0 -13
  170. package/mockup/foundations.html +0 -7
  171. package/mockup/kitchen-sink.html +0 -696
  172. package/mockup/navigation-disclosure.html +0 -11
  173. package/mockup/overlays-commands.html +0 -12
  174. package/mockup/templates/README.md +0 -20
  175. package/mockup/templates/admin.html +0 -334
  176. package/mockup/templates/auth.html +0 -234
  177. package/mockup/templates/dashboard.html +0 -442
  178. package/mockup/templates/landing.html +0 -397
  179. package/packages/fokus-icons/package.json +0 -46
  180. package/scripts/migrate-fokus-map.json +0 -1366
  181. package/scripts/migrate-fokus.mjs +0 -97
package/mockup/examples/cards.html DELETED
@@ -1,132 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mockup - Cards</title>
7
-
8
- <!-- STYLES IMPORT -->
9
- <link rel="stylesheet" href="../../dist/css/fonts.css">
10
- <link rel="stylesheet" href="../../dist/css/components.css">
11
- <link rel="stylesheet" href="../../dist/css/helpers.css">
12
- <style>
13
- .theme-panel {
14
- display: flex;
15
- flex-wrap: wrap;
16
- gap: 16px;
17
- padding: 24px;
18
- background-color: var(--fs-color-subtle);
19
- }
20
-
21
- html[data-theme="dark"] .theme-panel {
22
- color: var(--fs-color-text);
23
- background-color: var(--fs-color-surface);
24
- }
25
-
26
- .fs-card {
27
- width: 260px;
28
- }
29
- </style>
30
- <link rel="stylesheet" href="../assets/example-theme.css">
31
- <script src="../assets/example-theme.js"></script>
32
- </head>
33
- <body>
34
- <div class="theme-panel">
35
- <div class="fs-card">
36
- <div class="fs-card-header">
37
- <span class="fs-badge fs-badge-primary">Novo</span>
38
- </div>
39
- <div class="fs-card-body">
40
- <h3 class="fs-card-title">Título do card</h3>
41
- <p class="fs-card-subtitle">Subtítulo de apoio</p>
42
- <p class="fs-card-text">Texto de exemplo demonstrando a composição de header, body e footer do componente.</p>
43
- </div>
44
- <div class="fs-card-footer">
45
- <button type="button" class="fs-btn fs-btn-primary fs-btn-sm fs-u-mr-2">Confirmar</button>
46
- <button type="button" class="fs-btn fs-btn-outline-primary fs-btn-sm">Cancelar</button>
47
- </div>
48
- </div>
49
-
50
- <div class="fs-card">
51
- <div class="fs-card-header">
52
- <h3 class="fs-card-title">Card fechável</h3>
53
- <button type="button" class="fs-btn-close" aria-label="Fechar"></button>
54
- </div>
55
- <div class="fs-card-body">
56
- <p class="fs-card-text">card-header com título e botão de fechar alinhados nas pontas.</p>
57
- </div>
58
- </div>
59
-
60
- <div class="fs-card">
61
- <div class="fs-card-body">
62
- <h3 class="fs-card-title">Só body</h3>
63
- <p class="fs-card-text">Card sem header/footer, para conferir o raio nos quatro cantos.</p>
64
- </div>
65
- </div>
66
-
67
- <div class="fs-card fs-card-sm">
68
- <div class="fs-card-header">
69
- <span class="fs-badge fs-badge-sm fs-badge-success">Small</span>
70
- </div>
71
- <div class="fs-card-body">
72
- <p class="fs-card-text">card-sm: padding reduzido.</p>
73
- </div>
74
- <div class="fs-card-footer">
75
- <button type="button" class="fs-btn fs-btn-sm">OK</button>
76
- </div>
77
- </div>
78
-
79
- <div class="fs-card fs-card-lg">
80
- <div class="fs-card-header">
81
- <span class="fs-badge fs-badge-lg fs-badge-warning">Large</span>
82
- </div>
83
- <div class="fs-card-body">
84
- <p class="fs-card-text">card-lg: padding ampliado.</p>
85
- </div>
86
- <div class="fs-card-footer">
87
- <button type="button" class="fs-btn fs-btn-lg">OK</button>
88
- </div>
89
- </div>
90
-
91
- <div class="fs-card fs-u-shadow-sm">
92
- <div class="fs-card-body">
93
- <h3 class="fs-card-title">shadow-sm</h3>
94
- <p class="fs-card-text">Card + utilitário .shadow-sm, mantendo a borda.</p>
95
- </div>
96
- </div>
97
-
98
- <div class="fs-card fs-u-shadow">
99
- <div class="fs-card-body">
100
- <h3 class="fs-card-title">shadow</h3>
101
- <p class="fs-card-text">Utilitário .shadow (elevação média).</p>
102
- </div>
103
- </div>
104
-
105
- <div class="fs-card fs-u-shadow-lg">
106
- <div class="fs-card-body">
107
- <h3 class="fs-card-title">shadow-lg</h3>
108
- <p class="fs-card-text">Utilitário .shadow-lg (elevação alta, para overlays futuros).</p>
109
- </div>
110
- </div>
111
-
112
- <div class="fs-card fs-card-clickable">
113
- <div class="fs-card-body">
114
- <h3 class="fs-card-title"><a href="#" class="fs-stretched-link">Card clicável</a></h3>
115
- <p class="fs-card-text">card-clickable + .stretched-link: o card inteiro é a área de clique/foco, sem aninhar elementos interativos.</p>
116
- </div>
117
- </div>
118
-
119
- <div class="fs-card fs-card-horizontal" style="width: 360px;">
120
- <div class="fs-card-header">
121
- <span class="fs-badge fs-badge-info">Tag</span>
122
- </div>
123
- <div class="fs-card-body">
124
- <h3 class="fs-card-title">Card horizontal</h3>
125
- <p class="fs-card-text">card-horizontal: header vira coluna lateral, com raio e borda ajustados.</p>
126
- </div>
127
- </div>
128
- </div>
129
-
130
-
131
- </body>
132
- </html>
package/mockup/examples/carousel.html DELETED
@@ -1,126 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mockup - Carousel</title>
7
-
8
- <!-- STYLES IMPORT -->
9
- <link rel="stylesheet" href="../../dist/css/fonts.css">
10
- <link rel="stylesheet" href="../../dist/css/components.css">
11
- <link rel="stylesheet" href="../../dist/css/helpers.css">
12
- <style>
13
- .theme-panel {
14
- padding: 24px;
15
- }
16
-
17
- html[data-theme="dark"] .theme-panel {
18
- color: var(--fs-color-text);
19
- background-color: var(--fs-color-surface);
20
- }
21
-
22
- .fs-carousel {
23
- max-width: 560px;
24
- }
25
-
26
- .slide {
27
- display: flex;
28
- align-items: center;
29
- justify-content: center;
30
- height: 240px;
31
- color: #fff;
32
- font-size: 2rem;
33
- font-weight: 600;
34
- }
35
-
36
- .slide-1 { background: linear-gradient(135deg, #312e81, #4f46e5 54%, #818cf8); }
37
- .slide-2 { background: linear-gradient(135deg, #047857, #1bc559 54%, #6ee7b7); }
38
- .slide-3 { background: linear-gradient(135deg, #991b1b, #dc263e 54%, #fda4af); }
39
- </style>
40
- <link rel="stylesheet" href="../assets/example-theme.css">
41
- <script src="../assets/example-theme.js"></script>
42
- </head>
43
- <body>
44
-
45
- <div class="theme-panel">
46
- <h2 class="fs-u-fs-lg fs-u-fw-medium">Claro — slide (padrão)</h2>
47
-
48
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Conteúdo de produto com áreas seguras para controles e indicadores</p>
49
- <div class="fs-carousel" data-fs="carousel" id="carousel-slide" aria-label="Destaques de produto">
50
- <div class="fs-carousel-inner">
51
- <div class="fs-carousel-item is-active">
52
- <div class="slide slide-1"></div>
53
- <div class="fs-carousel-caption"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Fluxos mais claros</h3><p>Centralize tarefas recorrentes em uma experiência previsível.</p><a class="fs-btn" href="#">Conhecer recursos</a></div>
54
- </div>
55
- <div class="fs-carousel-item">
56
- <div class="slide slide-2"></div>
57
- <div class="fs-carousel-caption"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Decisões compartilhadas</h3><p>Organize atualizações, responsáveis e próximos passos.</p><a class="fs-btn" href="#">Convidar equipe</a></div>
58
- </div>
59
- <div class="fs-carousel-item">
60
- <div class="slide slide-3"></div>
61
- <div class="fs-carousel-caption"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Visibilidade para o time</h3><p>Transforme acompanhamento em ação com contexto suficiente.</p><a class="fs-btn" href="#">Abrir indicadores</a></div>
62
- </div>
63
- </div>
64
- <button class="fs-carousel-control-prev" type="button" aria-label="Anterior"></button>
65
- <button class="fs-carousel-control-next" type="button" aria-label="Próximo"></button>
66
- <ol class="fs-carousel-indicators">
67
- <li><button type="button" aria-label="Ir para o slide 1"></button></li>
68
- <li><button type="button" aria-label="Ir para o slide 2"></button></li>
69
- <li><button type="button" aria-label="Ir para o slide 3"></button></li>
70
- </ol>
71
- </div>
72
-
73
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-4 fs-u-mb-2">Autoplay sem mídia, com contador, progresso e arraste desativado</p>
74
- <div class="fs-carousel fs-carousel-no-media fs-carousel-hide-indicators-two" data-fs="carousel" data-autoplay="true" data-interval="3000" data-drag="false" id="carousel-slide-autoplay" aria-label="Atualizações automáticas">
75
- <div class="fs-carousel-inner">
76
- <div class="fs-carousel-item is-active"><div class="fs-carousel-media-placeholder"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Resumo semanal</h3><p>Atualizações importantes podem aparecer como painel de conteúdo, sem exigir imagem de fundo.</p><a class="fs-btn fs-btn-primary" href="#">Ver relatório</a></div></div>
77
- <div class="fs-carousel-item"><div class="fs-carousel-media-placeholder"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Próximo passo</h3><p>Use este formato quando o slide tiver ações interativas e não fizer sentido arrastá-lo.</p><a class="fs-btn fs-btn-primary" href="#">Revisar pendências</a></div></div>
78
- </div>
79
- <button class="fs-carousel-control-prev" type="button" aria-label="Anterior"></button>
80
- <button class="fs-carousel-control-next" type="button" aria-label="Próximo"></button>
81
- <button class="fs-carousel-control-toggle" type="button" data-fs-carousel-toggle></button>
82
- <span class="fs-carousel-counter" data-fs-carousel-counter aria-hidden="true"></span>
83
- <div class="fs-carousel-progress" data-fs-carousel-progress aria-hidden="true"><span></span></div>
84
- </div>
85
-
86
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-4 fs-u-mb-2">Variante fade com legenda empilhada abaixo da mídia</p>
87
- <div class="fs-carousel fs-carousel-fade fs-carousel-caption-stacked" data-fs="carousel" data-autoplay="true" data-interval="3000" id="carousel-fade" aria-label="Destaques em transição suave">
88
- <div class="fs-carousel-inner">
89
- <div class="fs-carousel-item is-active"><div class="slide slide-1">Fade 1</div><div class="fs-carousel-caption"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Transição sem distração</h3><p>A legenda abaixo da mídia mantém textos longos completamente fora da área visual do slide.</p></div></div>
90
- <div class="fs-carousel-item"><div class="slide slide-2">Fade 2</div><div class="fs-carousel-caption"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Contexto sempre legível</h3><p>Esta variação é adequada quando a mídia não pode receber sobreposição.</p></div></div>
91
- <div class="fs-carousel-item"><div class="slide slide-3">Fade 3</div><div class="fs-carousel-caption"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Mesmo comportamento</h3><p>Teclado, autoplay e controles continuam disponíveis sem mudança de API.</p></div></div>
92
- </div>
93
- <button class="fs-carousel-control-prev" type="button" aria-label="Anterior"></button>
94
- <button class="fs-carousel-control-next" type="button" aria-label="Próximo"></button>
95
- <button class="fs-carousel-control-toggle" type="button" data-fs-carousel-toggle></button>
96
- <ol class="fs-carousel-indicators">
97
- <li><button type="button" aria-label="Ir para o slide 1"></button></li>
98
- <li><button type="button" aria-label="Ir para o slide 2"></button></li>
99
- <li><button type="button" aria-label="Ir para o slide 3"></button></li>
100
- </ol>
101
- </div>
102
-
103
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-4 fs-u-mb-2">Imagem de fundo com legenda lateral responsiva</p>
104
- <div class="fs-carousel fs-carousel-caption-side" data-fs="carousel" data-autoplay="true" data-interval="5000" id="carousel-image" aria-label="Histórias da equipe">
105
- <div class="fs-carousel-inner">
106
- <div class="fs-carousel-item is-active">
107
- <div class="fs-carousel-media" aria-hidden="true" style="background-image: url('../assets/carousel-workspace.png'); background-position: center;"></div>
108
- <div class="fs-carousel-caption fs-carousel-caption-start"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Legenda à esquerda</h3><p>Quando o assunto da foto estiver à direita, a legenda pode ocupar o lado oposto sem competir com a narrativa visual.</p><a class="fs-btn" href="#">Ler história</a></div>
109
- </div>
110
- <div class="fs-carousel-item">
111
- <div class="fs-carousel-media" aria-hidden="true" style="background-image: url('../assets/carousel-planning.png'); background-position: center;"></div>
112
- <div class="fs-carousel-caption"><h3 class="fs-u-fs-lg fs-u-fw-semibold">Legenda à direita</h3><p>Em outra composição, o conteúdo visual fica à esquerda e a mesma legenda lateral equilibra leitura e imagem.</p><a class="fs-btn" href="#">Ver iniciativas</a></div>
113
- </div>
114
- </div>
115
- <button class="fs-carousel-control-prev" type="button" aria-label="Anterior"></button>
116
- <button class="fs-carousel-control-next" type="button" aria-label="Próximo"></button>
117
- <button class="fs-carousel-control-toggle" type="button" data-fs-carousel-toggle></button>
118
- <span class="fs-carousel-counter" data-fs-carousel-counter aria-hidden="true"></span>
119
- </div>
120
- </div>
121
-
122
-
123
-
124
- <script src="../../dist/js/fokus.js"></script>
125
- </body>
126
- </html>
package/mockup/examples/charts.html DELETED
@@ -1,102 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mockup - Charts (tokens)</title>
7
-
8
- <!-- STYLES IMPORT -->
9
- <link rel="stylesheet" href="../../dist/css/fonts.css">
10
- <link rel="stylesheet" href="../../dist/css/components.css">
11
- <link rel="stylesheet" href="../../dist/css/helpers.css">
12
- <style>
13
- .theme-panel {
14
- padding: 24px;
15
- }
16
-
17
- html[data-theme="dark"] .theme-panel {
18
- color: var(--fs-color-text);
19
- background-color: var(--fs-color-surface);
20
- }
21
-
22
- .chart-swatches {
23
- display: flex;
24
- gap: 8px;
25
- flex-wrap: wrap;
26
- }
27
-
28
- .chart-swatch {
29
- width: 64px;
30
- height: 64px;
31
- border-radius: var(--fs-radius-md);
32
- display: flex;
33
- align-items: flex-end;
34
- padding: 4px;
35
- font-size: 10px;
36
- color: #fff;
37
- text-shadow: 0 1px 1px rgb(0 0 0 / 40%);
38
- }
39
-
40
- .chart-demo {
41
- display: flex;
42
- align-items: flex-end;
43
- gap: 8px;
44
- height: 120px;
45
- border-bottom: 2px solid var(--fs-chart-axis);
46
- padding: 0 8px;
47
- margin-top: 12px;
48
- }
49
-
50
- .chart-demo-bar {
51
- width: 32px;
52
- border-radius: 4px 4px 0 0;
53
- }
54
-
55
- .chart-demo-tooltip {
56
- background-color: var(--fs-chart-tooltip-bg);
57
- color: var(--fs-chart-tooltip-text);
58
- padding: 4px 8px;
59
- border-radius: var(--fs-radius-sm);
60
- font-size: 12px;
61
- display: inline-block;
62
- margin-top: 12px;
63
- }
64
- </style>
65
- <link rel="stylesheet" href="../assets/example-theme.css">
66
- <script src="../assets/example-theme.js"></script>
67
- </head>
68
- <body>
69
-
70
- <!--
71
- Não é um wrapper de biblioteca de gráficos (docs/guides/charts.md) — só
72
- os tokens --fs-chart-* que qualquer lib pode consumir via
73
- getComputedStyle. Este mockup só visualiza os tokens (swatches + barras
74
- de CSS puro), sem carregar nenhuma lib de terceiro.
75
- -->
76
-
77
- <div class="theme-panel">
78
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-2">Séries (--fs-chart-series-1..6)</p>
79
- <div class="chart-swatches">
80
- <div class="chart-swatch" style="background-color: var(--fs-chart-series-1);">1</div>
81
- <div class="chart-swatch" style="background-color: var(--fs-chart-series-2);">2</div>
82
- <div class="chart-swatch" style="background-color: var(--fs-chart-series-3);">3</div>
83
- <div class="chart-swatch" style="background-color: var(--fs-chart-series-4);">4</div>
84
- <div class="chart-swatch" style="background-color: var(--fs-chart-series-5);">5</div>
85
- <div class="chart-swatch" style="background-color: var(--fs-chart-series-6);">6</div>
86
- </div>
87
-
88
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Barras de exemplo (grid/axis)</p>
89
- <div class="chart-demo">
90
- <div class="chart-demo-bar" style="height: 40%; background-color: var(--fs-chart-series-1);"></div>
91
- <div class="chart-demo-bar" style="height: 70%; background-color: var(--fs-chart-series-2);"></div>
92
- <div class="chart-demo-bar" style="height: 55%; background-color: var(--fs-chart-series-3);"></div>
93
- </div>
94
-
95
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Tooltip (--fs-chart-tooltip-bg/text)</p>
96
- <span class="chart-demo-tooltip">Jan: 120</span>
97
- </div>
98
-
99
-
100
-
101
- </body>
102
- </html>