@dev-tcloud/tcloud-ui 6.14.2 → 6.15.0

package/scss/tcloud-ui/styles/_claus-themes.scss

@@ -0,0 +1,36 @@
+@use "sass:map";
+
+:root {
+  //background
+  --surface-01: var(--neutral-100);
+  --surface-02: var(--neutral-100);
+  --surface-03: var(--neutral-100);
+  --surface-04: var(--neutral-100);
+
+  //general-component
+  //general-component-background
+  --general-component-bg: var(--neutral-100);
+  --general-component-bg-hover: var(--neutral-100);
+  --general-component-bg-select-fill: var(--neutral-100);
+  --general-component-bg-select-outline: var(--neutral-100);
+  --general-component-bg-danger: var(--neutral-100);
+  --general-component-disabled: var(--neutral-100);
+  //general-component-border
+  --general-component-border: var(--neutral-100);
+  --general-component-border-hover: var(--neutral-100);
+  --general-component-border-select: var(--neutral-100);
+  --general-component-border-danger: var(--neutral-100);
+  --general-component-border-disabled: var(--neutral-100);
+  //general-component-icon
+  --general-component-icon: var(--neutral-100);
+  --general-component-icon-hover: var(--neutral-100);
+  --general-component-icon-select: var(--neutral-100);
+  --general-component-icon-danger: var(--neutral-100);
+  --general-component-icon-disabled: var(--neutral-100);
+  //general-component-text
+  --general-component-text: var(--neutral-100);
+  --general-component-text-hover: var(--neutral-100);
+  --general-component-text-select: var(--neutral-100);
+  --general-component-text-danger: var(--neutral-100);
+  --general-component-text-disabled: var(--neutral-100);
+}

package/scss/tcloud-ui/styles/_claus-title.scss

@@ -0,0 +1,24 @@
+// =============================================================================
+// Claus — tc-title
+// Uso: <h1 class="tc-title">Título</h1>  (h1–h6)
+// =============================================================================
+
+h1.tc-title,
+h2.tc-title,
+h3.tc-title,
+h4.tc-title,
+h5.tc-title,
+h6.tc-title {
+  font-family: inherit;
+  color: var(--c-neutral-700);
+  line-height: 1.2;
+  margin: 0;
+  transition: color 0.2s;
+}
+
+h1.tc-title { font-size: 2.5rem;   font-weight: 700; letter-spacing: -0.03em; }
+h2.tc-title { font-size: 2rem;     font-weight: 700; letter-spacing: -0.02em; }
+h3.tc-title { font-size: 1.5rem;   font-weight: 600; letter-spacing: -0.01em; }
+h4.tc-title { font-size: 1.25rem;  font-weight: 600; letter-spacing: 0; }
+h5.tc-title { font-size: 1rem;     font-weight: 600; letter-spacing: 0; }
+h6.tc-title { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase; }

package/scss/tcloud-ui/styles/_claus-typography.scss

@@ -0,0 +1,70 @@
+@use "sass:map";
+@use "./claus-variables.scss";
+
+//Font-family
+
+$fontFamily: (
+  "primary": var(--f-family-primary),
+  "secondary": var(--f-family-secondary),
+);
+
+@each $name, $value in $fontFamily {
+  .font-#{$name} {
+    font-family: $value;
+  }
+}
+
+//Font-size
+
+$fontSize: (
+  08: var(--gs-8),
+  10: var(--gs-10),
+  12: var(--gs-12),
+  14: var(--gs-14),
+  16: var(--gs-16),
+  18: var(--gs-18),
+  20: var(--gs-20),
+  24: var(--gs-24),
+  32: var(--gs-32),
+  40: var(--gs-40),
+  48: var(--gs-48),
+  56: var(--gs-56),
+);
+
+@each $key, $value in $fontSize {
+  .f-#{$key} {
+    font-size: $value;
+  }
+}
+
+//Font-weight
+
+$fontWeight: (
+  "light": var(--weight-light),
+  "regular": var(--weight-regular),
+  "semibold": var(--weight-semibold),
+  "bold": var(--weight-bold),
+  "black": var(--weight-black),
+);
+
+@each $name, $value in $fontWeight {
+  .font-#{$name} {
+    font-weight: $value;
+  }
+}
+
+//Font-weight
+
+$Textalign: (
+  "left": var(--weight-light),
+  "center": var(--weight-regular),
+  "right": var(--weight-semibold),
+);
+
+@each $name, $value in $Textalign {
+  .text-#{$name} {
+    text-align: $value;
+  }
+}
+
+//Semantica

package/scss/tcloud-ui/styles/_claus-variables.scss

@@ -0,0 +1,131 @@
+:root {
+  //Colors
+  //primary
+  --primary-500: #00dbff;
+  --primary-400: #75d8ff;
+  --primary-300: #eaf9ff;
+  //secondary
+  --secondary-500: #00dbff;
+  --secondary-400: #83eeff;
+  --secondary-300: #e0fbff;
+  //extra
+  --extra-800: #ff009e;
+  --extra-700: #ff8900;
+  --extra-600: #00ffd4;
+  --extra-500: #d9ff65;
+  --extra-400: #ffde99;
+  --extra-300: #ffccd7;
+  --extra-200: #ccffe3;
+  --extra-100: #f4ffc1;
+  //neutral
+  --neutral-700: #020b12;
+  --neutral-700: #050f17;
+  --neutral-600: #131313;
+  --neutral-500: #0d1f2e;
+  --neutral-400: #23435d;
+  --neutral-300: #f2f6f9;
+  --neutral-200: #effdff;
+  --neutral-100: #ffffff;
+  //warning
+  //danger
+  --danger-500: #dc3545;
+  --danger-400: #f48e85;
+  --danger-300: #fde1d6;
+  //alert
+  --alert-500: #ffc42f;
+  --alert-400: #ffe282;
+  --alert-300: #fff8d5;
+  //success
+  --success-500: #47b13d;
+  --success-400: #a3e78c;
+  --success-300: #e7fbda;
+  //info
+  --info-500: #0897e9;
+  --info-400: #75d8ff;
+  --info-300: #eaf9ff;
+
+  //General sizes
+  --gs-none: 0rem;
+  --gs-1: 0.0625rem;
+  --gs-2: 0.25rem;
+  --gs-3: 0.1875rem;
+  --gs-4: 0.25rem;
+  --gs-8: 0.5rem;
+  --gs-10: 0.625rem;
+  --gs-12: 0.75;
+  --gs-14: 0.875rem;
+  --gs-16: 1rem;
+  --gs-20: 1.25rem;
+  --gs-22: 1.375rem;
+  --gs-24: 1.5rem;
+  --gs-32: 2rem;
+  --gs-40: 2.5rem;
+  --gs-48: 3rem;
+  --gs-56: 3.5rem;
+  --gs-64: 4rem;
+  --gs-72: 4.5rem;
+  --gs-80: 5rem;
+  --gs-full: 100%;
+
+  //Border radius
+  --bor-radius-pill: 40px;
+  --bor-radius-sm: 4px;
+  --bor-radius-md: 8px;
+  --bor-radius-lg: 16px;
+
+  //Sizes (aliases semânticos)
+  --size-16: 1rem;
+  --size-40: 2.5rem;
+
+  //Typograph
+  //Family
+  --f-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --f-family-primary: "TOTVS", "Open sans", sans-serif;
+  --f-family-secondary: "Open sans", sans-serif;
+  //Font size (aliases semânticos)
+  --f-size-14: 0.875rem;
+  --f-size-16: 1rem;
+  //Line height (aliases semânticos)
+  --l-height-20: 1.43;
+  //Line height
+  --line-height-16: 1.33;
+  --line-height-20: 1.43;
+  --line-height-24: 1.5;
+  --line-height-26: 1.44;
+  --line-height-28: 1.4;
+  --line-height-32: 1.33;
+  --line-height-40: 1.25;
+  --line-height-56: 1.16;
+  --line-height-64: 1.14;
+  //Weight
+  --weight-light: 200;
+  --weight-regular: 300;
+  --weight-semibold: 400;
+  --weight-bold: 500;
+  --weight-black: 600;
+}
+
+$sides: (
+  "": "",
+  "t": "top",
+  "r": "right",
+  "b": "bottom",
+  "l": "left",
+  "x": (
+    "left",
+    "right",
+  ),
+  "y": (
+    "top",
+    "bottom",
+  ),
+);
+
+
+.card {
+  background-color: var(--neutral-100);
+}
+
+.dark-mode .card {
+  background-color: var(--neutral-100);
+}

package/scss/tcloud-ui/styles/_colors.scss

@@ -0,0 +1,123 @@
+// =============================================================================
+// Color Palette
+// =============================================================================
+// Escala numérica: quanto maior, mais escuro no modo light.
+// No modo dark, as mesmas variáveis são remapeadas para o inverso,
+// permitindo que o código de componentes não precise de alterações.
+//
+// Temas (classes no <body>):
+//   Variante: nenhuma classe = tc-standard | body.tc-prime-modern
+//   Dark:     body.tc-dark
+//   Combinado: body.tc-prime-modern.tc-dark
+// =============================================================================
+
+:root {
+  // --- Neutros (escala clara → escura) --------------------------------------
+  --c-neutral-50:  #FFFFFF;
+  --c-neutral-100: #F2F6F9;
+  --c-neutral-200: #EEEEEE;
+  --c-neutral-300: #CED4DA;
+  --c-neutral-400: #BAC0C6;
+  --c-neutral-500: #5E5E5E;
+  --c-neutral-600: #363636;
+  --c-neutral-700: #1A1A1A;
+  --c-neutral-800: #0D0D0D;
+  --c-neutral-900: #000000;
+
+  // --- Primária -------------------------------------------------------------
+  --c-primary-300: #EAF9FF;
+  --c-primary-400: #75D8FF;
+  --c-primary-500: #0897E9;
+  --c-primary-600: #0457A7;
+  --c-primary-700: #012C6F;
+
+  // --- Danger ---------------------------------------------------------------
+  --c-danger-300: #FDE1D6;
+  --c-danger-400: #F48E85;
+  --c-danger-500: #DC3545;
+
+  // --- Alert ----------------------------------------------------------------
+  --c-alert-300: #FFE6B7;
+  --c-alert-400: #FECD6E;
+  --c-alert-500: #FEAC0E;
+
+  // --- Info -----------------------------------------------------------------
+  --c-info-300: #E6F5FD;
+  --c-info-400: #6BC1F2;
+  --c-info-500: #0897E9;
+
+  // --- Success --------------------------------------------------------------
+  --c-success-300: #E7FBDA;
+  --c-success-400: #A3E78C;
+  --c-success-500: #47B13D;
+
+}
+
+// =============================================================================
+// Variante Prime Modern — light
+// =============================================================================
+body.tc-prime-modern {
+  --c-primary-300: #D3C8FF;
+  --c-primary-400: #896DFF;
+  --c-primary-500: #6B48FF;
+  --c-primary-600: #3A24B7;
+  --c-primary-700: #190D7A;
+}
+
+// =============================================================================
+// Dark mode
+// Remapeia as mesmas variáveis para valores invertidos/adaptados.
+// Os componentes continuam usando os mesmos tokens sem alteração.
+//
+// Para ativar: document.body.classList.add('tc-dark')
+// Para desativar: document.body.classList.remove('tc-dark')
+// =============================================================================
+body.tc-dark {
+  // --- Neutros (escala invertida) -------------------------------------------
+  --c-neutral-50:  #0F1117;   // fundo principal da página
+  --c-neutral-100: #181B24;   // fundo de seções alternadas
+  --c-neutral-200: #22263A;   // bordas suaves / separadores
+  --c-neutral-300: #363B55;   // bordas visíveis / inputs
+  --c-neutral-400: #5C6280;   // texto desabilitado / placeholder
+  --c-neutral-500: #8C91A8;   // texto secundário
+  --c-neutral-600: #C0C6D8;   // texto de apoio
+  --c-neutral-700: #DDE1EE;   // texto principal
+  --c-neutral-800: #ECEEF5;   // texto de destaque
+  --c-neutral-900: #F5F6FA;   // texto com máximo contraste
+
+  // --- Primária (tons mais luminosos para fundos escuros) -------------------
+  --c-primary-300: #0E2A45;
+  --c-primary-400: #0B5C9C;
+  --c-primary-500: #29A8F5;
+  --c-primary-600: #74CCFA;
+  --c-primary-700: #BFE9FD;
+
+  // --- Danger ---------------------------------------------------------------
+  --c-danger-300: #3D0A0A;
+  --c-danger-400: #C0372E;
+  --c-danger-500: #F26F6F;
+
+  // --- Alert ----------------------------------------------------------------
+  --c-alert-300: #3A2000;
+  --c-alert-400: #B87500;
+  --c-alert-500: #FFCC55;
+
+  // --- Info -----------------------------------------------------------------
+  --c-info-300: #0E2A45;
+  --c-info-400: #0B5C9C;
+  --c-info-500: #29A8F5;
+
+  // --- Success --------------------------------------------------------------
+  --c-success-300: #0A2B05;
+  --c-success-400: #277A20;
+  --c-success-500: #6DD462;
+
+  // --- Variante Prime Modern — dark -----------------------------------------
+  &.tc-prime-modern {
+    --c-primary-300: #1A0F40;
+    --c-primary-400: #4B2FD4;
+    --c-primary-500: #9580FF;
+    --c-primary-600: #C0B4FF;
+    --c-primary-700: #E4DEFF;
+  }
+}

package/scss/tcloud-ui/styles/_tc-btn.scss

@@ -0,0 +1,210 @@
+// =============================================================================
+// tc-btn — Botões
+// Uso: <button class="tc-btn tc-btn-primary">Label</button>
+// =============================================================================
+
+// --- Mixins internos ---------------------------------------------------------
+
+@mixin btn-filled($bg, $bg-hover, $bg-active, $color) {
+  background-color: $bg;
+  color: $color;
+  border-color: $bg;
+
+  &:hover:not(:disabled) {
+    background-color: $bg-hover;
+    border-color: $bg-hover;
+  }
+
+  &:active:not(:disabled) {
+    background-color: $bg-active;
+    border-color: $bg-active;
+    transform: scale(0.98);
+  }
+}
+
+@mixin btn-outline($color, $color-hover-bg, $color-active-bg) {
+  background-color: transparent;
+  color: $color;
+  border-color: $color;
+
+  &:hover:not(:disabled) {
+    background-color: $color-hover-bg;
+  }
+
+  &:active:not(:disabled) {
+    background-color: $color-active-bg;
+    transform: scale(0.98);
+  }
+}
+
+// --- Base --------------------------------------------------------------------
+
+.tc-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 18px;
+  border-radius: 40px;
+  border: 2px solid transparent;
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease,
+    transform 0.1s ease,
+    opacity 0.15s ease;
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--c-primary-400);
+    outline-offset: 2px;
+  }
+
+  // --- Sizes ----------------------------------------------------------------
+
+  &.tc-btn-sm {
+    padding: 5px 12px;
+    font-size: 0.8rem;
+  }
+
+  &.tc-btn-lg {
+    padding: 12px 24px;
+    font-size: 1rem;
+  }
+
+  // --- Filled variants ------------------------------------------------------
+
+  &.tc-btn-primary {
+    @include btn-filled(
+      var(--c-primary-500),
+      var(--c-primary-600),
+      var(--c-primary-700),
+      #ffffff
+    );
+  }
+
+  &.tc-btn-danger {
+    @include btn-filled(
+      var(--c-danger-500),
+      #b02a37,
+      #8b1a23,
+      #ffffff
+    );
+  }
+
+  &.tc-btn-alert {
+    @include btn-filled(
+      var(--c-alert-500),
+      #d9920b,
+      #b37709,
+      #1a1a1a
+    );
+  }
+
+  &.tc-btn-success {
+    @include btn-filled(
+      var(--c-success-500),
+      #3a9132,
+      #2d7227,
+      #ffffff
+    );
+  }
+
+  &.tc-btn-neutral {
+    @include btn-filled(
+      var(--c-neutral-200),
+      var(--c-neutral-300),
+      var(--c-neutral-400),
+      var(--c-neutral-700)
+    );
+  }
+
+  // --- Outline variants -----------------------------------------------------
+
+  &.tc-btn-outline-primary {
+    @include btn-outline(
+      var(--c-primary-500),
+      var(--c-primary-300),
+      var(--c-primary-400)
+    );
+    color: var(--c-primary-500);
+  }
+
+  &.tc-btn-outline-danger {
+    @include btn-outline(
+      var(--c-danger-500),
+      var(--c-danger-300),
+      var(--c-danger-400)
+    );
+    color: var(--c-danger-500);
+  }
+
+  &.tc-btn-outline-neutral {
+    @include btn-outline(
+      var(--c-neutral-400),
+      var(--c-neutral-100),
+      var(--c-neutral-200)
+    );
+    color: var(--c-neutral-600);
+  }
+}
+
+// --- Link estilizado como botão -----------------------------------------------
+
+a.tc-btn {
+  display: inline-flex;
+}
+
+// --- tc-link -----------------------------------------------------------------
+
+.tc-link {
+  color: var(--c-primary-500);
+  text-decoration: none;
+  font-weight: 500;
+  border-bottom: 1px solid transparent;
+  transition: color 0.15s, border-color 0.15s;
+
+  &:hover {
+    color: var(--c-primary-600);
+    border-bottom-color: var(--c-primary-400);
+  }
+
+  &:active {
+    color: var(--c-primary-700);
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--c-primary-400);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  &.tc-link-danger {
+    color: var(--c-danger-500);
+
+    &:hover {
+      color: #b02a37;
+      border-bottom-color: var(--c-danger-400);
+    }
+  }
+
+  &.tc-link-muted {
+    color: var(--c-neutral-500);
+
+    &:hover {
+      color: var(--c-neutral-700);
+      border-bottom-color: var(--c-neutral-400);
+    }
+  }
+}

package/scss/tcloud-ui/styles/_tc-card.scss

@@ -0,0 +1,7 @@
+.tc-card {
+  width: 100%;
+  padding: 16px;
+  border-radius: 16px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .14);
+  background-color: var(--c-neutral-50);
+}

package/scss/tcloud-ui/styles/_tc-title.scss

@@ -0,0 +1,49 @@
+h1.tc-title,
+h2.tc-title,
+h3.tc-title,
+h4.tc-title,
+h5.tc-title,
+h6.tc-title {
+  font-family: inherit;
+  color: var(--c-neutral-700);
+  line-height: 1.2;
+  margin: 0;
+  transition: color 0.2s;
+}
+
+h1.tc-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+
+h2.tc-title {
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+h3.tc-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+h4.tc-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+h5.tc-title {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+h6.tc-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+}

package/scss/tcloud-ui/styles.scss

@@ -0,0 +1,35 @@
+// =============================================================================
+// Global styles
+// Ordem: cores → variáveis → componentes → utilitários
+// =============================================================================
+
+// --- Cores e tokens (fonte única de verdade) ---------------------------------
+@use 'styles/claus-colors';
+
+// --- Variáveis, espaçamentos, tipografia e tamanhos -------------------------
+@use 'styles/claus-variables';
+@use 'styles/claus-spacers';
+@use 'styles/claus-sizes';
+@use 'styles/claus-typography';
+
+// --- Componentes ------------------------------------------------------------
+@use 'styles/claus-btn';
+@use 'styles/claus-card';
+@use 'styles/claus-title';
+@use 'styles/claus-form';
+@use 'styles/claus-badge';
+
+// --- Reset e base -----------------------------------------------------------
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--c-neutral-50);
+  color: var(--c-neutral-700);
+  transition: background 0.2s, color 0.2s;
+}