@fxlt/common-ui 0.0.4-rc1 → 0.0.4

package/fonts.css

@@ -1,7 +1,119 @@
 @font-face {
-  font-family: 'BeVietnamProRegular';
-  src: url('./BeVietnamPro-Regular.ttf') format('truetype');
-  font-weight: normal;
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Thin.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-Bold.ttf') format('truetype');
+  font-weight: 700;
   font-style: normal;
 }
 

package/index.d.ts

@@ -686,8 +686,9 @@ declare class TagComponent {
     type: TagType;
     rounded: boolean;
     icon?: any;
+    solid: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<TagComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TagComponent, "fx-ui-tag", never, { "label": { "alias": "label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagComponent, "fx-ui-tag", never, { "label": { "alias": "label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "solid": { "alias": "solid"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 type IChartType = 'bar' | 'pie' | 'line' | 'sunburst' | 'radar' | 'auto';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fxlt/common-ui",
-  "version": "0.0.4-rc1",
+  "version": "0.0.4",
   "license": "MIT",
   "main": "bundles/ui.umd.js",
   "module": "fesm2022/fxlt-common-ui.mjs",
@@ -36,8 +36,6 @@
     "ngx-vflow": "^1.16.2"
   },
   "exports": {
-    "./SpaceMono-Regular.ttf": "./SpaceMono-Regular.ttf",
-    "./BeVietnamPro-Regular.ttf": "./BeVietnamPro-Regular.ttf",
     "./tailwind-config": "./tailwind.config.js",
     "./tailwind.css": "./tailwind.css",
     "./theme.css": "./theme.css",

package/src/lib/styles/components.css

@@ -93,7 +93,7 @@
   padding-top: 4px !important;
   padding-bottom: 4px !important;
   line-height: 24px !important;
-  font-family: 'BeVietnamProRegular';
+  font-family: 'BeVietnamPro';
 }
 
 .mdc-data-table__row {
@@ -108,7 +108,7 @@
   padding-bottom: 8px !important;
   padding-left: 16px !important;
   padding-right: 16px !important; */
-  font-family: 'BeVietnamProRegular';
+  font-family: 'BeVietnamPro';
 }
 
 .mat-mdc-cell {
@@ -181,6 +181,9 @@ input[type='password'] {
 .txt-heading-07 {
   @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
 }
+.txt-heading-table {
+  @apply text-base font-dmsans font-semibold text-text-primary tracking-tight;
+}
 .txt-heading-compact-02 {
   @apply font-semibold text-sm tracking-normal leading-5 text-text-primary;
 }
@@ -381,6 +384,27 @@ input[type='password'] {
 .tag-information {
   @apply tag-common bg-information/10;
 }
+.tag-default-solid {
+  @apply tag-common bg-bg-hover;
+}
+.tag-success-solid {
+  @apply tag-common bg-success;
+}
+.tag-warning-solid {
+  @apply tag-common bg-warning;
+}
+.tag-danger-solid {
+  @apply tag-common bg-danger;
+}
+.tag-critical-solid {
+  @apply tag-common bg-critical;
+}
+.tag-discovery-solid {
+  @apply tag-common bg-discovery;
+}
+.tag-information-solid {
+  @apply tag-common bg-information;
+}
 .tag-square {
   @apply rounded px-semi py-small;
 }
@@ -451,3 +475,13 @@ input[type='password'] {
 .dialog-header {
   @apply px-xl py-semi;
 }
+.border-gradient-primary {
+  border: 1px solid transparent;
+  background:
+    linear-gradient(var(--surface, #fff), var(--surface, #fff)) padding-box,
+    linear-gradient(
+      135deg,
+      rgb(var(--gradient-primary-start)),
+      rgb(var(--gradient-primary-end))
+    ) border-box;
+}

package/src/lib/styles/fonts.css

@@ -1,7 +1,119 @@
 @font-face {
-  font-family: 'BeVietnamProRegular';
-  src: url('./BeVietnamPro-Regular.ttf') format('truetype');
-  font-weight: normal;
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'BeVietnamPro';
+  src: url('./BeVietnamPro/BeVietnamPro-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Thin.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DMSans';
+  src: url('./dm-sans/DMSans-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Orbitron';
+  src: url('./orbitron/Orbitron-Bold.ttf') format('truetype');
+  font-weight: 700;
   font-style: normal;
 }
 

package/src/lib/styles/tailwind.css

@@ -9,7 +9,7 @@
 @tailwind utilities;
 
 html, body {
-  font-family: 'BeVietnamProRegular';
+  font-family: 'BeVietnamPro';
   margin: 0;
   padding: 0;
   height: 100%;

package/src/lib/styles/theme.css

@@ -1,4 +1,6 @@
 .light_theme {
+  --gradient-primary-start: 156 129 255;
+  --gradient-primary-end: 4 255 135;
   --bg-primary: 255 255 255;
   --primary: 236 25 56;
   --success: 15 140 96;
@@ -31,6 +33,8 @@
 }
 
 :root {
+  --gradient-primary-start: 156 129 255;
+  --gradient-primary-end: 4 255 135;
   --bg-primary: 12 14 18;
   --primary: 236 25 56;
   --success: 76 175 80;

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

@@ -1,43 +1,15 @@
 <div
-  class="flex flex-row gap-1"
-  [class]="rounded ? 'tag-round' : 'tag-square'"
-  [ngClass]="{
-    'tag-critical': type === 'critical',
-    'tag-success': type === 'success',
-    'tag-warning': type === 'warning',
-    'tag-information': type === 'information',
-    'tag-discovery': type === 'discovery',
-    'tag-danger': type === 'danger',
-    'tag-default': type === 'default'
-  }"
+  [class]="`flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`"
 >
-  @if(icon){<fx-ui-hero-icon
-    class="flex"
+  @if(icon){
+  <fx-ui-hero-icon
+    [class]="`flex txt-tag-${type} ${solid ? 'text-white': ''}`"
     [icon]="icon"
     [size]="18"
-    [ngClass]="{
-    'text-critical': type === 'critical',
-    'text-success': type === 'success',
-    'text-warning': type === 'warning',
-    'text-information': type === 'information',
-    'text-discovery': type === 'discovery',
-    'text-danger': type === 'danger',
-    'text-text-primary': type === 'default',
-  }"
-  ></fx-ui-hero-icon
-  >}
+  ></fx-ui-hero-icon>
+  }
 
-  <div
-    [ngClass]="{
-      'txt-tag-critical': type === 'critical',
-      'txt-tag-success': type === 'success',
-      'txt-tag-warning': type === 'warning',
-      'txt-tag-information': type === 'information',
-      'txt-tag-discovery': type === 'discovery',
-      'txt-tag-danger': type === 'danger',
-      'txt-tag-default': type === 'default',
-    }"
-  >
+  <div [class]="`txt-tag-${type} ${solid ? 'text-white': ''}`">
     {{ label }}
   </div>
 </div>

package/tailwind.config.js

@@ -2,6 +2,8 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        'gradient-primary-start': 'rgb(var(--gradient-primary-start) / <alpha-value>)',
+        'gradient-primary-end': 'rgb(var(--gradient-primary-end) / <alpha-value>)',
         primary: 'rgb(var(--primary) / <alpha-value>)',
         success: 'rgb(var(--success) / <alpha-value>)',
         danger: 'rgb(var(--danger) / <alpha-value>)',
@@ -37,6 +39,10 @@ module.exports = {
           primary: 'rgb(var(--button-primary) / <alpha-value>)',
         },
       },
+      backgroundImage: {
+        'gradient-primary':
+          'linear-gradient(135deg, rgb(var(--gradient-primary-start)) 0%, rgb(var(--gradient-primary-end)) 100%)',
+      },
       screens: {
         sm: '640px',
         md: '960px',
@@ -62,6 +68,9 @@ module.exports = {
       },
       fontFamily:{
         spmono: ['SpaceMonoRegular', 'monospace'],
+        dmsans: ['DMSans', 'sans-serif'],
+        orbitron: ['Orbitron', 'sans-serif'],
+        bevn: ['BeVietnamPro', 'sans-serif'],
       },
       fontSize: {
         xs: '0.75rem',

package/tailwind.css

@@ -9,7 +9,7 @@
 @tailwind utilities;
 
 html, body {
-  font-family: 'BeVietnamProRegular';
+  font-family: 'BeVietnamPro';
   margin: 0;
   padding: 0;
   height: 100%;

package/theme.css

@@ -1,4 +1,6 @@
 .light_theme {
+  --gradient-primary-start: 156 129 255;
+  --gradient-primary-end: 4 255 135;
   --bg-primary: 255 255 255;
   --primary: 236 25 56;
   --success: 15 140 96;
@@ -31,6 +33,8 @@
 }
 
 :root {
+  --gradient-primary-start: 156 129 255;
+  --gradient-primary-end: 4 255 135;
   --bg-primary: 12 14 18;
   --primary: 236 25 56;
   --success: 76 175 80;