@dev-tcloud/tcloud-ui 6.14.2 → 6.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-tcloud/tcloud-ui",
-  "version": "6.14.2",
+  "version": "6.15.0",
   "peerDependencies": {
     "@angular/common": "^19.2.14",
     "@angular/core": "^19.2.14"

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

@@ -0,0 +1,117 @@
+// =============================================================================
+// Claus — tc-badge
+// Uso: <span class="tc-badge tc-badge-primary">Label</span>
+// =============================================================================
+
+.tc-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 10px;
+  border-radius: var(--bor-radius-pill);
+  font-family: var(--f-family);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.6;
+  white-space: nowrap;
+  border: 1px solid transparent;
+
+  // --- Variantes filled -------------------------------------------------------
+
+  &-primary {
+    background-color: var(--c-primary-300);
+    color: var(--c-primary-700);
+    border-color: var(--c-primary-400);
+  }
+
+  &-danger {
+    background-color: var(--c-danger-300);
+    color: var(--c-danger-700);
+    border-color: var(--c-danger-400);
+  }
+
+  &-alert {
+    background-color: var(--c-alert-300);
+    color: var(--c-alert-700);
+    border-color: var(--c-alert-400);
+  }
+
+  &-success {
+    background-color: var(--c-success-300);
+    color: var(--c-success-700);
+    border-color: var(--c-success-400);
+  }
+
+  &-info {
+    background-color: var(--c-info-300);
+    color: var(--c-primary-700);
+    border-color: var(--c-info-400);
+  }
+
+  &-neutral {
+    background-color: var(--c-neutral-200);
+    color: var(--c-neutral-600);
+    border-color: var(--c-neutral-300);
+  }
+
+  // --- Variante solid (fundo cheio, texto claro) ------------------------------
+
+  &-solid {
+    &.tc-badge-primary {
+      background-color: var(--c-primary-500);
+      color: var(--c-neutral-50);
+      border-color: var(--c-primary-500);
+    }
+
+    &.tc-badge-danger {
+      background-color: var(--c-danger-500);
+      color: var(--c-neutral-50);
+      border-color: var(--c-danger-500);
+    }
+
+    &.tc-badge-alert {
+      background-color: var(--c-alert-500);
+      color: var(--c-neutral-700);
+      border-color: var(--c-alert-500);
+    }
+
+    &.tc-badge-success {
+      background-color: var(--c-success-500);
+      color: var(--c-neutral-50);
+      border-color: var(--c-success-500);
+    }
+
+    &.tc-badge-info {
+      background-color: var(--c-info-500);
+      color: var(--c-neutral-50);
+      border-color: var(--c-info-500);
+    }
+
+    &.tc-badge-neutral {
+      background-color: var(--c-neutral-600);
+      color: var(--c-neutral-50);
+      border-color: var(--c-neutral-600);
+    }
+  }
+
+  // --- Tamanhos ---------------------------------------------------------------
+
+  &-sm {
+    padding: 1px 7px;
+    font-size: 0.6875rem;
+  }
+
+  &-lg {
+    padding: 4px 14px;
+    font-size: 0.875rem;
+  }
+
+  // --- Estado desabilitado ----------------------------------------------------
+
+  &-disabled,
+  &[disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,207 @@
+// =============================================================================
+// Claus — tc-btn
+// Uso: <button class="tc-btn tc-btn-primary">Label</button>
+// Todas as cores via CSS custom properties (--c-*); sem valores literais.
+// =============================================================================
+
+@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;
+  }
+
+  // --- Tamanhos ---------------------------------------------------------------
+
+  &.tc-btn-sm {
+    padding: 5px 12px;
+    font-size: 0.8rem;
+  }
+
+  &.tc-btn-lg {
+    padding: 12px 24px;
+    font-size: 1rem;
+  }
+
+  // --- Filled -----------------------------------------------------------------
+
+  &.tc-btn-primary {
+    @include btn-filled(
+      var(--c-primary-500),
+      var(--c-primary-600),
+      var(--c-primary-700),
+      var(--c-neutral-50)
+    );
+  }
+
+  &.tc-btn-danger {
+    @include btn-filled(
+      var(--c-danger-500),
+      var(--c-danger-600),
+      var(--c-danger-700),
+      var(--c-neutral-50)
+    );
+  }
+
+  &.tc-btn-alert {
+    @include btn-filled(
+      var(--c-alert-500),
+      var(--c-alert-600),
+      var(--c-alert-700),
+      var(--c-neutral-700)
+    );
+  }
+
+  &.tc-btn-success {
+    @include btn-filled(
+      var(--c-success-500),
+      var(--c-success-600),
+      var(--c-success-700),
+      var(--c-neutral-50)
+    );
+  }
+
+  &.tc-btn-neutral {
+    @include btn-filled(
+      var(--c-neutral-200),
+      var(--c-neutral-300),
+      var(--c-neutral-400),
+      var(--c-neutral-700)
+    );
+  }
+
+  // --- Outline ----------------------------------------------------------------
+
+  &.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);
+  }
+}
+
+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: var(--c-danger-600);
+      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/_claus-card.scss

@@ -0,0 +1,12 @@
+// =============================================================================
+// Claus — tc-card
+// Uso: <div class="tc-card">...</div>
+// =============================================================================
+
+.tc-card {
+  width: 100%;
+  padding: 16px;
+  border-radius: 16px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.14);
+  background-color: var(--c-neutral-50);
+}

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

@@ -0,0 +1,192 @@
+@use "sass:map";
+
+// =============================================================================
+// Claus — Color Palette (fonte única de verdade)
+// =============================================================================
+// Prefixo: --c-  (alinhado com os componentes tc-*)
+// Escala numérica: quanto maior, mais escuro no modo light.
+// No modo dark as mesmas variáveis são remapeadas; componentes não mudam.
+//
+// Ativar dark mode : document.body.classList.add('tc-dark')
+// Variante prime   : document.body.classList.add('tc-prime-modern')
+// =============================================================================
+
+:root {
+  // --- Neutros ----------------------------------------------------------------
+  --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;
+  --c-danger-600: #B02A37;
+  --c-danger-700: #8B1A23;
+
+  // --- Alert ------------------------------------------------------------------
+  --c-alert-300: #FFE6B7;
+  --c-alert-400: #FECD6E;
+  --c-alert-500: #FEAC0E;
+  --c-alert-600: #D9920B;
+  --c-alert-700: #B37709;
+
+  // --- 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;
+  --c-success-600: #3A9132;
+  --c-success-700: #2D7227;
+}
+
+// =============================================================================
+// 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 variáveis; componentes não precisam de alterações
+// =============================================================================
+body.tc-dark {
+  // --- Neutros (invertidos) ---------------------------------------------------
+  --c-neutral-50:  #0F1117;
+  --c-neutral-100: #181B24;
+  --c-neutral-200: #22263A;
+  --c-neutral-300: #363B55;
+  --c-neutral-400: #5C6280;
+  --c-neutral-500: #8C91A8;
+  --c-neutral-600: #C0C6D8;
+  --c-neutral-700: #DDE1EE;
+  --c-neutral-800: #ECEEF5;
+  --c-neutral-900: #F5F6FA;
+
+  // --- Primária ---------------------------------------------------------------
+  --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;
+  --c-danger-600: #F58888;
+  --c-danger-700: #F9A0A0;
+
+  // --- Alert ------------------------------------------------------------------
+  --c-alert-300: #3A2000;
+  --c-alert-400: #B87500;
+  --c-alert-500: #FFCC55;
+  --c-alert-600: #FFD56B;
+  --c-alert-700: #FFDE80;
+
+  // --- 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;
+  --c-success-600: #7EDD75;
+  --c-success-700: #90E688;
+
+  // --- 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;
+  }
+}
+
+// =============================================================================
+// Mapa SCSS — referencia os tokens --c-* para geração de utilitários
+// =============================================================================
+$colors: (
+  "primary": (
+    "300": var(--c-primary-300),
+    "400": var(--c-primary-400),
+    "500": var(--c-primary-500),
+    "600": var(--c-primary-600),
+    "700": var(--c-primary-700),
+  ),
+  "neutral": (
+    "50":  var(--c-neutral-50),
+    "100": var(--c-neutral-100),
+    "200": var(--c-neutral-200),
+    "300": var(--c-neutral-300),
+    "400": var(--c-neutral-400),
+    "500": var(--c-neutral-500),
+    "600": var(--c-neutral-600),
+    "700": var(--c-neutral-700),
+    "800": var(--c-neutral-800),
+    "900": var(--c-neutral-900),
+  ),
+  "danger": (
+    "300": var(--c-danger-300),
+    "400": var(--c-danger-400),
+    "500": var(--c-danger-500),
+    "600": var(--c-danger-600),
+    "700": var(--c-danger-700),
+  ),
+  "alert": (
+    "300": var(--c-alert-300),
+    "400": var(--c-alert-400),
+    "500": var(--c-alert-500),
+    "600": var(--c-alert-600),
+    "700": var(--c-alert-700),
+  ),
+  "info": (
+    "300": var(--c-info-300),
+    "400": var(--c-info-400),
+    "500": var(--c-info-500),
+  ),
+  "success": (
+    "300": var(--c-success-300),
+    "400": var(--c-success-400),
+    "500": var(--c-success-500),
+    "600": var(--c-success-600),
+    "700": var(--c-success-700),
+  ),
+);
+
+// =============================================================================
+// Utilitários gerados — .text-{color}-{shade}  .bg-{color}-{shade}
+//                       .border-{color}-{shade}
+// =============================================================================
+@each $color, $shades in $colors {
+  @each $shade, $value in $shades {
+    .text-#{$color}-#{$shade}   { color: $value; }
+    .bg-#{$color}-#{$shade}     { background-color: $value; }
+    .border-#{$color}-#{$shade} { border-color: $value; }
+  }
+}

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

@@ -0,0 +1,88 @@
+// =============================================================================
+// Claus — tc-form-control
+// Uso: <input class="tc-form-control" type="text" />
+// =============================================================================
+
+.tc-form-control {
+  border: 1px solid var(--c-neutral-400);
+  border-radius: var(--bor-radius-pill);
+  color: var(--c-neutral-700);
+  display: inline-block;
+  font-family: var(--f-family);
+  font-size: var(--f-size-14);
+  line-height: var(--l-height-20);
+  outline: none;
+  height: var(--size-40);
+  transition: .2s ease;
+  padding: 0 var(--size-16);
+  max-width: 100%;
+  width: 100%;
+  background-color: var(--c-neutral-50);
+  box-sizing: border-box;
+
+  &::placeholder {
+    color: var(--c-neutral-400);
+  }
+
+  &:hover:not(:disabled):not(.tc-form-control--error) {
+    border-color: var(--c-neutral-500);
+  }
+
+  &:focus:not(:disabled):not(.tc-form-control--error) {
+    border-color: var(--c-primary-500);
+    box-shadow: 0 0 0 3px var(--c-primary-300);
+  }
+
+  // --- Estado desabilitado ----------------------------------------------------
+  &:disabled,
+  &[disabled] {
+    background-color: var(--c-neutral-100);
+    border-color: var(--c-neutral-300);
+    color: var(--c-neutral-400);
+    cursor: not-allowed;
+    opacity: 1;
+
+    &::placeholder {
+      color: var(--c-neutral-300);
+    }
+  }
+
+  // --- Estado de erro ---------------------------------------------------------
+  &--error {
+    border-color: var(--c-danger-500);
+    background-color: var(--c-danger-300);
+
+    &:focus {
+      border-color: var(--c-danger-500);
+      box-shadow: 0 0 0 3px var(--c-danger-300);
+    }
+  }
+}
+
+// --- Wrapper com label -------------------------------------------------------
+// Uso: <div class="tc-form-field"> <label> ... <input> </div>
+
+.tc-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  label {
+    font-size: var(--f-size-14);
+    font-weight: 600;
+    color: var(--c-neutral-700);
+    line-height: 1;
+  }
+
+  .tc-form-hint {
+    font-size: 0.75rem;
+    color: var(--c-neutral-500);
+    margin: 0;
+  }
+
+  .tc-form-error {
+    font-size: 0.75rem;
+    color: var(--c-danger-500);
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,28 @@
+@use "sass:map";
+@use "./claus-variables.scss";
+
+//Width e height
+$sizing: (
+  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 $size, $value in $sizing {
+  .h-#{$size} {
+    height: $value;
+  }
+
+  .w-#{$size} {
+    width: $value;
+  }
+}

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

@@ -0,0 +1,49 @@
+@use "sass:map";
+@use 'sass:meta';
+@use "./claus-variables.scss";
+
+//Padding e margin
+
+$spacers: (
+  "auto": auto,
+  "none": var(--gs-none),
+  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 $size, $space-value in $spacers {
+  @each $abbr, $side-value in claus-variables.$sides {
+    .p#{$abbr}-#{$size} {
+      @if meta.type-of($side-value) == "list" {
+        @each $s in $side-value {
+          padding-#{$s}: $space-value;
+        }
+      } @else if $side-value != "" {
+        padding-#{$side-value}: $space-value;
+      } @else {
+        padding: $space-value;
+      }
+    }
+    .m#{$abbr}-#{$size} {
+      @if meta.type-of($side-value) == "list" {
+        @each $s in $side-value {
+          margin-#{$s}: $space-value;
+        }
+      } @else if $side-value != "" {
+        margin-#{$side-value}: $space-value;
+      } @else {
+        margin: $space-value;
+      }
+    }
+  }
+}