@foxeltech/angular-ui 0.0.12 → 0.0.13

package/index.d.ts

@@ -670,7 +670,7 @@ declare class DndUploadComponent {
 declare class ButtonComponent {
     label: string;
     disabled: boolean;
-    buttonVariant: 'default' | 'primary' | 'alternative';
+    buttonVariant: 'default' | 'primary' | 'success' | 'alternative';
     icon?: any;
     class?: any;
     loading: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "license": "MIT",
   "main": "bundles/ui.umd.js",
   "module": "fesm2022/foxeltech-angular-ui.mjs",

package/src/lib/styles/components.css

@@ -82,20 +82,24 @@
 }
 
 .mat-mdc-table {
-  border: 2px solid rgb(var(--border-default)) !important;
-  border-radius: 4px !important;
+  border: 1px solid rgb(var(--border-default)) !important;
+  border-radius: 12px !important;
+  overflow: hidden !important;
+  border-collapse: separate !important;
+  border-spacing: 0 !important;
+  background-color: rgb(var(--bg-primary)) !important;
 }
 
 .mdc-data-table__header-row {
-  height: 32px !important;
-  min-height: 32px !important;
+  height: 40px !important;
+  min-height: 40px !important;
 }
 
 .mdc-data-table__header-cell {
-  border-left: 1px solid rgb(var(--border-default)) !important;
   background-color: rgb(var(--bg-primary-hover)) !important;
-  padding-top: 4px !important;
-  padding-bottom: 4px !important;
+  border-bottom: 1px solid rgb(var(--border-default)) !important;
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
   line-height: 24px !important;
   font-family: 'Roboto';
 }
@@ -103,14 +107,23 @@
 .mdc-data-table__row {
   height: 0 !important;
   min-height: 0 !important;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.mat-mdc-row:hover .mdc-data-table__cell {
+  background-color: rgb(var(--bg-primary-hover)) !important;
 }
 
 .mdc-data-table__cell {
-  border-left: 1px solid rgb(var(--border-default)) !important;
+  border-bottom: 1px solid rgb(var(--border-default)) !important;
   background-color: rgb(var(--bg-primary)) !important;
   font-family: 'Roboto';
 }
 
+.mat-mdc-row:last-child .mdc-data-table__cell {
+  border-bottom: none !important;
+}
+
 .mat-mdc-cell {
   border-color: rgb(var(--border-default)) !important;
 }
@@ -279,7 +292,7 @@ input[type='password'] {
   @apply text-xs font-light text-text-secondary tracking-normal;
 }
 .txt-tag-common {
-  @apply font-medium text-xs;
+  @apply font-semibold text-xs;
 }
 .txt-tag-default {
   @apply txt-tag-common text-text-secondary;
@@ -321,6 +334,9 @@ input[type='password'] {
 .btn-primary {
   @apply btn-common bg-gradient-primary hover:opacity-75 text-text-focus;
 }
+.btn-success {
+  @apply btn-common bg-gradient-success hover:opacity-75 text-white;
+}
 .btn-alternative {
   @apply btn-common hover:bg-bg-hover text-text-primary border border-border-default;
 }
@@ -364,28 +380,28 @@ input[type='password'] {
 }
 
 .tag-common {
-  @apply flex min-w-7 px-normal py-small hover:opacity-70 items-center justify-center;
+  @apply flex min-w-7 px-[10px] py-[2px] leading-5 hover:opacity-70 items-center justify-center;
 }
 .tag-default {
   @apply tag-common bg-bg-hover;
 }
 .tag-success {
-  @apply tag-common bg-success/10;
+  @apply tag-common bg-success/20;
 }
 .tag-warning {
-  @apply tag-common bg-warning/10;
+  @apply tag-common bg-warning/20;
 }
 .tag-danger {
-  @apply tag-common bg-danger/10;
+  @apply tag-common bg-danger/20;
 }
 .tag-critical {
-  @apply tag-common bg-critical/10;
+  @apply tag-common bg-critical/20;
 }
 .tag-discovery {
-  @apply tag-common bg-discovery/10;
+  @apply tag-common bg-discovery/20;
 }
 .tag-information {
-  @apply tag-common bg-information/10;
+  @apply tag-common bg-information/20;
 }
 .tag-default-solid {
   @apply tag-common bg-bg-hover;
@@ -409,10 +425,10 @@ input[type='password'] {
   @apply tag-common bg-information;
 }
 .tag-square {
-  @apply rounded px-semi py-small;
+  @apply rounded-md px-semi py-small;
 }
 .tag-round {
-  @apply rounded-2xl;
+  @apply rounded-full;
 }
 /* progress bar */
 .progress-bar-container {

package/src/lib/styles/theme.css

@@ -1,8 +1,11 @@
 .light_theme {
-  --gradient-primary-start: 156 129 255;
-  --gradient-primary-end: 4 255 135;
+  --gradient-primary-start: 124 58 237;
+  --gradient-primary-end: 79 142 247;
+  --gradient-success-start: 16 185 129;
+  --gradient-success-end: 45 212 191;
   --bg-primary: 255 255 255;
-  --primary: 236 25 56;
+  --bg-canvas: 245 247 250;
+  --primary: 124 58 237;
   --success: 15 140 96;
   --warning: 255 199 0;
   --critical: 254 4 83;
@@ -18,14 +21,14 @@
   --bg-primary-hover: 247 247 247;
   --text-focus: 255 255 255;
   --bg-primary-neutral: 12 14 18;
-  --text-selected-primary: 199 14 41;
+  --text-selected-primary: 124 58 237;
   --button-default: 34 38 47; 
   --text-inverse: 255 255 255;
   --bg-error-bold: 215 0 68;
   --text-error: 215 0 68;
-  --border-interactive: 236 25 56;
-  --border-selected: 254 53 83;
-  --button-primary: 236 25 56;
+  --border-interactive: 124 58 237;
+  --border-selected: 124 58 237;
+  --button-primary: 124 58 237;
   --border-strong: 206 207 210;
   --border-secondary-hover: 0 199 205;
   --bg-secondary-hover: 6 59 70;
@@ -33,10 +36,13 @@
 }
 
 :root {
-  --gradient-primary-start: 156 129 255;
-  --gradient-primary-end: 4 255 135;
+  --gradient-primary-start: 124 58 237;
+  --gradient-primary-end: 79 142 247;
+  --gradient-success-start: 16 185 129;
+  --gradient-success-end: 45 212 191;
   --bg-primary: 12 14 18;
-  --primary: 236 25 56;
+  --bg-canvas: 8 9 12;
+  --primary: 124 58 237;
   --success: 76 175 80;
   --warning: 255 188 59;
   --critical: 236 25 56;
@@ -52,14 +58,14 @@
   --bg-primary-hover: 34 38 47;
   --text-focus: 255 255 255;
   --bg-primary-neutral: 12 14 18;
-  --text-selected-primary: 254 53 83;
+  --text-selected-primary: 124 58 237;
   --button-default: 236 236 236; 
   --text-inverse: 12 14 18;
   --bg-error-bold: 215 0 68;
   --text-error: 255 0 81;
-  --border-interactive: 236 25 56;
-  --border-selected: 254 53 83;
-  --button-primary: 236 25 56;
+  --border-interactive: 124 58 237;
+  --border-selected: 124 58 237;
+  --button-primary: 124 58 237;
   --border-strong: 97 101 108;
   --border-secondary-hover: 0 199 205;
   --bg-secondary-hover: 6 59 70;

package/src/lib/ui/components/button/button.component.html

@@ -3,6 +3,7 @@
   [ngClass]="{
     'btn-default': buttonVariant === 'default',
     'btn-primary': buttonVariant === 'primary',
+    'btn-success': buttonVariant === 'success',
     'btn-alternative': buttonVariant === 'alternative',
   }"
   [disabled]="disabled || loading"
@@ -220,7 +221,7 @@
             [ngClass]="{
               'text-text-inverse': buttonVariant === 'default',
               'text-text-primary': buttonVariant === 'alternative',
-              'text-white': buttonVariant === 'primary',
+              'text-white': buttonVariant === 'primary' || buttonVariant === 'success',
             }"
           ></fx-ui-hero-icon>
         }

package/tailwind.config.js

@@ -4,6 +4,8 @@ module.exports = {
       colors: {
         'gradient-primary-start': 'rgb(var(--gradient-primary-start) / <alpha-value>)',
         'gradient-primary-end': 'rgb(var(--gradient-primary-end) / <alpha-value>)',
+        'gradient-success-start': 'rgb(var(--gradient-success-start) / <alpha-value>)',
+        'gradient-success-end': 'rgb(var(--gradient-success-end) / <alpha-value>)',
         primary: 'rgb(var(--primary) / <alpha-value>)',
         success: 'rgb(var(--success) / <alpha-value>)',
         danger: 'rgb(var(--danger) / <alpha-value>)',
@@ -13,6 +15,7 @@ module.exports = {
         information: 'rgb(var(--information) / <alpha-value>)',
         bg: {
           primary: 'rgb(var(--bg-primary) / <alpha-value>)',
+          canvas: 'rgb(var(--bg-canvas) / <alpha-value>)',
           hover: 'rgb(var(--bg-primary-hover) / <alpha-value>)',
           error: 'rgb(var(--bg-error-bold) / <alpha-value>)',
           hover2: 'rgb(var(--bg-secondary-hover) / <alpha-value>)',
@@ -42,6 +45,8 @@ module.exports = {
       backgroundImage: {
         'gradient-primary':
           'linear-gradient(135deg, rgb(var(--gradient-primary-start)) 0%, rgb(var(--gradient-primary-end)) 100%)',
+        'gradient-success':
+          'linear-gradient(135deg, rgb(var(--gradient-success-start)) 0%, rgb(var(--gradient-success-end)) 100%)',
       },
       screens: {
         sm: '480px',

package/theme.css

@@ -1,8 +1,11 @@
 .light_theme {
-  --gradient-primary-start: 156 129 255;
-  --gradient-primary-end: 4 255 135;
+  --gradient-primary-start: 124 58 237;
+  --gradient-primary-end: 79 142 247;
+  --gradient-success-start: 16 185 129;
+  --gradient-success-end: 45 212 191;
   --bg-primary: 255 255 255;
-  --primary: 236 25 56;
+  --bg-canvas: 245 247 250;
+  --primary: 124 58 237;
   --success: 15 140 96;
   --warning: 255 199 0;
   --critical: 254 4 83;
@@ -18,14 +21,14 @@
   --bg-primary-hover: 247 247 247;
   --text-focus: 255 255 255;
   --bg-primary-neutral: 12 14 18;
-  --text-selected-primary: 199 14 41;
+  --text-selected-primary: 124 58 237;
   --button-default: 34 38 47; 
   --text-inverse: 255 255 255;
   --bg-error-bold: 215 0 68;
   --text-error: 215 0 68;
-  --border-interactive: 236 25 56;
-  --border-selected: 254 53 83;
-  --button-primary: 236 25 56;
+  --border-interactive: 124 58 237;
+  --border-selected: 124 58 237;
+  --button-primary: 124 58 237;
   --border-strong: 206 207 210;
   --border-secondary-hover: 0 199 205;
   --bg-secondary-hover: 6 59 70;
@@ -33,10 +36,13 @@
 }
 
 :root {
-  --gradient-primary-start: 156 129 255;
-  --gradient-primary-end: 4 255 135;
+  --gradient-primary-start: 124 58 237;
+  --gradient-primary-end: 79 142 247;
+  --gradient-success-start: 16 185 129;
+  --gradient-success-end: 45 212 191;
   --bg-primary: 12 14 18;
-  --primary: 236 25 56;
+  --bg-canvas: 8 9 12;
+  --primary: 124 58 237;
   --success: 76 175 80;
   --warning: 255 188 59;
   --critical: 236 25 56;
@@ -52,14 +58,14 @@
   --bg-primary-hover: 34 38 47;
   --text-focus: 255 255 255;
   --bg-primary-neutral: 12 14 18;
-  --text-selected-primary: 254 53 83;
+  --text-selected-primary: 124 58 237;
   --button-default: 236 236 236; 
   --text-inverse: 12 14 18;
   --bg-error-bold: 215 0 68;
   --text-error: 255 0 81;
-  --border-interactive: 236 25 56;
-  --border-selected: 254 53 83;
-  --button-primary: 236 25 56;
+  --border-interactive: 124 58 237;
+  --border-selected: 124 58 237;
+  --button-primary: 124 58 237;
   --border-strong: 97 101 108;
   --border-secondary-hover: 0 199 205;
   --bg-secondary-hover: 6 59 70;