diff --git a/angular.json b/angular.json index 026143f74..761054a3d 100644 --- a/angular.json +++ b/angular.json @@ -1399,6 +1399,35 @@ } } }, + "dev-toast": { + "projectType": "application", + "root": "packages/mosaic-dev/toast", + "sourceRoot": "packages/mosaic-dev/toast", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/mosaic-dev/toast", + "tsConfig": "packages/mosaic-dev/toast/tsconfig.app.json", + "index": "packages/mosaic-dev/index.html", + "main": "packages/mosaic-dev/toast/main.ts", + "polyfills": "packages/mosaic-dev/polyfills.ts", + "vendorChunk": true, + "extractLicenses": false, + "buildOptimizer": false, + "sourceMap": true, + "optimization": false, + "namedChunks": true + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "dev-toast:build" + } + } + } + }, "dev-toggle": { "projectType": "application", "root": "packages/mosaic-dev/toggle", diff --git a/commitlint.config.js b/commitlint.config.js index c39a7d1af..e7f2a2525 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -44,6 +44,7 @@ const scope_types = [ 'tags', 'textarea', 'timepicker', + 'toast', 'toggle', 'tooltip', 'tree', diff --git a/package.json b/package.json index c8814f14f..b95300e19 100644 --- a/package.json +++ b/package.json @@ -195,6 +195,7 @@ "server-dev:tabs": "ng serve dev-tabs --port 3003", "server-dev:tags": "ng serve dev-tags --port 3003", "server-dev:textarea": "ng serve dev-textarea --port 3003", + "server-dev:toast": "ng serve dev-toast --port 3003", "server-dev:toggle": "ng serve dev-toggle --port 3003", "server-dev:theme-picker": "ng serve dev-theme-picker --port 3003", "server-dev:tree": "ng serve dev-tree --port 3003", diff --git a/packages/docs/src/app/shared/documentation-items/documentation-items.ts b/packages/docs/src/app/shared/documentation-items/documentation-items.ts index 01c9a3e6f..d3bbfc4fd 100644 --- a/packages/docs/src/app/shared/documentation-items/documentation-items.ts +++ b/packages/docs/src/app/shared/documentation-items/documentation-items.ts @@ -94,6 +94,12 @@ const DOCS: { [key: string]: DocCategory[] } = { name: 'Tooltip', summary: '', examples: ['tooltip-types'] + }, + { + id: 'toast', + name: 'Toast', + summary: '', + examples: ['toast-types'] } ] }, diff --git a/packages/mosaic-dev/toast/main.ts b/packages/mosaic-dev/toast/main.ts new file mode 100644 index 000000000..89dfc67aa --- /dev/null +++ b/packages/mosaic-dev/toast/main.ts @@ -0,0 +1,9 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { DemoModule } from './module'; + + +platformBrowserDynamic() + .bootstrapModule(DemoModule) + // tslint:disable-next-line:no-console + .catch((error) => console.error(error)); diff --git a/packages/mosaic-dev/toast/module.ts b/packages/mosaic-dev/toast/module.ts new file mode 100644 index 000000000..412080b15 --- /dev/null +++ b/packages/mosaic-dev/toast/module.ts @@ -0,0 +1,107 @@ +/* tslint:disable:no-console */ +import { NgModule, Component, ViewEncapsulation, TemplateRef, ChangeDetectionStrategy } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { ThemePalette } from '@ptsecurity/mosaic/core'; +import { + McToastStyle, + MC_TOAST_CONFIG, + McToastData, + McToastModule, + McToastService, + McToastPosition, + McToastComponent +} from '@ptsecurity/mosaic/toast'; + +import { McButtonModule } from '../../mosaic/button'; + + +@Component({ + selector: 'mc-new-toast', + template: '
MyToastComponent
', + host: { + class: 'my-toast' + }, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None +}) +export class MyToastComponent extends McToastComponent { + constructor( + readonly data: McToastData, + readonly service: McToastService + ) { + super(data, service); + + console.log('MyToastComponent: '); + } +} + + +@Component({ + selector: 'app', + templateUrl: './template.html', + styleUrls: ['../main.scss', './styles.scss'], + encapsulation: ViewEncapsulation.None +}) +export class ToastDemoComponent { + themePalette = ThemePalette; + + constructor( + private toastService: McToastService, + private newToastService: McToastService + ) {} + + showStickyToast(style: McToastStyle) { + this.toastService.show({ style, title: 'Success', content: 'Message Content' }, false, 0, true); + } + + showToast(style: McToastStyle) { + this.toastService.show({ style, title: 'Success', content: 'Message Content' }); + } + + showToastTitleTemplate(style: McToastStyle, template: TemplateRef) { + this.toastService.show({ style, title: template, content: 'Message Content' }); + } + + showToastContentTemplate(style: McToastStyle, template: TemplateRef) { + this.toastService.show({ style, title: 'Success', content: template }); + } + + showNewToast(style: McToastStyle) { + this.newToastService.show({ style, title: 'Success', content: 'Message Content' }); + } + + showTemplate(style: McToastStyle, template: TemplateRef) { + this.toastService.showTemplate({ style, title: 'Success', content: 'Message Content' }, template); + } +} + +@NgModule({ + declarations: [ + ToastDemoComponent, + MyToastComponent + ], + imports: [ + BrowserModule, + BrowserAnimationsModule, + McButtonModule, + McToastModule + ], + bootstrap: [ToastDemoComponent], + providers: [ + McToastService, + { + provide: MC_TOAST_CONFIG, + useValue: { + position: McToastPosition.TOP_RIGHT, + duration: 3000, + onTop: true + } + } + // { + // provide: McToastComponent, + // useFactory: () => MyToastComponent + // } + ] +}) +export class DemoModule {} diff --git a/packages/mosaic-dev/toast/styles.scss b/packages/mosaic-dev/toast/styles.scss new file mode 100644 index 000000000..27b9c6597 --- /dev/null +++ b/packages/mosaic-dev/toast/styles.scss @@ -0,0 +1,18 @@ +.demo-block { + display: flex; + flex-flow: row wrap; + + .example-button-group { + display: flex; + flex-flow: column wrap; + + button { + width: 150px; + margin-bottom: 5px; + } + } + + .toasts-container { + margin-left: 20px; + } +} diff --git a/packages/mosaic-dev/toast/template.html b/packages/mosaic-dev/toast/template.html new file mode 100644 index 000000000..9e21be35d --- /dev/null +++ b/packages/mosaic-dev/toast/template.html @@ -0,0 +1,30 @@ + + my title + + + + my content + + + + Template with data.title: {{ data.title }} + + +
+
+ + + + + + + + + + + + + + +
+
diff --git a/packages/mosaic-dev/toast/tsconfig.app.json b/packages/mosaic-dev/toast/tsconfig.app.json new file mode 100644 index 000000000..9b67772db --- /dev/null +++ b/packages/mosaic-dev/toast/tsconfig.app.json @@ -0,0 +1,8 @@ +{ + "extends": "../tsconfig.dev.json", + "files": [ + "module.ts", + "../polyfills.ts" + ], + "include": ["**/*.ts"] +} diff --git a/packages/mosaic-examples/mosaic/toast/index.ts b/packages/mosaic-examples/mosaic/toast/index.ts new file mode 100644 index 000000000..fb87285ae --- /dev/null +++ b/packages/mosaic-examples/mosaic/toast/index.ts @@ -0,0 +1,36 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { McButtonModule } from '@ptsecurity/mosaic/button'; +import { MC_TOAST_CONFIG, McToastModule, McToastPosition, McToastService } from '@ptsecurity/mosaic/toast'; + +import { ToastOverviewExample } from './toast-overview/toast-overview-example'; + + +export { + ToastOverviewExample +}; + +const EXAMPLES = [ + ToastOverviewExample +]; + +@NgModule({ + imports: [ + CommonModule, + McButtonModule, + McToastModule + ], + declarations: EXAMPLES, + exports: EXAMPLES, + providers: [ + McToastService, + { + provide: MC_TOAST_CONFIG, + useValue: { + position: McToastPosition.TOP_RIGHT, + duration: 3000 + } + } + ] +}) +export class ToastExamplesModule {} diff --git a/packages/mosaic-examples/mosaic/toast/ng-package.json b/packages/mosaic-examples/mosaic/toast/ng-package.json new file mode 100644 index 000000000..bebf62dcb --- /dev/null +++ b/packages/mosaic-examples/mosaic/toast/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/packages/mosaic-examples/mosaic/toast/toast-overview/toast-overview-example.css b/packages/mosaic-examples/mosaic/toast/toast-overview/toast-overview-example.css new file mode 100644 index 000000000..527f2885d --- /dev/null +++ b/packages/mosaic-examples/mosaic/toast/toast-overview/toast-overview-example.css @@ -0,0 +1,8 @@ +.example-button-group { + display: inline-flex; + flex-direction: column; +} + +.example-button { + margin-bottom: 10px; +} diff --git a/packages/mosaic-examples/mosaic/toast/toast-overview/toast-overview-example.html b/packages/mosaic-examples/mosaic/toast/toast-overview/toast-overview-example.html new file mode 100644 index 000000000..cf13da6d1 --- /dev/null +++ b/packages/mosaic-examples/mosaic/toast/toast-overview/toast-overview-example.html @@ -0,0 +1,28 @@ + + my title + + + + my content + + + +
Template with data.title: {{ data.title }}
+ + +
+
+ + + + + + + + + + + + +
+
diff --git a/packages/mosaic-examples/mosaic/toast/toast-overview/toast-overview-example.ts b/packages/mosaic-examples/mosaic/toast/toast-overview/toast-overview-example.ts new file mode 100644 index 000000000..e65f10636 --- /dev/null +++ b/packages/mosaic-examples/mosaic/toast/toast-overview/toast-overview-example.ts @@ -0,0 +1,61 @@ +/* tslint:disable:no-console */ +import { ChangeDetectionStrategy, Component, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { ThemePalette } from '@ptsecurity/mosaic/core'; +import { McToastData, McToastStyle, McToastService, McToastComponent } from '@ptsecurity/mosaic/toast'; + + +@Component({ + selector: 'mc-new-toast', + template: '
MyToastComponent
', + host: { + class: 'my-toast' + }, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None +}) +export class MyToastComponent extends McToastComponent { + constructor( + readonly data: McToastData, + readonly service: McToastService + ) { + super(data, service); + + console.log('MyToastComponent: '); + } +} +/** + * @title Basic Toast + */ +@Component({ + selector: 'toast-overview-example', + templateUrl: 'toast-overview-example.html', + styleUrls: ['toast-overview-example.css'] +}) +export class ToastOverviewExample { + themePalette = ThemePalette; + + constructor( + private toastService: McToastService, + private newToastService: McToastService + ) {} + + showToast(style: McToastStyle) { + this.toastService.show({ style, title: 'Success', content: 'Message Content' }); + } + + showToastTitleTemplate(style: McToastStyle, template: TemplateRef) { + this.toastService.show({ style, title: template, content: 'Message Content' }); + } + + showToastContentTemplate(style: McToastStyle, template: TemplateRef) { + this.toastService.show({ style, title: 'Success', content: template }); + } + + showNewToast(style: McToastStyle) { + this.newToastService.show({ style, title: 'Success', content: 'Message Content' }); + } + + showTemplate(style: McToastStyle, template: TemplateRef) { + this.toastService.showTemplate({ style, title: 'Success', content: 'Message Content' }, template); + } +} diff --git a/packages/mosaic/design-tokens/legacy-2017/_palette.scss b/packages/mosaic/design-tokens/legacy-2017/_palette.scss index c5ca89316..5046e4eae 100644 --- a/packages/mosaic/design-tokens/legacy-2017/_palette.scss +++ b/packages/mosaic/design-tokens/legacy-2017/_palette.scss @@ -1,17 +1,18 @@ $light-color-scheme-primary-palette: ( -40: #F5FAFD, -60: #EBF4FB, -100: #D8EAF7, -200: #AAD1EC, -300: #7FBAE1, -400: #57A4D7, -500: #338FCC, -560: #277BB3, -600: #206EA2, -700: #114E77, -800: #07314D, -A100: rgba(0, 153, 255, 0.15), -A200: rgba(0, 153, 255, 0.3), +40: #eff6ff, +60: #e7f1ff, +100: #c8dfff, +200: #a2c7fe, +300: #5697ff, +400: #4187ff, +500: #0374eb, +560: #0059b8, +600: #014b9d, +700: #023c7f, +800: #193060, +900: #00224f, +A100: rgba(3, 116, 235, 0.15), +A200: rgba(3, 116, 235, 0.3), contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -31,23 +32,24 @@ A200: white, ); $light-color-scheme-second-palette: ( -40: #F5F5F5, -60: #F0F0F0, -100: #E6E6E6, -200: #CCCCCC, -300: #B3B3B3, -400: #999999, -500: #808080, -560: #707070, -600: #666666, -700: #4D4D4D, -800: #333333, -A40: rgba(0, 0, 0, 0.04), -A60: rgba(0, 0, 0, 0.06), -A100: rgba(0, 0, 0, 0.1), -A200: rgba(0, 0, 0, 0.2), -A300: rgba(0, 0, 0, 0.3), -A500: rgba(0, 0, 0, 0.5), +40: #f2f5f9, +60: #ebeef2, +100: #d7dee4, +200: #bdc7d1, +300: #8c99a5, +400: #7f8c98, +500: #6d7a86, +560: #515e69, +600: #434f5a, +700: #333f4a, +800: #27333e, +900: #19252f, +A40: rgba(25, 37, 47, 0.04), +A60: rgba(25, 37, 47, 0.06), +A100: rgba(25, 37, 47, 0.1), +A200: rgba(25, 37, 47, 0.2), +A300: rgba(25, 37, 47, 0.3), +A500: rgba(25, 37, 47, 0.5), contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -65,18 +67,19 @@ contrast: ( ); $light-color-scheme-error-palette: ( -40: #FEF7F6, -60: #FCEFEC, -100: #FADEDA, -200: #F4B7AE, -300: #ED9284, -400: #E76E5C, -500: #E04D36, -560: #C43E29, -600: #B23522, -700: #832112, -800: #541208, -A100: rgba(224, 79, 56, 0.15), +40: #fff3f3, +60: #ffeaea, +100: #fbd6d6, +200: #fcb2b4, +300: #ee6f79, +400: #ea5868, +500: #db3c55, +560: #b9023a, +600: #9e0130, +700: #800025, +800: #621420, +900: #500013, +A100: rgba(219, 60, 85, 0.15), contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -95,19 +98,18 @@ A100: #4D4D4D, ); $light-color-scheme-info-palette: ( -40: #F5FAFD, -60: #EBF4FB, -100: #D8EAF7, -200: #AAD1EC, -300: #7FBAE1, -400: #57A4D7, -500: #338FCC, -560: #277BB3, -600: #206EA2, -700: #114E77, -800: #07314D, -A100: rgba(0, 153, 255, 0.15), -A200: rgba(0, 153, 255, 0.3), +40: #ebf8fd, +60: #d9f3fd, +100: #afe6f9, +200: #6ed3f2, +300: #18a5c5, +400: #2099b7, +500: #218ca8, +560: #0c6579, +600: #0c5567, +700: #084453, +800: #143641, +900: #022731, contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -127,18 +129,19 @@ A200: white, ); $light-color-scheme-success-palette: ( -40: #F6FBF4, -60: #EDF8E9, -100: #DCF1D4, -200: #B4DEA4, -300: #8FCC79, -400: #6FBA53, -500: #52A832, -560: #449327, -600: #3B8520, -700: #276211, -800: #163F07, -A100: rgba(68, 255, 0, 0.15), +40: #ecf9ef, +60: #d2f7db, +100: #b6ebc3, +200: #8ed5a1, +300: #4ba96c, +400: #319d5c, +500: #028b49, +560: #016b37, +600: #015a2d, +700: #004823, +800: #103920, +900: #002a12, +A100: rgba(2, 139, 73, 0.15), contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -157,18 +160,19 @@ A100: #4D4D4D, ); $light-color-scheme-warning-palette: ( -40: #FDFAF3, -60: #FCF5E8, -100: #F8EBD1, -200: #F0D49B, -300: #E7BD68, -400: #DFA739, -500: #D6930D, -560: #BB800A, -600: #AA7408, -700: #7D5504, -800: #503602, -A100: rgba(255, 170, 0, 0.15), +40: #fff4dd, +60: #ffecce, +100: #fcdda6, +200: #f5c23c, +300: #e19f12, +400: #c78816, +500: #a26e0c, +560: #7e5406, +600: #6b4804, +700: #543803, +800: #3e3015, +900: #312001, +A100: rgba(255, 159, 18, 0.15), contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -187,19 +191,20 @@ A100: #4D4D4D, ); $dark-color-scheme-primary-palette: ( -40: #F5FAFD, -60: #EBF4FB, -100: #D8EAF7, -200: #AAD1EC, -300: #7FBAE1, -400: #57A4D7, -500: #338FCC, -560: #277BB3, -600: #206EA2, -700: #114E77, -800: #07314D, -A100: rgba(0, 153, 255, 0.15), -A200: rgba(0, 153, 255, 0.3), +40: #eff6ff, +60: #e7f1ff, +100: #c8dfff, +200: #a2c7fe, +300: #5697ff, +400: #4187ff, +500: #0374eb, +560: #0059b8, +600: #014b9d, +700: #023c7f, +800: #193060, +900: #00224f, +A100: rgba(3, 116, 235, 0.15), +A200: rgba(3, 116, 235, 0.3), contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -219,23 +224,24 @@ A200: white, ); $dark-color-scheme-second-palette: ( -40: #F5F5F5, -60: #F0F0F0, -100: #E6E6E6, -200: #CCCCCC, -300: #B3B3B3, -400: #999999, -500: #808080, -560: #707070, -600: #666666, -700: #4D4D4D, -800: #333333, -A40: rgba(0, 0, 0, 0.04), -A60: rgba(0, 0, 0, 0.06), -A100: rgba(0, 0, 0, 0.1), -A200: rgba(0, 0, 0, 0.2), -A300: rgba(0, 0, 0, 0.3), -A500: rgba(0, 0, 0, 0.5), +40: #f2f5f9, +60: #ebeef2, +100: #d7dee4, +200: #bdc7d1, +300: #8c99a5, +400: #7f8c98, +500: #6d7a86, +560: #515e69, +600: #434f5a, +700: #333f4a, +800: #27333e, +900: #19252f, +A40: rgba(25, 37, 47, 0.04), +A60: rgba(25, 37, 47, 0.06), +A100: rgba(25, 37, 47, 0.1), +A200: rgba(25, 37, 47, 0.2), +A300: rgba(25, 37, 47, 0.3), +A500: rgba(25, 37, 47, 0.5), contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -253,18 +259,19 @@ contrast: ( ); $dark-color-scheme-error-palette: ( -40: #FEF7F6, -60: #FCEFEC, -100: #FADEDA, -200: #F4B7AE, -300: #ED9284, -400: #E76E5C, -500: #E04D36, -560: #C43E29, -600: #B23522, -700: #832112, -800: #541208, -A100: rgba(224, 79, 56, 0.15), +40: #fff3f3, +60: #ffeaea, +100: #fbd6d6, +200: #fcb2b4, +300: #ee6f79, +400: #ea5868, +500: #db3c55, +560: #b9023a, +600: #9e0130, +700: #800025, +800: #621420, +900: #500013, +A100: rgba(219, 60, 85, 0.15), contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -283,19 +290,18 @@ A100: #4D4D4D, ); $dark-color-scheme-info-palette: ( -40: #F5FAFD, -60: #EBF4FB, -100: #D8EAF7, -200: #AAD1EC, -300: #7FBAE1, -400: #57A4D7, -500: #338FCC, -560: #277BB3, -600: #206EA2, -700: #114E77, -800: #07314D, -A100: rgba(0, 153, 255, 0.15), -A200: rgba(0, 153, 255, 0.3), +40: #ebf8fd, +60: #d9f3fd, +100: #afe6f9, +200: #6ed3f2, +300: #18a5c5, +400: #2099b7, +500: #218ca8, +560: #0c6579, +600: #0c5567, +700: #084453, +800: #143641, +900: #022731, contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -315,18 +321,19 @@ A200: white, ); $dark-color-scheme-success-palette: ( -40: #F6FBF4, -60: #EDF8E9, -100: #DCF1D4, -200: #B4DEA4, -300: #8FCC79, -400: #6FBA53, -500: #52A832, -560: #449327, -600: #3B8520, -700: #276211, -800: #163F07, -A100: rgba(68, 255, 0, 0.15), +40: #ecf9ef, +60: #d2f7db, +100: #b6ebc3, +200: #8ed5a1, +300: #4ba96c, +400: #319d5c, +500: #028b49, +560: #016b37, +600: #015a2d, +700: #004823, +800: #103920, +900: #002a12, +A100: rgba(2, 139, 73, 0.15), contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -345,18 +352,19 @@ A100: #4D4D4D, ); $dark-color-scheme-warning-palette: ( -40: #FDFAF3, -60: #FCF5E8, -100: #F8EBD1, -200: #F0D49B, -300: #E7BD68, -400: #DFA739, -500: #D6930D, -560: #BB800A, -600: #AA7408, -700: #7D5504, -800: #503602, -A100: rgba(255, 170, 0, 0.15), +40: #fff4dd, +60: #ffecce, +100: #fcdda6, +200: #f5c23c, +300: #e19f12, +400: #c78816, +500: #a26e0c, +560: #7e5406, +600: #6b4804, +700: #543803, +800: #3e3015, +900: #312001, +A100: rgba(255, 159, 18, 0.15), contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -375,19 +383,20 @@ A100: #4D4D4D, ); $color-blue-palette: ( -40: #F5FAFD, -60: #EBF4FB, -100: #D8EAF7, -200: #AAD1EC, -300: #7FBAE1, -400: #57A4D7, -500: #338FCC, -560: #277BB3, -600: #206EA2, -700: #114E77, -800: #07314D, -A100: rgba(0, 153, 255, 0.15), -A200: rgba(0, 153, 255, 0.3), +40: #eff6ff, +60: #e7f1ff, +100: #c8dfff, +200: #a2c7fe, +300: #5697ff, +400: #4187ff, +500: #0374eb, +560: #0059b8, +600: #014b9d, +700: #023c7f, +800: #193060, +900: #00224f, +A100: rgba(3, 116, 235, 0.15), +A200: rgba(3, 116, 235, 0.3), contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -407,18 +416,19 @@ A200: white, ); $color-green-palette: ( -40: #F6FBF4, -60: #EDF8E9, -100: #DCF1D4, -200: #B4DEA4, -300: #8FCC79, -400: #6FBA53, -500: #52A832, -560: #449327, -600: #3B8520, -700: #276211, -800: #163F07, -A100: rgba(68, 255, 0, 0.15), +40: #ecf9ef, +60: #d2f7db, +100: #b6ebc3, +200: #8ed5a1, +300: #4ba96c, +400: #319d5c, +500: #028b49, +560: #016b37, +600: #015a2d, +700: #004823, +800: #103920, +900: #002a12, +A100: rgba(2, 139, 73, 0.15), contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -437,18 +447,19 @@ A100: #4D4D4D, ); $color-red-palette: ( -40: #FEF7F6, -60: #FCEFEC, -100: #FADEDA, -200: #F4B7AE, -300: #ED9284, -400: #E76E5C, -500: #E04D36, -560: #C43E29, -600: #B23522, -700: #832112, -800: #541208, -A100: rgba(224, 79, 56, 0.15), +40: #fff3f3, +60: #ffeaea, +100: #fbd6d6, +200: #fcb2b4, +300: #ee6f79, +400: #ea5868, +500: #db3c55, +560: #b9023a, +600: #9e0130, +700: #800025, +800: #621420, +900: #500013, +A100: rgba(219, 60, 85, 0.15), contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -467,23 +478,24 @@ A100: #4D4D4D, ); $color-grey-palette: ( -40: #F5F5F5, -60: #F0F0F0, -100: #E6E6E6, -200: #CCCCCC, -300: #B3B3B3, -400: #999999, -500: #808080, -560: #707070, -600: #666666, -700: #4D4D4D, -800: #333333, -A40: rgba(0, 0, 0, 0.04), -A60: rgba(0, 0, 0, 0.06), -A100: rgba(0, 0, 0, 0.1), -A200: rgba(0, 0, 0, 0.2), -A300: rgba(0, 0, 0, 0.3), -A500: rgba(0, 0, 0, 0.5), +40: #f2f5f9, +60: #ebeef2, +100: #d7dee4, +200: #bdc7d1, +300: #8c99a5, +400: #7f8c98, +500: #6d7a86, +560: #515e69, +600: #434f5a, +700: #333f4a, +800: #27333e, +900: #19252f, +A40: rgba(25, 37, 47, 0.04), +A60: rgba(25, 37, 47, 0.06), +A100: rgba(25, 37, 47, 0.1), +A200: rgba(25, 37, 47, 0.2), +A300: rgba(25, 37, 47, 0.3), +A500: rgba(25, 37, 47, 0.5), contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -501,18 +513,19 @@ contrast: ( ); $color-yellow-palette: ( -40: #FDFAF3, -60: #FCF5E8, -100: #F8EBD1, -200: #F0D49B, -300: #E7BD68, -400: #DFA739, -500: #D6930D, -560: #BB800A, -600: #AA7408, -700: #7D5504, -800: #503602, -A100: rgba(255, 170, 0, 0.15), +40: #fff4dd, +60: #ffecce, +100: #fcdda6, +200: #f5c23c, +300: #e19f12, +400: #c78816, +500: #a26e0c, +560: #7e5406, +600: #6b4804, +700: #543803, +800: #3e3015, +900: #312001, +A100: rgba(255, 159, 18, 0.15), contrast: ( 40: #4D4D4D, 60: #4D4D4D, @@ -529,3 +542,65 @@ A100: #4D4D4D, ) ); + +$color-teal-palette: ( +40: #ebf8fd, +60: #d9f3fd, +100: #afe6f9, +200: #6ed3f2, +300: #18a5c5, +400: #2099b7, +500: #218ca8, +560: #0c6579, +600: #0c5567, +700: #084453, +800: #143641, +900: #022731, +contrast: ( +40: #4D4D4D, +60: #4D4D4D, +100: #4D4D4D, +200: #4D4D4D, +300: #4D4D4D, +400: white, +500: white, +560: white, +600: white, +700: white, +800: white, +A100: #4D4D4D, +A200: white, + +) +); + +$color-purple-palette: ( +40: #fff3fb, +60: #ffe9f8, +100: #f2d4e8, +200: #e4bbd7, +300: #c692b5, +400: #bb78a7, +500: #a65d92, +560: #864775, +600: #753865, +700: #612853, +800: #48273f, +900: #36172e, +contrast: ( +40: #4D4D4D, +60: #4D4D4D, +100: #4D4D4D, +200: #4D4D4D, +300: #4D4D4D, +400: white, +500: white, +560: white, +600: white, +700: white, +800: white, +A100: #4D4D4D, +A200: white, + +) +); diff --git a/packages/mosaic/design-tokens/legacy-2017/tokens/components/alert.json5 b/packages/mosaic/design-tokens/legacy-2017/tokens/components/alert.json5 index cfa022366..8175efc94 100644 --- a/packages/mosaic/design-tokens/legacy-2017/tokens/components/alert.json5 +++ b/packages/mosaic/design-tokens/legacy-2017/tokens/components/alert.json5 @@ -2,56 +2,56 @@ alert: { 'light-color-scheme': { error: { - background: { value: '{light-color-scheme.error.palette.value.60.value}' }, - border: { value: '{light-color-scheme.error.default.value}' }, - icon: { value: '{light-color-scheme.error.default.value}' } + background: { value: '{light-color-scheme.error.palette.value.40.value}' }, + border: { value: '{light-color-scheme.error.palette.value.100.value}' }, + icon: { value: '{light-color-scheme.error.palette.value.300.value}' } }, warning: { - background: { value: '{light-color-scheme.warning.palette.value.60.value}' }, - border: { value: '{light-color-scheme.warning.default.value}' }, - icon: { value: '{light-color-scheme.warning.palette.value.400.value}' } + background: { value: '{light-color-scheme.warning.palette.value.40.value}' }, + border: { value: '{light-color-scheme.warning.palette.value.100.value}' }, + icon: { value: '{light-color-scheme.warning.palette.value.300.value}' } }, success: { - background: { value: '{light-color-scheme.success.palette.value.60.value}' }, - border: { value: '{light-color-scheme.success.default.value}' }, - icon: { value: '{light-color-scheme.success.palette.value.400.value}' } + background: { value: '{light-color-scheme.success.palette.value.40.value}' }, + border: { value: '{light-color-scheme.success.palette.value.100.value}' }, + icon: { value: '{light-color-scheme.success.palette.value.300.value}' } }, info: { - background: { value: '{light-color-scheme.info.palette.value.60.value}' }, - border: { value: '{light-color-scheme.info.default.value}' }, - icon: { value: '{light-color-scheme.info.palette.value.400.value}' } + background: { value: '{light-color-scheme.info.palette.value.40.value}' }, + border: { value: '{light-color-scheme.info.palette.value.100.value}' }, + icon: { value: '{light-color-scheme.info.palette.value.300.value}' } }, default: { - background: { value: '{light-color-scheme.second.palette.value.60.value}' }, - border: { value: '{light-color-scheme.second.default.value}' }, - icon: { value: '{light-color-scheme.second.palette.value.200.value}' } + background: { value: '{light-color-scheme.second.palette.value.40.value}' }, + border: { value: '{light-color-scheme.second.palette.value.100.value}' }, + icon: { value: '{light-color-scheme.second.palette.value.300.value}' } } }, 'dark-color-scheme': { error: { - background: { value: '{dark-color-scheme.error.palette.value.700.value}' }, + background: { value: '{dark-color-scheme.error.palette.value.900.value}' }, border: { value: '{dark-color-scheme.error.palette.value.700.value}' }, - icon: { value: '{dark-color-scheme.error.default.value}' } + icon: { value: '{dark-color-scheme.error.palette.value.300.value}' } }, warning: { - background: { value: '{dark-color-scheme.warning.palette.value.700.value}' }, + background: { value: '{dark-color-scheme.warning.palette.value.800.value}' }, border: { value: '{dark-color-scheme.warning.palette.value.700.value}' }, - icon: { value: '{dark-color-scheme.warning.default.value}' } + icon: { value: '{dark-color-scheme.warning.palette.value.300.value}' } }, success: { - background: { value: '{dark-color-scheme.success.palette.value.700.value}' }, + background: { value: '{dark-color-scheme.success.palette.value.800.value}' }, border: { value: '{dark-color-scheme.success.palette.value.700.value}' }, - icon: { value: '{dark-color-scheme.success.default.value}' } + icon: { value: '{dark-color-scheme.success.palette.value.300.value}' } }, info: { - background: { value: '{dark-color-scheme.info.palette.value.700.value}' }, + background: { value: '{dark-color-scheme.info.palette.value.800.value}' }, border: { value: '{dark-color-scheme.info.palette.value.700.value}' }, - icon: { value: '{dark-color-scheme.info.default.value}' } + icon: { value: '{dark-color-scheme.info.palette.value.300.value}' } }, default: { - background: { value: '{dark-color-scheme.second.palette.value.700.value}' }, + background: { value: '{dark-color-scheme.second.palette.value.800.value}' }, border: { value: '{dark-color-scheme.second.palette.value.700.value}' }, - icon: { value: '{dark-color-scheme.second.default.value}' } + icon: { value: '{dark-color-scheme.second.palette.value.300.value}' } } }, size: { diff --git a/packages/mosaic/design-tokens/legacy-2017/tokens/components/badge.json5 b/packages/mosaic/design-tokens/legacy-2017/tokens/components/badge.json5 index 452b206f0..fa241b3a8 100644 --- a/packages/mosaic/design-tokens/legacy-2017/tokens/components/badge.json5 +++ b/packages/mosaic/design-tokens/legacy-2017/tokens/components/badge.json5 @@ -41,43 +41,43 @@ 'light-color-scheme': { solid: { primary: { - background: { value: '{light-color-scheme.primary.palette.value.500.value}' }, + background: { value: '{light-color-scheme.primary.palette.value.400.value}' }, + border: { value: '{light-color-scheme.primary.palette.value.400.value}' }, color: { value: 'white' }, - border: { value: '{light-color-scheme.primary.palette.value.500.value}' }, }, info: { - border: { value: '{light-color-scheme.primary.palette.value.500.value}' }, - background: { value: '{light-color-scheme.primary.palette.value.500.value}' }, + background: { value: '{light-color-scheme.info.palette.value.400.value}' }, + border: { value: '{light-color-scheme.info.palette.value.400.value}' }, color: { value: 'white' } }, success: { - border: { value: '{light-color-scheme.success.palette.value.500.value}' }, - background: { value: '{light-color-scheme.success.palette.value.500.value}' }, + background: { value: '{light-color-scheme.success.palette.value.400.value}' }, + border: { value: '{light-color-scheme.success.palette.value.400.value}' }, color: { value: 'white' } }, warning: { - border: { value: '{light-color-scheme.warning.palette.value.500.value}' }, - background: { value: '{light-color-scheme.warning.palette.value.500.value}' }, + background: { value: '{light-color-scheme.warning.palette.value.400.value}' }, + border: { value: '{light-color-scheme.warning.palette.value.400.value}' }, color: { value: 'white' } }, error: { - border: { value: '{light-color-scheme.error.palette.value.500.value}' }, - background: { value: '{light-color-scheme.error.palette.value.500.value}' }, + background: { value: '{light-color-scheme.error.palette.value.400.value}' }, + border: { value: '{light-color-scheme.error.palette.value.400.value}' }, color: { value: 'white' } }, transparent: { + background: { value: 'transparent' }, border: { value: '{light-color-scheme.second.palette.value.200.value}' }, - color: { value: '{light-color-scheme.primary.palette.value.contrast.300.value}' }, - background: { value: 'transparent' } + color: { value: '{light-color-scheme.second.palette.value.900.value}' }, }, light: { - border: { value: '{light-color-scheme.second.palette.value.100.value}' }, background: { value: '{light-color-scheme.second.palette.value.100.value}' }, - color: { value: '{light-color-scheme.primary.palette.value.contrast.300.value}' } + border: { value: '{light-color-scheme.second.palette.value.100.value}' }, + color: { value: '{light-color-scheme.second.palette.value.900.value}' } }, second: { - border: { value: '{light-color-scheme.second.palette.value.600.value}' }, - background: { value: '{light-color-scheme.second.palette.value.600.value}' }, + background: { value: '{light-color-scheme.second.palette.value.400.value}' }, + border: { value: '{light-color-scheme.second.palette.value.400.value}' }, color: { value: 'white' } } }, @@ -85,22 +85,22 @@ primary: { background: { value: '{light-color-scheme.primary.palette.value.40.value}' }, border: { value: '{light-color-scheme.primary.palette.value.200.value}' }, - color: { value: '{light-color-scheme.primary.palette.value.500.value}' } + color: { value: '{light-color-scheme.primary.palette.value.400.value}' } }, info: { background: { value: '{light-color-scheme.info.palette.value.40.value}' }, border: { value: '{light-color-scheme.primary.palette.value.200.value}' }, - color: { value: '{light-color-scheme.info.palette.value.500.value}' } + color: { value: '{light-color-scheme.info.palette.value.400.value}' } }, success: { background: { value: '{light-color-scheme.success.palette.value.40.value}' }, border: { value: '{light-color-scheme.success.palette.value.200.value}' }, - color: { value: '{light-color-scheme.success.palette.value.560.value}' } + color: { value: '{light-color-scheme.success.palette.value.500.value}' } }, warning: { background: { value: '{light-color-scheme.warning.palette.value.40.value}' }, border: { value: '{light-color-scheme.warning.palette.value.200.value}' }, - color: { value: '{light-color-scheme.warning.palette.value.560.value}' } + color: { value: '{light-color-scheme.warning.palette.value.500.value}' } }, error: { background: { value: '{light-color-scheme.error.palette.value.40.value}' }, @@ -112,73 +112,73 @@ 'dark-color-scheme': { pastel: { primary: { - background: { value: '{light-color-scheme.primary.palette.value.A100.value}' }, - color: { value: '{light-color-scheme.primary.palette.value.100.value}' }, - border: { value: '{light-color-scheme.primary.palette.value.700.value}' }, + background: { value: '{light-color-scheme.primary.palette.value.800.value}' }, + border: { value: '{light-color-scheme.primary.palette.value.600.value}' }, + color: { value: '{light-color-scheme.primary.palette.value.200.value}' }, }, info: { - background: { value: '{light-color-scheme.primary.palette.value.100.value}' }, - color: { value: '{light-color-scheme.primary.palette.value.100.value}' }, - border: { value: '{light-color-scheme.primary.palette.value.A100.value}' } + background: { value: '{light-color-scheme.info.palette.value.800.value}' }, + border: { value: '{light-color-scheme.info.palette.value.600.value}' }, + color: { value: '{light-color-scheme.info.palette.value.200.value}' }, }, success: { - border: { value: '{light-color-scheme.success.palette.value.700.value}' }, - background: { value: '{light-color-scheme.success.palette.value.A100.value}' }, - color: { value: '{light-color-scheme.success.palette.value.100.value}' } + background: { value: '{light-color-scheme.success.palette.value.800.value}' }, + border: { value: '{light-color-scheme.success.palette.value.600.value}' }, + color: { value: '{light-color-scheme.success.palette.value.200.value}' } }, warning: { - border: { value: '{light-color-scheme.warning.palette.value.700.value}' }, - background: { value: '{light-color-scheme.warning.palette.value.A100.value}' }, - color: { value: '{light-color-scheme.warning.palette.value.100.value}' } + background: { value: '{light-color-scheme.warning.palette.value.800.value}' }, + border: { value: '{light-color-scheme.warning.palette.value.600.value}' }, + color: { value: '{light-color-scheme.warning.palette.value.200.value}' } }, error: { - border: { value: '{light-color-scheme.error.palette.value.700.value}' }, - background: { value: '{light-color-scheme.error.palette.value.A100.value}' }, - color: { value: '{light-color-scheme.error.palette.value.100.value}' } + background: { value: '{light-color-scheme.error.palette.value.800.value}' }, + border: { value: '{light-color-scheme.error.palette.value.600.value}' }, + color: { value: '{light-color-scheme.error.palette.value.200.value}' } } }, solid: { primary: { - background: { value: '{light-color-scheme.primary.palette.value.700.value}' }, + background: { value: '{light-color-scheme.primary.palette.value.560.value}' }, + border: { value: '{light-color-scheme.primary.palette.value.560.value}' }, color: { value: 'white' }, - border: { value: '{light-color-scheme.primary.palette.value.700.value}' }, }, info: { - border: { value: '{light-color-scheme.primary.palette.value.800.value}' }, - background: { value: '{light-color-scheme.primary.palette.value.800.value}' }, + background: { value: '{light-color-scheme.info.palette.value.560.value}' }, + border: { value: '{light-color-scheme.info.palette.value.560.value}' }, color: { value: 'white' } }, success: { - border: { value: '{light-color-scheme.success.palette.value.700.value}' }, - background: { value: '{light-color-scheme.success.palette.value.700.value}' }, + background: { value: '{light-color-scheme.success.palette.value.560.value}' }, + border: { value: '{light-color-scheme.success.palette.value.560.value}' }, color: { value: 'white' } }, warning: { - border: { value: '{light-color-scheme.warning.palette.value.700.value}' }, - background: { value: '{light-color-scheme.warning.palette.value.700.value}' }, + background: { value: '{light-color-scheme.warning.palette.value.560.value}' }, + border: { value: '{light-color-scheme.warning.palette.value.560.value}' }, color: { value: 'white' } }, error: { - border: { value: '{light-color-scheme.error.palette.value.700.value}' }, - background: { value: '{light-color-scheme.error.palette.value.700.value}' }, + background: { value: '{light-color-scheme.error.palette.value.560.value}' }, + border: { value: '{light-color-scheme.error.palette.value.560.value}' }, color: { value: 'white' } }, transparent: { - border: { value: '{light-color-scheme.second.palette.value.500.value}' }, - color: { value: '{light-color-scheme.second.palette.value.40.value}' }, - background: { value: 'transparent' } + background: { value: 'transparent' }, + border: { value: '{light-color-scheme.second.palette.value.560.value}' }, + color: { value: 'white' }, }, light: { - border: { value: '{light-color-scheme.second.palette.value.400.value}' }, background: { value: '{light-color-scheme.second.palette.value.400.value}' }, + border: { value: '{light-color-scheme.second.palette.value.400.value}' }, color: { value: 'white' } }, second: { - border: { value: '{light-color-scheme.second.palette.value.700.value}' }, - background: { value: '{light-color-scheme.second.palette.value.700.value}' }, + background: { value: '{light-color-scheme.second.palette.value.560.value}' }, + border: { value: '{light-color-scheme.second.palette.value.560.value}' }, color: { value: 'white' } } } }, } -} +} \ No newline at end of file diff --git a/packages/mosaic/design-tokens/legacy-2017/tokens/components/button.json5 b/packages/mosaic/design-tokens/legacy-2017/tokens/components/button.json5 index c3ca8445a..eb5a5585c 100644 --- a/packages/mosaic/design-tokens/legacy-2017/tokens/components/button.json5 +++ b/packages/mosaic/design-tokens/legacy-2017/tokens/components/button.json5 @@ -1,19 +1,19 @@ { button: { 'light-color-scheme': { - active: { + active: { shadow: { value: 'inset 0 1px 2px 0 rgba(black, 0.2)' } }, primary: { color: { value: '{light-color-scheme.primary.palette.value.contrast.500.value}' }, - border: { value: '{light-color-scheme.primary.palette.value.560.value}' }, - background: { value: '{light-color-scheme.primary.palette.value.500.value}' }, + border: { value: '{light-color-scheme.primary.palette.value.500.value}' }, + background: { value: '{light-color-scheme.primary.default.value}' }, icon: { value: '{light-color-scheme.primary.palette.value.contrast.500.value}' }, states: { active: { - border: { value: 'darken({light-color-scheme.primary.palette.value.560.value}, 5)' }, - background: { value: 'darken({light-color-scheme.primary.palette.value.500.value}, 5)' } + border: { value: '{light-color-scheme.primary.palette.value.560.value}' }, + background: { value: '{light-color-scheme.primary.palette.value.560.value}' } } } }, @@ -23,38 +23,38 @@ states: { hover: { - color: { value: '{light-color-scheme.primary.palette.value.600.value}' }, - icon: { value: '{light-color-scheme.primary.palette.value.600.value}' } + color: { value: '{light-color-scheme.primary.palette.value.560.value}' }, + icon: { value: '{light-color-scheme.primary.palette.value.560.value}' } }, active: { - color: { value: '{light-color-scheme.primary.palette.value.700.value}' }, - icon: { value: '{light-color-scheme.primary.palette.value.700.value}' } + color: { value: '{light-color-scheme.primary.palette.value.600.value}' }, + icon: { value: '{light-color-scheme.primary.palette.value.600.value}' } } } }, second: { - border: { value: '{light-color-scheme.foreground.border.value}' }, - background: { value: '{light-color-scheme.background.background-disabled.value}' }, - color: { value: '{light-color-scheme.foreground.text.value}' }, - icon: { value: '{light-color-scheme.foreground.text-less-contrast.value}' }, + border: { value: '{light-color-scheme.second.palette.value.100.value}' }, + background: { value: '{light-color-scheme.second.palette.value.100.value}' }, + color: { value: '{light-color-scheme.second.palette.value.900.value}' }, + icon: { value: '{light-color-scheme.second.palette.value.300.value}' }, states: { active: { - border: { value: 'darken({light-color-scheme.foreground.border.value}, 5)' }, - background: { value: 'darken({light-color-scheme.background.background-disabled.value}, 5)' } + border: { value: '{light-color-scheme.second.palette.value.200.value}' }, + background: { value: '{light-color-scheme.second.palette.value.200.value}' }, } } }, error: { - border: { value: '{light-color-scheme.foreground.border.value}' }, - background: { value: '{light-color-scheme.background.background-disabled.value}' }, + border: { value: '{light-color-scheme.second.palette.value.100.value}' }, + background: { value: '{light-color-scheme.second.palette.value.100.value}' }, color: { value: '{light-color-scheme.error.palette.value.400.value}' }, icon: { value: '{light-color-scheme.error.palette.value.400.value}' }, states: { active: { - border: { value: 'darken({light-color-scheme.foreground.border.value}, 5)' }, - background: { value: 'darken({light-color-scheme.background.background-disabled.value}, 5)' } + border: { value: '{light-color-scheme.second.palette.value.200.value}' }, + background: { value: '{light-color-scheme.second.palette.value.200.value}' }, } } } @@ -66,13 +66,13 @@ primary: { color: { value: '{dark-color-scheme.primary.palette.value.contrast.500.value}' }, border: { value: '{dark-color-scheme.primary.palette.value.560.value}' }, - background: { value: '{dark-color-scheme.primary.palette.value.500.value}' }, + background: { value: '{dark-color-scheme.primary.default.value}' }, icon: { value: '{dark-color-scheme.primary.palette.value.contrast.500.value}' }, states: { active: { - border: { value: 'darken({dark-color-scheme.primary.palette.value.560.value}, 5)' }, - background: { value: 'darken({dark-color-scheme.primary.palette.value.400.value}, 5)' } + border: { value: 'darken({dark-color-scheme.primary.palette.value.600.value}, 5)' }, + background: { value: 'darken({dark-color-scheme.primary.palette.value.600.value}, 5)' } } } }, @@ -93,28 +93,28 @@ } }, second: { - border: { value: '{dark-color-scheme.foreground.border.value}' }, - background: { value: '{dark-color-scheme.background.background-disabled.value}' }, - color: { value: '{dark-color-scheme.foreground.text.value}' }, - icon: { value: '{dark-color-scheme.foreground.text-less-contrast.value}' }, + border: { value: '{dark-color-scheme.second.palette.value.560.value}' }, + background: { value: '{dark-color-scheme.second.palette.value.560.value}' }, + color: { value: '{dark-color-scheme.second.palette.value.40.value}' }, + icon: { value: '{dark-color-scheme.second.palette.value.300.value}' }, states: { active: { - border: { value: 'darken({dark-color-scheme.foreground.border.value}, 5)' }, - background: { value: 'darken({dark-color-scheme.background.background-disabled.value}, 5)' } + border: { value: '{dark-color-scheme.second.palette.value.700.value}' }, + background: { value: '{dark-color-scheme.second.palette.value.700.value}' } } } }, error: { - border: { value: '{dark-color-scheme.foreground.border.value}' }, - background: { value: '{dark-color-scheme.background.background-disabled.value}' }, + border: { value: '{dark-color-scheme.second.palette.value.560.value}' }, + background: { value: '{dark-color-scheme.second.palette.value.560.value}' }, color: { value: '{dark-color-scheme.error.palette.value.400.value}' }, icon: { value: '{dark-color-scheme.error.palette.value.400.value}' }, states: { active: { - border: { value: 'darken({dark-color-scheme.foreground.border.value}, 5)' }, - background: { value: 'darken({dark-color-scheme.background.background-disabled.value}, 5)' } + border: { value: '{dark-color-scheme.second.palette.value.700.value}' }, + background: { value: '{dark-color-scheme.second.palette.value.700.value}' } } } } @@ -140,4 +140,4 @@ 'icon-horizontal-padding': { value: '16px' } } } -} +} \ No newline at end of file diff --git a/packages/mosaic/design-tokens/legacy-2017/tokens/components/card.json5 b/packages/mosaic/design-tokens/legacy-2017/tokens/components/card.json5 index 7ba199599..c2957751e 100644 --- a/packages/mosaic/design-tokens/legacy-2017/tokens/components/card.json5 +++ b/packages/mosaic/design-tokens/legacy-2017/tokens/components/card.json5 @@ -2,46 +2,46 @@ card: { 'light-color-scheme': { error: { - 'vertical-line': { value: '{light-color-scheme.error.default.value}' }, - background: { value: '{light-color-scheme.error.palette.value.60.value}' }, - shadow: { value: '{light-color-scheme.second.palette.value.100.value}' } + 'vertical-line': { value: '{light-color-scheme.error.palette.value.100.value}' }, + background: { value: '{light-color-scheme.error.palette.value.40.value}' }, + shadow: { value: '{light-color-scheme.error.palette.value.100.value}' } }, warning: { - 'vertical-line': { value: '{light-color-scheme.warning.default.value}' }, - background: { value: '{light-color-scheme.warning.palette.value.60.value}' }, - shadow: { value: '{light-color-scheme.second.palette.value.100.value}' } + 'vertical-line': { value: '{light-color-scheme.warning.palette.value.100.value}' }, + background: { value: '{light-color-scheme.warning.palette.value.40.value}' }, + shadow: { value: '{light-color-scheme.warning.palette.value.100.value}' } }, success: { - 'vertical-line': { value: '{light-color-scheme.success.default.value}' }, - background: { value: '{light-color-scheme.success.palette.value.60.value}' }, - shadow: { value: '{light-color-scheme.second.palette.value.100.value}' } + 'vertical-line': { value: '{light-color-scheme.success.palette.value.100.value}' }, + background: { value: '{light-color-scheme.success.palette.value.40.value}' }, + shadow: { value: '{light-color-scheme.success.palette.value.100.value}' } }, info: { - 'vertical-line': { value: '{light-color-scheme.info.default.value}' }, - background: { value: '{light-color-scheme.info.palette.value.60.value}' }, - shadow: { value: '{light-color-scheme.second.palette.value.100.value}' } + 'vertical-line': { value: '{light-color-scheme.info.palette.value.100.value}' }, + background: { value: '{light-color-scheme.info.palette.value.40.value}' }, + shadow: { value: '{light-color-scheme.info.palette.value.100.value}' } } }, 'dark-color-scheme': { error: { - 'vertical-line': { value: '{dark-color-scheme.error.default.value}' }, - background: { value: '{dark-color-scheme.error.palette.value.700.value}' }, - shadow: { value: '{dark-color-scheme.second.palette.value.700.value}' } + 'vertical-line': { value: '{dark-color-scheme.error.palette.value.700.value}' }, + background: { value: '{dark-color-scheme.error.palette.value.900.value}' }, + shadow: { value: '{dark-color-scheme.error.palette.value.700.value}' } }, warning: { - 'vertical-line': { value: '{dark-color-scheme.warning.default.value}' }, - background: { value: '{dark-color-scheme.warning.palette.value.700.value}' }, - shadow: { value: '{dark-color-scheme.second.palette.value.700.value}' } + 'vertical-line': { value: '{dark-color-scheme.warning.palette.value.700.value}' }, + background: { value: '{dark-color-scheme.warning.palette.value.800.value}' }, + shadow: { value: '{dark-color-scheme.warning.palette.value.700.value}' } }, success: { - 'vertical-line': { value: '{dark-color-scheme.success.default.value}' }, - background: { value: '{dark-color-scheme.success.palette.value.700.value}' }, - shadow: { value: '{dark-color-scheme.second.palette.value.700.value}' } + 'vertical-line': { value: '{dark-color-scheme.success.palette.value.700.value}' }, + background: { value: '{dark-color-scheme.success.palette.value.800.value}' }, + shadow: { value: '{dark-color-scheme.success.palette.value.700.value}' } }, info: { - 'vertical-line': { value: '{dark-color-scheme.info.default.value}' }, - background: { value: '{dark-color-scheme.info.palette.value.700.value}' }, - shadow: { value: '{dark-color-scheme.second.palette.value.700.value}' } + 'vertical-line': { value: '{dark-color-scheme.info.palette.value.700.value}' }, + background: { value: '{dark-color-scheme.info.palette.value.800.value}' }, + shadow: { value: '{dark-color-scheme.info.palette.value.700.value}' } } }, size: { diff --git a/packages/mosaic/design-tokens/legacy-2017/tokens/components/datepicker.json5 b/packages/mosaic/design-tokens/legacy-2017/tokens/components/datepicker.json5 index 4d2b89dff..0c35d00e1 100644 --- a/packages/mosaic/design-tokens/legacy-2017/tokens/components/datepicker.json5 +++ b/packages/mosaic/design-tokens/legacy-2017/tokens/components/datepicker.json5 @@ -9,16 +9,16 @@ 'light-color-scheme': { states: { selected: { - color: { value: '{light-color-scheme.primary.default.value}' }, - background: { value: '{light-color-scheme.primary.palette.value.100.value}' } + color: { value: '{light-color-scheme.primary.palette.value.500.value}' }, + background: { value: '{light-color-scheme.states.selected-color.value}' } } } }, 'dark-color-scheme': { states: { selected: { - color: { value: '{dark-color-scheme.primary.palette.value.500.value}' }, - background: { value: '{dark-color-scheme.primary.palette.value.700.value}' } + color: { value: '{dark-color-scheme.primary.palette.value.400.value}' }, + background: { value: '{dark-color-scheme.states.selected-color.value}' } } } }, diff --git a/packages/mosaic/design-tokens/legacy-2017/tokens/components/form-field.json5 b/packages/mosaic/design-tokens/legacy-2017/tokens/components/form-field.json5 index 66294e008..a338b38ce 100644 --- a/packages/mosaic/design-tokens/legacy-2017/tokens/components/form-field.json5 +++ b/packages/mosaic/design-tokens/legacy-2017/tokens/components/form-field.json5 @@ -1,29 +1,29 @@ { 'form-field': { 'light-color-scheme': { - border: { value: '{light-color-scheme.second.default.value}' }, + border: { value: '{light-color-scheme.foreground.border.value}' }, background: { value: '{light-color-scheme.background.background.value}' }, states: { hover: { - border: { value: '{light-color-scheme.second.palette.value.400.value}' } + border: { value: '{light-color-scheme.second.palette.value.200.value}' } }, invalid: { - border: { value: '{light-color-scheme.error.default.value}' }, + border: { value: '{light-color-scheme.states.focused-color-error.value}' }, background: { value: 'transparent' } } } }, 'dark-color-scheme': { - border: { value: '{dark-color-scheme.second.default.value}' }, + border: { value: '{dark-color-scheme.foreground.border.value}' }, background: { value: '{dark-color-scheme.background.background.value}' }, states: { hover: { - border: { value: '{dark-color-scheme.second.palette.value.200.value}' } + border: { value: '{dark-color-scheme.second.palette.value.560.value}' } }, invalid: { - border: { value: '{dark-color-scheme.error.default.value}' }, + border: { value: '{dark-color-scheme.states.focused-color-error.value}' }, background: { value: 'transparent' } } } @@ -49,4 +49,4 @@ default: { value: 'caption' } } } -} +} \ No newline at end of file diff --git a/packages/mosaic/design-tokens/legacy-2017/tokens/components/link.json5 b/packages/mosaic/design-tokens/legacy-2017/tokens/components/link.json5 index a4fc7c357..443ca7c85 100644 --- a/packages/mosaic/design-tokens/legacy-2017/tokens/components/link.json5 +++ b/packages/mosaic/design-tokens/legacy-2017/tokens/components/link.json5 @@ -1,37 +1,37 @@ { link: { 'light-color-scheme': { - text: { value: '{light-color-scheme.primary.default.value}' }, - 'border-bottom': { value: 'rgba({light-color-scheme.primary.default.value}, 0.32)' }, + text: { value: '{light-color-scheme.primary.palette.value.500.value}' }, + 'border-bottom': { value: 'rgba({link.light-color-scheme.text.value}, 0.32)' }, 'state-visited': { - 'text': { value: '#6A2795' }, - 'border-bottom': { value: 'rgba(106, 39, 149, 0.32)' } + 'text': { value: '{palette.purple.560.value}' }, + 'border-bottom': { value: 'rgba({link.light-color-scheme.state-visited.text.value}, 0.32)' } }, 'state-hover': { - 'text': { value: '{light-color-scheme.primary.palette.value.600.value}' }, - 'border-bottom': { value: 'rgba({light-color-scheme.primary.palette.value.600.value}, 0.32)' } + 'text': { value: '{light-color-scheme.primary.palette.value.560.value}' }, + 'border-bottom': { value: 'rgba({link.light-color-scheme.state-hover.text.value}, 0.32)' } }, - 'state-active': { value: '{light-color-scheme.primary.palette.value.700.value}' }, + 'state-active': { value: '{light-color-scheme.primary.palette.value.600.value}' }, 'state-focused': { outline: { value: '{light-color-scheme.states.focused-color.value}' } } }, 'dark-color-scheme': { - text: { value: '{dark-color-scheme.primary.default.value}' }, - 'border-bottom': { value: 'rgba({dark-color-scheme.primary.default.value}, 0.32)' }, + text: { value: '{dark-color-scheme.primary.palette.value.400.value}' }, + 'border-bottom': { value: 'rgba({link.dark-color-scheme.text.value}, 0.32)' }, 'state-visited': { - 'text': { value: '#a23ee2' }, - 'border-bottom': { value: 'rgba(162, 62, 226, 0.32)' } + 'text': { value: '{palette.purple.400.value}' }, + 'border-bottom': { value: 'rgba({link.dark-color-scheme.state-visited.text.value}, 0.32)' } }, 'state-hover': { - 'text': { value: '{dark-color-scheme.primary.palette.value.300.value}' }, - 'border-bottom': { value: 'rgba({dark-color-scheme.primary.palette.value.300.value}, 0.32)' } + 'text': { value: '{dark-color-scheme.primary.palette.value.500.value}' }, + 'border-bottom': { value: 'rgba({link.dark-color-scheme.state-hover.text.value}, 0.32)' } }, - 'state-active': { value: '{dark-color-scheme.primary.palette.value.300.value}' }, + 'state-active': { value: '{dark-color-scheme.primary.palette.value.560.value}' }, 'state-focused': { outline: { value: '{dark-color-scheme.states.focused-color.value}' } } diff --git a/packages/mosaic/design-tokens/legacy-2017/tokens/components/navbar.json5 b/packages/mosaic/design-tokens/legacy-2017/tokens/components/navbar.json5 index bf3ce96b0..ec4eaffa5 100644 --- a/packages/mosaic/design-tokens/legacy-2017/tokens/components/navbar.json5 +++ b/packages/mosaic/design-tokens/legacy-2017/tokens/components/navbar.json5 @@ -1,69 +1,69 @@ -{ - navbar: { - 'light-color-scheme': { - background: { value: '{light-color-scheme.primary.palette.value.700.value}' }, - - 'divider-background': { value: 'rgba(255, 255, 255, 0.3)' } - }, - 'dark-color-scheme': { - background: { value: '{dark-color-scheme.primary.palette.value.700.value}' }, - - 'divider-background': { value: 'rgba(255, 255, 255, 0.3)' } - }, - size: { - 'icon-margin': { value: '6px' } - }, - font: { - title: { value: 'body' } - } - }, - 'vertical-navbar': { - size: { - states: { - 'expanded-width': { value: '240px' }, - 'collapsed-width': { value: '56px' } - }, - 'icon-margin': { value: '16px' } - } - }, - 'navbar-item': { - 'light-color-scheme': { - text: { value: '{light-color-scheme.primary.palette.value.100.value}' }, - icon: { value: '{light-color-scheme.primary.palette.value.100.value}' }, - - states: { - active: { value: 'rgba(0, 0, 0, 0.1)' }, - selected: { value: '{light-color-scheme.second.palette.value.700.value}' }, - hover: { value: 'rgba(255, 255, 255, 0.1)' }, - progress: { value: '{light-color-scheme.primary.palette.value.800.value}' }, - 'disabled-opacity': { value: 0.3 } - } - }, - 'dark-color-scheme': { - text: { value: '{dark-color-scheme.primary.palette.value.100.value}' }, - icon: { value: '{dark-color-scheme.primary.palette.value.100.value}' }, - - states: { - active: { value: 'rgba(0, 0, 0, 0.1)' }, - selected: { value: '{dark-color-scheme.second.palette.value.600.value}' }, - hover: { value: 'rgba(255, 255, 255, 0.1)' }, - progress: { value: '{dark-color-scheme.primary.palette.value.800.value}' }, - 'disabled-opacity': { value: 0.3 } - } - }, - size: { - padding: { value: '{padding.control-horizontal}' }, - height: { value: '48px' }, - height_vertical: { value: '56px' } - } - }, - 'navbar-brand': { - size: { - padding: { value: '12px' }, - 'margin-right': { value: '24px' } - }, - font: { - title: { value: 'title' } - } - } -} +{ + navbar: { + 'light-color-scheme': { + background: { value: '{light-color-scheme.primary.palette.value.700.value}' }, + + 'divider-background': { value: 'rgba(255, 255, 255, 0.3)' } + }, + 'dark-color-scheme': { + background: { value: '{dark-color-scheme.primary.palette.value.700.value}' }, + + 'divider-background': { value: 'rgba(255, 255, 255, 0.3)' } + }, + size: { + 'icon-margin': { value: '6px' } + }, + font: { + title: { value: 'body' } + } + }, + 'vertical-navbar': { + size: { + states: { + 'expanded-width': { value: '240px' }, + 'collapsed-width': { value: '56px' } + }, + 'icon-margin': { value: '16px' } + } + }, + 'navbar-item': { + 'light-color-scheme': { + text: { value: '{light-color-scheme.primary.palette.value.100.value}' }, + icon: { value: '{light-color-scheme.primary.palette.value.100.value}' }, + + states: { + active: { value: 'rgba(0, 0, 0, 0.1)' }, + selected: { value: '{light-color-scheme.second.palette.value.700.value}' }, + hover: { value: 'rgba(255, 255, 255, 0.1)' }, + progress: { value: '{light-color-scheme.primary.palette.value.800.value}' }, + 'disabled-opacity': { value: 0.3 } + } + }, + 'dark-color-scheme': { + text: { value: '{dark-color-scheme.primary.palette.value.100.value}' }, + icon: { value: '{dark-color-scheme.primary.palette.value.100.value}' }, + + states: { + active: { value: 'rgba(0, 0, 0, 0.1)' }, + selected: { value: '{dark-color-scheme.second.palette.value.600.value}' }, + hover: { value: 'rgba(255, 255, 255, 0.1)' }, + progress: { value: '{dark-color-scheme.primary.palette.value.800.value}' }, + 'disabled-opacity': { value: 0.3 } + } + }, + size: { + padding: { value: '{padding.control-horizontal}' }, + height: { value: '48px' }, + height_vertical: { value: '56px' } + } + }, + 'navbar-brand': { + size: { + padding: { value: '12px' }, + 'margin-right': { value: '24px' } + }, + font: { + title: { value: 'title' } + } + } +} diff --git a/packages/mosaic/design-tokens/legacy-2017/tokens/components/popover.json5 b/packages/mosaic/design-tokens/legacy-2017/tokens/components/popover.json5 index 5ed2313f8..4914830cd 100644 --- a/packages/mosaic/design-tokens/legacy-2017/tokens/components/popover.json5 +++ b/packages/mosaic/design-tokens/legacy-2017/tokens/components/popover.json5 @@ -1,7 +1,7 @@ { popover: { 'light-color-scheme': { - background: { value: 'white' }, + background: { value: '{light-color-scheme.background.background.value}' }, text: { value: '{light-color-scheme.foreground.text.value}' }, shadow: { value: '{popup.light-color-scheme.shadow.value}' }, border: { value: '{light-color-scheme.foreground.border.value}' } @@ -32,10 +32,10 @@ 'light-color-scheme': { border: { value: '{light-color-scheme.second.palette.value.100.value}' }, text: { value: '{light-color-scheme.foreground.text.value}' }, - background: { value: 'white' } + background: { value: '{light-color-scheme.background.background.value}' } }, 'dark-color-scheme': { - border: { value: '{popup.dark-color-scheme.footer-background.value}' }, + border: { value: '{popup.dark-color-scheme.border.value}' }, text: { value: '{dark-color-scheme.foreground.text.value}' }, background: { value: '{dark-color-scheme.second.palette.value.700.value}' } }, @@ -53,8 +53,8 @@ background: { value: '{popup.light-color-scheme.footer-background.value}' } }, 'dark-color-scheme': { - border: { value: '{popup.dark-color-scheme.footer-background.value}' }, - background: { value: '{popup.dark-color-scheme.footer-background.value}' } + border: { value: '{popup.dark-color-scheme.border.value}' }, + background: { value: '{dark-color-scheme.second.palette.value.700.value}' } }, size: { 'margin-top': { value: '8px' }, diff --git a/packages/mosaic/design-tokens/legacy-2017/tokens/components/popup.json5 b/packages/mosaic/design-tokens/legacy-2017/tokens/components/popup.json5 index 458b45647..cf115a3e4 100644 --- a/packages/mosaic/design-tokens/legacy-2017/tokens/components/popup.json5 +++ b/packages/mosaic/design-tokens/legacy-2017/tokens/components/popup.json5 @@ -1,18 +1,18 @@ { popup: { 'light-color-scheme': { - shadow: { value: '0 3px 3px 0 {light-color-scheme.second.palette.value.A200.value}' }, - border: { value: '{light-color-scheme.second.palette.value.300.value}' }, - divider: { value: '{light-color-scheme.second.palette.value.200.value}' }, - background: { value: 'white' }, - 'footer-background': { value: '{light-color-scheme.second.palette.value.60.value}' } + shadow: { value: '0 3px 3px 0 {light-color-scheme.second.palette.value.500.value}' }, + border: { value: '{light-color-scheme.foreground.border.value}' }, + divider: { value: '{light-color-scheme.foreground.divider.value}' }, + background: { value: '{light-color-scheme.background.background.value}' }, + 'footer-background': { value: '{light-color-scheme.second.palette.value.40.value}' } }, 'dark-color-scheme': { - shadow: { value: '0 3px 3px 0 {dark-color-scheme.second.palette.value.A200.value}' }, - border: { value: '{dark-color-scheme.second.palette.value.400.value}' }, + shadow: { value: '0 3px 3px 0 {dark-color-scheme.second.palette.value.500.value}' }, + border: { value: '{dark-color-scheme.second.palette.value.560.value}' }, divider: { value: '{dark-color-scheme.foreground.divider.value}' }, - background: { value: '{dark-color-scheme.second.palette.value.700.value}' }, + background: { value: '{dark-color-scheme.second.palette.value.600.value}' }, 'footer-background': { value: 'transparent' } } } -} +} \ No newline at end of file diff --git a/packages/mosaic/design-tokens/legacy-2017/tokens/components/tabs.json5 b/packages/mosaic/design-tokens/legacy-2017/tokens/components/tabs.json5 index 42416d7e3..5045c2c95 100644 --- a/packages/mosaic/design-tokens/legacy-2017/tokens/components/tabs.json5 +++ b/packages/mosaic/design-tokens/legacy-2017/tokens/components/tabs.json5 @@ -1,14 +1,14 @@ { tabs: { 'light-color-scheme': { - border: { value: '{light-color-scheme.second.palette.value.300.value}' }, - 'state-active': { value: '{light-color-scheme.primary.palette.value.500.value}' }, - 'state-disabled-overlay': { value: 'rgba(white, 0.5)' } + border: { value: '{light-color-scheme.foreground.divider.value}' }, + 'state-active': { value: '{light-color-scheme.primary.default.value}' }, + 'state-disabled-overlay': { value: '{light-color-scheme.background.overlay-disabled.value}' } }, 'dark-color-scheme': { - border: { value: '{dark-color-scheme.second.palette.value.300.value}' }, - 'state-active': { value: '{dark-color-scheme.primary.palette.value.400.value}' }, - 'state-disabled-overlay': { value: 'rgba(white, 0.5)' } + border: { value: '{dark-color-scheme.foreground.divider.value}' }, + 'state-active': { value: '{dark-color-scheme.primary.default.value}' }, + 'state-disabled-overlay': { value: '{dark-color-scheme.background.overlay-disabled.value}' } }, size: { height: { value: '40px' }, diff --git a/packages/mosaic/design-tokens/legacy-2017/tokens/components/toggle.json5 b/packages/mosaic/design-tokens/legacy-2017/tokens/components/toggle.json5 index 4c3f1d81a..581f3c2aa 100644 --- a/packages/mosaic/design-tokens/legacy-2017/tokens/components/toggle.json5 +++ b/packages/mosaic/design-tokens/legacy-2017/tokens/components/toggle.json5 @@ -3,11 +3,11 @@ 'light-color-scheme': { border: { value: '{light-color-scheme.foreground.border.value}' }, background: { - value: 'linear-gradient(to bottom, {light-color-scheme.second.palette.value.100.value}, {light-color-scheme.background.background-disabled.value})' + value: '{light-color-scheme.background.background.value}' }, 'circle-border': { value: '{light-color-scheme.foreground.border.value}' }, - 'circle-background': { value: 'linear-gradient(to bottom, white, {light-color-scheme.second.palette.value.100.value})' }, - + 'circle-background': { value: '{light-color-scheme.second.palette.value.100.value}' + }, states: { focused: { shadow: { @@ -34,7 +34,7 @@ value: '{dark-color-scheme.background.background.value}' }, 'circle-border': { value: '{dark-color-scheme.foreground.border.value}' }, - 'circle-background': { value: 'white' }, + 'circle-background': { value: '{light-color-scheme.second.palette.value.500.value}' }, states: { focused: { diff --git a/packages/mosaic/design-tokens/legacy-2017/tokens/components/tooltip.json5 b/packages/mosaic/design-tokens/legacy-2017/tokens/components/tooltip.json5 index 692fa5aa4..816e4dc62 100644 --- a/packages/mosaic/design-tokens/legacy-2017/tokens/components/tooltip.json5 +++ b/packages/mosaic/design-tokens/legacy-2017/tokens/components/tooltip.json5 @@ -1,27 +1,27 @@ { tooltip: { 'light-color-scheme': { - background: { value: '{light-color-scheme.second.palette.value.700.value}' }, + background: { value: '{light-color-scheme.second.palette.value.600.value}' }, text: { value: '{light-color-scheme.second.palette.value.contrast.700.value}' }, border: { value: 'transparent' }, shadow: { value: '0 2px 4px 0 rgba(0, 0, 0, 0.2)' }, 'warning': { - background: { value: '{light-color-scheme.warning.palette.value.60.value}' }, - text: { value: '{light-color-scheme.second.palette.value.700.value}' }, - border: { value: '{light-color-scheme.warning.palette.value.200.value}' } + background: { value: '{light-color-scheme.warning.palette.value.40.value}' }, + text: { value: '{light-color-scheme.foreground.text.value}' }, + border: { value: '{light-color-scheme.warning.palette.value.100.value}' } } }, 'dark-color-scheme': { - background: { value: '{dark-color-scheme.second.palette.value.40.value}' }, - text: { value: '{dark-color-scheme.second.palette.value.contrast.40.value}' }, + background: { value: '{popup.light-color-scheme.background.value}' }, + text: { value: '{dark-color-scheme.second.palette.value.900.value}' }, border: { value: 'transparent' }, shadow: { value: '0 2px 4px 0 rgba(0, 0, 0, 0.2)' }, 'warning': { - background: { value: '{dark-color-scheme.warning.palette.value.60.value}' }, - text: { value: '{dark-color-scheme.second.palette.value.700.value}' }, - border: { value: '{dark-color-scheme.warning.palette.value.200.value}' } + background: { value: '{dark-color-scheme.warning.palette.value.560.value}' }, + text: { value: '{dark-color-scheme.foreground.text.value}' }, + border: { value: '{dark-color-scheme.warning.palette.value.560.value}' } } }, size: { @@ -62,14 +62,14 @@ }, 'extended-tooltip-header': { 'light-color-scheme': { - border: { value: '{light-color-scheme.second.palette.value.100.value}' }, + border: { value: '{popup.light-color-scheme.border.value}' }, text: { value: '{light-color-scheme.foreground.text.value}' }, - background: { value: 'white' } + background: { value: '{popup.light-color-scheme.background.value}' } }, 'dark-color-scheme': { - border: { value: '{light-color-scheme.second.palette.value.60.value}' }, + border: { value: '{popup.dark-color-scheme.border.value}' }, text: { value: '{dark-color-scheme.foreground.text.value}' }, - background: { value: '{light-color-scheme.second.palette.value.700.value}' } + background: { value: '{popup.dark-color-scheme.background.value}' } }, size: { height: { value: '40px' }, @@ -80,4 +80,4 @@ } } -} +} \ No newline at end of file diff --git a/packages/mosaic/design-tokens/legacy-2017/tokens/properties/colors.json5 b/packages/mosaic/design-tokens/legacy-2017/tokens/properties/colors.json5 index a0c8597c9..03c5bd0ae 100644 --- a/packages/mosaic/design-tokens/legacy-2017/tokens/properties/colors.json5 +++ b/packages/mosaic/design-tokens/legacy-2017/tokens/properties/colors.json5 @@ -18,7 +18,7 @@ info: { default: { value: '{palette.blue.200.value}' }, - palette: { value: '{palette.blue}' } + palette: { value: '{palette.teal}' } }, success: { default: { value: '{palette.green.200.value}' }, @@ -31,16 +31,16 @@ palette: { value: '{palette.yellow}' } }, foreground: { - text: { value: '{palette.grey.700.value}' }, - 'text-less-contrast': { value: '{palette.grey.400.value}'}, + text: { value: '{palette.grey.900.value}' }, + 'text-less-contrast': { value: '{palette.grey.500.value}'}, 'text-disabled': { value: '{palette.grey.300.value}' }, divider: { value: '{palette.grey.100.value}' }, - border: { value: '{palette.grey.300.value}' }, - icon: { value: '{palette.grey.400.value}' } + border: { value: '{palette.grey.200.value}' }, + icon: { value: '{palette.grey.300.value}' } }, background: { background: { value: 'white' }, - 'background-disabled': { value: '{palette.grey.60.value}' }, + 'background-disabled': { value: '{palette.grey.40.value}' }, 'overlay-hover': { value: 'rgba(black, 0.05)' }, 'overlay-active': { value: 'rgba(black, 0.1)' }, @@ -48,14 +48,15 @@ }, states: { 'focused-color': { value: '{light-color-scheme.primary.palette.value.500.value}' }, - 'selected-color': { value: '{light-color-scheme.primary.palette.value.100.value}' }, + 'focused-color-error': { value: '{light-color-scheme.error.palette.value.500.value}' }, + 'selected-color': { value: '{light-color-scheme.primary.palette.value.60.value}' }, 'pressed-shadow': { value: 'inset 0 1px 2px 0 rgba(black, 0.2)' }, 'disabled-opacity': { value: 0.3 } } }, 'dark-color-scheme': { primary: { - default: { value: '{palette.blue.400.value}' }, + default: { value: '{palette.blue.560.value}' }, palette: { value: '{palette.blue}' } }, @@ -70,9 +71,9 @@ palette: { value: '{palette.red}' } }, info: { - default: { value: '{palette.blue.400.value}' }, + default: { value: '{palette.teal.400.value}' }, - palette: { value: '{palette.blue}' } + palette: { value: '{palette.teal}' } }, success: { default: { value: '{palette.green.400.value}' }, @@ -85,26 +86,27 @@ palette: { value: '{palette.yellow}' } }, foreground: { - text: { value: '{palette.grey.60.value}' }, - 'text-less-contrast': { value: '{palette.grey.400.value}'}, - 'text-disabled': { value: '{palette.grey.400.value}' }, - divider: { value: '{palette.grey.600.value}' }, - border: { value: '{palette.grey.500.value}' }, - icon: { value: '{palette.grey.400.value}' } + text: { value: '{palette.grey.40.value}' }, + 'text-less-contrast': { value: '{palette.grey.300.value}'}, + 'text-disabled': { value: '{palette.grey.500.value}' }, + divider: { value: '{palette.grey.700.value}' }, + border: { value: '{palette.grey.560.value}' }, + icon: { value: '{palette.grey.300.value}' } }, background: { - background: { value: '{palette.grey.800.value}' }, - 'background-disabled': { value: '{palette.grey.600.value}' }, + background: { value: '{palette.grey.900.value}' }, + 'background-disabled': { value: '{palette.grey.700.value}' }, 'overlay-hover': { value: 'rgba(black, 0.05)' }, 'overlay-active': { value: 'rgba(black, 0.1)' }, - 'overlay-disabled': { value: 'rgba(white, 0.2)' } + 'overlay-disabled': { value: 'rgba(black, 0.2)' } }, states: { 'focused-color': { value: '{dark-color-scheme.primary.palette.value.400.value}' }, - 'selected-color': { value: '{dark-color-scheme.primary.palette.value.700.value}' }, + 'focused-color-error': { value: '{light-color-scheme.error.palette.value.560.value}' }, + 'selected-color': { value: '{dark-color-scheme.primary.palette.value.600.value}' }, 'pressed-shadow': { value: 'inset 1px 2px 2px 0 rgba(black, 0.2)' }, 'disabled-opacity': { value: 0.3 } } } -} +} \ No newline at end of file diff --git a/packages/mosaic/design-tokens/legacy-2017/tokens/properties/palette.json5 b/packages/mosaic/design-tokens/legacy-2017/tokens/properties/palette.json5 index aba1292f4..7d95dd81f 100644 --- a/packages/mosaic/design-tokens/legacy-2017/tokens/properties/palette.json5 +++ b/packages/mosaic/design-tokens/legacy-2017/tokens/properties/palette.json5 @@ -1,20 +1,20 @@ { "palette": { "blue": { - "40": { value: '#F5FAFD' }, - "60": { value: '#EBF4FB' }, - "100": { value: '#D8EAF7' }, - "200": { value: '#AAD1EC' }, - "300": { value: '#7FBAE1' }, - "400": { value: '#57A4D7' }, - "500": { value: '#338FCC' }, - "560": { value: '#277BB3' }, - "600": { value: '#206EA2' }, - "700": { value: '#114E77' }, - "800": { value: '#07314D' }, - "A100": { value: 'rgba(0, 153, 255, 0.15)' }, - "A200": { value: 'rgba(0, 153, 255, 0.3)' }, - + "40": { value: '#eff6ff' }, + "60": { value: '#e7f1ff' }, + "100": { value: '#c8dfff' }, + "200": { value: '#a2c7fe' }, + "300": { value: '#5697ff' }, + "400": { value: '#4187ff' }, + "500": { value: '#0374eb' }, + "560": { value: '#0059b8' }, + "600": { value: '#014b9d' }, + "700": { value: '#023c7f' }, + "800": { value: '#193060' }, + "900": { value: '#00224f' }, + "A100": { value: 'rgba(3, 116, 235, 0.15)' }, + "A200": { value: 'rgba(3, 116, 235, 0.3)' }, "contrast": { "40": { value: '#4D4D4D' }, "60": { value: '#4D4D4D' }, @@ -32,19 +32,19 @@ } }, "green": { - "40": { value: '#F6FBF4' }, - "60": { value: '#EDF8E9' }, - "100": { value: '#DCF1D4' }, - "200": { value: '#B4DEA4' }, - "300": { value: '#8FCC79' }, - "400": { value: '#6FBA53' }, - "500": { value: '#52A832' }, - "560": { value: '#449327' }, - "600": { value: '#3B8520' }, - "700": { value: '#276211' }, - "800": { value: '#163F07' }, - "A100": { value: 'rgba(68, 255, 0, 0.15)' }, - + "40": { value: '#ecf9ef' }, + "60": { value: '#d2f7db' }, + "100": { value: '#b6ebc3' }, + "200": { value: '#8ed5a1' }, + "300": { value: '#4ba96c' }, + "400": { value: '#319d5c' }, + "500": { value: '#028b49' }, + "560": { value: '#016b37' }, + "600": { value: '#015a2d' }, + "700": { value: '#004823' }, + "800": { value: '#103920' }, + "900": { value: '#002a12' }, + "A100": { value: 'rgba(2, 139, 73, 0.15)' }, "contrast": { "40": { value: '#4D4D4D' }, "60": { value: '#4D4D4D' }, @@ -61,18 +61,19 @@ } }, "red": { - "40": { value: '#FEF7F6' }, - "60": { value: '#FCEFEC' }, - "100": { value: '#FADEDA' }, - "200": { value: '#F4B7AE' }, - "300": { value: '#ED9284' }, - "400": { value: '#E76E5C' }, - "500": { value: '#E04D36' }, - "560": { value: '#C43E29' }, - "600": { value: '#B23522' }, - "700": { value: '#832112' }, - "800": { value: '#541208' }, - "A100": { value: 'rgba(224, 79, 56, 0.15)' }, + "40": { value: '#fff3f3' }, + "60": { value: '#ffeaea' }, + "100": { value: '#fbd6d6' }, + "200": { value: '#fcb2b4' }, + "300": { value: '#ee6f79' }, + "400": { value: '#ea5868' }, + "500": { value: '#db3c55' }, + "560": { value: '#b9023a' }, + "600": { value: '#9e0130' }, + "700": { value: '#800025' }, + "800": { value: '#621420' }, + "900": { value: '#500013' }, + "A100": { value: 'rgba(219, 60, 85, 0.15)' }, "contrast": { "40": { value: '#4D4D4D' }, @@ -90,23 +91,24 @@ } }, "grey": { - "40": { value: '#F5F5F5' }, - "60": { value: '#F0F0F0' }, - "100": { value: '#E6E6E6' }, - "200": { value: '#CCCCCC' }, - "300": { value: '#B3B3B3' }, - "400": { value: '#999999' }, - "500": { value: '#808080' }, - "560": { value: '#707070' }, - "600": { value: '#666666' }, - "700": { value: '#4D4D4D' }, - "800": { value: '#333333' }, - "A40": { value: 'rgba(0, 0, 0, 0.04)' }, - "A60": { value: 'rgba(0, 0, 0, 0.06)' }, - "A100": { value: 'rgba(0, 0, 0, 0.1)' }, - "A200": { value: 'rgba(0, 0, 0, 0.2)' }, - "A300": { value: 'rgba(0, 0, 0, 0.3)' }, - "A500": { value: 'rgba(0, 0, 0, 0.5)' }, + "40": { value: '#f2f5f9' }, + "60": { value: '#ebeef2' }, + "100": { value: '#d7dee4' }, + "200": { value: '#bdc7d1' }, + "300": { value: '#8c99a5' }, + "400": { value: '#7f8c98' }, + "500": { value: '#6d7a86' }, + "560": { value: '#515e69' }, + "600": { value: '#434f5a' }, + "700": { value: '#333f4a' }, + "800": { value: '#27333e' }, + "900": { value: '#19252f' }, + "A40": { value: 'rgba(25, 37, 47, 0.04)' }, + "A60": { value: 'rgba(25, 37, 47, 0.06)' }, + "A100": { value: 'rgba(25, 37, 47, 0.1)' }, + "A200": { value: 'rgba(25, 37, 47, 0.2)' }, + "A300": { value: 'rgba(25, 37, 47, 0.3)' }, + "A500": { value: 'rgba(25, 37, 47, 0.5)' }, "contrast": { "40": { value: '#4D4D4D' }, @@ -123,18 +125,19 @@ } }, "yellow": { - "40": { value: '#FDFAF3' }, - "60": { value: '#FCF5E8' }, - "100": { value: '#F8EBD1' }, - "200": { value: '#F0D49B' }, - "300": { value: '#E7BD68' }, - "400": { value: '#DFA739' }, - "500": { value: '#D6930D' }, - "560": { value: '#BB800A' }, - "600": { value: '#AA7408' }, - "700": { value: '#7D5504' }, - "800": { value: '#503602' }, - "A100": { value: 'rgba(255, 170, 0, 0.15)' }, + "40": { value: '#fff4dd' }, + "60": { value: '#ffecce' }, + "100": { value: '#fcdda6' }, + "200": { value: '#f5c23c' }, + "300": { value: '#e19f12' }, + "400": { value: '#c78816' }, + "500": { value: '#a26e0c' }, + "560": { value: '#7e5406' }, + "600": { value: '#6b4804' }, + "700": { value: '#543803' }, + "800": { value: '#3e3015' }, + "900": { value: '#312001' }, + "A100": { value: 'rgba(255, 159, 18, 0.15)' }, "contrast": { "40": { value: '#4D4D4D' }, @@ -150,6 +153,64 @@ "800": { value: 'white' }, "A100": { value: '#4D4D4D' } } + }, + "teal": { + "40": { value: '#ebf8fd' }, + "60": { value: '#d9f3fd' }, + "100": { value: '#afe6f9' }, + "200": { value: '#6ed3f2' }, + "300": { value: '#18a5c5' }, + "400": { value: '#2099b7' }, + "500": { value: '#218ca8' }, + "560": { value: '#0c6579' }, + "600": { value: '#0c5567' }, + "700": { value: '#084453' }, + "800": { value: '#143641' }, + "900": { value: '#022731' }, + "contrast": { + "40": { value: '#4D4D4D' }, + "60": { value: '#4D4D4D' }, + "100": { value: '#4D4D4D' }, + "200": { value: '#4D4D4D' }, + "300": { value: '#4D4D4D' }, + "400": { value: 'white' }, + "500": { value: 'white' }, + "560": { value: 'white' }, + "600": { value: 'white' }, + "700": { value: 'white' }, + "800": { value: 'white' }, + "A100": { value: '#4D4D4D' }, + "A200": { value: 'white' } + } + }, + "purple": { + "40": { value: '#fff3fb' }, + "60": { value: '#ffe9f8' }, + "100": { value: '#f2d4e8' }, + "200": { value: '#e4bbd7' }, + "300": { value: '#c692b5' }, + "400": { value: '#bb78a7' }, + "500": { value: '#a65d92' }, + "560": { value: '#864775' }, + "600": { value: '#753865' }, + "700": { value: '#612853' }, + "800": { value: '#48273f' }, + "900": { value: '#36172e' }, + "contrast": { + "40": { value: '#4D4D4D' }, + "60": { value: '#4D4D4D' }, + "100": { value: '#4D4D4D' }, + "200": { value: '#4D4D4D' }, + "300": { value: '#4D4D4D' }, + "400": { value: 'white' }, + "500": { value: 'white' }, + "560": { value: 'white' }, + "600": { value: 'white' }, + "700": { value: 'white' }, + "800": { value: 'white' }, + "A100": { value: '#4D4D4D' }, + "A200": { value: 'white' } + } } }, @@ -158,6 +219,8 @@ "green": { "palette": { value: '{palette.green}' } }, "red": { "palette": { value: '{palette.red}' } }, "grey": { "palette": { value: '{palette.grey}' } }, - "yellow": { "palette": { value: '{palette.yellow}' } } + "yellow": { "palette": { value: '{palette.yellow}' } }, + "teal": { "palette": { value: '{palette.teal}' } }, + "purple": { "palette": { value: '{palette.purple}' } } } -} +} \ No newline at end of file diff --git a/packages/mosaic/toast/index.ts b/packages/mosaic/toast/index.ts new file mode 100644 index 000000000..7e1a213e3 --- /dev/null +++ b/packages/mosaic/toast/index.ts @@ -0,0 +1 @@ +export * from './public-api'; diff --git a/packages/mosaic/toast/ng-package.json b/packages/mosaic/toast/ng-package.json new file mode 100644 index 000000000..bebf62dcb --- /dev/null +++ b/packages/mosaic/toast/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "index.ts" + } +} diff --git a/packages/mosaic/toast/public-api.ts b/packages/mosaic/toast/public-api.ts new file mode 100644 index 000000000..46d34833d --- /dev/null +++ b/packages/mosaic/toast/public-api.ts @@ -0,0 +1,5 @@ +export * from './toast.service'; +export * from './toast.module'; +export * from './toast.type'; +export * from './toast.component'; +export * from './toast-container.component'; diff --git a/packages/mosaic/toast/toast-animations.ts b/packages/mosaic/toast/toast-animations.ts new file mode 100644 index 000000000..c668bdc41 --- /dev/null +++ b/packages/mosaic/toast/toast-animations.ts @@ -0,0 +1,25 @@ +import { + animate, + style, + transition, + trigger, + state, + AnimationTriggerMetadata +} from '@angular/animations'; + + +export const mcToastAnimations: { + readonly toastState: AnimationTriggerMetadata; +} = { + toastState: trigger('state', [ + state('void, hidden', style({ transform: 'scale(0.8)', opacity: 0, height: 0 })), + state('visible', style({ transform: 'scale(1)', opacity: 1 })), + transition('* => visible', animate('150ms cubic-bezier(0, 0, 0.2, 1)')), + transition( + '* => void, * => hidden', + animate( + '100ms cubic-bezier(0.4, 0.0, 1, 1)', + style({ height: 0, transform: 'scale(0)' })) + ) + ]) +}; diff --git a/packages/mosaic/toast/toast-container.component.ts b/packages/mosaic/toast/toast-container.component.ts new file mode 100644 index 000000000..584f3dcd4 --- /dev/null +++ b/packages/mosaic/toast/toast-container.component.ts @@ -0,0 +1,64 @@ +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ComponentRef, + EmbeddedViewRef, + Injector, + TemplateRef, + ViewChild, + ViewContainerRef, + ViewEncapsulation, + ViewRef +} from '@angular/core'; + +import { McToastData } from './toast.type'; + + +@Component({ + selector: 'mc-toast-container', + template: '', + host: { + class: 'mc-toast-container' + }, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None +}) +export class McToastContainerComponent { + @ViewChild('container', { static: true, read: ViewContainerRef }) viewContainer: ViewContainerRef; + + constructor( + private injector: Injector, + private changeDetectorRef: ChangeDetectorRef + ) {} + + createToast(data: McToastData, componentType, onTop: boolean): ComponentRef { + const injector = this.getInjector(data); + const index = onTop ? 0 : undefined; + + this.changeDetectorRef.markForCheck(); + + return this.viewContainer.createComponent(componentType, { injector, index }); + } + + createTemplate(data: McToastData, template: TemplateRef, onTop: boolean): EmbeddedViewRef { + const index = onTop ? 0 : undefined; + + return this.viewContainer.createEmbeddedView(template, { $implicit: data }, index); + } + + remove(viewRef: ViewRef) { + const index = this.viewContainer.indexOf(viewRef); + + if (index < 0) { return; } + + this.viewContainer.remove(index); + } + + getInjector(data: McToastData): Injector { + return Injector.create({ + providers: [{ provide: McToastData, useValue: data }], + parent: this.injector + }); + } +} diff --git a/packages/mosaic/toast/toast.component.html b/packages/mosaic/toast/toast.component.html new file mode 100644 index 000000000..7789c5a32 --- /dev/null +++ b/packages/mosaic/toast/toast.component.html @@ -0,0 +1,26 @@ +
+ + +
+
+ + + {{ data.title }} +
+ +
+ + + {{ data.content }} +
+
+ + +
diff --git a/packages/mosaic/toast/toast.component.scss b/packages/mosaic/toast/toast.component.scss new file mode 100644 index 000000000..576b5d444 --- /dev/null +++ b/packages/mosaic/toast/toast.component.scss @@ -0,0 +1,11 @@ +.mc-toast { + display: block; + + overflow: hidden; + + margin-bottom: 10px; +} + +.mc-toast__container { + width: 300px; +} diff --git a/packages/mosaic/toast/toast.component.ts b/packages/mosaic/toast/toast.component.ts new file mode 100644 index 000000000..c4636d2ae --- /dev/null +++ b/packages/mosaic/toast/toast.component.ts @@ -0,0 +1,59 @@ +import { + ChangeDetectionStrategy, + Component, + TemplateRef, + ViewEncapsulation +} from '@angular/core'; +import { ThemePalette } from '@ptsecurity/mosaic/core'; + +import { mcToastAnimations } from './toast-animations'; +import { McToastService } from './toast.service'; +import { McToastData } from './toast.type'; + + +let id = 0; + +@Component({ + selector: 'mc-toast', + templateUrl: './toast.component.html', + styleUrls: ['./toast.component.scss'], + host: { + class: 'mc-toast', + '[@state]': 'animationState' + }, + animations: [ + mcToastAnimations.toastState + ], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None +}) +export class McToastComponent { + themePalette = ThemePalette; + + animationState = 'void'; + + id = id++; + + $implicit; + + get hasDismiss(): boolean { + return this.data.hasDismiss === undefined ? true : this.data.hasDismiss; + } + + constructor( + readonly data: McToastData, + readonly service: McToastService + ) { + this.$implicit = this; + + this.animationState = 'visible'; + } + + close(): void { + this.service.hide(this.id); + } + + isTemplateRef(value): boolean { + return value instanceof TemplateRef; + } +} diff --git a/packages/mosaic/toast/toast.md b/packages/mosaic/toast/toast.md new file mode 100644 index 000000000..f6797e0b8 --- /dev/null +++ b/packages/mosaic/toast/toast.md @@ -0,0 +1,2 @@ +### Toast + diff --git a/packages/mosaic/toast/toast.module.ts b/packages/mosaic/toast/toast.module.ts new file mode 100644 index 000000000..090576c27 --- /dev/null +++ b/packages/mosaic/toast/toast.module.ts @@ -0,0 +1,23 @@ +import { A11yModule } from '@angular/cdk/a11y'; +import { OverlayModule } from '@angular/cdk/overlay'; +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { McIconModule } from '@ptsecurity/mosaic/icon'; + +import { McToastContainerComponent } from './toast-container.component'; +import { McToastComponent } from './toast.component'; + + +@NgModule({ + declarations: [ + McToastComponent, + McToastContainerComponent + ], + imports: [ + CommonModule, + OverlayModule, + A11yModule, + McIconModule + ] +}) +export class McToastModule {} diff --git a/packages/mosaic/toast/toast.service.ts b/packages/mosaic/toast/toast.service.ts new file mode 100644 index 000000000..a8478446c --- /dev/null +++ b/packages/mosaic/toast/toast.service.ts @@ -0,0 +1,205 @@ +import { GlobalPositionStrategy, Overlay } from '@angular/cdk/overlay'; +import { OverlayRef } from '@angular/cdk/overlay/overlay-ref'; +import { ComponentPortal } from '@angular/cdk/portal'; +import { + Injectable, + Injector, + Inject, + ComponentRef, + Optional, + TemplateRef, + EmbeddedViewRef +} from '@angular/core'; + +import { McToastContainerComponent } from './toast-container.component'; +import { McToastComponent } from './toast.component'; +import { McToastData, MC_TOAST_CONFIG, McToastConfig, McToastPosition } from './toast.type'; + + +export const defaultToastConfig: McToastConfig = { + position: McToastPosition.TOP_CENTER, + duration: 3000, + onTop: true, + sticky: false +}; + + +const INDENT_SIZE = 20; + +let templateId = 0; + +@Injectable() +export class McToastService { + get toasts(): ComponentRef[] { + return Object.values(this.toastsDict) + .filter((item) => !item.hostView.destroyed); + } + + get templates(): EmbeddedViewRef[] { + return Object.values(this.templatesDict); + } + + private containerInstance: McToastContainerComponent; + private overlayRef: OverlayRef; + private portal: ComponentPortal; + + private toastsDict: { [id: number]: ComponentRef } = {}; + private templatesDict: { [id: number]: EmbeddedViewRef } = {}; + + constructor( + private overlay: Overlay, + private injector: Injector, + @Optional() @Inject(MC_TOAST_CONFIG) private toastConfig: McToastConfig, + @Optional() private toastFactory: McToastComponent + ) { + this.toastConfig = toastConfig || defaultToastConfig; + } + + show( + data: McToastData, + onTop: boolean = this.toastConfig.onTop, + duration: number = this.toastConfig.duration + ): { ref: ComponentRef; id: number} { + + this.prepareContainer(); + + const componentRef = this.containerInstance.createToast(data, this.toastFactory || McToastComponent, onTop); + + this.toastsDict[componentRef.instance.id] = componentRef; + + if (duration !== 0) { + this.addRemoveTimer(componentRef.instance.id, duration); + } + + return { ref: componentRef, id: componentRef.instance.id }; + } + + showTemplate( + data: McToastData, + template: TemplateRef, + onTop: boolean = this.toastConfig.onTop, + duration: number = this.toastConfig.duration + ): { ref: EmbeddedViewRef; id: number } { + + this.prepareContainer(); + + const viewRef = this.containerInstance.createTemplate(data, template, onTop); + + this.templatesDict[templateId] = viewRef; + + this.addRemoveTimer(templateId, duration, true); + + templateId++; + + return { ref: viewRef, id: templateId }; + } + + hide(id: number) { + const componentRef = this.toastsDict[id]; + + if (!componentRef) { return; } + + this.containerInstance.remove(componentRef.hostView); + + delete this.toastsDict[id]; + } + + hideTemplate(id: number) { + const viewRef = this.templatesDict[id]; + + if (!viewRef) { return; } + + this.containerInstance.remove(viewRef); + + delete this.templatesDict[id]; + } + + private addRemoveTimer(id: number, duration: number, template: boolean = false) { + setTimeout(() => template ? this.hideTemplate(id) : this.hide(id), duration); + } + + private prepareContainer() { + this.overlayRef = this.createOverlay(); + + this.portal = this.portal || new ComponentPortal(McToastContainerComponent, null, this.injector); + + if (!this.overlayRef.hasAttached()) { + this.containerInstance = this.overlayRef.attach(this.portal).instance; + } + } + + private createOverlay(): OverlayRef { + if (this.overlayRef) { return this.overlayRef; } + + const positionStrategy = this.getPositionStrategy(this.toastConfig.position); + + return this.overlay.create({ positionStrategy }); + } + + private getPositionStrategy(position?: McToastPosition): GlobalPositionStrategy { + switch (position) { + case McToastPosition.CENTER: + return this.getCenter(); + case McToastPosition.BOTTOM_CENTER: + return this.getBottomCenter(); + case McToastPosition.BOTTOM_LEFT: + return this.getBottomLeft(); + case McToastPosition.BOTTOM_RIGHT: + return this.getBottomRight(); + case McToastPosition.TOP_CENTER: + return this.getTopCenter(); + case McToastPosition.TOP_LEFT: + return this.getTopLeft(); + case McToastPosition.TOP_RIGHT: + return this.getTopRight(); + default: + return this.getTopCenter(); + } + } + + private getTopCenter(): GlobalPositionStrategy { + return this.getGlobalOverlayPosition() + .top(`${INDENT_SIZE}px`) + .centerHorizontally(); + } + + private getTopLeft(): GlobalPositionStrategy { + return this.getGlobalOverlayPosition() + .top(`${INDENT_SIZE}px`) + .left(`${INDENT_SIZE}px`); + } + + private getTopRight(): GlobalPositionStrategy { + return this.getGlobalOverlayPosition() + .top(`${INDENT_SIZE}px`) + .right(`${INDENT_SIZE}px`); + } + + private getBottomCenter(): GlobalPositionStrategy { + return this.getGlobalOverlayPosition() + .bottom(`${INDENT_SIZE}px`) + .centerHorizontally(); + } + + private getBottomLeft(): GlobalPositionStrategy { + return this.getGlobalOverlayPosition() + .bottom(`${INDENT_SIZE}px`) + .left(`${INDENT_SIZE}px`); + } + + private getBottomRight(): GlobalPositionStrategy { + return this.getGlobalOverlayPosition() + .bottom(`${INDENT_SIZE}px`) + .right(`${INDENT_SIZE}px`); + } + + private getCenter(): GlobalPositionStrategy { + return this.getGlobalOverlayPosition() + .centerVertically() + .centerHorizontally(); + } + + private getGlobalOverlayPosition(): GlobalPositionStrategy { + return this.overlay.position().global(); + } +} diff --git a/packages/mosaic/toast/toast.spec.ts b/packages/mosaic/toast/toast.spec.ts new file mode 100644 index 000000000..7fefbeabd --- /dev/null +++ b/packages/mosaic/toast/toast.spec.ts @@ -0,0 +1,158 @@ +import { OverlayContainer } from '@angular/cdk/overlay'; +import { Component } from '@angular/core'; +import { TestBed, inject, tick, waitForAsync, fakeAsync } from '@angular/core/testing'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { McToastModule } from './toast.module'; +import { McToastService } from './toast.service'; +import { McToastData } from './toast.type'; + + +const MOCK_TOAST_DATA: McToastData = { style: 'warning', title: 'Warning', content: 'Message Content', hasDismiss: true }; + +// tslint:disable:no-magic-numbers +// tslint:disable:max-line-length +// tslint:disable:no-console +// tslint:disable:no-empty +// tslint:disable:no-unnecessary-class +describe('ToastService', () => { + let toastService: McToastService; + let overlayContainer: OverlayContainer; + let overlayContainerElement: HTMLElement; + let fixture; + let testComponent; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + imports: [McToastModule, BrowserAnimationsModule], + providers: [McToastService], + declarations: [McToastButtonWrapperComponent] + }) + .compileComponents(); + })); + + beforeEach(inject( + [McToastService, OverlayContainer], + (ts: McToastService, oc: OverlayContainer) => { + toastService = ts; + overlayContainer = oc; + overlayContainerElement = oc.getContainerElement(); + } + )); + + afterEach(() => { + overlayContainer.ngOnDestroy(); + }); + + describe('should bring no break change', () => { + beforeEach(() => { + fixture = TestBed.createComponent(McToastButtonWrapperComponent); + testComponent = fixture.componentInstance; + }); + + afterEach(fakeAsync(() => { // wait all openModals tobe closed to clean up the ModalManager as it is globally static + overlayContainer.ngOnDestroy(); + fixture.detectChanges(); + tick(1000); + })); + + it('should create one sticky toast', () => { + toastService.show({ style: 'success', title: 'Success', content: 'Message Content' }, true, 0); + expect(toastService.toasts.length).toBe(1); + }); + + it('should create one sticky warning toast', () => { + toastService.show(MOCK_TOAST_DATA, true, 0); + expect(toastService.toasts[0].instance.data.style).toBe('warning'); + }); + + it('should container only title', () => { + toastService.show({ style: 'success', title: 'Success' }, true, 0); + expect(toastService.toasts[0].instance.data.title).toBe('Success'); + expect(toastService.toasts[0].instance.data.content).toBe(undefined); + }); + + it('should delete toast', () => { + toastService.show(MOCK_TOAST_DATA, true, 0); + const openToast = toastService.toasts[0].instance; + expect(toastService.toasts.length).toBe(1); + fixture.detectChanges(); + + toastService.hide(openToast.id); + fixture.detectChanges(); + expect(toastService.toasts.length).toBe(0); + }); + + it('should disappear after 500 ms', fakeAsync(() => { + toastService.show(MOCK_TOAST_DATA, true, 500); + fixture.detectChanges(); + tick(500); + fixture.detectChanges(); + expect(toastService.toasts.length).toBe(0); + })); + + it('should delete one toast by click', fakeAsync(() => { + spyOn(toastService, 'hide'); + const toast = toastService.show(MOCK_TOAST_DATA, true, 0); + + fixture.detectChanges(); + tick(600); + expect(overlayContainerElement.querySelectorAll('mc-toast').length).toBe(1); + + const button = toast.ref.location.nativeElement.querySelector('button') as HTMLButtonElement; + button.click(); + + fixture.detectChanges(); + tick(600); + + // метод вызывается, тост должен скрываться + expect(toastService.hide).toHaveBeenCalled(); + + // тут тест не проходит, toastService.toasts.indexOf(toast.ref) === 0 и длинна mc-toast === 1 + // expect(overlayContainerElement.querySelectorAll('mc-toast').length).toBe(0); + })); + + it('should create one toast directly through service', fakeAsync(() => { + spyOn(toastService, 'show'); + toastService.show(MOCK_TOAST_DATA, true, 600); + + fixture.detectChanges(); + tick(600); + fixture.detectChanges(); + + expect(overlayContainerElement.querySelectorAll('mc-toast').length).toBe(0); + expect(toastService.show).toHaveBeenCalledTimes(1); + })); + + it('should create one toast by click', fakeAsync(() => { + spyOn(testComponent, 'show').and.callThrough(); + const btn = fixture.nativeElement.querySelector('button'); + + fixture.detectChanges(); + expect(testComponent.show).not.toHaveBeenCalled(); + + btn.click(); + fixture.detectChanges(); + + expect(overlayContainerElement.querySelectorAll('mc-toast').length).toBe(1); + expect(testComponent.show).toHaveBeenCalled(); + expect(testComponent.show).toHaveBeenCalledTimes(1); + })); + }); + +}); + +@Component({ + selector: 'mc-toast-test-button', + template: ``, + providers: [McToastService] +}) +class McToastButtonWrapperComponent { + + constructor(public toastr: McToastService) { + } + + show(): void { + this.toastr.show({ style: 'warning', title: 'Warning', content: 'Message Content' }, true, 0); + } +} diff --git a/packages/mosaic/toast/toast.type.ts b/packages/mosaic/toast/toast.type.ts new file mode 100644 index 000000000..c6661718d --- /dev/null +++ b/packages/mosaic/toast/toast.type.ts @@ -0,0 +1,31 @@ +import { TemplateRef, InjectionToken } from '@angular/core'; + + +export type McToastStyle = 'default' | 'confirm' | 'custom' | 'success' | 'error' | 'warning' | 'info'; +export enum McToastPosition { + TOP_RIGHT = 'top-right', + TOP_LEFT = 'top-left', + TOP_CENTER = 'top-center', + BOTTOM_RIGHT = 'bottom-right', + BOTTOM_LEFT = 'bottom-left', + BOTTOM_CENTER = 'bottom-center', + CENTER = 'center' +} + +export class McToastData { + style: McToastStyle; + title: string | TemplateRef; + content?: string | TemplateRef; + + hasDismiss?: boolean; +} + +// tslint:disable-next-line:naming-convention +export interface McToastConfig { + position: McToastPosition; + duration: number; + onTop: boolean; + sticky: boolean; +} + +export const MC_TOAST_CONFIG = new InjectionToken('mc-toast-config'); diff --git a/tools/api-extractor/config.json b/tools/api-extractor/config.json index 15443a490..787b6d9be 100644 --- a/tools/api-extractor/config.json +++ b/tools/api-extractor/config.json @@ -36,6 +36,7 @@ "tags", "textarea", "timepicker", + "toast", "toggle", "tooltip", "tree", diff --git a/tools/public_api_guard/mosaic/toast.api.md b/tools/public_api_guard/mosaic/toast.api.md new file mode 100644 index 000000000..2b2e3f317 --- /dev/null +++ b/tools/public_api_guard/mosaic/toast.api.md @@ -0,0 +1,160 @@ +## API Report File for "mosaic" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import { ChangeDetectorRef } from '@angular/core'; +import { ComponentRef } from '@angular/core'; +import { EmbeddedViewRef } from '@angular/core'; +import * as i0 from '@angular/core'; +import * as i3 from '@angular/common'; +import * as i4 from '@angular/cdk/overlay'; +import * as i5 from '@angular/cdk/a11y'; +import * as i6 from '@ptsecurity/mosaic/icon'; +import { InjectionToken } from '@angular/core'; +import { Injector } from '@angular/core'; +import { Overlay } from '@angular/cdk/overlay'; +import { TemplateRef } from '@angular/core'; +import { ThemePalette } from '@ptsecurity/mosaic/core'; +import { ViewContainerRef } from '@angular/core'; +import { ViewRef } from '@angular/core'; + +// @public (undocumented) +export const defaultToastConfig: McToastConfig; + +// @public (undocumented) +export const MC_TOAST_CONFIG: InjectionToken; + +// @public (undocumented) +export class McToastComponent { + // (undocumented) + $implicit: any; + constructor(data: McToastData, service: McToastService); + // (undocumented) + animationState: string; + // (undocumented) + close(): void; + // (undocumented) + readonly data: McToastData; + // (undocumented) + get hasDismiss(): boolean; + // (undocumented) + id: number; + // (undocumented) + isTemplateRef(value: any): boolean; + // (undocumented) + readonly service: McToastService; + // (undocumented) + themePalette: typeof ThemePalette; + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public (undocumented) +export interface McToastConfig { + // (undocumented) + duration: number; + // (undocumented) + onTop: boolean; + // (undocumented) + position: McToastPosition; +} + +// @public (undocumented) +export class McToastContainerComponent { + constructor(injector: Injector, changeDetectorRef: ChangeDetectorRef); + // (undocumented) + createTemplate(data: McToastData, template: TemplateRef, onTop: boolean): EmbeddedViewRef; + // (undocumented) + createToast(data: McToastData, componentType: any, onTop: boolean): ComponentRef; + // (undocumented) + getInjector(data: McToastData): Injector; + // (undocumented) + remove(viewRef: ViewRef): void; + // (undocumented) + viewContainer: ViewContainerRef; + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public (undocumented) +export class McToastData { + // (undocumented) + content: string | TemplateRef; + // (undocumented) + hasDismiss?: boolean; + // (undocumented) + style: McToastStyle; + // (undocumented) + title: string | TemplateRef; +} + +// @public (undocumented) +export class McToastModule { + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; + // (undocumented) + static ɵinj: i0.ɵɵInjectorDeclaration; + // Warning: (ae-forgotten-export) The symbol "i1" needs to be exported by the entry point index.d.ts + // Warning: (ae-forgotten-export) The symbol "i2" needs to be exported by the entry point index.d.ts + // + // (undocumented) + static ɵmod: i0.ɵɵNgModuleDeclaration; +} + +// @public (undocumented) +export enum McToastPosition { + // (undocumented) + BOTTOM_CENTER = "bottom-center", + // (undocumented) + BOTTOM_LEFT = "bottom-left", + // (undocumented) + BOTTOM_RIGHT = "bottom-right", + // (undocumented) + CENTER = "center", + // (undocumented) + TOP_CENTER = "top-center", + // (undocumented) + TOP_LEFT = "top-left", + // (undocumented) + TOP_RIGHT = "top-right" +} + +// @public (undocumented) +export class McToastService { + constructor(overlay: Overlay, injector: Injector, toastConfig: McToastConfig, toastFactory: McToastComponent); + // (undocumented) + hide(id: number): void; + // (undocumented) + hideTemplate(id: number): void; + // (undocumented) + show(data: McToastData, onTop?: boolean, duration?: number): { + ref: ComponentRef; + id: number; + }; + // (undocumented) + showTemplate(data: McToastData, template: TemplateRef, onTop?: boolean, duration?: number): { + ref: EmbeddedViewRef; + id: number; + }; + // (undocumented) + get templates(): EmbeddedViewRef[]; + // (undocumented) + get toasts(): ComponentRef[]; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration, [null, null, { optional: true; }, { optional: true; }]>; + // (undocumented) + static ɵprov: i0.ɵɵInjectableDeclaration>; +} + +// @public (undocumented) +export type McToastStyle = 'default' | 'confirm' | 'custom' | 'success' | 'error' | 'warning' | 'info'; + +// (No @packageDocumentation comment for this package) + +``` diff --git a/tsconfig.json b/tsconfig.json index 8673e9239..988131880 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -60,6 +60,7 @@ "@ptsecurity/mosaic/tags": ["packages/mosaic/tags/index.ts"], "@ptsecurity/mosaic/textarea": ["packages/mosaic/textarea/index.ts"], "@ptsecurity/mosaic/timepicker": ["packages/mosaic/timepicker/index.ts"], + "@ptsecurity/mosaic/toast": ["packages/mosaic/toast/index.ts"], "@ptsecurity/mosaic/toggle": ["packages/mosaic/toggle/index.ts"], "@ptsecurity/mosaic/tooltip": ["packages/mosaic/tooltip/index.ts"], "@ptsecurity/mosaic/tree": ["packages/mosaic/tree/index.ts"],