@dev-tcloud/tcloud-ui 5.0.2 → 5.0.3-beta.1

package/scss/tcloud-revitalizacao/_tc-rev-opacity.scss

@@ -0,0 +1,19 @@
+.opacity-10 {
+  opacity: 0.1;
+}
+
+.opacity-25 {
+  opacity: 0.25;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
+.opacity-90 {
+  opacity: 0.9;
+} 

package/scss/tcloud-revitalizacao/_tc-rev-shadow.scss

@@ -0,0 +1,25 @@
+@use 'sass:map';
+
+:root 
+{
+    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.10);
+    --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
+    --shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.14);
+    --shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
+    --shadow-xl: 0 16px 32px 0 rgba(0, 0, 0, 0.18);
+}
+
+$shadow-classes:
+  ("name": "shadow-xs", "size": var(--shadow-xs)),
+  ("name": "shadow-sm", "size": var(--shadow-sm)),
+  ("name": "shadow-md", "size": var(--shadow-md)),
+  ("name": "shadow-lg", "size": var(--shadow-lg)),
+  ("name": "shadow-xl", "size": var(--shadow-xl));
+
+@each $shadow in $shadow-classes
+{
+    .#{map.get($shadow, 'name')}
+    {
+        box-shadow: map.get($shadow, 'size');
+    }
+}

package/scss/tcloud-revitalizacao/_tc-rev-sizes.scss

@@ -0,0 +1,159 @@
+@use 'sass:map';
+
+:root
+{
+    --size-0: 0rem;
+    --size-2: 0.125rem;
+    --size-4: 0.25rem;
+    --size-6: 0.375rem;
+    --size-8: 0.5rem;
+    --size-10: 0.625rem;
+    --size-12: 0.75rem;
+    --size-14: 0.875rem;
+    --size-16: 1rem;
+    --size-18: 1.125rem;
+    --size-20: 1.25rem;
+    --size-22: 1.375rem;
+    --size-24: 1.5rem;
+    --size-26: 1.625rem;
+    --size-28: 1.75rem;
+    --size-30: 1.875rem;
+    --size-32: 2rem;
+    --size-34: 2.125rem;
+    --size-36: 2.25rem;
+    --size-38: 2.375rem;
+    --size-40: 2.5rem;
+    --size-44: 2.75rem;
+    --size-48: 3rem;
+    --size-52: 3.25rem;
+    --size-56: 3.5rem;
+    --size-60: 3.75rem;
+    --size-64: 4rem;
+    --size-68: 4.25rem;
+    --size-72: 4.5rem;
+    --size-76: 4.75rem;
+    --size-80: 5rem;
+}
+
+$sizes: (
+  "a": auto,
+  "none": var(--size-0),
+  "0": var(--size-0),
+  "2": var(--size-2),
+  "4": var(--size-4),
+  "6": var(--size-6),
+  "8": var(--size-8),
+  "10": var(--size-10),
+  "12": var(--size-12),
+  "14": var(--size-14),
+  "16": var(--size-16),
+  "18": var(--size-18),
+  "20": var(--size-20),
+  "22": var(--size-22),
+  "24": var(--size-24),
+  "26": var(--size-26),
+  "28": var(--size-28),
+  "30": var(--size-30),
+  "32": var(--size-32),
+  "34": var(--size-34),
+  "36": var(--size-36),
+  "38": var(--size-38),
+  "40": var(--size-40),
+  "44": var(--size-44),
+  "48": var(--size-48),
+  "52": var(--size-52),
+  "56": var(--size-56),
+  "60": var(--size-60),
+  "64": var(--size-64),
+  "68": var(--size-68),
+  "72": var(--size-72),
+  "76": var(--size-76),
+  "80": var(--size-80)
+);
+
+@each $size, $value in $sizes
+{
+    .h-#{$size}
+    {
+        height: $value;
+    }
+
+    .w-#{$size}
+    {
+        width: $value;
+    }
+
+    .pad-#{$size}
+    {
+        padding: $value;
+    }
+
+    .pad-y-#{$size}
+    {
+        padding-top: $value;
+        padding-bottom: $value;
+    }
+    
+    .pad-x-#{$size}
+    {
+        padding-left: $value;
+        padding-right: $value;
+    }
+
+    .pad-l-#{$size}
+    {
+        padding-left: $value;
+    }
+
+    .pad-r-#{$size}
+    {
+        padding-right: $value;
+    }
+
+    .pad-t-#{$size}
+    {
+        padding-top: $value;
+    }
+
+    .pad-b-#{$size}
+    {
+        padding-bottom: $value;
+    }
+
+    .mar-#{$size}
+    {
+        margin: $value;
+    }
+
+    .mar-y-#{$size}
+    {
+        margin-top: $value;
+        margin-bottom: $value;
+    }
+    
+    .mar-x-#{$size}
+    {
+        margin-left: $value;
+        margin-right: $value;
+    }
+
+    .mar-l-#{$size}
+    {
+        margin-left: $value;
+    }
+
+    .mar-r-#{$size}
+    {
+        margin-right: $value;
+    }
+
+    .mar-t-#{$size}
+    {
+        margin-top: $value;
+    }
+
+    .mar-b-#{$size}
+    {
+        margin-bottom: $value;
+    }
+}

package/scss/tcloud-revitalizacao/_tc-rev-themes.scss

@@ -0,0 +1,39 @@
+:root
+{
+    --c-neutral-50: #FFFFFF;
+    --c-neutral-100: #FAFAFA;
+    --c-neutral-200: #EEEEEE;
+    --c-neutral-300: #D2D2D2;
+    --c-neutral-400: #CED4DA;
+    --c-neutral-500: #5E5E5E;
+    --c-neutral-600: #6C757D;
+    --c-neutral-700: #495057;
+    --c-neutral-800: #363636;
+    --c-neutral-900: #000000;
+    --c-primary-300: #EAF9FF;
+    --c-primary-400: #75D8FF;
+    --c-primary-500: #0897E9;
+    --c-primary-600: #0457A7;
+    --c-primary-700: #012C6F;
+    --c-danger-300: #FDE1D6;
+    --c-danger-400: #F48E85;
+    --c-danger-500: #DC3545;
+    --c-alert-300: #FFE6B7;
+    --c-alert-400: #FECD6E;
+    --c-alert-500: #FEAC0E;
+    --c-info-300: #E6F5FD;
+    --c-info-400: #6BC1F2;
+    --c-info-500: #0897E9;
+    --c-success-300: #E7FBDA;
+    --c-success-400: #A3E78C;
+    --c-success-500: #47B13D;
+
+    body.tc-prime-modern
+    {
+        --c-primary-300: #D3C8FF;
+        --c-primary-400: #896DFF;
+        --c-primary-500: #6B48FF;
+        --c-primary-600: #3A24B7;
+        --c-primary-700: #190D7A;
+    }
+}

package/scss/tcloud-revitalizacao/_tc-rev-typography.scss

@@ -0,0 +1,122 @@
+@use 'sass:map';
+
+:root
+{
+    --f-family: 'Nunito Sans', sans-serif;
+    --f-size-12: 0.75rem;
+    --f-size-14: 0.875rem;
+    --f-size-16: 1rem;
+    --f-size-18: 1.125rem;
+    --f-size-20: 1.25rem;
+    --f-size-24: 1.5rem;
+    --f-size-32: 2rem;
+    --f-size-48: 3rem;
+    --f-size-56: 4rem;
+    --f-size-64: 4rem;
+
+    --l-height-16: 1.33;
+    --l-height-20: 1.43;
+    --l-height-24: 1.5;
+    --l-height-26: 1.44;
+    --l-height-28: 1.4;
+    --l-height-32: 1.33;
+    --l-height-40: 1.25;
+    --l-height-56: 1.16;
+    --l-height-64: 1.14;
+
+    --f-weight-300: 300;
+    --f-weight-400: 400;
+    --f-weight-500: 500;
+    --f-weight-600: 600;
+    --f-weight-700: 700;
+    --f-weight-800: 800;
+    --f-weight-900: 900;
+    --f-weight-light: 300;
+    --f-weight-regular: 400;
+    --f-weight-semibold: 700;
+    --f-weight-black: 900;
+
+    --f-display-lg: var(--l-height-64) / var(--f-size-56);
+    --f-display-md: var(--l-height-56) / var(--f-size-48);
+    --f-display-sm: var(--l-height-40) / var(--f-size-32);
+    --f-h1: var(--l-height-32) / var(--f-size-24);
+    --f-h2: var(--l-height-28) / var(--f-size-20);
+    --f-h3: var(--l-height-26) / var(--f-size-20);
+    --f-lg: var(--l-height-24) / var(--f-size-16);
+    --f-md: var(--l-height-20) / var(--f-size-14);
+    --f-sm: var(--l-height-16) / var(--f-size-12);
+}
+
+
+$font-classes:
+  ("name": "f-size-12", "size": var(--f-size-12), "line-height": var(--l-height-16)),
+  ("name": "f-size-14", "size": var(--f-size-14), "line-height": var(--l-height-20)),
+  ("name": "f-size-16", "size": var(--f-size-16), "line-height": var(--l-height-24)),
+  ("name": "f-size-18", "size": var(--f-size-18), "line-height": var(--l-height-26)),
+  ("name": "f-size-20", "size": var(--f-size-20), "line-height": var(--l-height-28)),
+  ("name": "f-size-24", "size": var(--f-size-24), "line-height": var(--l-height-32)),
+  ("name": "f-size-32", "size": var(--f-size-32), "line-height": var(--l-height-40)),
+  ("name": "f-size-48", "size": var(--f-size-48), "line-height": var(--l-height-56)),
+  ("name": "f-size-64", "size": var(--f-size-64), "line-height": var(--l-height-64)),
+  ("name": "f-sm",   "size": var(--f-size-12), "line-height": var(--l-height-16)),
+  ("name": "f-md",   "size": var(--f-size-14), "line-height": var(--l-height-20)),
+  ("name": "f-lg",   "size": var(--f-size-16), "line-height": var(--l-height-24)),
+  ("name": "f-h3",   "size": var(--f-size-18), "line-height": var(--l-height-26)),
+  ("name": "f-h2",   "size": var(--f-size-20), "line-height": var(--l-height-28)),
+  ("name": "f-h1",   "size": var(--f-size-24), "line-height": var(--l-height-32)),
+  ("name": "f-d-sm", "size": var(--f-size-32), "line-height": var(--l-height-40)),
+  ("name": "f-d-md", "size": var(--f-size-48), "line-height": var(--l-height-56)),
+  ("name": "f-d-lg", "size": var(--f-size-64), "line-height": var(--l-height-64));
+
+@each $font in $font-classes
+{
+    .#{map.get($font, 'name')}
+    {
+        font-size: map.get($font, 'size');
+        line-height: map.get($font, 'line-height');
+    }
+}
+
+$font-weight:
+  ("name": "f-weight-300", "weight": 300),
+  ("name": "f-weight-400", "weight": 400),
+  ("name": "f-weight-500", "weight": 500),
+  ("name": "f-weight-600", "weight": 600),
+  ("name": "f-weight-700", "weight": 700),
+  ("name": "f-weight-800", "weight": 800),
+  ("name": "f-weight-900", "weight": 900),
+  ("name": "f-weight-light", "weight": 300),
+  ("name": "f-weight-regular", "weight": 400),
+  ("name": "f-weight-semibold", "weight": 700),
+  ("name": "f-weight-black", "weight": 900);
+  
+@each $font in $font-weight
+{
+    .#{map.get($font, 'name')}
+    {
+        font-weight: map.get($font, 'weight');
+    }
+}
+
+.f-family
+{
+    font-family: var(--f-family);
+}
+
+$el-lines:
+  ("line": 2),
+  ("line": 3),
+  ("line": 4),
+  ("line": 5);
+
+@each $line in $el-lines
+{
+    .text-ellipsis-#{map.get($line, 'line')}-lines
+    {
+        display: -webkit-box;
+        -webkit-line-clamp: map.get($line, 'line');
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}

package/scss/tcloud-revitalizacao/components/_tc-rev-button.scss

@@ -0,0 +1,172 @@
+@use 'sass:map';
+
+.tc-rev-btn--sm
+{
+  align-items: center;
+  border-color: transparent;
+  border-width: var(--bor-size-xs);
+  border-style: solid;
+  border-radius: var(--bor-radius-pill);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--f-size-14);
+  font-weight: var(--f-weight-600);
+  gap: var(--size-8);
+  justify-content: center;
+  line-height: var(--l-height-24);
+  height: var(--size-38);
+  max-height: var(--size-38);
+  min-height: var(--size-38);
+  padding: 0 var(--size-8);
+  transition: all 200ms ease;
+}
+
+.tc-rev-btn--md
+{
+  align-items: center;
+  border-color: transparent;
+  border-width: var(--bor-size-xs);
+  border-style: solid;
+  border-radius: var(--bor-radius-pill);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--f-size-16);
+  font-weight: var(--f-weight-600);
+  gap: var(--size-8);
+  justify-content: center;
+  line-height: var(--l-height-24);
+  height: var(--size-58);
+  max-height: var(--size-58);
+  min-height: var(--size-58);
+  padding: 0 var(--size-16);
+  transition: all 200ms ease;
+}
+
+.tc-rev-btn--lg
+{
+  align-items: center;
+  border-color: transparent;
+  border-width: var(--bor-size-xs);
+  border-style: solid;
+  border-radius: var(--bor-radius-pill);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--f-size-16);
+  font-weight: var(--f-weight-600);
+  height: var(--size-74);
+  gap: var(--size-8);
+  justify-content: center;
+  line-height: var(--l-height-24);
+  max-height: var(--size-74);
+  min-height: var(--size-74);
+  padding: 0 var(--size-24);
+  transition: all 200ms ease;
+}
+
+$btn-by-colors:
+  ("class": "tc-rev-btn--primary-filled", "b-color": var(--c-primary-500), "bg-color": var(--c-primary-500), "color": var(--c-neutral-50), "bg-hover": var(--c-primary-600)),
+  ("class": "tc-rev-btn--light-filled", "b-color": var(--c-neutral-50), "bg-color": var(--c-neutral-50), "color": var(--c-primary-500), "bg-hover": var(--c-neutral-50)),
+  ("class": "tc-rev-btn--dark-filled", "b-color": var(--c-neutral-900), "bg-color": var(--c-neutral-900), "color": var(--c-neutral-50), "bg-hover": var(--c-neutral-600)),
+  ("class": "tc-rev-btn--danger-filled", "b-color": var(--c-danger-500), "bg-color": var(--c-danger-500), "color": var(--c-neutral-50), "bg-hover": var(--c-danger-500));
+
+@each $btn-color in $btn-by-colors
+{
+  .#{map.get($btn-color, 'class')}
+  {
+    background-color: map.get($btn-color, 'bg-color');
+    color: map.get($btn-color, 'color');
+
+    &:focus
+    {
+      background-color: map.get($btn-color, 'bg-color');
+      color: map.get($btn-color, 'color');
+    }
+
+    &:hover 
+    {
+      background-color: map.get($btn-color, 'bg-hover');
+      color: map.get($btn-color, 'color');
+    }
+
+    &:disabled
+    {
+      background-color: var(--c-neutral-300);
+      color: var(--c-neutral-600);
+      cursor: not-allowed;
+    }
+  }
+}
+
+$btn-by-colors-by-outline:
+  ("class": "tc-rev-btn--primary-outline", "b-color": var(--c-primary-500), "bg-color": transparent, "color": var(--c-primary-500), "bg-hover": var(--c-neutral-50), "c-hover": var(--c-primary-500), "b-color-hover": var(--c-primary-500)),
+  ("class": "tc-rev-btn--light-outline", "b-color": var(--c-neutral-50), "bg-color": transparent, "color": var(--c-neutral-50), "bg-hover": transparent, "c-hover": var(--c-neutral-50), "b-color-hover": var(--c-neutral-50)),
+  ("class": "tc-rev-btn--dark-outline", "b-color": var(--c-neutral-900), "bg-color": transparent, "color": var(--c-neutral-900), "bg-hover": var(--c-neutral-500), "c-hover": var(--c-neutral-50), "b-color-hover": var(--c-neutral-700)),
+  ("class": "tc-rev-btn--danger-outline", "b-color": var(--c-danger-500), "bg-color": transparent, "color": var(--c-danger-500), "bg-hover": var(--c-danger-300), "c-hover": var(--c-danger-500), "b-color-hover": var(--c-danger-500));
+
+@each $btn-color in $btn-by-colors-by-outline
+{
+  .#{map.get($btn-color, 'class')}
+  {
+    background-color: map.get($btn-color, 'bg-color');
+    border-color: map.get($btn-color, 'b-color');
+    color: map.get($btn-color, 'color');
+
+    &:focus
+    {
+      background-color: map.get($btn-color, 'bg-color');
+      border-color: map.get($btn-color, 'b-color');
+      color: map.get($btn-color, 'color');
+    }
+
+    &:hover 
+    {
+      background-color: map.get($btn-color, 'bg-hover');
+      color: map.get($btn-color, 'c-hover');
+      border-color: map.get($btn-color, 'b-color-hover');
+    }
+
+    &:disabled
+    {
+      background-color: var(--c-neutral-300);
+      border-color: var(--c-neutral-300);
+      color: var(--c-neutral-600);
+      cursor: not-allowed;
+    }
+  }
+}
+
+$btn-by-colors-by-link:
+  ("class": "tc-rev-btn--primary-link", "color": var(--c-primary-500), "c-hover": var(--c-primary-700)),
+  ("class": "tc-rev-btn--light-link", "color": var(--c-neutral-50), "c-hover": var(--c-primary-500)),
+  ("class": "tc-rev-btn--dark-link", "color": var(--c-neutral-900), "c-hover": var(--c-neutral-500)),
+  ("class": "tc-rev-btn--danger-link", "color": var(--c-danger-500), "c-hover": var(--c-danger-400));
+
+@each $btn-color in $btn-by-colors-by-link
+{
+  .#{map.get($btn-color, 'class')}
+  {
+    background-color: transparent;
+    border-color: transparent;
+    color: map.get($btn-color, 'color');
+
+    &:focus
+    {
+      background-color: transparent;
+      border-color: transparent;
+      color: map.get($btn-color, 'color');
+    }
+
+    &:hover 
+    {
+      color: map.get($btn-color, 'c-hover');
+    }
+
+    &:disabled
+    {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--c-neutral-600);
+      cursor: not-allowed;
+    }
+  }
+}