diff --git a/.eslintrc.json b/.eslintrc.json index f71c1c6a..bcab7dff 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -31,7 +31,7 @@ "error", { "type": "element", - "prefix": "app", + "prefix": ["app", "design"], "style": "kebab-case" } ], diff --git a/ComponentDocs.md b/ComponentDocs.md new file mode 100644 index 00000000..cbd08e27 --- /dev/null +++ b/ComponentDocs.md @@ -0,0 +1,31 @@ +# Cryptic Components + + +Style classes : +- primary +- success +- warning +- danger +- info + +--- + +## Button + +### Example + +```html + Log in + ``` + +--- + +## Radio Button + +### Example + +```html +// ADD EXAMPLES FOR ALL THE DEFAULT COMPONENTS // +``` + +--- diff --git a/package-lock.json b/package-lock.json index f9886049..8a5524cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@angular/platform-browser": "~13.2.5", "@angular/platform-browser-dynamic": "~13.2.5", "@angular/router": "~13.2.5", + "@fontsource/jost": "^4.5.4", "@sentry/angular": "^6.18.2", "ng-particles": "^2.40.2", "rxjs": "~7.5.0", @@ -2625,6 +2626,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@fontsource/jost": { + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/@fontsource/jost/-/jost-4.5.4.tgz", + "integrity": "sha512-KHTF84XsoO3MUxHjdUqwF7jsHbqyZAafceFngKURUfx2MdN795ilQ7noNW2gu7qlv2N1fwGJnAUhCTUGelkLwQ==" + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -15351,6 +15357,11 @@ } } }, + "@fontsource/jost": { + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/@fontsource/jost/-/jost-4.5.4.tgz", + "integrity": "sha512-KHTF84XsoO3MUxHjdUqwF7jsHbqyZAafceFngKURUfx2MdN795ilQ7noNW2gu7qlv2N1fwGJnAUhCTUGelkLwQ==" + }, "@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", diff --git a/package.json b/package.json index c7c037c4..cb773f4b 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@angular/platform-browser": "~13.2.5", "@angular/platform-browser-dynamic": "~13.2.5", "@angular/router": "~13.2.5", + "@fontsource/jost": "^4.5.4", "@sentry/angular": "^6.18.2", "ng-particles": "^2.40.2", "rxjs": "~7.5.0", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 50186b78..6e967a06 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -5,6 +5,7 @@ const routes: Routes = [ {path: '', loadChildren: () => import('./control-center/control-center.module').then(m => m.ControlCenterModule)}, {path: 'desktop', loadChildren: () => import('./desktop/desktop.module').then(m => m.DesktopModule)}, {path: '', loadChildren: () => import('./account/account.module').then(m => m.AccountModule)}, + { path: 'design', loadChildren: () => import('./base-components/base-components.module').then(m => m.BaseComponentsModule) }, {path: '**', redirectTo: '/'} ]; diff --git a/src/app/base-components/base-components-routing.module.ts b/src/app/base-components/base-components-routing.module.ts new file mode 100644 index 00000000..e3f30d06 --- /dev/null +++ b/src/app/base-components/base-components-routing.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { BaseComponentsComponent } from './base-components.component'; + +const routes: Routes = [{ path: '', component: BaseComponentsComponent }]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class BaseComponentsRoutingModule { } diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html new file mode 100644 index 00000000..5acf8f94 --- /dev/null +++ b/src/app/base-components/base-components.component.html @@ -0,0 +1,109 @@ +
+
+

Buttons - Primary

+ + Primary + + + Primary disabled + + + Success + + + Success disabled + + + Warning + + + Warning disabled + + + Danger + + + Danger disabled + + + Info + + + Info disabled + +
+
+

Buttons - Outlined

+ + Primary + + + Primary disabled + + + Success + + + Success disabled + + + Warning + + + Warning disabled + + + Danger + + + Danger disabled + + + Info + + + Info disabled + +
+
+

Buttons - Text only

+ + Primary + + + Primary disabled + + + Success + + + Success disabled + + + Warning + + + Warning disabled + + + Danger + + + Danger disabled + + + Info + + + Info disabled + + +
+ +
+

Progressbar

+ + + +
+ diff --git a/src/app/base-components/base-components.component.scss b/src/app/base-components/base-components.component.scss new file mode 100644 index 00000000..bf19d58f --- /dev/null +++ b/src/app/base-components/base-components.component.scss @@ -0,0 +1,17 @@ +.componentContainer { + display: inline-grid; + width: 300px; + margin: 30px; + padding: 1em; + border: 3px solid #ffffff; +} + +.component { + padding-bottom: 10px; +} + +.page { + height: 100%; + overflow: auto; + background: #2F2F36; +} diff --git a/src/app/base-components/base-components.component.spec.ts b/src/app/base-components/base-components.component.spec.ts new file mode 100644 index 00000000..6f462277 --- /dev/null +++ b/src/app/base-components/base-components.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BaseComponentsComponent } from './base-components.component'; + +describe('BaseComponentsComponent', () => { + let component: BaseComponentsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ BaseComponentsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(BaseComponentsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/base-components/base-components.component.ts b/src/app/base-components/base-components.component.ts new file mode 100644 index 00000000..ec2fc41d --- /dev/null +++ b/src/app/base-components/base-components.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-base-components', + templateUrl: './base-components.component.html', + styleUrls: ['./base-components.component.scss'] +}) +export class BaseComponentsComponent { + + constructor() { } + + pressedAlert(name: string) { + alert(name + " was pressed!"); + } +} diff --git a/src/app/base-components/base-components.module.ts b/src/app/base-components/base-components.module.ts new file mode 100644 index 00000000..ad75c8b0 --- /dev/null +++ b/src/app/base-components/base-components.module.ts @@ -0,0 +1,24 @@ +import { ProgressbarModule } from './../../core/components/progressbar/progressbar.module'; +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { BaseComponentsRoutingModule } from './base-components-routing.module'; +import { BaseComponentsComponent } from './base-components.component'; +import {ButtonModule} from "../../core/components/buttons/button/button.module"; +import {ButtonOutlineModule} from "../../core/components/buttons/button-outline/button-outline.module"; +import {ButtonTextModule} from "../../core/components/buttons/button-text/button-text.module"; + +@NgModule({ + declarations: [ + BaseComponentsComponent, + ], + imports: [ + CommonModule, + BaseComponentsRoutingModule, + ButtonModule, + ButtonOutlineModule, + ButtonTextModule, + ProgressbarModule + ] +}) +export class BaseComponentsModule { } diff --git a/src/core/components/buttons/_buttons.scss b/src/core/components/buttons/_buttons.scss new file mode 100644 index 00000000..3c04c194 --- /dev/null +++ b/src/core/components/buttons/_buttons.scss @@ -0,0 +1,8 @@ +$b-padding: 8px; +$b-border-radius: 8px; +$b-width: 100%; +$b-color: white; +$b-border: none; +$b-font-size: 20px; +$b-margin-right: 10px; +$b-cursor: pointer; diff --git a/src/core/components/buttons/button-outline/button-outline.component.html b/src/core/components/buttons/button-outline/button-outline.component.html new file mode 100644 index 00000000..94abb52d --- /dev/null +++ b/src/core/components/buttons/button-outline/button-outline.component.html @@ -0,0 +1,3 @@ + diff --git a/src/core/components/buttons/button-outline/button-outline.component.scss b/src/core/components/buttons/button-outline/button-outline.component.scss new file mode 100644 index 00000000..36cfce3f --- /dev/null +++ b/src/core/components/buttons/button-outline/button-outline.component.scss @@ -0,0 +1,66 @@ +@use "sass:list"; +@import "src/global-styles/theme-colors"; +@import "../buttons"; + +$flavors: ( + primary: ( + $primary-default, + $primary-disabled, + ), + success: ( + $success-default, + $success-disabled, + ), + warning: ( + $warning-default, + $warning-disabled, + ), + danger: ( + $danger-default, + $danger-disabled, + ), + info: ( + $info-default, + $info-disabled, + ), +); + +button { + padding: 6px; + background: none; + border: 2px solid; + border-radius: $b-border-radius; + width: $b-width; + color: $b-color; + font-size: $b-font-size; + margin-right: $b-margin-right; + cursor: $b-cursor; + + + &:last-child { + margin-right: 0; + } + + @each $name, $colors in $flavors { + &.#{$name} { + border-color: list.nth($colors, 1); + color: list.nth($colors, 1); + + &:disabled { + border-color: list.nth($colors, 2); + color: list.nth($colors, 2); + cursor: default; + } + + &:hover:not([disabled]) { + border-color: list.nth($colors, 1); + background: list.nth($colors, 1); + @if $name == "danger" or $name == "info" { + color: $light-font; + } @else { + color: $dark-font; + } + } + } + } +} diff --git a/src/core/components/buttons/button-outline/button-outline.component.spec.ts b/src/core/components/buttons/button-outline/button-outline.component.spec.ts new file mode 100644 index 00000000..85739b8d --- /dev/null +++ b/src/core/components/buttons/button-outline/button-outline.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ButtonOutlineComponent } from './button-outline.component'; + +describe('ButtonOutlineComponent', () => { + let component: ButtonOutlineComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ButtonOutlineComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ButtonOutlineComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/core/components/buttons/button-outline/button-outline.component.ts b/src/core/components/buttons/button-outline/button-outline.component.ts new file mode 100644 index 00000000..6767a133 --- /dev/null +++ b/src/core/components/buttons/button-outline/button-outline.component.ts @@ -0,0 +1,16 @@ +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {ButtonFlavor} from "../button/button.component"; + +@Component({ + selector: 'design-button-outline', + templateUrl: './button-outline.component.html', + styleUrls: ['./button-outline.component.scss'] +}) +export class ButtonOutlineComponent { + + @Input() public disabled = false; + @Input() public flavor: ButtonFlavor = 'primary'; + + // eslint-disable-next-line @angular-eslint/no-output-on-prefix + @Output() public onClick = new EventEmitter(); +} diff --git a/src/core/components/buttons/button-outline/button-outline.module.ts b/src/core/components/buttons/button-outline/button-outline.module.ts new file mode 100644 index 00000000..3e1df64f --- /dev/null +++ b/src/core/components/buttons/button-outline/button-outline.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import {ButtonOutlineComponent} from "./button-outline.component"; + + + +@NgModule({ + declarations: [ + ButtonOutlineComponent + ], + imports: [ + CommonModule + ], + exports: [ + ButtonOutlineComponent + ] +}) +export class ButtonOutlineModule { } diff --git a/src/core/components/buttons/button-text/button-text.component.html b/src/core/components/buttons/button-text/button-text.component.html new file mode 100644 index 00000000..94abb52d --- /dev/null +++ b/src/core/components/buttons/button-text/button-text.component.html @@ -0,0 +1,3 @@ + diff --git a/src/core/components/buttons/button-text/button-text.component.scss b/src/core/components/buttons/button-text/button-text.component.scss new file mode 100644 index 00000000..27722b31 --- /dev/null +++ b/src/core/components/buttons/button-text/button-text.component.scss @@ -0,0 +1,59 @@ +@use "sass:list"; +@import "src/global-styles/theme-colors"; +@import "../buttons"; + +$flavors: ( + primary: ( + $primary-default, + $primary-disabled, + ), + success: ( + $success-default, + $success-disabled, + ), + warning: ( + $warning-default, + $warning-disabled, + ), + danger: ( + $danger-default, + $danger-disabled, + ), + info: ( + $info-default, + $info-disabled, + ), +); + +button { + padding: $b-padding; + width: $b-width; + color: $b-color; + border: $b-border; + font-size: $b-font-size; + margin-right: $b-margin-right; + background: none; + cursor: $b-cursor; + + &:last-child { + margin-right: 0; + } + + @each $name, $colors in $flavors { + &.#{$name} { + color: list.nth($colors, 1); + + &:disabled { + color: list.nth($colors, 2); + cursor: default; + } + + &:hover:not([disabled]) { + color: list.nth($colors, 1); + text-decoration: underline; + text-underline: list.nth($colors, 1);; + } + } + } +} + diff --git a/src/core/components/buttons/button-text/button-text.component.spec.ts b/src/core/components/buttons/button-text/button-text.component.spec.ts new file mode 100644 index 00000000..a1cea4db --- /dev/null +++ b/src/core/components/buttons/button-text/button-text.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ButtonTextComponent } from './button-text.component'; + +describe('ButtonTextComponent', () => { + let component: ButtonTextComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ButtonTextComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ButtonTextComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/core/components/buttons/button-text/button-text.component.ts b/src/core/components/buttons/button-text/button-text.component.ts new file mode 100644 index 00000000..abd887f6 --- /dev/null +++ b/src/core/components/buttons/button-text/button-text.component.ts @@ -0,0 +1,16 @@ +import {Component, EventEmitter, Input, Output} from '@angular/core'; +import {ButtonFlavor} from "../button/button.component"; + +@Component({ + selector: 'design-button-text', + templateUrl: './button-text.component.html', + styleUrls: ['./button-text.component.scss'] +}) +export class ButtonTextComponent { + + @Input() public disabled = false; + @Input() public flavor: ButtonFlavor = 'primary'; + + // eslint-disable-next-line @angular-eslint/no-output-on-prefix + @Output() public onClick = new EventEmitter(); +} diff --git a/src/core/components/buttons/button-text/button-text.module.ts b/src/core/components/buttons/button-text/button-text.module.ts new file mode 100644 index 00000000..a94fb6bf --- /dev/null +++ b/src/core/components/buttons/button-text/button-text.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ButtonTextComponent } from './button-text.component'; + + + +@NgModule({ + declarations: [ + ButtonTextComponent + ], + imports: [ + CommonModule + ], + exports: [ + ButtonTextComponent + ] +}) +export class ButtonTextModule { } diff --git a/src/core/components/buttons/button/button.component.html b/src/core/components/buttons/button/button.component.html new file mode 100644 index 00000000..94abb52d --- /dev/null +++ b/src/core/components/buttons/button/button.component.html @@ -0,0 +1,3 @@ + diff --git a/src/core/components/buttons/button/button.component.scss b/src/core/components/buttons/button/button.component.scss new file mode 100644 index 00000000..b76b0f1a --- /dev/null +++ b/src/core/components/buttons/button/button.component.scss @@ -0,0 +1,74 @@ +@use "sass:list"; +@import "src/global-styles/theme-colors"; +@import "../buttons"; + +$flavors: ( + primary: ( + $primary-default, + $primary-hover, + $primary-disabled, + ), + success: ( + $success-default, + $success-hover, + $success-disabled, + ), + warning: ( + $warning-default, + $warning-hover, + $warning-disabled, + ), + danger: ( + $danger-default, + $danger-hover, + $danger-disabled, + ), + info: ( + $info-default, + $info-hover, + $info-disabled, + ), +); + +button { + padding: $b-padding; + border-radius: $b-border-radius; + width: $b-width; + color: $b-color; + border: $b-border; + font-size: $b-font-size; + margin-right: $b-margin-right; + cursor: $b-cursor; + + &:last-child { + margin-right: 0; + } + + @each $name, $colors in $flavors { + &.#{$name} { + color: $dark-font; + background: list.nth($colors, 1); + + @if $name == "danger" or $name == "info" { + color: $light-font; + } @else { + color: $dark-font; + } + + &:disabled { + background-color: list.nth($colors, 3); + cursor: default; + @if $name == "danger" or $name == "info" { + color: $button-disabled-font; + } @else { + color: $button-dark-disabled-font; + } + } + + &:hover:not([disabled]) { + background-color: list.nth($colors, 2); + color: white; + } + } + } +} diff --git a/src/core/components/buttons/button/button.component.spec.ts b/src/core/components/buttons/button/button.component.spec.ts new file mode 100644 index 00000000..3c2faae7 --- /dev/null +++ b/src/core/components/buttons/button/button.component.spec.ts @@ -0,0 +1,23 @@ +import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {ButtonComponent} from './button.component'; + +describe('ButtonComponent', () => { + let component: ButtonComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ButtonComponent] + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/core/components/buttons/button/button.component.ts b/src/core/components/buttons/button/button.component.ts new file mode 100644 index 00000000..9049c584 --- /dev/null +++ b/src/core/components/buttons/button/button.component.ts @@ -0,0 +1,17 @@ +import {Component, EventEmitter, Input, Output} from '@angular/core'; + +export type ButtonFlavor = 'primary' | 'success' | 'warning' | 'danger' | 'info'; + +@Component({ + selector: 'design-button', + templateUrl: './button.component.html', + styleUrls: ['./button.component.scss'] +}) +export class ButtonComponent { + + @Input() public disabled = false; + @Input() public flavor: ButtonFlavor = 'primary'; + + // eslint-disable-next-line @angular-eslint/no-output-on-prefix + @Output() public onClick = new EventEmitter(); +} diff --git a/src/core/components/buttons/button/button.module.ts b/src/core/components/buttons/button/button.module.ts new file mode 100644 index 00000000..7c7d65bb --- /dev/null +++ b/src/core/components/buttons/button/button.module.ts @@ -0,0 +1,17 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {ButtonComponent} from './button.component'; + +@NgModule({ + declarations: [ + ButtonComponent + ], + exports: [ + ButtonComponent + ], + imports: [ + CommonModule + ] +}) +export class ButtonModule { +} diff --git a/src/core/components/progressbar/progressbar.component.html b/src/core/components/progressbar/progressbar.component.html new file mode 100644 index 00000000..3117e7f2 --- /dev/null +++ b/src/core/components/progressbar/progressbar.component.html @@ -0,0 +1,7 @@ +
+

{{value}}%

+

+
+
 
+
+
diff --git a/src/core/components/progressbar/progressbar.component.scss b/src/core/components/progressbar/progressbar.component.scss new file mode 100644 index 00000000..7ea0234a --- /dev/null +++ b/src/core/components/progressbar/progressbar.component.scss @@ -0,0 +1,35 @@ +@import 'theme-colors'; + + +p{ + text-align: center; + margin-bottom: 0px; + margin-top: 0px; + font-size: 1.2rem; + color: white; +} +.bar{ + margin: 4px; + padding: 8px; +} +.desc{ + font-size: 1rem; + color: grey; + margin-top: 0px; + margin-bottom: 4px; +} + +.p-bar{ + height: 1.8vh; + width: 100%; + border-radius: 100vw; + background-color: white; + margin-top: 5px; + overflow: hidden; +} +.p-bar-value{ + height: 100%; + background-color: $primary-default; + width: 100%; + border-radius: 100px 0px 0px 100px; +} diff --git a/src/core/components/progressbar/progressbar.component.spec.ts b/src/core/components/progressbar/progressbar.component.spec.ts new file mode 100644 index 00000000..6d3c3210 --- /dev/null +++ b/src/core/components/progressbar/progressbar.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProgressbarComponent } from './progressbar.component'; + +describe('ProgressbarComponent', () => { + let component: ProgressbarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ProgressbarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ProgressbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/core/components/progressbar/progressbar.component.ts b/src/core/components/progressbar/progressbar.component.ts new file mode 100644 index 00000000..4b26e379 --- /dev/null +++ b/src/core/components/progressbar/progressbar.component.ts @@ -0,0 +1,12 @@ +import { Component, Input} from '@angular/core'; + +@Component({ + selector: 'design-progressbar', + templateUrl: './progressbar.component.html', + styleUrls: ['./progressbar.component.scss'] +}) +export class ProgressbarComponent { + + @Input() value = '100'; + +} diff --git a/src/core/components/progressbar/progressbar.module.ts b/src/core/components/progressbar/progressbar.module.ts new file mode 100644 index 00000000..9ee55c77 --- /dev/null +++ b/src/core/components/progressbar/progressbar.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ProgressbarComponent } from './progressbar.component'; + + +@NgModule({ + declarations: [ + ProgressbarComponent + ], + exports: [ + ProgressbarComponent + ], + imports: [ + CommonModule + ] +}) +export class ProgressbarModule { } diff --git a/src/global-styles/_theme-colors.scss b/src/global-styles/_theme-colors.scss new file mode 100644 index 00000000..4288af91 --- /dev/null +++ b/src/global-styles/_theme-colors.scss @@ -0,0 +1,52 @@ +/*primary*/ +$primary-default: #2ECC70; +$primary-hover: #1F8C4C; +$primary-disabled: #2E473E; + +/*success*/ +$success-default: #3ABB18; +$success-hover: #277A10; +$success-disabled: #2F5629; + +/*warning*/ +$warning-default: #F1C30E; +$warning-hover: #B3910B; +$warning-disabled: #675926; + +/*danger*/ +$danger-default: #F00040; +$danger-hover: #B0002F; +$danger-disabled: #671E35; + +/*info*/ +$info-default: #3281F6; +$info-hover: #245EB5; +$info-disabled: #2D456C; + +/*fonts*/ +$labeled-disabled-font: #748781; +$checkbox-disabled-font: $labeled-disabled-font; +$radio-disabled-font: $labeled-disabled-font; +$switch-disabled-font: $labeled-disabled-font; +$light-disabled-font: $labeled-disabled-font; +$button-dark-disabled-font: #222D2D; +$dark-font: #1A1C23; +$disabled-placeholder-font: #434349; +$placeholder-font: #888888; +$button-disabled-font: #888888; +$grey-font: #BEBEBE; +$light-font: #FFFFFF; + +/*backgrounds*/ +$input-disabled-background: #25252B; +$sidebar-submenu-background: #2B2B31; +$background: #2F2F36; +$input-background: #1D1D24; +$popup-dark-background: #1D1D24; +$sidebar-background: #1E1E24; +$popup-light-background: #FFFFFF; + +/*etc*/ +$logo-crypt: #27A036; +/* ISSUE : #260 */ + diff --git a/src/styles.scss b/src/styles.scss index 39a54f1a..82bfe68c 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -3,6 +3,7 @@ @import "variables"; @import "controls"; @import "context-menu"; +@import "@fontsource/jost"; app-root { width: 100%; @@ -15,7 +16,8 @@ html { height: 100%; margin: 0; overflow: hidden; - font-family: $default-font; + font-size: 20px; + font-family: "Jost", Roboto, "Open Sans", sans-serif; background-color: #000; color: #fff; }