1- const theme = {
1+ import { lighten } from 'polished' ;
2+
3+ const theme : ThemeInterface = {
24 spacingUnit : 20 ,
35 breakpoints : {
46 small : '50rem' ,
@@ -8,9 +10,9 @@ const theme = {
810 colors : {
911 main : '#32329f' ,
1012 success : '#00aa13' ,
11- redirect : 'orange ' ,
13+ redirect : '#ffa500 ' ,
1214 error : '#e53935' ,
13- info : 'skyblue ' ,
15+ info : '#87ceeb ' ,
1416 text : '#263238' ,
1517 warning : '#f1c400' ,
1618 http : {
@@ -44,9 +46,9 @@ const theme = {
4446 fontFamily : 'Courier, monospace' ,
4547 } ,
4648 links : {
47- color : undefined , // by default main color
48- visited : undefined , // by default main color
49- hover : undefined , // by default main color
49+ color : ( { colors } ) => colors . main ,
50+ visited : ( { colors } ) => colors . main ,
51+ hover : ( { colors } ) => lighten ( 0.2 , colors . main ) ,
5052 } ,
5153 menu : {
5254 width : '260px' ,
@@ -58,10 +60,113 @@ const theme = {
5860 } ,
5961 rightPanel : {
6062 backgroundColor : '#263238' ,
61- width : 40 ,
63+ width : '40%' ,
6264 } ,
6365} ;
6466
6567export default theme ;
6668
67- export type ThemeInterface = typeof theme ;
69+ export function resolveTheme ( theme : ThemeInterface ) : ResolvedThemeInterface {
70+ const resolvedValues = { } ;
71+ let counter = 0 ;
72+ const setProxy = ( obj , path : string ) => {
73+ Object . keys ( obj ) . forEach ( k => {
74+ const currentPath = ( path ? path + '.' : '' ) + k ;
75+ const val = obj [ k ] ;
76+ if ( typeof val === 'function' ) {
77+ Object . defineProperty ( obj , k , {
78+ get ( ) {
79+ if ( ! resolvedValues [ currentPath ] ) {
80+ counter ++ ;
81+ if ( counter > 1000 ) {
82+ throw new Error (
83+ `Theme probably contains cirucal dependency at ${ currentPath } ${ val . toString ( ) } ,
84+ ) ;
85+ }
86+
87+ resolvedValues [ currentPath ] = val ( theme ) ;
88+ }
89+ return resolvedValues [ currentPath ] ;
90+ } ,
91+ enumerable : true ,
92+ } ) ;
93+ } else if ( typeof val === 'object' ) {
94+ setProxy ( val , currentPath ) ;
95+ }
96+ } ) ;
97+ } ;
98+
99+ setProxy ( theme , '' ) ;
100+ return JSON . parse ( JSON . stringify ( theme ) ) ;
101+ }
102+
103+ export interface ResolvedThemeInterface {
104+ spacingUnit : number ;
105+ breakpoints : {
106+ small : string ;
107+ medium : string ;
108+ large : string ;
109+ } ;
110+ colors : {
111+ main : string ;
112+ success : string ;
113+ redirect : string ;
114+ error : string ;
115+ info : string ;
116+ text : string ;
117+ warning : string ;
118+ http : {
119+ get : string ;
120+ post : string ;
121+ put : string ;
122+ options : string ;
123+ patch : string ;
124+ delete : string ;
125+ basic : string ;
126+ link : string ;
127+ } ;
128+ } ;
129+ schemaView : {
130+ linesColor : string ;
131+ defaultDetailsWidth : string ;
132+ } ;
133+ baseFont : {
134+ size : string ;
135+ lineHeight : string ;
136+ weight : string ;
137+ family : string ;
138+ smoothing : string ;
139+ optimizeSpeed : boolean ;
140+ } ;
141+ headingsFont : {
142+ family : string ;
143+ } ;
144+ code : {
145+ fontSize : string ;
146+ fontFamily : string ;
147+ } ;
148+ links : {
149+ color : string ;
150+ visited : string ;
151+ hover : string ;
152+ } ;
153+ menu : {
154+ width : string ;
155+ backgroundColor : string ;
156+ } ;
157+ logo : {
158+ maxHeight : string ;
159+ width : string ;
160+ } ;
161+ rightPanel : {
162+ backgroundColor : string ;
163+ width : string ;
164+ } ;
165+ }
166+
167+ export type primitive = string | number | boolean | undefined | null ;
168+ export type AdvancedThemeDeep < T > = T extends primitive
169+ ? T | ( ( theme : ResolvedThemeInterface ) => T )
170+ : AdvancedThemeObject < T > ;
171+ export type AdvancedThemeObject < T > = { [ P in keyof T ] : AdvancedThemeDeep < T [ P ] > } ;
172+ export type ThemeInterface = AdvancedThemeObject < ResolvedThemeInterface > ;
0 commit comments