update docs

A-l-y-l-e · Dec 13, 2018 · 6c32c08 · 6c32c08
1 parent 0c4d48d
commit 6c32c08
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -57,6 +57,11 @@ export class CustomMinimaLight extends MinimaLight {
   codeBg = '#fff';
   myColor = 'pink';
   drawerButton = '#5f6368';
+  prism = {
+    colorText: '#626682',
+    string: '#27b98f',
+    keyword: '#7c4dff'
+  };
 }
 
 export class CustomMinimaDark extends MinimaDark {
@@ -65,6 +70,11 @@ export class CustomMinimaDark extends MinimaDark {
   codeBg = '#1b1b1b';
   myColor = 'teal';
   drawerButton = '#abafb5';
+  prism = {
+    colorText: '#ebebef',
+    string: '#89b72c',
+    keyword: '#3cd2ad'
+  };
 }
 
 export class GlobalVariables {
@@ -77,6 +87,8 @@ export class GlobalVariables {
   };
 }
 
+export type AUIThemeVariables = CustomMinimaLight & CustomMinimaDark & GlobalVariables;
+
 @NgModule({
   declarations: [
     AppComponent,

diff --git a/src/app/core/prism/prism.directive.ts b/src/app/core/prism/prism.directive.ts
@@ -1,8 +1,9 @@
 import { Component, ElementRef, Input, OnInit, Renderer2, ChangeDetectionStrategy } from '@angular/core';
-import { Platform, LyTheme2, ThemeVariables } from '@alyle/ui';
+import { Platform, LyTheme2 } from '@alyle/ui';
 import { PrismService } from './prism.service';
 
 import * as _chroma from 'chroma-js';
+import { AUIThemeVariables } from '../../app.module';
 const chroma = _chroma;
 
 const Prism = require('prismjs');
@@ -83,7 +84,7 @@ const GLOBAL_STYLES = {
   }
 };
 
-const classes = theme => ({
+const classes = (theme: AUIThemeVariables) => ({
   root: {
     color: theme.codeColor,
     backgroundColor: theme.codeBg,
@@ -116,10 +117,12 @@ const classes = theme => ({
   }
 });
 
-const STYLES = (theme: ThemeVariables) => ({
+const STYLES = (theme: AUIThemeVariables) => ({
   token: {
+    color: theme.prism.colorText,
     '&{keyword}, &{selector-tag}, &{title}, &{section}, &{doctag}, &{name}, &{strong}': {
-      color: theme.accent.default
+      color: theme.prism.keyword,
+      fontWeight: '600'
     },
     '&{comment}': {
       color: 'rgba(115, 129, 145, 0.65)'
@@ -136,26 +139,23 @@ const STYLES = (theme: ThemeVariables) => ({
     '&{function}': {
       color: '#4584ff'
     },
-    '&{tag} > {punctuation}, &{attr-value} > {punctuation}:first-child': {
-      color: '#39ADB5'
-    },
     '&{attr-name}': {
       color: '#FFB62C'
     },
     '&{attr-value}': {
-      color: '#7c4dff'
+      color: theme.prism.keyword
     },
     '&{string}': {
-      color: '#8BC34A'
+      color: theme.prism.string
     },
     '&{number}': {
       color: 'rgb(36, 212, 158)'
     },
     '&{punctuation}, &{operator}': {
-      color: '#7c4dff'
+      color: '#9786c5'
     },
     '&{class-name}': {
-      color: theme.primary.default
+      color: chroma(theme.accent.default).alpha(.88).css()
     },
     '&{constant}': {
       color: '#EF5350'

diff --git a/src/app/demo-view/view/view.component.html b/src/app/demo-view/view/view.component.html
@@ -1,6 +1,6 @@
 <div ly-paper
   [elevation]="8"
-  shadowColor="background:secondary"
+  shadowColor="#c7c7c7"
   bg="background:tertiary"
 >
   <div [className]="classes.code">