fokus-styles 2.5.0 → 2.6.0

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 (177) hide show
  1. package/package.json +17 -15
  2. package/CHANGELOG.md +0 -940
  3. package/dist/css/components.css.map +0 -1
  4. package/dist/css/components.min.css.map +0 -1
  5. package/dist/css/fokus-components.css.map +0 -1
  6. package/dist/css/fokus-components.min.css.map +0 -1
  7. package/dist/css/fokus-core.css.map +0 -1
  8. package/dist/css/fokus-core.min.css.map +0 -1
  9. package/dist/css/fokus-dark.css.map +0 -1
  10. package/dist/css/fokus-dark.min.css.map +0 -1
  11. package/dist/css/fokus-rtl.css.map +0 -1
  12. package/dist/css/fokus-rtl.min.css.map +0 -1
  13. package/dist/css/fokus-utilities.css.map +0 -1
  14. package/dist/css/fokus-utilities.min.css.map +0 -1
  15. package/dist/css/fokus.css.map +0 -1
  16. package/dist/css/fokus.min.css.map +0 -1
  17. package/dist/css/fonts.css.map +0 -1
  18. package/dist/css/fonts.min.css.map +0 -1
  19. package/dist/css/forms.css.map +0 -1
  20. package/dist/css/forms.min.css.map +0 -1
  21. package/dist/css/helpers.css.map +0 -1
  22. package/dist/css/helpers.min.css.map +0 -1
  23. package/dist/css/layout.css.map +0 -1
  24. package/dist/css/layout.min.css.map +0 -1
  25. package/dist/js/fokus.js.map +0 -7
  26. package/dist/js/fokus.min.js.map +0 -7
  27. package/docs/README.md +0 -86
  28. package/docs/comparison.md +0 -124
  29. package/docs/components/accordion.md +0 -104
  30. package/docs/components/alert-dialog.md +0 -99
  31. package/docs/components/alert.md +0 -104
  32. package/docs/components/avatar.md +0 -13
  33. package/docs/components/badge.md +0 -101
  34. package/docs/components/breadcrumb.md +0 -93
  35. package/docs/components/button-group.md +0 -13
  36. package/docs/components/button.md +0 -98
  37. package/docs/components/card.md +0 -111
  38. package/docs/components/carousel.md +0 -167
  39. package/docs/components/checkbox.md +0 -110
  40. package/docs/components/close-button.md +0 -13
  41. package/docs/components/code.md +0 -13
  42. package/docs/components/collapse.md +0 -78
  43. package/docs/components/combobox.md +0 -123
  44. package/docs/components/command-palette.md +0 -131
  45. package/docs/components/datatable.md +0 -173
  46. package/docs/components/datepicker.md +0 -137
  47. package/docs/components/divider.md +0 -57
  48. package/docs/components/dropdown.md +0 -103
  49. package/docs/components/empty-state.md +0 -65
  50. package/docs/components/file-upload-advanced.md +0 -116
  51. package/docs/components/file-upload.md +0 -93
  52. package/docs/components/icon-link.md +0 -13
  53. package/docs/components/input-group.md +0 -73
  54. package/docs/components/input.md +0 -90
  55. package/docs/components/list-group.md +0 -13
  56. package/docs/components/modal.md +0 -120
  57. package/docs/components/navbar.md +0 -74
  58. package/docs/components/nested-menu.md +0 -90
  59. package/docs/components/notification-center.md +0 -116
  60. package/docs/components/offcanvas.md +0 -102
  61. package/docs/components/pagination.md +0 -145
  62. package/docs/components/placeholder.md +0 -13
  63. package/docs/components/popover.md +0 -118
  64. package/docs/components/progress.md +0 -126
  65. package/docs/components/radio.md +0 -80
  66. package/docs/components/range.md +0 -83
  67. package/docs/components/rating.md +0 -91
  68. package/docs/components/ratio.md +0 -13
  69. package/docs/components/responsive.md +0 -19
  70. package/docs/components/scrollspy.md +0 -13
  71. package/docs/components/segmented-control.md +0 -82
  72. package/docs/components/select.md +0 -89
  73. package/docs/components/skeleton.md +0 -70
  74. package/docs/components/stepper.md +0 -107
  75. package/docs/components/switch.md +0 -97
  76. package/docs/components/table.md +0 -90
  77. package/docs/components/tabs.md +0 -104
  78. package/docs/components/tag.md +0 -144
  79. package/docs/components/tile.md +0 -112
  80. package/docs/components/timeline.md +0 -78
  81. package/docs/components/toast.md +0 -108
  82. package/docs/components/tooltip.md +0 -113
  83. package/docs/components/tree-view.md +0 -118
  84. package/docs/contributing/contributing.md +0 -18
  85. package/docs/getting-started/installation.md +0 -70
  86. package/docs/getting-started/usage.md +0 -105
  87. package/docs/guides/accessibility.md +0 -109
  88. package/docs/guides/charts.md +0 -73
  89. package/docs/guides/dark-mode.md +0 -90
  90. package/docs/guides/icons.md +0 -99
  91. package/docs/guides/javascript-api.md +0 -9
  92. package/docs/guides/layout-advanced.md +0 -118
  93. package/docs/guides/migration-clarus-to-fokus.md +0 -48
  94. package/docs/guides/migration-external.md +0 -123
  95. package/docs/guides/migration-v1.md +0 -63
  96. package/docs/guides/print.md +0 -30
  97. package/docs/guides/rtl-and-system-preferences.md +0 -28
  98. package/docs/guides/theming.md +0 -140
  99. package/docs/guides/utility-api.md +0 -9
  100. package/docs/prompts/prompt-plan.md +0 -45
  101. package/docs/reference/accessibility-matrix.md +0 -77
  102. package/docs/reference/browser-support.md +0 -75
  103. package/docs/reference/contrast-report.md +0 -54
  104. package/docs/reference/definitions.md +0 -868
  105. package/docs/reference/design-tokens.md +0 -208
  106. package/docs/reference/scss-architecture.md +0 -227
  107. package/docs/reference/size-baseline.json +0 -34
  108. package/docs/reference/stability.md +0 -89
  109. package/docs/showcase.md +0 -25
  110. package/mockup/README.md +0 -41
  111. package/mockup/assets/carousel-planning.png +0 -0
  112. package/mockup/assets/carousel-workspace.png +0 -0
  113. package/mockup/assets/example-theme.css +0 -19
  114. package/mockup/assets/example-theme.js +0 -11
  115. package/mockup/assets/showcase-contracts.js +0 -84
  116. package/mockup/assets/showcase.css +0 -91
  117. package/mockup/assets/showcase.js +0 -724
  118. package/mockup/content-data.html +0 -9
  119. package/mockup/examples/accordion-tabs-toast.html +0 -149
  120. package/mockup/examples/alert-dialog.html +0 -84
  121. package/mockup/examples/alerts.html +0 -115
  122. package/mockup/examples/badges-alerts.html +0 -109
  123. package/mockup/examples/buttons.html +0 -58
  124. package/mockup/examples/cards.html +0 -132
  125. package/mockup/examples/carousel.html +0 -126
  126. package/mockup/examples/charts.html +0 -102
  127. package/mockup/examples/check-radio-switch.html +0 -620
  128. package/mockup/examples/collapse.html +0 -69
  129. package/mockup/examples/combobox.html +0 -60
  130. package/mockup/examples/command-palette.html +0 -64
  131. package/mockup/examples/datatable.html +0 -113
  132. package/mockup/examples/datepicker.html +0 -62
  133. package/mockup/examples/divider.html +0 -45
  134. package/mockup/examples/dropdown-tooltip.html +0 -77
  135. package/mockup/examples/empty-state.html +0 -56
  136. package/mockup/examples/file-drop.html +0 -74
  137. package/mockup/examples/file-upload-advanced.html +0 -68
  138. package/mockup/examples/forms-advanced.html +0 -77
  139. package/mockup/examples/hover-card.html +0 -86
  140. package/mockup/examples/icons.html +0 -157
  141. package/mockup/examples/input-group.html +0 -74
  142. package/mockup/examples/js-foundation.html +0 -215
  143. package/mockup/examples/layout.html +0 -134
  144. package/mockup/examples/modal-select.html +0 -127
  145. package/mockup/examples/nested-menu.html +0 -73
  146. package/mockup/examples/notification-center.html +0 -86
  147. package/mockup/examples/offcanvas-popover.html +0 -133
  148. package/mockup/examples/pagination-breadcrumbs.html +0 -92
  149. package/mockup/examples/popover.html +0 -81
  150. package/mockup/examples/range.html +0 -69
  151. package/mockup/examples/rating.html +0 -103
  152. package/mockup/examples/segmented-control.html +0 -96
  153. package/mockup/examples/skeletons.html +0 -82
  154. package/mockup/examples/spinner-progress.html +0 -130
  155. package/mockup/examples/stepper.html +0 -119
  156. package/mockup/examples/tables-navbar.html +0 -89
  157. package/mockup/examples/tag.html +0 -115
  158. package/mockup/examples/theming.html +0 -68
  159. package/mockup/examples/tile.html +0 -107
  160. package/mockup/examples/timeline.html +0 -108
  161. package/mockup/examples/toast.html +0 -113
  162. package/mockup/examples/tooltip.html +0 -68
  163. package/mockup/examples/tree-view.html +0 -68
  164. package/mockup/feedback-actions.html +0 -9
  165. package/mockup/forms.html +0 -13
  166. package/mockup/foundations.html +0 -7
  167. package/mockup/kitchen-sink.html +0 -696
  168. package/mockup/navigation-disclosure.html +0 -11
  169. package/mockup/overlays-commands.html +0 -12
  170. package/mockup/templates/README.md +0 -20
  171. package/mockup/templates/admin.html +0 -334
  172. package/mockup/templates/auth.html +0 -234
  173. package/mockup/templates/dashboard.html +0 -442
  174. package/mockup/templates/landing.html +0 -397
  175. package/packages/fokus-icons/package.json +0 -46
  176. package/scripts/migrate-fokus-map.json +0 -1366
  177. 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>