npm - @snksergio/design-system - Versions diffs - 0.58.0 → 0.60.0 - Mend

@snksergio/design-system 0.58.0 → 0.60.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 (92) hide show

package/dist-lib/theme/brand-pay.css CHANGED Viewed

@@ -1,189 +1,205 @@
-/**
- * brand-pay.css — Auto-gerado. Não editar manualmente.
- * Overlay de marca escopado (só o DIFF de cor vs. default). Coexiste com o tema-base.
- * Source (repo do DS): tokens/brands/pay/semantic/*.ts
- * Regenerar (só no repo do DS): npm run tokens:brand:pay
- *
- * ATIVAR: importe este arquivo DEPOIS do tailwind-theme.css e ponha
- * data-theme="pay" no <html>. Sem o atributo nada casa — e não dá erro.
- * Seletor de marca em runtime: hook `useBrand` do pacote (≥ 0.33.0), ou
- * setAttribute/removeAttribute na mão ("default" = remover o atributo).
- *
- * Os 2 blocos são MUTUAMENTE EXCLUSIVOS por construção (`:not(.dark)`). No dark,
- * token ausente do bloco dark cai no `.dark` do tema-base de propósito: o diff só
- * omite o que já é idêntico à default.
- */
-/* ── Light (83 vars divergem da default) ─────────────────────────── */
-[data-theme="pay"]:not(.dark) {
-  --color-bg-canvas: #f9fafb;
-  --color-bg-surface: #ffffff;
-  --color-bg-surface-elevated: #ffffff;
-  --color-bg-surface-panels: #f9fafb;
-  --color-bg-sidebar: #ffffff;
-  --color-bg-subtle: #f9fafb;
-  --color-bg-muted: #f3f4f6;
-  --color-bg-emphasis: #eceef1;
-  --color-bg-input: #ffffff;
-  --color-bg-accent: #f9fafb;
-  --color-bg-brand: #00a859;
-  --color-bg-brand-subtle: rgba(0,168,89,.10);
-  --color-bg-brand-hover: #008a4b;
-  --color-bg-brand-subtle-hover: rgba(0,168,89,.18);
-  --color-bg-danger: #f83b3b;
-  --color-bg-danger-muted: rgba(248,59,59,.10);
-  --color-bg-danger-hover: #e02e2e;
-  --color-bg-danger-muted-hover: rgba(248,59,59,.18);
-  --color-bg-success: #00a859;
-  --color-bg-success-muted: rgba(0,168,89,.11);
-  --color-bg-success-hover: #008a4b;
-  --color-bg-success-muted-hover: rgba(0,168,89,.18);
-  --color-bg-warning: #d97c02;
-  --color-bg-warning-muted: rgba(217,124,2,.12);
-  --color-bg-warning-hover: #b96702;
-  --color-bg-warning-muted-hover: rgba(217,124,2,.20);
-  --color-bg-info: #0058e6;
-  --color-bg-info-muted: rgba(0,88,230,.10);
-  --color-bg-info-hover: #0047bd;
-  --color-bg-info-muted-hover: rgba(0,88,230,.18);
-  --color-bg-muted-hover: #f3f4f6;
-  --color-bg-input-hover: #f9fafb;
-  --color-bg-accent-hover: #eceef1;
-  --color-bg-sidebar-accent: rgba(0,168,89,.10);
-  --color-bg-sidebar-accent-hover: #f3f4f6;
-  --color-bg-table: #ffffff;
-  --color-bg-table-head: #f9fafb;
-  --color-bg-table-row-hover: #f9fafb;
-  --color-bg-table-row-selected: rgba(0,168,89,.08);
-  --color-bg-table-row-selected-hover: rgba(0,168,89,.13);
-  --color-bg-table-row-selected-solid: color-mix(in srgb, #00a859 8%, #ffffff);
-  --color-bg-table-row-selected-hover-solid: color-mix(in srgb, #00a859 13%, #ffffff);
-  --color-bg-dropdown: var(--color-bg-surface);
-  --color-fg-strong: #0a0a0c;
-  --color-fg-default: #0a0a0c;
-  --color-fg-muted: #5f6b77;
-  --color-fg-subtle: #7e8994;
-  --color-fg-disabled: #a2acb6;
-  --color-fg-brand: #008a4b;
-  --color-fg-danger: #f83b3b;
-  --color-fg-success: #00a859;
-  --color-fg-warning: #d97c02;
-  --color-fg-info: #0058e6;
-  --color-fg-on-brand: #ffffff;
-  --color-fg-on-danger: #ffffff;
-  --color-fg-on-success: #ffffff;
-  --color-fg-on-warning: #ffffff;
-  --color-fg-on-info: #ffffff;
-  --color-border-default: rgba(17,17,17,.08);
-  --color-border-subtle: rgba(17,17,17,.06);
-  --color-border-input: rgba(17,17,17,.14);
-  --color-border-sidebar: rgba(17,17,17,.08);
-  --color-border-brand: #00a859;
-  --color-border-brand-subtle: rgba(0,168,89,.36);
-  --color-border-danger-muted: rgba(248,59,59,.36);
-  --color-border-success-muted: rgba(0,168,89,.36);
-  --color-border-warning-muted: rgba(217,124,2,.36);
-  --color-border-info-muted: rgba(0,88,230,.36);
-  --color-border-table: rgba(17,17,17,.08);
-  --color-ring-brand: rgba(0,168,89,.30);
-  --color-ring-danger: rgba(248,59,59,.30);
-  --color-ring-success: rgba(0,168,89,.30);
-  --color-ring-warning: rgba(217,124,2,.30);
-  --color-ring-info: rgba(0,88,230,.30);
-  --color-ring-secondary: rgba(17,17,17,.14);
-  --color-overlay-scrim: rgba(0,0,0,.55);
-  --color-overlay-float: rgba(16,24,40,.12);
-  --color-chart-1: #00a859;
-  --color-chart-2: #0058e6;
-  --color-chart-3: #65a30d;
-  --color-chart-4: #d97c02;
-  --color-chart-5: #7c3aed;
-  --color-chart-grid: rgba(17,17,17,.08);
-}
-/* ── Dark (83 vars — .dark[data-theme] vence o .dark base) ────────── */
-.dark[data-theme="pay"] {
-  --color-bg-canvas: #050608;
-  --color-bg-surface: #0b0d10;
-  --color-bg-surface-elevated: #0f1116;
-  --color-bg-surface-panels: #0b0d10;
-  --color-bg-sidebar: #0b0d10;
-  --color-bg-subtle: #0f1116;
-  --color-bg-muted: #0f1116;
-  --color-bg-emphasis: #13161c;
-  --color-bg-input: #0b0d10;
-  --color-bg-accent: #0f1116;
-  --color-bg-brand: #00a859;
-  --color-bg-brand-subtle: rgba(0,168,89,.14);
-  --color-bg-brand-hover: #12b869;
-  --color-bg-brand-subtle-hover: rgba(0,168,89,.22);
-  --color-bg-danger: #ff6b6b;
-  --color-bg-danger-muted: rgba(255,107,107,.14);
-  --color-bg-danger-hover: #ff8585;
-  --color-bg-danger-muted-hover: rgba(255,107,107,.22);
-  --color-bg-success: #3bc882;
-  --color-bg-success-muted: rgba(59,200,130,.14);
-  --color-bg-success-hover: #57d195;
-  --color-bg-success-muted-hover: rgba(59,200,130,.22);
-  --color-bg-warning: #ffb620;
-  --color-bg-warning-muted: rgba(255,182,32,.14);
-  --color-bg-warning-hover: #ffc748;
-  --color-bg-warning-muted-hover: rgba(255,182,32,.22);
-  --color-bg-info: #3580ff;
-  --color-bg-info-muted: rgba(53,128,255,.15);
-  --color-bg-info-hover: #5a99ff;
-  --color-bg-info-muted-hover: rgba(53,128,255,.24);
-  --color-bg-muted-hover: #13161c;
-  --color-bg-input-hover: #13161c;
-  --color-bg-accent-hover: #13161c;
-  --color-bg-sidebar-accent: rgba(0,168,89,.14);
-  --color-bg-sidebar-accent-hover: #13161c;
-  --color-bg-table: #0b0d10;
-  --color-bg-table-head: #13161c;
-  --color-bg-table-row-hover: #13161c;
-  --color-bg-table-row-selected: rgba(0,168,89,.14);
-  --color-bg-table-row-selected-hover: rgba(0,168,89,.20);
-  --color-bg-table-row-selected-solid: color-mix(in srgb, #00a859 12%, #0b0d10);
-  --color-bg-table-row-selected-hover-solid: color-mix(in srgb, #00a859 18%, #0b0d10);
-  --color-bg-dropdown: #0b0d10;
-  --color-fg-strong: #ffffff;
-  --color-fg-default: #f5f7fa;
-  --color-fg-muted: #aeb4bd;
-  --color-fg-subtle: #7c8591;
-  --color-fg-disabled: #5b636b;
-  --color-fg-brand: #3bc882;
-  --color-fg-danger: #ff6b6b;
-  --color-fg-success: #3bc882;
-  --color-fg-warning: #ffb620;
-  --color-fg-info: #3580ff;
-  --color-fg-on-brand: #ffffff;
-  --color-fg-on-danger: #ffffff;
-  --color-fg-on-success: #000000;
-  --color-fg-on-warning: #000000;
-  --color-fg-on-info: #ffffff;
-  --color-border-default: rgba(255,255,255,.08);
-  --color-border-subtle: rgba(255,255,255,.06);
-  --color-border-input: rgba(255,255,255,.08);
-  --color-border-sidebar: rgba(255,255,255,.08);
-  --color-border-brand: #00a859;
-  --color-border-brand-subtle: rgba(0,168,89,.36);
-  --color-border-danger-muted: rgba(255,107,107,.36);
-  --color-border-success-muted: rgba(59,200,130,.36);
-  --color-border-warning-muted: rgba(255,182,32,.36);
-  --color-border-info-muted: rgba(53,128,255,.36);
-  --color-border-table: rgba(255,255,255,.08);
-  --color-ring-brand: rgba(0,168,89,.35);
-  --color-ring-danger: rgba(255,107,107,.35);
-  --color-ring-success: rgba(59,200,130,.35);
-  --color-ring-warning: rgba(255,182,32,.35);
-  --color-ring-info: rgba(53,128,255,.35);
-  --color-ring-secondary: rgba(255,255,255,.16);
-  --color-overlay-scrim: rgba(0,0,0,.6);
-  --color-overlay-float: rgba(255,255,255,.08);
-  --color-chart-1: #00a859;
-  --color-chart-2: #3580ff;
-  --color-chart-3: #a3e635;
-  --color-chart-4: #ffb620;
-  --color-chart-5: #a78bfa;
-  --color-chart-grid: rgba(255,255,255,.08);
-}
+/**
+ * brand-pay.css — Auto-gerado. Não editar manualmente.
+ * Overlay de marca escopado (só o DIFF de cor vs. default). Coexiste com o tema-base.
+ * Source (repo do DS): tokens/brands/pay/semantic/*.ts
+ * Regenerar (só no repo do DS): npm run tokens:brand:pay
+ *
+ * ATIVAR: importe este arquivo DEPOIS do tailwind-theme.css e ponha
+ * data-theme="pay" no <html>. Sem o atributo nada casa — e não dá erro.
+ * Seletor de marca em runtime: hook `useBrand` do pacote (≥ 0.33.0), ou
+ * setAttribute/removeAttribute na mão ("default" = remover o atributo).
+ *
+ * Os 2 blocos são MUTUAMENTE EXCLUSIVOS por construção (`:not(.dark)`). No dark,
+ * token ausente do bloco dark cai no `.dark` do tema-base de propósito: o diff só
+ * omite o que já é idêntico à default.
+ */
+/* ── Light (91 vars divergem da default) ─────────────────────────── */
+[data-theme="pay"]:not(.dark) {
+  --color-bg-canvas: #f9fafb;
+  --color-bg-surface: #ffffff;
+  --color-bg-surface-elevated: #ffffff;
+  --color-bg-surface-panels: #f9fafb;
+  --color-bg-sidebar: #ffffff;
+  --color-bg-subtle: #f9fafb;
+  --color-bg-muted: #f3f4f6;
+  --color-bg-emphasis: #eceef1;
+  --color-bg-input: #ffffff;
+  --color-bg-accent: #f9fafb;
+  --color-bg-brand: #00a859;
+  --color-bg-brand-subtle: rgba(0,168,89,.10);
+  --color-bg-brand-hover: #008a4b;
+  --color-bg-brand-subtle-hover: rgba(0,168,89,.18);
+  --color-bg-danger: #f83b3b;
+  --color-bg-danger-muted: rgba(248,59,59,.10);
+  --color-bg-danger-hover: #e02e2e;
+  --color-bg-danger-muted-hover: rgba(248,59,59,.18);
+  --color-bg-success: #00a859;
+  --color-bg-success-muted: rgba(0,168,89,.11);
+  --color-bg-success-hover: #008a4b;
+  --color-bg-success-muted-hover: rgba(0,168,89,.18);
+  --color-bg-warning: #d97c02;
+  --color-bg-warning-muted: rgba(217,124,2,.12);
+  --color-bg-warning-hover: #b96702;
+  --color-bg-warning-muted-hover: rgba(217,124,2,.20);
+  --color-bg-caution: #ec6007;
+  --color-bg-caution-muted: rgba(236,96,7,.12);
+  --color-bg-caution-hover: #cd5205;
+  --color-bg-caution-muted-hover: rgba(236,96,7,.20);
+  --color-bg-info: #0058e6;
+  --color-bg-info-muted: rgba(0,88,230,.10);
+  --color-bg-info-hover: #0047bd;
+  --color-bg-info-muted-hover: rgba(0,88,230,.18);
+  --color-bg-muted-hover: #f3f4f6;
+  --color-bg-input-hover: #f9fafb;
+  --color-bg-accent-hover: #eceef1;
+  --color-bg-sidebar-accent: rgba(0,168,89,.10);
+  --color-bg-sidebar-accent-hover: #f3f4f6;
+  --color-bg-table: #ffffff;
+  --color-bg-table-head: #f9fafb;
+  --color-bg-table-row-hover: #f9fafb;
+  --color-bg-table-row-selected: rgba(0,168,89,.08);
+  --color-bg-table-row-selected-hover: rgba(0,168,89,.13);
+  --color-bg-table-row-selected-solid: color-mix(in srgb, #00a859 8%, #ffffff);
+  --color-bg-table-row-selected-hover-solid: color-mix(in srgb, #00a859 13%, #ffffff);
+  --color-bg-dropdown: var(--color-bg-surface);
+  --color-fg-strong: #0a0a0c;
+  --color-fg-default: #0a0a0c;
+  --color-fg-muted: #5f6b77;
+  --color-fg-subtle: #7e8994;
+  --color-fg-disabled: #a2acb6;
+  --color-fg-brand: #008a4b;
+  --color-fg-danger: #f83b3b;
+  --color-fg-success: #00a859;
+  --color-fg-warning: #d97c02;
+  --color-fg-caution: #ec6007;
+  --color-fg-info: #0058e6;
+  --color-fg-on-brand: #ffffff;
+  --color-fg-on-danger: #ffffff;
+  --color-fg-on-success: #ffffff;
+  --color-fg-on-warning: #ffffff;
+  --color-fg-on-caution: #000000;
+  --color-fg-on-info: #ffffff;
+  --color-border-default: rgba(17,17,17,.08);
+  --color-border-subtle: rgba(17,17,17,.06);
+  --color-border-input: rgba(17,17,17,.14);
+  --color-border-sidebar: rgba(17,17,17,.08);
+  --color-border-brand: #00a859;
+  --color-border-brand-subtle: rgba(0,168,89,.36);
+  --color-border-danger-muted: rgba(248,59,59,.36);
+  --color-border-success-muted: rgba(0,168,89,.36);
+  --color-border-warning-muted: rgba(217,124,2,.36);
+  --color-border-caution-muted: rgba(236,96,7,.36);
+  --color-border-info-muted: rgba(0,88,230,.36);
+  --color-border-table: rgba(17,17,17,.08);
+  --color-ring-brand: rgba(0,168,89,.30);
+  --color-ring-danger: rgba(248,59,59,.30);
+  --color-ring-success: rgba(0,168,89,.30);
+  --color-ring-warning: rgba(217,124,2,.30);
+  --color-ring-caution: rgba(236,96,7,.30);
+  --color-ring-info: rgba(0,88,230,.30);
+  --color-ring-secondary: rgba(17,17,17,.14);
+  --color-overlay-scrim: rgba(0,0,0,.55);
+  --color-overlay-float: rgba(16,24,40,.12);
+  --color-chart-1: #00a859;
+  --color-chart-2: #0058e6;
+  --color-chart-3: #65a30d;
+  --color-chart-4: #d97c02;
+  --color-chart-5: #7c3aed;
+  --color-chart-grid: rgba(17,17,17,.08);
+}
+/* ── Dark (91 vars — .dark[data-theme] vence o .dark base) ────────── */
+.dark[data-theme="pay"] {
+  --color-bg-canvas: #050608;
+  --color-bg-surface: #0b0d10;
+  --color-bg-surface-elevated: #0f1116;
+  --color-bg-surface-panels: #0b0d10;
+  --color-bg-sidebar: #0b0d10;
+  --color-bg-subtle: #0f1116;
+  --color-bg-muted: #0f1116;
+  --color-bg-emphasis: #13161c;
+  --color-bg-input: #0b0d10;
+  --color-bg-accent: #0f1116;
+  --color-bg-brand: #00a859;
+  --color-bg-brand-subtle: rgba(0,168,89,.14);
+  --color-bg-brand-hover: #12b869;
+  --color-bg-brand-subtle-hover: rgba(0,168,89,.22);
+  --color-bg-danger: #ff6b6b;
+  --color-bg-danger-muted: rgba(255,107,107,.14);
+  --color-bg-danger-hover: #ff8585;
+  --color-bg-danger-muted-hover: rgba(255,107,107,.22);
+  --color-bg-success: #3bc882;
+  --color-bg-success-muted: rgba(59,200,130,.14);
+  --color-bg-success-hover: #57d195;
+  --color-bg-success-muted-hover: rgba(59,200,130,.22);
+  --color-bg-warning: #ffb620;
+  --color-bg-warning-muted: rgba(255,182,32,.14);
+  --color-bg-warning-hover: #ffc748;
+  --color-bg-warning-muted-hover: rgba(255,182,32,.22);
+  --color-bg-caution: #fe9553;
+  --color-bg-caution-muted: rgba(254,149,83,.14);
+  --color-bg-caution-hover: #ffa167;
+  --color-bg-caution-muted-hover: rgba(254,149,83,.22);
+  --color-bg-info: #3580ff;
+  --color-bg-info-muted: rgba(53,128,255,.15);
+  --color-bg-info-hover: #5a99ff;
+  --color-bg-info-muted-hover: rgba(53,128,255,.24);
+  --color-bg-muted-hover: #13161c;
+  --color-bg-input-hover: #13161c;
+  --color-bg-accent-hover: #13161c;
+  --color-bg-sidebar-accent: rgba(0,168,89,.14);
+  --color-bg-sidebar-accent-hover: #13161c;
+  --color-bg-table: #0b0d10;
+  --color-bg-table-head: #13161c;
+  --color-bg-table-row-hover: #13161c;
+  --color-bg-table-row-selected: rgba(0,168,89,.14);
+  --color-bg-table-row-selected-hover: rgba(0,168,89,.20);
+  --color-bg-table-row-selected-solid: color-mix(in srgb, #00a859 12%, #0b0d10);
+  --color-bg-table-row-selected-hover-solid: color-mix(in srgb, #00a859 18%, #0b0d10);
+  --color-bg-dropdown: #0b0d10;
+  --color-fg-strong: #ffffff;
+  --color-fg-default: #f5f7fa;
+  --color-fg-muted: #aeb4bd;
+  --color-fg-subtle: #7c8591;
+  --color-fg-disabled: #5b636b;
+  --color-fg-brand: #3bc882;
+  --color-fg-danger: #ff6b6b;
+  --color-fg-success: #3bc882;
+  --color-fg-warning: #ffb620;
+  --color-fg-caution: #fe9553;
+  --color-fg-info: #3580ff;
+  --color-fg-on-brand: #ffffff;
+  --color-fg-on-danger: #ffffff;
+  --color-fg-on-success: #000000;
+  --color-fg-on-warning: #000000;
+  --color-fg-on-caution: #000000;
+  --color-fg-on-info: #ffffff;
+  --color-border-default: rgba(255,255,255,.08);
+  --color-border-subtle: rgba(255,255,255,.06);
+  --color-border-input: rgba(255,255,255,.08);
+  --color-border-sidebar: rgba(255,255,255,.08);
+  --color-border-brand: #00a859;
+  --color-border-brand-subtle: rgba(0,168,89,.36);
+  --color-border-danger-muted: rgba(255,107,107,.36);
+  --color-border-success-muted: rgba(59,200,130,.36);
+  --color-border-warning-muted: rgba(255,182,32,.36);
+  --color-border-caution-muted: rgba(254,149,83,.36);
+  --color-border-info-muted: rgba(53,128,255,.36);
+  --color-border-table: rgba(255,255,255,.08);
+  --color-ring-brand: rgba(0,168,89,.35);
+  --color-ring-danger: rgba(255,107,107,.35);
+  --color-ring-success: rgba(59,200,130,.35);
+  --color-ring-warning: rgba(255,182,32,.35);
+  --color-ring-caution: rgba(254,149,83,.35);
+  --color-ring-info: rgba(53,128,255,.35);
+  --color-ring-secondary: rgba(255,255,255,.16);
+  --color-overlay-scrim: rgba(0,0,0,.6);
+  --color-overlay-float: rgba(255,255,255,.08);
+  --color-chart-1: #00a859;
+  --color-chart-2: #3580ff;
+  --color-chart-3: #a3e635;
+  --color-chart-4: #ffb620;
+  --color-chart-5: #a78bfa;
+  --color-chart-grid: rgba(255,255,255,.08);
+}