@dev-tcloud/tcloud-ui 6.23.2 → 6.25.0-beta.1

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

@@ -1,192 +1,155 @@
 @use "sass:map";
+@use "claus-variables";
 
-// =============================================================================
-// 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),
+    "300": var(--primary-300),
+    "400": var(--primary-400),
+    "500": var(--primary-500),
   ),
   "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),
+    "50": var(--neutral-50),
+    "100": var(--neutral-100),
+    "200": var(--neutral-200),
+    "300": var(--neutral-300),
+    "400": var(--neutral-400),
+    "500": var(--neutral-500),
+    "600": var(--neutral-600),
+    "700": var(--neutral-700),
+    "800": var(--neutral-800),
+    "900": var(--neutral-900),
+    "1000": var(--neutral-1000),
+    "1100": var(--neutral-1100),
+    "1200": var(--neutral-1200),
+    "1300": var(--neutral-1300),
+    "1400": var(--neutral-1400),
+    "1500": var(--neutral-1500),
+    "1600": var(--neutral-1600),
+    "1700": var(--neutral-1700),
   ),
   "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),
+    "300": var(--danger-300),
+    "400": var(--danger-400),
+    "500": var(--danger-500),
   ),
   "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),
+    "300": var(--alert-300),
+    "400": var(--alert-400),
+    "500": var(--alert-500),
   ),
   "info": (
-    "300": var(--c-info-300),
-    "400": var(--c-info-400),
-    "500": var(--c-info-500),
+    "300": var(--info-300),
+    "400": var(--info-400),
+    "500": var(--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),
+    "300": var(--success-300),
+    "400": var(--success-400),
+    "500": var(--success-500),
+  ),
+  "extra": (
+    "50": var(--extras-50),
+    "100": var(--extras-100),
+    "200": var(--extras-200),
+    "300": var(--extras-300),
+    "400": var(--extras-400),
+    "500": var(--extras-500),
+    "600": var(--extras-600),
+    "700": var(--extras-700),
+    "800": var(--extras-800),
+    "900": var(--extras-900),
+  ),
+  "gradient": (
+    "danger": var(--gradient-danger),
+    "alert": var(--gradient-alert),
+    "success": var(--gradient-success),
+    "info": var(--gradient-info),
   ),
 );
 
-// =============================================================================
-// 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; }
+/* Geracao das cores bases  */
+@each $color, $saturations in $colors {
+  @each $saturation, $value in $saturations {
+    .text-#{$color}-#{$saturation} {
+      color: $value;
+    }
+    .bg-#{$color}-#{$saturation} {
+      background-color: $value;
+    }
+    .border-#{$color}-#{$saturation} {
+      border-color: $value;
+    }
   }
 }
+
+$themes: (
+  "bg": (
+    "main": var(--background-levels-main),
+    "section": var(--background-levels-section),
+    "modal": var(--background-levels-modal),
+    "tab-primary": var(--background-levels-tab-primary),
+    "tab-secondary": var(--background-levels-tab-secondary),
+    "link": var(--component-bg-transparent),
+    "highlight": var(--component-bg-highlight),
+    "default": var(--component-bg-default),
+    "hover": var(--component-bg-hover),
+    "selected": var(--component-bg-selected),
+    "selected-light": var(--component-bg-light),
+    "disabled": var(--component-bg-disabled),
+    "danger": var(--component-bg-danger),
+  ),
+  "icon": (
+    "link": var(--component-icon-link),
+    "highlight": var(--component-icon-highlight),
+    "default": var(--component-icon-default),
+    "hover": var(--component-icon-hover),
+    "selected": var(--component-icon-selected),
+    "selected-light": var(--component-icon-selected-light),
+    "disabled": var(--component-icon-disabled),
+    "danger": var(--component-icon-danger),
+  ),
+  "border": (
+    "link": var(--component-border-link),
+    "highlight": var(--component-border-highlight),
+    "default": var(--component-border-default),
+    "hover": var(--component-border-hover),
+    "selected": var(--component-border-selected),
+    "selected-light": var(--component-border-selected-light),
+    "disabled": var(--component-border-disabled),
+    "danger": var(--component-border-danger),
+  ),
+  "text": (
+    "general-link": var(--general-text-link),
+    "general-highlight": var(--general-text-highlight),
+    "general-default": var(--general-text-default),
+    "general-hover": var(--general-text-hover),
+    "general-disabled": var(--general-text-disabled),
+    "general-danger": var(--general-text-danger),
+    "link": var(--component-text-link),
+    "highlight": var(--component-text-highlight),
+    "default": var(--component-text-default),
+    "hover": var(--component-text-hover),
+    "selected": var(--component-text-selected),
+    "selected-light": var(--component-text-selected-light),
+    "disabled": var(--component-text-disabled),
+    "danger": var(--component-text-danger),
+  ),
+);
+
+/* Geração de Classes Utilitárias do Tema (Otimizada) */
+@each $type, $variants in $themes {
+  @each $key, $value in $variants {
+    .#{$type}-#{$key} {
+      
+      @if $type == "bg" {
+        background-color: $value;
+      } 
+      @else if $type == "border" {
+        border-color: $value;
+      } 
+      @else if $type == "text" or $type == "icon" {
+        color: $value;
+      }
+    }
+  }
+}

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

@@ -1,49 +1,244 @@
 :root {
-  //Colors
-  //primary
+  /* --- Tokens de cores --- */
+  /* --- Cores primarias --- */
   --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
+
+  /* --- Cores extras --- */
+  --extras-900: #ff009e;
+  --extras-800: #ff8900;
+  --extras-700: #a44dff;
+  --extras-600: #00ffd4;
+  --extras-500: #d9ff65;
+  --extras-400: #ffde99;
+  --extras-300: #ffccd7;
+  --extras-200: #f3dbff;
+  --extras-100: #ccffe3;
+  --extras-50: #f4ffc1;
+
+  /* --- Cores neutras --- */
+  --neutral-1700: #020b12;
+  --neutral-1600: #050f17;
+  --neutral-1500: #131313;
+  --neutral-1400: #0d1f2e;
+  --neutral-1300: #24425a;
+  --neutral-1200: #4b6376;
+  --neutral-1100: #6c757d;
+  --neutral-1000: #94a3b8;
+  --neutral-900: #ccc;
+  --neutral-800: #ced4da;
+  --neutral-700: #d2d9e2;
+  --neutral-600: #dfe3e6;
+  --neutral-500: #e4ebf0;
+  --neutral-400: #e9ebed;
+  --neutral-300: #eee;
+  --neutral-200: #f2f6f9;
+  --neutral-100: #effdff;
+  --neutral-50: #fff;
+
+  /* --- Cores de feedback --- */
+  /* --- Cores de perigo --- */
   --danger-500: #dc3545;
   --danger-400: #f48e85;
   --danger-300: #fde1d6;
-  //alert
+
+  /* --- Cores de alerta --- */
   --alert-500: #ffc42f;
   --alert-400: #ffe282;
   --alert-300: #fff8d5;
-  //success
+
+  /* --- Cores de sucesso --- */
   --success-500: #47b13d;
   --success-400: #a3e78c;
   --success-300: #e7fbda;
-  //info
+
+  /* --- Cores de informacoes --- */
   --info-500: #0897e9;
   --info-400: #75d8ff;
   --info-300: #eaf9ff;
 
+  /* --- Definições de gradientes --- */
+  --gradient-danger: linear-gradient(
+    90deg,
+    var(--danger-400, #f48e85) 0%,
+    var(--danger-500, #dc3545) 100%
+  );
+  --gradient-alert: linear-gradient(
+    90deg,
+    var(--alert-400, #ffe282) 0%,
+    var(--alert-500, #ffc42f) 100%
+  );
+  --gradient-success: linear-gradient(
+    90deg,
+    var(--success-400, #a3e78c) 0%,
+    var(--success-500, #47b13d) 100%
+  );
+  --gradient-info: linear-gradient(
+    90deg,
+    var(--info-400, #75d8ff) 0%,
+    var(--info-500, #0897e9) 100%
+  );
+
+  /* --- Tokens do tema default --- */
+  /* --- Tokens de nivel de background dos componentes --- */
+  --background-levels-main: var(--neutral-200);
+  --background-levels-section: var(--neutral-50);
+  --background-levels-modal: var(--neutral-50);
+  --background-levels-primary-tab: var(--neutral-200);
+  --background-levels-secondary-tab: var(--neutral-500);
+
+  /* --- Tokens de background dos componentes --- */
+  --component-bg-transparent: transparent;
+  --component-bg-default: var(--background-levels-section);
+  --component-bg-hover: var(--neutral-400);
+  --component-bg-highlight: var(--neutral-400);
+  --component-bg-selected: var(--primary-500);
+  --component-bg-selected-light: var(--primary-300);
+  --component-bg-danger: var(--danger-100);
+  --component-bg-disabled: var(--neutral-300);
+
+  /* --- Tokens de icones dos componentes --- */
+  --component-icon-link: var(--extras-700);
+  --component-icon-highlight: var(--primary-500);
+  --component-icon-default: var(--neutral-1700);
+  --component-icon-hover: var(--neutral-1700);
+  --component-icon-selected: var(--neutral-1700);
+  --component-icon-selected-light: var(--primary-300);
+  --component-icon-disabled: var(--neutral-1100);
+  --component-icon-danger: var(--danger-300);
+
+  /* --- Tokens de bordas dos componentes --- */
+  --component-border-link: var(--neutral-700);
+  --component-border-highlight: var(--neutral-700);
+  --component-border-default: var(--neutral-1000);
+  --component-border-hover: var(--primary-500);
+  --component-border-selected: var(--primary-500);
+  --component-border-danger: var(--danger-300);
+  --component-border-disabed: var(--neutral-800);
+
+  /* --- Tokens de texto dos componentes --- */
+  --component-text-link: var(--extras-700);
+  --component-text-highlight: var(--primary-500);
+  --component-text-default: var(--neutral-1700);
+  --component-text-hover: var(--neutral-1700);
+  --component-text-selected: var(--neutral-1700);
+  --component-text-disabled: var(--neutral-1100);
+  --component-text-danger: var(--danger-300);
+
+  /* --- Tokens de texto gerais --- */
+  --general-text-link: var(--extras-700);
+  --general-text-highlight: var(--primary-500);
+  --general-text-default: var(--neutral-1700);
+  --general-text-danger: var(--danger-300);
+  --general-text-disabled: var(--neutral-1100);
+
+  & .tc-dark {
+    /* --- Tokens do tema dark --- */
+    /* --- Tokens de nivel de background dos componentes --- */
+    --background-levels-main: var(--neutral-1600);
+    --background-levels-section: var(--neutral-1400);
+    --background-levels-modal: var(--neutral-1400);
+    --background-levels-primary-tab: var(--neutral-1600);
+    --background-levels-secondary-tab: var(--neutral-1400);
+
+    /* --- Tokens de background dos componentes --- */
+    --component-bg-transparent: transparent;
+    --component-bg-default: var(--background-levels-section);
+    --component-bg-hover: var(--neutral-1200);
+    --component-bg-highlight: var(--neutral-1300);
+    --component-bg-selected: var(--primary-500);
+    --component-bg-selected-light: var(--primary-300);
+    --component-bg-danger: var(--danger-100);
+    --component-bg-disabled: var(--neutral-800);
+
+    /* --- Tokens de icones dos componentes --- */
+    --component-icon-default: var(--neutral-50);
+    --component-icon-hover: var(--primary-500);
+    --component-icon-highlight: var(--primary-500);
+    --component-icon-selected: var(--neutral-1700);
+    --component-icon-selected-light: var(--primary-300);
+    --component-icon-disabled: var(--neutral-1100);
+    --component-icon-danger: var(--danger-300);
+    --component-icon-link: var(--extras-700);
+
+    /* --- Tokens de bordas dos componentes --- */
+    --component-border-default: var(--neutral-1000);
+    --component-border-hover: var(--primary-500);
+    --component-border-selected: var(--primary-500);
+    --component-border-danger: var(--danger-300);
+    --component-border-disabed: var(--neutral-800);
+
+    /* --- Tokens de texto dos componentes --- */
+    --component-text-default: var(--neutral-50);
+    --component-text-highlight: var(--primary-500);
+    --component-text-link: var(--extras-700);
+    --component-text-hover: var(--primary-500);
+    --component-text-selected: var(--neutral-1700);
+    --component-text-disabled: var(--neutral-1100);
+    --component-text-danger: var(--danger-300);
+
+    /* --- Tokens de texto gerais --- */
+    --general-text-default: var(--neutral-50);
+    --general-text-highlight: var(--primary-500);
+    --general-text-link: var(--extras-700);
+    --general-text-danger: var(--danger-300);
+    --general-text-disabled: var(--neutral-1100);
+  }
+
+  & .tc-prime-modern {
+     /* --- Tokens do tema dark --- */
+    /* --- Tokens de nivel de background dos componentes --- */
+    --background-levels-main: var(--neutral-1600);
+    --background-levels-section: var(--neutral-1400);
+    --background-levels-modal: var(--neutral-1400);
+    --background-levels-primary-tab: var(--neutral-1600);
+    --background-levels-secondary-tab: var(--neutral-1400);
+
+    /* --- Tokens de background dos componentes --- */
+    --component-bg-transparent: transparent;
+    --component-bg-default: var(--background-levels-section);
+    --component-bg-hover: var(--neutral-1200);
+    --component-bg-highlight: var(--neutral-1300);
+    --component-bg-selected: var(--primary-500);
+    --component-bg-selected-light: var(--primary-300);
+    --component-bg-danger: var(--danger-100);
+    --component-bg-disabled: var(--neutral-800);
+
+    /* --- Tokens de icones dos componentes --- */
+    --component-icon-default: var(--neutral-50);
+    --component-icon-hover: var(--primary-500);
+    --component-icon-highlight: var(--primary-500);
+    --component-icon-selected: var(--neutral-1700);
+    --component-icon-selected-light: var(--primary-300);
+    --component-icon-disabled: var(--neutral-1100);
+    --component-icon-danger: var(--danger-300);
+    --component-icon-link: var(--extras-700);
+
+    /* --- Tokens de bordas dos componentes --- */
+    --component-border-default: var(--neutral-1000);
+    --component-border-hover: var(--primary-500);
+    --component-border-selected: var(--primary-500);
+    --component-border-danger: var(--danger-300);
+    --component-border-disabed: var(--neutral-800);
+
+    /* --- Tokens de texto dos componentes --- */
+    --component-text-default: var(--neutral-50);
+    --component-text-highlight: var(--primary-500);
+    --component-text-link: var(--extras-700);
+    --component-text-hover: var(--primary-500);
+    --component-text-selected: var(--neutral-1700);
+    --component-text-disabled: var(--neutral-1100);
+    --component-text-danger: var(--danger-300);
+
+    /* --- Tokens de texto gerais --- */
+    --general-text-default: var(--neutral-50);
+    --general-text-highlight: var(--primary-500);
+    --general-text-link: var(--extras-700);
+    --general-text-danger: var(--danger-300);
+    --general-text-disabled: var(--neutral-1100);
+  }
+
   //General sizes
   --gs-none: 0rem;
   --gs-1: 0.0625rem;
@@ -79,7 +274,7 @@
 
   //Typograph
   //Family
-  --f-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --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)
@@ -121,11 +316,10 @@ $sides: (
   ),
 );
 
-
 .card {
   background-color: var(--neutral-100);
 }
 
 .dark-mode .card {
   background-color: var(--neutral-100);
-}
+}