Breaking changes for expr_color

expr_color is a temporary class name for new color type experiment.
2014-12-17 11:20:47 +08:00
parent 74c09eb9b3
commit 42788db077
58 changed files with 1135 additions and 824 deletions
--- a/source/gui/detail/basic_window.cpp
+++ b/source/gui/detail/basic_window.cpp
@@ -347,12 +347,12 @@ namespace nana

 				visible = false;

-				colors.foreground = 0x0;	//deprecated
-				colors.background = nana::color::button_face;
-				colors.active = 0x60C8FD;
-				colors.fgcolor = ::nana::expr_color(::nana::colors::black);
-				colors.bgcolor = ::nana::expr_color(static_cast<::nana::colors>(nana::color::button_face));
-				colors.activated = ::nana::expr_color(0x60, 0xc8, 0xfd);
+				//colors.foreground = 0x0;	//deprecated
+				//colors.background = nana::color::button_face;
+				//colors.active = 0x60C8FD;
+				colors.fgcolor = ::nana::colors::black;
+				colors.bgcolor = ::nana::colors::button_face;
+				colors.activated.from_rgb(0x60, 0xc8, 0xfd);

 				effect.edge_nimbus = effects::edge_nimbus::none;
 				effect.bground = nullptr;
--- a/source/gui/effects.cpp
+++ b/source/gui/effects.cpp
@@ -27,8 +27,8 @@ namespace nana
 					if(fade_rate_ < 0.001)
 						return;

-					nana::color_t color = API::background(wd);
-					graph.blend(graph.size(), color, fade_rate_);
+					//nana::color_t color = API::background(wd);	//deprecated
+					graph.blend(graph.size(), API::bgcolor(wd), fade_rate_);
 				}
 			private:
 				const double fade_rate_;
--- a/source/gui/element.cpp
+++ b/source/gui/element.cpp
@@ -123,7 +123,7 @@ namespace nana
 						for(int left = 0; left < 12; ++left)
 						{
 							if((*colormap)[top][left] != 0xFFFFFF)
-								graph.set_pixel(left + x, top + y, (*colormap)[top][left]);
+								graph.set_pixel(left + x, top + y, static_cast<colors>((*colormap)[top][left]));
 						}
 					}
 				}
@@ -228,7 +228,7 @@ namespace nana
 						{
 							if(colormap[u][v] & 0xFF000000)
 								continue;
-							graph.set_pixel(x + v, y, colormap[u][v]);
+							graph.set_pixel(x + v, y, static_cast<colors>(colormap[u][v]));
 						}
 						++y;
 					}
--- a/source/gui/programming_interface.cpp
+++ b/source/gui/programming_interface.cpp
@@ -157,7 +157,7 @@ namespace API
 			if(restrict::window_manager.available(iwd))
 			{
 				iwd->drawer.graphics.make(iwd->dimension.width, iwd->dimension.height);
-				iwd->drawer.graphics.rectangle(iwd->colors.background, true);
+				iwd->drawer.graphics.rectangle(true, iwd->colors.bgcolor);
 				iwd->drawer.attached(wd, dr);
 				iwd->drawer.refresh();	//Always redrawe no matter it is visible or invisible. This can make the graphics data correctly.
 			}
@@ -790,11 +790,12 @@ namespace API
 			restrict::bedrock.pump_event(wd, false);
 	}

+	/*
 	nana::color_t foreground(window wd)	//deprecated
 	{
 		internal_scope_guard lock;
 		if(restrict::window_manager.available(reinterpret_cast<restrict::core_window_t*>(wd)))
-			return reinterpret_cast<restrict::core_window_t*>(wd)->colors.foreground;
+			return reinterpret_cast<restrict::core_window_t*>(wd)->colors.fgcolor.px_color().value;
 		return 0;
 	}

@@ -804,10 +805,10 @@ namespace API
 		internal_scope_guard lock;
 		if(restrict::window_manager.available(iwd))
 		{
-			color_t prev = iwd->colors.foreground;
+			color_t prev = iwd->colors.fgcolor.px_color().value;
 			if(prev != col)
 			{
-				iwd->colors.foreground = col;
+				iwd->colors.fgcolor = static_cast<colors>(col);
 				restrict::window_manager.update(iwd, true, false);
 			}
 			return prev;
@@ -819,7 +820,7 @@ namespace API
 	{
 		internal_scope_guard lock;
 		if(restrict::window_manager.available(reinterpret_cast<restrict::core_window_t*>(wd)))
-			return reinterpret_cast<restrict::core_window_t*>(wd)->colors.background;
+			return reinterpret_cast<restrict::core_window_t*>(wd)->colors.bgcolor.px_color().value;
 		return 0;
 	}

@@ -829,10 +830,10 @@ namespace API
 		internal_scope_guard lock;
 		if(restrict::window_manager.available(iwd))
 		{
-			color_t prev = iwd->colors.background;
+			color_t prev = iwd->colors.bgcolor.px_color().value;
 			if(prev != col)
 			{
-				iwd->colors.background = col;
+				iwd->colors.bgcolor = static_cast<colors>(col);
 				restrict::window_manager.update(iwd, true, false);
 			}
 			return prev;
@@ -844,20 +845,20 @@ namespace API
 	{
 		internal_scope_guard lock;
 		if(restrict::window_manager.available(reinterpret_cast<restrict::core_window_t*>(wd)))
-			return reinterpret_cast<restrict::core_window_t*>(wd)->colors.active;
+			return reinterpret_cast<restrict::core_window_t*>(wd)->colors.activated.px_color().value;
 		return 0;
 	}

-	color_t active(window wd, color_t col)	//deprecated
+	color_t active(window wd, color_t clr)	//deprecated
 	{
 		auto iwd = reinterpret_cast<restrict::core_window_t*>(wd);
 		internal_scope_guard lock;
 		if(restrict::window_manager.available(iwd))
 		{
-			color_t prev = iwd->colors.active;
-			if(prev != col)
+			color_t prev = iwd->colors.activated.px_color().value;
+			if (prev != clr)
 			{
-				iwd->colors.active = col;
+				iwd->colors.activated = static_cast<colors>(clr);
 				restrict::window_manager.update(iwd, true, false);
 			}
 			return prev;
@@ -865,6 +866,7 @@ namespace API
 		
 		return 0;
 	}
+	*/


 	expr_color fgcolor(window wd)
--- a/source/gui/tooltip.cpp
+++ b/source/gui/tooltip.cpp
@@ -26,8 +26,8 @@ namespace nana
 			private:
 				void refresh(graph_reference graph)
 				{
-					graph.rectangle(0x0, false);
-					graph.rectangle(1, 1, graph.width() - 2, graph.height() - 2, 0xF0F0F0, true);
+					graph.rectangle(false, colors::black);
+					graph.rectangle(::nana::rectangle(graph.size()).pare_off(1), true, {0xf0, 0xf0, 0xf0});
 				}
 			};

--- a/source/gui/widgets/button.cpp
+++ b/source/gui/widgets/button.cpp
@@ -330,21 +330,23 @@ namespace nana{	namespace drawerbase
 			int right = r.width - 1;
 			int bottom = r.height - 1;

-			graph.rectangle_line(r,
-					0x7F7F7F, 0x7F7F7F, 0x707070, 0x707070);
+			::nana::expr_color lt{0x7f,0x7f,0x7f}, rb{0x70,0x70,0x70};
+			graph.frame_rectangle(r, lt, lt, rb, rb);

-			graph.set_pixel(1, 1, 0x919191);
-			graph.set_pixel(right - 1, 1, 0x919191);
-			graph.set_pixel(right - 1, bottom - 1, 0x919191);
-			graph.set_pixel(1, bottom - 1, 0x919191);
+			graph.set_color({0x91,0x91,0x91});
+			graph.set_pixel(1, 1);
+			graph.set_pixel(right - 1, 1);
+			graph.set_pixel(right - 1, bottom - 1);
+			graph.set_pixel(1, bottom - 1);

-			graph.set_pixel(0, 0, color::button_face);
-			graph.set_pixel(right, 0, color::button_face);
-			graph.set_pixel(0, bottom, color::button_face);
-			graph.set_pixel(right, bottom, color::button_face);
+			graph.set_color(colors::button_face);
+			graph.set_pixel(0, 0);
+			graph.set_pixel(right, 0);
+			graph.set_pixel(0, bottom);
+			graph.set_pixel(right, bottom);

 			if (element_state::pressed == attr_.e_state)
-				graph.rectangle(r.pare_off(1), 0xC3C3C3, false);
+				graph.rectangle(r.pare_off(1), false, {0xc3, 0xc3, 0xc3});
 		}

 		void trigger::emit_click()
--- a/source/gui/widgets/categorize.cpp
+++ b/source/gui/widgets/categorize.cpp
@@ -73,14 +73,15 @@ namespace nana
 				void background(graph_reference graph, window wd, const nana::rectangle& r, const ui_element& ue)
 				{
 					ui_el_ = ue;
-					style_.bgcolor = API::background(wd);
-					style_.fgcolor = API::foreground(wd);
+					style_.bgcolor = API::bgcolor(wd);
+					style_.fgcolor = API::fgcolor(wd);

 					if(ue.what == ue.none || (API::window_enabled(wd) == false))
 					{	//the mouse is out of the widget.
-						style_.bgcolor = nana::paint::graphics::mix(style_.bgcolor, 0xA0C9F5, 0.9);
+						style_.bgcolor.blend(expr_color{ 0xa0, 0xc9, 0xf5 }, 0.9);
+						//style_.bgcolor = nana::paint::graphics::mix(style_.bgcolor, 0xA0C9F5, 0.9);	//deprecated
 					}
-					graph.rectangle(r, style_.bgcolor, true);
+					graph.rectangle(r, true, style_.bgcolor);
 				}

 				virtual void root_arrow(graph_reference graph, const nana::rectangle& r, mouse_action state)
@@ -90,7 +91,7 @@ namespace nana
 					if(ui_el_.what == ui_el_.item_root)
 					{
 						_m_item_bground(graph, r.x + 1, r.y, r.width - 2, r.height, (state == mouse_action::pressed ? mouse_action::pressed : mouse_action::over));
-						graph.rectangle(r, 0x3C7FB1, false);
+						graph.rectangle(r, false, expr_color{ 0x3C, 0x7F, 0xB1 });
 						if(state == mouse_action::pressed)
 						{
 							++x;
@@ -98,7 +99,7 @@ namespace nana
 						}
 					}
 					else
-						graph.rectangle(r, style_.bgcolor, true);
+						graph.rectangle(r, true, style_.bgcolor);

 					nana::paint::gadget::arrow_16_pixels(graph, x, y,
 						style_.fgcolor, 3, nana::paint::gadget::directions::to_west);
@@ -126,18 +127,26 @@ namespace nana
 						int top = r.y + 1;
 						unsigned width = r.width - 2;
 						unsigned height = r.height - 2;
+
+						::nana::expr_color clr{ 0x3C, 0x7F, 0xB1 };
 						if(has_child)
 						{
 							int left = r.x + r.width - 16;
 							_m_item_bground(graph, left, top, 15, height, state_arrow);
 							width -= 16;
 							--left;
-							graph.line(left, top, left, r.y + height, 0x3C7FB1);
+							//graph.line(left, top, left, r.y + height, 0x3C7FB1);//deprecated
+							graph.set_color(clr);
+							graph.line({ left, top }, { left, r.y + static_cast<int>(height) });
 						}
+
 						_m_item_bground(graph, r.x + 1, top, width, height, state_name);
-						graph.rectangle(r, 0x3C7FB1, false);
+						//graph.rectangle(r, 0x3C7FB1, false);	//deprecated
+						graph.set_color(clr);
+						graph.rectangle(r, false);
 					}
-					graph.string(strpos.x, strpos.y, style_.fgcolor, name);
+					//graph.string(strpos.x, strpos.y, style_.fgcolor, name);	//deprecated
+					graph.string(strpos, name, style_.fgcolor);

 					if(has_child)
 					{
@@ -148,9 +157,19 @@ namespace nana

 				void border(graph_reference graph)
 				{
-					graph.rectangle(0xF0F0F0, false);
-					graph.rectangle_line(nana::rectangle(graph.size()).pare_off(1),
-										0x9DABB9, 0x484E55, 0x484E55, 0x9DABB9);
+					rectangle r{ graph.size() };
+
+					graph.set_color({ 0xf0, 0xf0, 0xf0 });
+					graph.rectangle(r, false);
+
+					expr_color lb(0x9d, 0xab, 0xb9);
+					expr_color tr(0x48, 0x4e, 0x55);
+					graph.frame_rectangle(r.pare_off(1), lb, tr, tr, lb);
+
+					//deprecated
+					//graph.rectangle(0xF0F0F0, false);
+					//graph.rectangle_line(nana::rectangle(graph.size()).pare_off(1),
+					//					0x9DABB9, 0x484E55, 0x484E55, 0x9DABB9);
 				}
 			private:
 				void _m_item_bground(graph_reference graph, int x, int y, unsigned width, unsigned height, mouse_action state)
@@ -158,38 +177,55 @@ namespace nana
 					const unsigned half = (height - 2) / 2;
 					int left = x + 1;
 					int top = y + 1;
-					nana::color_t upcol, downcol;
+					//nana::color_t upcol, downcol; // deprecated
+					nana::expr_color clr_top(0xea, 0xea, 0xea), clr_bottom(0xdc, 0xdc, 0xdc);
 					switch(state)
 					{
 					case mouse_action::over:
-						upcol = 0x0DFF2FC;
-						downcol = 0xA9DAF5;
+						clr_top = expr_color(0xdf, 0xf2, 0xfc);
+						clr_bottom = expr_color(0xa9, 0xda, 0xf5);
+						//upcol = 0x0DFF2FC;	//deprecated
+						//downcol = 0xA9DAF5;
 						break;
 					case mouse_action::pressed:
-						upcol = 0xA6D7F2;
-						downcol = 0x92C4F6;
+						//upcol = 0xA6D7F2;	//deprecated
+						//downcol = 0x92C4F6;
+						clr_top = expr_color(0xa6, 0xd7, 0xf2);
+						clr_bottom = expr_color(0x92, 0xc4, 0xf6);
 						++left;
 						++top;
 						break;
-					case mouse_action::normal:
+					//case mouse_action::normal:	//deprecated
 					default:
-						upcol = 0xEAEAEA;
-						downcol = 0xDCDCDC;
+						//upcol = 0xEAEAEA;	//deprecated
+						//downcol = 0xDCDCDC;
 						break;
 					}

-					graph.rectangle(left, top, width - 2, half, upcol, true);
-					graph.rectangle(left, top + static_cast<int>(half), width - 2, (height - 2) - half, downcol, true);
+					graph.rectangle(rectangle{ left, top, width - 2, half }, true, clr_top);
+					graph.rectangle(rectangle{ left, top + static_cast<int>(half), width - 2, (height - 2) - half }, true, clr_bottom);
+					//graph.rectangle(left, top, width - 2, half, upcol, true);	//deprecated
+					//graph.rectangle(left, top + static_cast<int>(half), width - 2, (height - 2) - half, downcol, true);
 					if(mouse_action::pressed == state)
 					{
 						int bottom = y + height - 1;
 						int right = x + width - 1;
-						graph.line(x, y, right, y, 0x6E8D9F);
-						graph.line(x, y + 1, x, bottom, 0x6E8D9F);
+
+						graph.set_color(expr_color(0x6e, 0x8d, 0x9f));
+						graph.line(point{ x, y }, point{right, y});
+						graph.line(point{ x, y + 1 }, point{ x, bottom });
 						++x;
 						++y;
-						graph.line(x, y, right, y, 0xA6C7D9);
-						graph.line(x, y + 1, x, bottom, 0xA6C7D9);
+						graph.set_color(expr_color(0xa6, 0xc7, 0xd9));
+						graph.line(point{ x, y }, point{ right, y });
+						graph.line(point{ x, y + 1 }, point{ x, bottom });
+
+						//graph.line(x, y, right, y, 0x6E8D9F);	//deprecated
+						//graph.line(x, y + 1, x, bottom, 0x6E8D9F);
+						//++x;
+						//++y;
+						//graph.line(x, y, right, y, 0xA6C7D9);
+						//graph.line(x, y + 1, x, bottom, 0xA6C7D9);
 					}
 				}

@@ -197,8 +233,10 @@ namespace nana
 				ui_element	ui_el_;
 				struct style_tag
 				{
-					nana::color_t bgcolor;
-					nana::color_t fgcolor;
+					//nana::color_t bgcolor;
+					//nana::color_t fgcolor;
+					expr_color bgcolor;
+					expr_color fgcolor;
 				}style_;
 			};

@@ -369,7 +407,6 @@ namespace nana
 				};

 				scheme()
-					: graph_(nullptr)
 				{
 					proto_.ui_renderer = pat::cloneable<renderer>(interior_renderer());
 					style_.mode = mode::normal;
@@ -379,7 +416,8 @@ namespace nana
 				void attach(window wd, nana::paint::graphics* graph)
 				{
 					window_ = wd;
-					API::background(wd, 0xFFFFFF);
+					//API::background(wd, 0xFFFFFF);	//deprecated
+					API::bgcolor(wd, colors::white);
 					graph_ = graph;
 				}

@@ -637,7 +675,7 @@ namespace nana

 				nana::rectangle _m_make_root_rectangle() const
 				{
-					return nana::rectangle(1, 1, 16, _m_item_fix_scale());
+					return{ 1, 1, 16, _m_item_fix_scale() };
 				}

 				//_m_make_rectangle
@@ -765,8 +803,8 @@ namespace nana
 					}
 				}
 			private:
-				window	window_;
-				nana::paint::graphics * graph_;
+				window	window_{nullptr};
+				nana::paint::graphics * graph_{nullptr};
 				nana::string splitstr_;
 				std::size_t	head_;
 				unsigned	item_height_;
--- a/source/gui/widgets/checkbox.cpp
+++ b/source/gui/widgets/checkbox.cpp
@@ -88,7 +88,7 @@ namespace checkbox
 			void drawer::_m_draw_background(graph_reference graph)
 			{
 				if(bground_mode::basic != API::effects_bground_mode(*widget_))
-					graph.rectangle(API::background(*widget_), true);
+					graph.rectangle(true, API::bgcolor(*widget_));
 			}

 			void drawer::_m_draw_checkbox(graph_reference graph, unsigned first_line_height)
@@ -98,21 +98,23 @@ namespace checkbox

 			void drawer::_m_draw_title(graph_reference graph)
 			{
-				if(graph.width() > 16 + interval)
+				if (graph.width() > 16 + interval)
 				{
 					nana::string title = widget_->caption();

-					unsigned fgcolor = widget_->foreground();
 					unsigned pixels = graph.width() - (16 + interval);

 					nana::paint::text_renderer tr(graph);
-					if(API::window_enabled(widget_->handle()) == false)
+					if (API::window_enabled(widget_->handle()) == false)
 					{
-						tr.render(17 + interval, 2, 0xFFFFFF, title.c_str(), title.length(), pixels);
-						fgcolor = 0x808080;
+						graph.set_text_color(colors::white);
+						tr.render({ 17 + interval, 2 }, title.c_str(), title.length(), pixels);
+						graph.set_text_color({ 0x80, 0x80, 0x80 });
 					}
+					else
+						graph.set_text_color(widget_->fgcolor());

-					tr.render(16 + interval, 1, fgcolor, title.c_str(), title.length(), pixels);
+					tr.render({ 16 + interval, 1 }, title.c_str(), title.length(), pixels);
 				}
 			}
 		//end class drawer
--- a/source/gui/widgets/combox.cpp
+++ b/source/gui/widgets/combox.cpp
@@ -38,8 +38,8 @@ namespace nana
 				{
 				}

-				item(const nana::string& s)
-					: item_text(s)
+				item(nana::string&& s)
+					: item_text(std::move(s))
 				{}
 			private:
 				//implement item_interface methods
@@ -85,7 +85,7 @@ namespace nana
 				{
 					widget_ = static_cast< ::nana::combox*>(&wd);
 					editor_ = new widgets::skeletons::text_editor(widget_->handle(), graph);
-					editor_->border_renderer([this](graph_reference graph, nana::color_t bgcolor){
+					editor_->border_renderer([this](graph_reference graph, const ::nana::expr_color& bgcolor){
 						draw_border(graph, bgcolor);
 					});
 					editor_->multi_lines(false);
@@ -100,9 +100,9 @@ namespace nana
 					graph_ = nullptr;
 				}

-				void insert(const nana::string& text)
+				void insert(nana::string&& text)
 				{
-					items_.emplace_back(std::make_shared<item>(text));
+					items_.emplace_back(std::make_shared<item>(std::move(text)));
 					API::refresh_window(widget_->handle());
 				}

@@ -284,11 +284,11 @@ namespace nana
 					_m_draw_image();
 				}

-				void draw_border(graph_reference graph, nana::color_t bgcolor)
+				void draw_border(graph_reference graph, const ::nana::expr_color& bgcolor)
 				{
-					graph.rectangle((state_.focused ? 0x0595E2 : 0x999A9E), false);
+					graph.rectangle(false, (state_.focused ? ::nana::expr_color(0x05, 0x95, 0xE2) : ::nana::expr_color(0x99, 0x9A, 0x9E)));
 					nana::rectangle r(graph.size());
-					graph.rectangle(r.pare_off(1), bgcolor, false);
+					graph.rectangle(r.pare_off(1), false, bgcolor);
 				}

 				std::size_t the_number_of_options() const
@@ -439,20 +439,20 @@ namespace nana
 					}
 				}

-				void _m_draw_background(graph_reference graph, const nana::rectangle&, nana::color_t)
+				void _m_draw_background(graph_reference graph, const rectangle&, const ::nana::expr_color&)
 				{
-					nana::rectangle r(graph.size());
-					nana::color_t color_start = color::button_face_shadow_start;
-					nana::color_t color_end = color::button_face_shadow_end;
+					::nana::rectangle r(graph.size());
+					auto clr_from = colors::button_face_shadow_start;
+					auto clr_to = colors::button_face_shadow_end;
 					if(state_.state == state_t::pressed)
 					{
 						r.pare_off(2);
-						std::swap(color_start, color_end);
+						std::swap(clr_from, clr_to);
 					}
 					else
 						r.pare_off(1);

-					graph.shadow_rectangle(r, color_start, color_end, true);
+					graph.gradual_rectangle(r, clr_from, clr_to, true);
 				}

 				void _m_draw_push_button(bool enabled)
@@ -467,39 +467,40 @@ namespace nana
 					int bottom = graph_->height() - 2;
 					int mid = top + (bottom - top) * 5 / 18;

-					nana::color_t topcol, topcol_ln, botcol, botcol_ln;
-					nana::color_t arrow_color;
+					::nana::expr_color topcol, topcol_ln, botcol, botcol_ln;
+					::nana::expr_color arrow_color{ colors::white };
 					if (enabled && items_.size())
 					{
-						arrow_color = 0xFFFFFF;
 						double percent = 1;
 						if (has_lister() || (state_.state == state_t::pressed && state_.pointer_where == where_t::push_button))
 							percent = 0.8;
 						else if (state_.state == state_t::mouse_over)
 							percent = 0.9;

-						topcol_ln = graphics::mix(0x3F476C, 0xFFFFFF, percent);
-						botcol_ln = graphics::mix(0x031141, 0xFFFFFF, percent);
-						topcol = graphics::mix(0x3F83B4, 0xFFFFFF, percent);
-						botcol = graphics::mix(0x0C4A95, 0xFFFFFF, percent);
+						topcol_ln = expr_color{ 0x3F, 0x47, 0x6C }.blend(arrow_color, percent);
+						botcol_ln = expr_color{ 0x03, 0x31, 0x114 }.blend(arrow_color, percent);
+						topcol = expr_color{ 0x3F, 83, 84 }.blend(arrow_color, percent);
+						botcol = expr_color{ 0x0c, 0x4a, 0x9a }.blend(arrow_color, percent);
 					}
 					else
 					{
-						arrow_color = 0xFFFFFF;
-						topcol_ln = 0x7F7F7F;
-						botcol_ln = 0x505050;
-						topcol = 0xC3C3C3;
-						botcol = 0xA0A0A0;
+						topcol_ln = { 0x7F, 0x7F, 0x7F };
+						botcol_ln = { 0x50, 0x50, 0x50 };
+						topcol = { 0xC3, 0xC3, 0xC3 };
+						botcol = { 0xA0, 0xA0, 0xA0 };
 					}

-					graph_->line(left, top, left, mid, topcol_ln);
-					graph_->line(right - 1, top, right - 1, mid, topcol_ln);
+					graph_->set_color(topcol_ln);
+					graph_->line({ left, top }, { left, mid });
+					graph_->line({ right - 1, top }, { right - 1, mid });

-					graph_->line(left, mid + 1, left, bottom, botcol_ln);
-					graph_->line(right - 1, mid + 1, right - 1, bottom, botcol_ln);
+					graph_->set_color(botcol_ln);
+					graph_->line({ left, mid + 1 }, { left, bottom });
+					graph_->line({ right - 1, mid + 1 }, { right - 1, bottom });

-					graph_->rectangle(left + 1, top, right - left - 2, mid - top + 1, topcol, true);
-					graph_->rectangle(left + 1, mid + 1, right - left - 2, bottom - mid, botcol, true);
+
+					graph_->rectangle({ left + 1, top, static_cast<unsigned>(right - left - 2), static_cast<unsigned>(mid - top + 1) }, true, topcol);
+					graph_->rectangle({ left + 1, mid + 1, static_cast<unsigned>(right - left - 2), static_cast<unsigned>(bottom - mid) }, true, botcol);

 					gadget::arrow_16_pixels(*graph_, left, top + ((bottom - top) / 2) - 7, arrow_color, 1, gadget::directions::to_south);
 				}
@@ -579,7 +580,6 @@ namespace nana
 				trigger::~trigger()
 				{
 					delete drawer_;
-					drawer_ = nullptr;
 				}

 				void trigger::set_accept(std::function<bool(nana::char_t)>&& pred)
@@ -599,7 +599,8 @@ namespace nana

 				void trigger::attached(widget_reference wdg, graph_reference graph)
 				{
-					wdg.background(0xFFFFFF);
+					wdg.bgcolor(colors::white);
+					//wdg.background(0xFFFFFF);	//deprecated
 					drawer_->attached(wdg, graph);

 					API::effects_edge_nimbus(wdg, effects::edge_nimbus::active);
@@ -668,15 +669,12 @@ namespace nana

 				void trigger::mouse_up(graph_reference graph, const arg_mouse& arg)
 				{
-					if(drawer_->widget_ptr()->enabled())
+					if (drawer_->widget_ptr()->enabled() && !drawer_->has_lister())
 					{
-						if(false == drawer_->has_lister())
-						{
-							drawer_->editor()->mouse_up(arg.left_button, arg.pos);
-							drawer_->set_mouse_press(false);
-							drawer_->draw();
-							API::lazy_refresh();
-						}
+						drawer_->editor()->mouse_up(arg.left_button, arg.pos);
+						drawer_->set_mouse_press(false);
+						drawer_->draw();
+						API::lazy_refresh();
 					}
 				}

@@ -709,7 +707,7 @@ namespace nana

 				void trigger::key_press(graph_reference, const arg_keyboard& arg)
 				{
-					if(false == drawer_->widget_ptr()->enabled())
+					if(!drawer_->widget_ptr()->enabled())
 						return;

 					if(drawer_->editable())
@@ -906,10 +904,10 @@ namespace nana
 			create(wd, rectangle(), visible);
 		}

-		combox::combox(window wd, const nana::string& text, bool visible)
+		combox::combox(window wd, nana::string text, bool visible)
 		{
 			create(wd, rectangle(), visible);
-			caption(text);
+			caption(std::move(text));
 		}

 		combox::combox(window wd, const nana::char_t* text, bool visible)
@@ -925,18 +923,20 @@ namespace nana

 		void combox::clear()
 		{
-			internal_scope_guard sg;
+			internal_scope_guard lock;
 			get_drawer_trigger().get_drawer_impl().clear();
 			API::refresh_window(handle());
 		}

 		void combox::editable(bool eb)
 		{
+			internal_scope_guard lock;
 			get_drawer_trigger().get_drawer_impl().editable(eb);
 		}

 		bool combox::editable() const
 		{
+			internal_scope_guard lock;
 			return get_drawer_trigger().get_drawer_impl().editable();
 		}

@@ -946,45 +946,53 @@ namespace nana
 			get_drawer_trigger().set_accept(std::move(pred));
 		}

-		combox& combox::push_back(const nana::string& text)
+		combox& combox::push_back(nana::string text)
 		{
-			get_drawer_trigger().get_drawer_impl().insert(text);
+			internal_scope_guard lock;
+			get_drawer_trigger().get_drawer_impl().insert(std::move(text));
 			return *this;
 		}

 		std::size_t combox::the_number_of_options() const
 		{
+			internal_scope_guard lock;
 			return get_drawer_trigger().get_drawer_impl().the_number_of_options();
 		}

 		std::size_t combox::option() const
 		{
+			internal_scope_guard lock;
 			return get_drawer_trigger().get_drawer_impl().option();
 		}

 		void combox::option(std::size_t i)
 		{
+			internal_scope_guard lock;
 			get_drawer_trigger().get_drawer_impl().option(i, false);
 			API::update_window(handle());
 		}

 		nana::string combox::text(std::size_t i) const
 		{
+			internal_scope_guard lock;
 			return get_drawer_trigger().get_drawer_impl().at(i).item_text;
 		}

 		void combox::erase(std::size_t pos)
 		{
+			internal_scope_guard lock;
 			get_drawer_trigger().get_drawer_impl().erase(pos);
 		}

 		void combox::renderer(item_renderer* ir)
 		{
+			internal_scope_guard lock;
 			get_drawer_trigger().get_drawer_impl().renderer(ir);
 		}

 		void combox::image(std::size_t i, const nana::paint::image& img)
 		{
+			internal_scope_guard lock;
 			if(empty()) return;

 			auto & impl = get_drawer_trigger().get_drawer_impl();
@@ -995,42 +1003,47 @@ namespace nana

 		nana::paint::image combox::image(std::size_t pos) const
 		{
+			internal_scope_guard lock;
 			return get_drawer_trigger().get_drawer_impl().at(pos).item_image;
 		}

 		void combox::image_pixels(unsigned px)
 		{
+			internal_scope_guard lock;
 			if(get_drawer_trigger().get_drawer_impl().image_pixels(px))
 				API::refresh_window(*this);
 		}

 		nana::string combox::_m_caption() const
 		{
-			internal_scope_guard isg;
+			internal_scope_guard lock;
 			auto editor = get_drawer_trigger().get_drawer_impl().editor();
 			return (editor ? editor->text() : nana::string());
 		}

 		void combox::_m_caption(nana::string&& str)
 		{
-			internal_scope_guard isg;
+			internal_scope_guard lock;
 			get_drawer_trigger().get_drawer_impl().text(std::move(str));
 			API::refresh_window(*this);
 		}

 		nana::any * combox::_m_anyobj(std::size_t pos, bool alloc_if_empty) const
 		{
+			internal_scope_guard lock;
 			return get_drawer_trigger().get_drawer_impl().anyobj(pos, alloc_if_empty);
 		}

 		auto combox::_m_at_key(std::shared_ptr<nana::detail::key_interface>&& p) -> item_proxy
 		{
+			internal_scope_guard lock;
 			auto & impl = get_drawer_trigger().get_drawer_impl();
 			return item_proxy(&impl, impl.at_key(std::move(p)));
 		}

 		void combox::_m_erase(nana::detail::key_interface* p)
 		{
+			internal_scope_guard lock;
 			get_drawer_trigger().get_drawer_impl().erase(p);
 		}
 	//end class combox
--- a/source/gui/widgets/date_chooser.cpp
+++ b/source/gui/widgets/date_chooser.cpp
@@ -35,6 +35,11 @@ namespace nana
 					chdate_.year = chmonth_.year = d.read().year;
 					chdate_.month = chmonth_.month = d.read().month;
 					chdate_.day = d.read().day;
+
+					color_.selected = { 0x2F, 0x36, 0x99 };
+					color_.highlight = { 0x4D, 0x56, 0xC8 };
+					color_.normal = colors::black;
+					color_.bgcolor = { 0x88, 0xC4, 0xFF };
 				}

 				bool trigger::chose() const
@@ -58,14 +63,15 @@ namespace nana
 					if(0 <= index && index < 12)
 						this->monthstr_[index] = str;
 				}
-
-				void trigger::_m_init_color()
+				/*
+				void trigger::_m_init_color()	//deprecated
 				{
 					color_.selected = 0x2F3699;
 					color_.highlight = 0x4D56C8;
 					color_.normal = 0x0;
 					color_.bkcolor = 0x88C4FF;
 				}
+				*/

 				trigger::where trigger::_m_pos_where(graph_reference graph, int x, int y)
 				{
@@ -93,12 +99,15 @@ namespace nana

 				void trigger::_m_draw(graph_reference graph)
 				{
-					_m_init_color();
+					//_m_init_color();	//deprecated

 					const unsigned width = graph.width() - 2;

-					graph.rectangle(0xB0B0B0, false);
-					graph.rectangle(1, 1, width, topbar_height, 0xFFFFFF, true);
+					//graph.rectangle(0xB0B0B0, false);	//deprecated
+					//graph.rectangle(1, 1, width, topbar_height, 0xFFFFFF, true);
+
+					graph.rectangle(false, {0xb0, 0xb0, 0xb0});
+					graph.rectangle({ 1, 1, width, static_cast<unsigned>(topbar_height) }, true, colors::white);

 					_m_draw_topbar(graph);

@@ -107,7 +116,7 @@ namespace nana
 						nana::point refpos(1, static_cast<int>(topbar_height) + 1);

 						nana::paint::graphics gbuf(width, graph.height() - 2 - topbar_height);
-						gbuf.rectangle(0xF0F0F0, true);
+						gbuf.rectangle(true, {0xf0, 0xf0, 0xf0});

 						switch(page_)
 						{
@@ -128,7 +137,7 @@ namespace nana
 				{
 					int ypos = (topbar_height - 16) / 2 + 1;

-					const nana::color_t color = color_.normal;
+					const auto color = color_.normal;

 					nana::paint::gadget::arrow_16_pixels(graph, border_size, ypos, (pos_ == where::left_button ? color_.highlight : color), 1, nana::paint::gadget::directions::to_west);
 					nana::paint::gadget::arrow_16_pixels(graph, graph.width() - (border_size + 16 + 1), ypos, (pos_ == where::right_button ? color_.highlight : color), 1, nana::paint::gadget::directions::to_east);
@@ -147,12 +156,12 @@ namespace nana

 						nana::size txt_s = graph.text_extent_size(str);

-						ypos = (topbar_height - txt_s.height) / 2 + 1;
+						ypos = (topbar_height - static_cast<int>(txt_s.height)) / 2 + 1;

-						int xpos = (graph.width() - txt_s.width) / 2;
+						int xpos = static_cast<int>(graph.width() - txt_s.width) / 2;
 						if(xpos < border_size + 16) xpos = 16 + border_size + 1;

-						graph.string(xpos, ypos, (pos_ == where::topbar ? color_.highlight : color), str);
+						graph.string({ xpos, ypos }, str, (pos_ == where::topbar ? color_.highlight : color));
 					}
 				}

@@ -181,9 +190,8 @@ namespace nana
 					nana::rectangle r(static_cast<int>(x * dbasis.row_s), static_cast<int>(y * dbasis.line_s),
 						static_cast<int>(dbasis.row_s), static_cast<int>(dbasis.line_s));

-					nana::color_t color{ color_.normal };
-
-					nana::point tpos{ trace_pos_ - dbasis.refpos };
+					auto color = color_.normal;
+					auto tpos = trace_pos_ - dbasis.refpos;

 					if((pos_ == where::textarea)
 						&& (r.x <= tpos.x)
@@ -194,22 +202,22 @@ namespace nana
 						if((page_ != page::date) || y)
 						{
 							color = color_.highlight;
-							graph.rectangle(r, color_.bkcolor, true);
+							graph.rectangle(r, true, color_.bgcolor);
 						}
 					}

 					if(sel)
 					{
 						color = color_.highlight;
-						graph.rectangle(r, color_.bkcolor, true);
-						graph.rectangle(r, color_.selected, false);
+						graph.rectangle(r, true, color_.bgcolor);
+						graph.rectangle(r, false, color_.selected);
 					}

-					if(primary == false)
-						color = 0xB0B0B0;
+					if(false == primary)
+						color = { 0xB0, 0xB0, 0xB0 };

 					nana::size txt_s = graph.text_extent_size(str);
-					graph.string(r.x + static_cast<int>(r.width - txt_s.width) / 2, r.y + static_cast<int>(r.height - txt_s.height) / 2, color, str);
+					graph.string({ r.x + static_cast<int>(r.width - txt_s.width) / 2, r.y + static_cast<int>(r.height - txt_s.height) / 2 }, str, color);
 				}

 				void trigger::_m_draw_pos(drawing_basis & dbasis, graph_reference graph, int x, int y, int number, bool primary, bool sel)
@@ -417,7 +425,7 @@ namespace nana
 							r.x = static_cast<int>(newbuf.width() - r.width) / 2;
 							r.y = static_cast<int>(newbuf.height() - r.height) / 2;

-							dzbuf.rectangle(0xFFFFFF, true);
+							dzbuf.rectangle(true, colors::white);
 							dirtybuf.stretch(dzbuf, r);

 							r.width = static_cast<int>(newbuf.width() + delta * (count - i));
@@ -451,7 +459,7 @@ namespace nana
 							r.height = static_cast<int>(newbuf.height() - delta_h * (count - i));
 							r.x = static_cast<int>(newbuf.width() - r.width) / 2;
 							r.y = static_cast<int>(newbuf.height() - r.height) / 2;
-							nzbuf.rectangle(0xFFFFFF, true);
+							nzbuf.rectangle(true, colors::white);
 							newbuf.stretch(nzbuf, r);

 							nzbuf.blend(nzbuf.size(), dzbuf, nana::point(), fade * (count - i));
--- a/source/gui/widgets/float_listbox.cpp
+++ b/source/gui/widgets/float_listbox.cpp
@@ -18,10 +18,6 @@ namespace nana
 	namespace drawerbase{
 		namespace float_listbox
 		{
-			//class item_renderer
-				item_renderer::~item_renderer(){}
-			//end class item_renderer
-
 			class def_item_renderer
 				: public item_renderer
 			{
@@ -36,26 +32,39 @@ namespace nana

 				void render(widget_reference, graph_reference graph, const nana::rectangle& r, const item_interface* item, state_t state)
 				{
-					if(state == StateHighlighted)
+					if (state == StateHighlighted)
 					{
-						graph.rectangle(r, 0xAFC7E3, false);
+						::nana::expr_color clr{ 0xaf, 0xc7, 0xe3 };
+						graph.rectangle(r, false, clr);

-						graph.set_pixel(r.x, r.y, 0xFFFFFF);
-						graph.set_pixel(r.x + r.width - 1, r.y, 0xFFFFFF);
-						graph.set_pixel(r.x, r.y + r.height - 1, 0xFFFFFF);
-						graph.set_pixel(r.x + r.width - 1, r.y + r.height - 1, 0xFFFFFF);
+						//graph.set_pixel(r.x, r.y, 0xFFFFFF);	//deprecated
+						//graph.set_pixel(r.x + r.width - 1, r.y, 0xFFFFFF);
+						//graph.set_pixel(r.x, r.y + r.height - 1, 0xFFFFFF);
+						//graph.set_pixel(r.x + r.width - 1, r.y + r.height - 1, 0xFFFFFF);

-						graph.set_pixel(r.x + 1, r.y + 1, 0xAFC7E3);
-						graph.set_pixel(r.x + r.width - 2, r.y + 1, 0xAFC7E3);
-						graph.set_pixel(r.x + 1, r.y + r.height - 2, 0xAFC7E3);
-						graph.set_pixel(r.x + r.width - 2, r.y + r.height - 2, 0xAFC7E3);
+						graph.set_color(colors::white);
+						graph.set_pixel(r.x, r.y);
+						graph.set_pixel(r.x + r.width - 1, r.y);
+						graph.set_pixel(r.x, r.y + r.height - 1);
+						graph.set_pixel(r.x + r.width - 1, r.y + r.height - 1);
+
+						//graph.set_pixel(r.x + 1, r.y + 1, 0xAFC7E3);	//deprecated
+						//graph.set_pixel(r.x + r.width - 2, r.y + 1, 0xAFC7E3);
+						//graph.set_pixel(r.x + 1, r.y + r.height - 2, 0xAFC7E3);
+						//graph.set_pixel(r.x + r.width - 2, r.y + r.height - 2, 0xAFC7E3);
+
+						graph.set_color(clr);
+						graph.set_pixel(r.x + 1, r.y + 1);
+						graph.set_pixel(r.x + r.width - 2, r.y + 1);
+						graph.set_pixel(r.x + 1, r.y + r.height - 2);
+						graph.set_pixel(r.x + r.width - 2, r.y + r.height - 2);

 						nana::rectangle po_r(r);
-						graph.rectangle(po_r.pare_off(1), 0xEBF4FB, false);
-						graph.shadow_rectangle(po_r.pare_off(1), 0xDDECFD, 0xC2DCFD, true);
+						graph.rectangle(po_r.pare_off(1), false, { 0xEB, 0xF4, 0xFB });
+						graph.gradual_rectangle(po_r.pare_off(1), { 0xDD, 0xEC, 0xFD }, { 0xC2, 0xDC, 0xFD }, true);
 					}
 					else
-						graph.rectangle(r, 0xFFFFFF, true);
+						graph.rectangle(r, true, colors::white);
 					
 					int x = r.x + 2;
 					if(image_enabled_)
@@ -100,7 +109,8 @@ namespace nana
 						}
 						x += (image_pixels_ + 2);
 					}
-					graph.string(x, r.y + 2, 0x0, item->text());
+					graph.set_text_color(colors::black);
+					graph.string({ x, r.y + 2 }, item->text());
 				}

 				unsigned item_pixels(graph_reference graph) const
@@ -109,12 +119,6 @@ namespace nana
 				}
 			};//end class item_renderer

-			//struct module_def
-				module_def::module_def()
-					:max_items(10), index(npos)
-				{}
-			//end struct module_def
-
 			//class drawer_impl
 			class drawer_impl
 			{
@@ -339,11 +343,11 @@ namespace nana
 						_m_open_scrollbar(*widget_, pages);
 					}
 					else
-						graph_->string(4, 4, 0x808080, STR("Empty Listbox, No Module!"));
+						graph_->string({ 4, 4 }, STR("Empty Listbox, No Module!"), {0x80, 0x80, 0x80});

 					//Draw border
-					graph_->rectangle(0x0, false);
-					graph_->rectangle(nana::rectangle(graph_->size()).pare_off(1), 0xFFFFFF, false);
+					graph_->rectangle(false, colors::black);
+					graph_->rectangle(nana::rectangle(graph_->size()).pare_off(1), false, colors::white);
 				}
 			private:
 				bool _m_image_enabled() const
--- a/source/gui/widgets/form.cpp
+++ b/source/gui/widgets/form.cpp
@@ -18,8 +18,6 @@ namespace nana
 		namespace form
 		{
 		//class trigger
-			trigger::trigger():wd_(nullptr){}
-
 			void trigger::attached(widget_reference widget, graph_reference graph)
 			{
 				wd_ = &widget;
@@ -27,14 +25,15 @@ namespace nana

 			void trigger::refresh(graph_reference graph)
 			{
-				graph.rectangle(API::background(*wd_), true);
+				graph.rectangle(true, API::bgcolor(*wd_));
 			}
-
-			void trigger::resized(graph_reference graph, const arg_resized&)
+			/*
+			void trigger::resized(graph_reference graph, const arg_resized&)	//deprecated
 			{
 				graph.rectangle(API::background(*wd_), true);
 				API::lazy_refresh();
 			}
+			*/
 		}//end namespace form
 	}//end namespace drawerbase

--- a/source/gui/widgets/label.cpp
+++ b/source/gui/widgets/label.cpp
@@ -74,7 +74,7 @@ namespace nana
 					return true;
 				}

-				void render(graph_reference graph, nana::color_t fgcolor, align th, align_v tv)
+				void render(graph_reference graph, const ::nana::expr_color& fgcolor, align th, align_v tv)
 				{
 					traceable_.clear();

@@ -161,18 +161,18 @@ namespace nana
 					return false;
 				}

-				nana::size measure(graph_reference graph, unsigned limited, align th, align_v tv)
+				::nana::size measure(graph_reference graph, unsigned limited, align th, align_v tv)
 				{
-					nana::size retsize;
+					::nana::size retsize;

-					nana::paint::font ft = graph.typeface();	//used for restoring the font
+					auto ft = graph.typeface();	//used for restoring the font

 					const unsigned def_line_pixels = graph.text_extent_size(STR(" "), 1).height;

 					font_ = ft;
 					fblock_ = nullptr;

-					_m_set_default(ft, 0);
+					_m_set_default(ft, colors::black);
 					_m_measure(graph);

 					render_status rs;
@@ -216,7 +216,7 @@ namespace nana
 					}
 				}

-				void _m_set_default(const nana::paint::font& ft, nana::color_t fgcolor)
+				void _m_set_default(const ::nana::paint::font& ft, const ::nana::expr_color& fgcolor)
 				{
 					def_.font_name = ft.name();
 					def_.font_size = ft.size();
@@ -224,9 +224,9 @@ namespace nana
 					def_.fgcolor = fgcolor;
 				}

-				nana::color_t _m_fgcolor(nana::widgets::skeletons::fblock* fp)
+				const ::nana::expr_color& _m_fgcolor(nana::widgets::skeletons::fblock* fp)
 				{
-					while(fp->fgcolor == 0xFFFFFFFF)
+					while(fp->fgcolor.invisible())
 					{
 						fp = fp->parent;
 						if(nullptr == fp)
@@ -562,12 +562,12 @@ namespace nana

 							if (text_range.second == data_ptr->text().length())
 							{
-								graph.string(rs.pos.x, y, _m_fgcolor(fblock_ptr), data_ptr->text());
+								graph.string({ rs.pos.x, y }, data_ptr->text(), _m_fgcolor(fblock_ptr));
 							}
 							else
 							{
 								nana::string str = data_ptr->text().substr(text_range.first, text_range.second);
-								graph.string(rs.pos.x, y, _m_fgcolor(fblock_ptr), str);
+								graph.string({ rs.pos.x, y }, str, _m_fgcolor(fblock_ptr));
 								sz = graph.text_extent_size(str);
 							}
 							_m_inser_if_traceable(rs.pos.x, y, sz, fblock_ptr);
@@ -600,16 +600,16 @@ namespace nana
 			private:
 				dstream dstream_;
 				bool format_enabled_ = false;
-				nana::widgets::skeletons::fblock * fblock_ = nullptr;
+				::nana::widgets::skeletons::fblock * fblock_ = nullptr;
 				std::deque<traceable> traceable_;

-				nana::paint::font font_;
+				::nana::paint::font font_;
 				struct def_font_tag
 				{
-					nana::string font_name;
+					::nana::string font_name;
 					std::size_t font_size;
 					bool	font_bold;
-					nana::color_t fgcolor;
+					::nana::expr_color fgcolor;
 				}def_;
 			};

@@ -748,9 +748,9 @@ namespace nana

 					window wd = impl_->wd->handle();
 					if(bground_mode::basic != API::effects_bground_mode(wd))
-						graph.rectangle(API::background(wd), true);
+						graph.rectangle(true, API::bgcolor(wd));

-					impl_->renderer.render(graph, impl_->wd->foreground(), impl_->text_align, impl_->text_align_v);
+					impl_->renderer.render(graph, API::fgcolor(wd), impl_->text_align, impl_->text_align_v);
 				}

 			//end class label_drawer
--- a/source/gui/widgets/listbox.cpp
+++ b/source/gui/widgets/listbox.cpp
@@ -2209,7 +2209,7 @@ namespace nana
 					_m_draw(essence_->header.cont(), r);

 					const int y = r.y + r.height - 1;
-					essence_->graph->line(r.x, y, r.x + r.width, y, 0xDEDFE1);
+					essence_->graph->line({ r.x, y }, { r.x + static_cast<int>(r.width), y }, { 0xDE, 0xDF, 0xE1 });
 				}
 			private:
 				size_type _m_target_strip(int x, const nana::rectangle& rect, size_type grab, bool& place_front)
@@ -2239,7 +2239,7 @@ namespace nana
 							x = (place_front ? item_xpos : essence_->header.xpos(essence_->header.neighbor(i, false)));

 							if(i != npos)
-								essence_->graph->rectangle(x - essence_->scroll.offset_x + rect.x, rect.y, 2, rect.height, 0xFF0000, true);
+								essence_->graph->rectangle({ x - essence_->scroll.offset_x + rect.x, rect.y, 2, rect.height }, true, colors::red);
 						}
 						return i;
 					}
@@ -2254,7 +2254,7 @@ namespace nana
 					unsigned height = rect.height - 1;

 					int txtop = (rect.height - essence_->text_height) / 2 + rect.y;
-					nana::color_t txtcolor = essence_->lister.wd_ptr()->foreground();
+					auto txtcolor = essence_->lister.wd_ptr()->fgcolor();

 					auto state = essence_t::state_t::normal;
 					//check whether grabing an item, if item_spliter_ != npos, that indicates the grab item is a spliter.
@@ -2270,7 +2270,7 @@ namespace nana
 							if(next_x > rect.x)
 							{
 								_m_draw_item(graph, x, rect.y, height, txtop, txtcolor, i, (i.index == essence_->pointer_where.second ? state : essence_t::state_t::normal));
-								graph.line(next_x - 1, rect.y, next_x - 1, bottom_y, 0xDEDFE1);
+								graph.line({ next_x - 1, rect.y }, { next_x - 1, bottom_y }, { 0xDE, 0xDF, 0xE1 });
 							}
 							x = next_x;
 							if(x - rect.x > static_cast<int>(rect.width)) break;
@@ -2278,30 +2278,30 @@ namespace nana
 					}

 					if(x - rect.x < static_cast<int>(rect.width))
-						graph.rectangle(x, rect.y, rect.width - x + rect.x, height, 0xF1F2F4, true);
+						graph.rectangle({ x, rect.y, rect.width - x + rect.x, height }, true, { 0xF1, 0xF2, 0xF4 });
 				}

 				template<typename Item>
-				void _m_draw_item(graph_reference graph, int x, int y, unsigned height, int txtop, nana::color_t txtcolor, const Item& item, essence_t::state_t state)
+				void _m_draw_item(graph_reference graph, int x, int y, unsigned height, int txtop, const ::nana::expr_color& fgcolor, const Item& item, essence_t::state_t state)
 				{
-					nana::color_t bgcolor;
+					::nana::expr_color bgcolor;
 					typedef essence_t::state_t state_t;
 					switch(state)
 					{
-					case state_t::normal:		bgcolor = 0xF1F2F4; break;
-					case state_t::highlighted:	bgcolor = 0xFFFFFF; break;
+					case state_t::normal:		bgcolor.from_rgb(0xf1, 0xf2, 0xf4); break;
+					case state_t::highlighted:	bgcolor = colors::white; break;
 					case state_t::pressed:
-					case state_t::grabed:		bgcolor = 0x8BD6F6; break;
-					case state_t::floated:		bgcolor = 0xBABBBC;	break;
+					case state_t::grabed:		bgcolor.from_rgb(0x8B, 0xD6, 0xF6); break;
+					case state_t::floated:		bgcolor.from_rgb(0xBA, 0xBB, 0xBC);	break;
 					}

-					graph.rectangle(x, y, item.pixels, height, bgcolor, true);
-					graph.string(x + 5, txtop, txtcolor, item.text);
+					graph.rectangle({ x, y, item.pixels, height }, true, bgcolor);
+					graph.string({ x + 5, txtop }, item.text, fgcolor);

 					if(item.index == essence_->lister.sort_index())
 					{
 						nana::paint::gadget::directions::t dir = essence_->lister.sort_reverse() ? nana::paint::gadget::directions::to_south : nana::paint::gadget::directions::to_north;
-						nana::paint::gadget::arrow_16_pixels(graph, x + (item.pixels - 16) / 2, -4, 0x0, 0, dir);
+						nana::paint::gadget::arrow_16_pixels(graph, x + (item.pixels - 16) / 2, -4, colors::black, 0, dir);
 					}
 				}

@@ -2313,7 +2313,7 @@ namespace nana
 					ext_graph.typeface(essence_->graph->typeface());

 					int txtop = (essence_->header_size - essence_->text_height) / 2;
-					_m_draw_item(ext_graph, 0, 0, essence_->header_size, txtop, 0xFFFFFF, item, essence_t::state_t::floated);
+					_m_draw_item(ext_graph, 0, 0, essence_->header_size, txtop, colors::white, item, essence_t::state_t::floated);

 					int xpos = essence_->header.xpos(item.index) + pos.x - ref_xpos_;
 					ext_graph.blend(ext_graph.size(), *(essence_->graph), nana::point(xpos - essence_->scroll.offset_x + rect.x, rect.y), 0.5);
@@ -2477,9 +2477,10 @@ namespace nana
 					graph->set_color(bgcolor);
 					graph->rectangle(rectangle{ x, y, width, essence_->item_size }, true);

-					nana::paint::gadget::arrow_16_pixels(*graph, x + 5, y + (essence_->item_size - 16) /2, 0x3399, 2, (categ.expand ? nana::paint::gadget::directions::to_north : nana::paint::gadget::directions::to_south));
+					nana::paint::gadget::arrow_16_pixels(*graph, x + 5, y + (essence_->item_size - 16) / 2, { 0x0, 0x33, 0x99 }, 2, (categ.expand ? nana::paint::gadget::directions::to_north : nana::paint::gadget::directions::to_south));
 					nana::size text_s = graph->text_extent_size(categ.text);
-					graph->string(x + 20, y + txtoff, 0x3399, categ.text);
+
+					graph->string({ x + 20, y + txtoff }, categ.text, {0, 0x33, 0x99});

 					std::stringstream ss;
 					ss<<'('<<static_cast<unsigned>(categ.items.size())<<')';
@@ -2487,11 +2488,13 @@ namespace nana

 					unsigned str_w = graph->text_extent_size(str).width;

-					graph->string(x + 25 + text_s.width, y + txtoff, 0x3399, str);
-
-					if(x + 35 + text_s.width + str_w < x + width)
-						graph->line(x + 30 + text_s.width + str_w, y + essence_->item_size / 2, x + width - 5, y + essence_->item_size / 2, 0x3399);
+					graph->string({ x + 25 + static_cast<int>(text_s.width), y + txtoff }, str);

+					if (x + 35 + text_s.width + str_w < x + width)
+					{
+						::nana::point pos{ x + 30 + static_cast<int>(text_s.width + str_w), y + static_cast<int>(essence_->item_size) / 2 };
+						graph->line(pos, { x + static_cast<int>(width)-5, pos.y }, { 0x0, 0x33, 0x99 });
+					}
 					//Draw selecting inner rectangle
 					if(sel && categ.expand == false)
 					{
@@ -2603,7 +2606,7 @@ namespace nana
 							}
 						}

-						graph->line(item_xpos - 1, y, item_xpos - 1, y + essence_->item_size - 1, 0xEBF4F9);
+						graph->line({ item_xpos - 1, y }, { item_xpos - 1, y + static_cast<int>(essence_->item_size) - 1 }, { 0xEB, 0xF4, 0xF9 });

 						item_xpos += header.pixels;
 						first = false;
@@ -2618,13 +2621,14 @@ namespace nana
 				{
 					//Draw selecting inner rectangle
 					auto graph = essence_->graph;
-					graph->rectangle(x , y , width, essence_->item_size, 0x99DEFD, false);
+					graph->rectangle({ x, y, width, essence_->item_size }, false, { 0x99, 0xDE, 0xFD });

-					graph->rectangle(x + 1, y + 1, width - 2, essence_->item_size - 2, 0xFFFFFF, false);
-					graph->set_pixel(x, y, 0xFFFFFF);
-					graph->set_pixel(x, y + essence_->item_size - 1, 0xFFFFFF);
-					graph->set_pixel(x + width - 1, y, 0xFFFFFF);
-					graph->set_pixel(x + width - 1, y + essence_->item_size - 1, 0xFFFFFF);
+					graph->set_color(colors::white);
+					graph->rectangle({ x + 1, y + 1, width - 2, essence_->item_size - 2 }, false);
+					graph->set_pixel(x, y);
+					graph->set_pixel(x, y + essence_->item_size - 1);
+					graph->set_pixel(x + width - 1, y);
+					graph->set_pixel(x + width - 1, y + essence_->item_size - 1);
 				}
 			private:
 				essence_t * essence_;
@@ -2674,12 +2678,16 @@ namespace nana
 					auto & graph = *essence_->graph;
 					auto size = graph.size();
 					//Draw Border
-					graph.rectangle(0x9CB6C5, false);
-					graph.line(1, 1, 1, size.height - 2, 0xFFFFFF);
-					graph.line(size.width - 2, 1, size.width - 2, size.height - 2, 0xFFFFFF);
+					graph.rectangle(false, {0x9c, 0xb6, 0xc5});
+					graph.line({ 1, 1 }, {1, static_cast<int>(size.height) - 2}, colors::white);
+					graph.line({ static_cast<int>(size.width) - 2, 1 }, { static_cast<int>(size.width) - 2, static_cast<int>(size.height) - 2 });

 					if ((essence_->scroll.h.empty() == false) && (essence_->scroll.v.empty() == false))
-						graph.rectangle(size.width - 1 - essence_->scroll.scale, size.height - 1 - essence_->scroll.scale, essence_->scroll.scale, essence_->scroll.scale, nana::color::button_face, true);
+						graph.rectangle({ static_cast<int>(size.width - 1 - essence_->scroll.scale),
+											static_cast<int>(size.height - 1 - essence_->scroll.scale),
+											essence_->scroll.scale,
+											essence_->scroll.scale },
+										true, colors::button_face);
 				}

 				void trigger::attached(widget_reference widget, graph_reference graph)
@@ -2688,7 +2696,7 @@ namespace nana
 					typeface_changed(graph);

 					essence_->lister.bind(essence_, widget);
-					widget.background(0xFFFFFF);
+					widget.bgcolor(colors::white);
 				}

 				void trigger::detached()
--- a/source/gui/widgets/menu.cpp
+++ b/source/gui/widgets/menu.cpp
@@ -105,38 +105,42 @@ namespace nana
 					nana::size sz = graph.size();
 					sz.width -= 30;
 					sz.height -= 2;
-					graph.rectangle(color::gray_border, false);
-					graph.rectangle(1, 1, 28, sz.height, 0xF6F6F6, true);
-					graph.rectangle(29, 1, sz.width, sz.height, 0xFFFFFF, true);
+					graph.rectangle(false, colors::gray_border);
+					graph.rectangle({ 1, 1, 28, sz.height }, true, { 0xf6, 0xf6, 0xf6 });
+					graph.rectangle({ 29, 1, sz.width, sz.height }, true, colors::white);
 				}

 				void item(graph_reference graph, const nana::rectangle& r, const attr& at)
 				{
 					if(at.item_state == state::active)
 					{
-						graph.rectangle(r, 0xA8D8EB, false);
+						graph.rectangle(r, false, {0xa8, 0xd8, 0xeb});
 						nana::point points[4] = {
 							nana::point(r.x, r.y),
 							nana::point(r.x + r.width - 1, r.y),
 							nana::point(r.x, r.y + r.height - 1),
 							nana::point(r.x + r.width - 1, r.y + r.height - 1)
 						};
+
+						graph.set_color({0xc0, 0xdd, 0xfc});
 						for(int i = 0; i < 4; ++i)
-							graph.set_pixel(points[i].x, points[i].y, 0xC0DDFC);
+							graph.set_pixel(points[i].x, points[i].y);

 						if(at.enabled)
-							graph.shadow_rectangle(nana::rectangle(r).pare_off(1), 0xE8F0F4, 0xDBECF4, true);
+							graph.gradual_rectangle(nana::rectangle(r).pare_off(1), { 0xE8, 0xF0, 0xF4 }, { 0xDB,0xEC,0xF4 }, true);
 					}

 					if(at.checked && (checks::none != at.check_style))
 					{
-						graph.rectangle(r, 0xCDD3E6, false);
-						graph.rectangle(nana::rectangle(r).pare_off(1), 0xE6EFF4, true);
+						graph.rectangle(r, false, { 0xCD, 0xD3, 0xE6 });
+
+						::nana::expr_color clr(0xE6, 0xEF, 0xF4);
+						graph.rectangle(nana::rectangle(r).pare_off(1), true, clr);

 						nana::rectangle crook_r = r;
 						crook_r.width = 16;
 						crook_.radio(at.check_style == checks::option);
-						crook_.draw(graph, ::nana::expr_color(0xE6, 0xEF, 0xF4), colors::black, crook_r, element_state::normal);  
+						crook_.draw(graph, clr, colors::black, crook_r, element_state::normal);
 					}
 				}

@@ -147,24 +151,20 @@ namespace nana

 				void item_text(graph_reference graph, const nana::point& pos, const nana::string& text, unsigned text_pixels, const attr& at)
 				{
+					graph.set_color(at.enabled ? colors::black : colors::gray_border);
 					nana::paint::text_renderer tr(graph);
-					tr.render(pos.x, pos.y, (at.enabled ? 0x0 : nana::color::gray_border), text.c_str(), text.length(), text_pixels, true);
+					tr.render(pos, text.c_str(), text.length(), text_pixels, true);
 				}

 				void sub_arrow(graph_reference graph, const nana::point& pos, unsigned pixels, const attr&)
 				{
-					nana::paint::gadget::arrow_16_pixels(graph, pos.x, pos.y + static_cast<int>(pixels - 16) / 2, 0x0, 0, nana::paint::gadget::directions::to_east);
+					nana::paint::gadget::arrow_16_pixels(graph, pos.x, pos.y + static_cast<int>(pixels - 16) / 2, colors::black, 0, nana::paint::gadget::directions::to_east);
 				}

 			private:
 				facade<element::crook> crook_;
 			};

-			//class renderer_interface
-				renderer_interface::~renderer_interface()
-				{}
-			//end class renderer_interface
-
 			class menu_builder
 				: noncopyable
 			{
@@ -537,7 +537,7 @@ namespace nana
 							renderer->item(*graph_, item_r, attr);

 							//Draw text, the text is transformed from orignal for hotkey character
-							nana::string::value_type hotkey;
+							nana::char_t hotkey;
 							nana::string::size_type hotkey_pos;
 							nana::string text = API::transform_shortkey_text(m.text, hotkey, &hotkey_pos);

@@ -555,7 +555,9 @@ namespace nana
 									nana::size hotkey_size = graph_->text_extent_size(text.c_str() + hotkey_pos, 1);
 									int x = item_r.x + 40 + off_w;
 									int y = item_r.y + text_top_off + hotkey_size.height;
-									graph_->line(x, y, x + hotkey_size.width - 1, y, 0x0);
+
+									graph_->set_color(colors::black);
+									graph_->line({ x, y }, { x + static_cast<int>(hotkey_size.width) - 1, y });
 								}
 							}

@@ -566,7 +568,8 @@ namespace nana
 						}
 						else
 						{
-							graph_->line(item_r.x + 40, item_r.y, graph_->width() - 1, item_r.y, nana::color::gray_border);
+							graph_->set_color(colors::gray_border);
+							graph_->line({ item_r.x + 40, item_r.y }, { static_cast<int>(graph_->width()) - 1, item_r.y });
 							item_r.y += 2;
 						}

--- a/source/gui/widgets/menubar.cpp
+++ b/source/gui/widgets/menubar.cpp
@@ -100,38 +100,41 @@ namespace nana

 				void item_renderer::background(const nana::point& pos, const nana::size& size, state_t state)
 				{
-					nana::color_t bground = API::background(handle_);
-					nana::color_t border, body, corner;
+					auto bground = API::fgcolor(handle_);
+					::nana::expr_color border, body, corner;

 					switch(state)
 					{
 					case item_renderer::state_highlight:
-						border = nana::color::highlight;
-						body = 0xC0DDFC;
-						corner = paint::graphics::mix(body, bground, 0.5);
+						border = colors::highlight;
+						body.from_rgb(0xC0, 0xDD, 0xFC);
+						corner = body;
+						corner.blend(bground, 0.5);
 						break;
 					case item_renderer::state_selected:
-						border = nana::color::dark_border;
-						body = 0xFFFFFF;
-						corner = paint::graphics::mix(border, bground, 0.5);
+						border = colors::dark_border;
+						body = colors::white;
+						corner = body;
+						corner.blend(bground, 0.5);
 						break;
 					default:	//Don't process other states.
 						return;
 					}

 					nana::rectangle r(pos, size);
-					graph_.rectangle(r, border, false);
+					graph_.rectangle(r, false, border);

-					graph_.set_pixel(pos.x, pos.y, corner);
-					graph_.set_pixel(pos.x + size.width - 1, pos.y, corner);
-					graph_.set_pixel(pos.x, pos.y + size.height - 1, corner);
-					graph_.set_pixel(pos.x + size.width - 1, pos.y + size.height - 1, corner);
-					graph_.rectangle(r.pare_off(1), body, true);
+					graph_.set_color(corner);
+					graph_.set_pixel(pos.x, pos.y);
+					graph_.set_pixel(pos.x + size.width - 1, pos.y);
+					graph_.set_pixel(pos.x, pos.y + size.height - 1);
+					graph_.set_pixel(pos.x + size.width - 1, pos.y + size.height - 1);
+					graph_.rectangle(r.pare_off(1), true, body);
 				}

 				void item_renderer::caption(int x, int y, const nana::string& text)
 				{
-					graph_.string(x, y, 0x0, text);
+					graph_.string({ x, y }, text, colors::black);
 				}
 			//end class item_renderer

@@ -508,8 +511,8 @@ namespace nana

 				void trigger::_m_draw()
 				{
-					nana::color_t bground_color = API::background(*widget_);
-					graph_->rectangle(bground_color, true);
+					auto bgcolor = API::bgcolor(*widget_);
+					graph_->rectangle(true, bgcolor);

 					item_renderer ird(*widget_, *graph_);

@@ -538,8 +541,8 @@ namespace nana
 						{
 							int x = item_pos.x + item_s.width;
 							int y1 = item_pos.y + 2, y2 = item_pos.y + item_s.height - 1;
-							graph_->line(x, y1, x, y2, paint::graphics::mix(color::gray_border, bground_color, 0.6));
-							graph_->line(x + 1, y1, x + 1, y2, paint::graphics::mix(color::button_face_shadow_end, bground_color, 0.5));
+							graph_->line({ x, y1 }, { x, y2 }, ::nana::expr_color(colors::gray_border).blend(bgcolor, 0.6));
+							graph_->line({ x + 1, y1 }, { x + 1, y2 }, ::nana::expr_color(colors::button_face_shadow_end).blend(bgcolor, 0.5));
 						}

 						//Draw text, the text is transformed from orignal for hotkey character
@@ -555,7 +558,7 @@ namespace nana
 							graph_->text_metrics(ascent, descent, inleading);
 							int x = item_pos.x + 8 + off_w;
 							int y = item_pos.y + text_top_off + ascent + 1;
-							graph_->line(x, y, x + hotkey_size.width - 1, y, 0x0);
+							graph_->line({ x, y }, { x + static_cast<int>(hotkey_size.width) - 1, y }, ::nana::colors::black);
 						}

 						item_pos.x += i->size.width;
--- a/source/gui/widgets/panel.cpp
+++ b/source/gui/widgets/panel.cpp
@@ -20,10 +20,6 @@ namespace nana
 		namespace panel
 		{
 		//class drawer
-			drawer::drawer()
-				:window_(nullptr)
-			{}
-
 			void drawer::attached(widget_reference widget, graph_reference)
 			{
 				widget.caption(STR("Nana Panel"));
@@ -33,7 +29,7 @@ namespace nana
 			void drawer::refresh(graph_reference graph)
 			{
 				if(bground_mode::basic != API::effects_bground_mode(window_))
-					graph.rectangle(API::background(window_), true);
+					graph.rectangle(true, API::bgcolor(window_));
 			}
 			//end class drawer
 		}//end namespace panel
--- a/source/gui/widgets/picture.cpp
+++ b/source/gui/widgets/picture.cpp
@@ -22,14 +22,11 @@ namespace nana
 		//class picture_drawer
 			picture_drawer::picture_drawer():graph_(nullptr)
 			{
+				bground_.horizontal = true;
 				backimg_.arg = nana::arrange::unknown;
 				backimg_.beg = backimg_.end = 0;
 			}

-			picture_drawer::runtime_type::runtime_type()
-				:background_shadow_start(0), background_shadow_end(0), horizontal(true)
-			{}
-
 			void picture_drawer::attached(widget_reference& widget, graph_reference graph)
 			{
 				widget_ = &widget;
@@ -46,11 +43,11 @@ namespace nana
 				backimg_.image = img;
 			}

-			void picture_drawer::set_shadow_background(unsigned begin_color, unsigned end_color, bool horizontal)
+			void picture_drawer::set_shadow_background(const ::nana::expr_color& from, const ::nana::expr_color& to, bool horizontal)
 			{
-				runtime_.background_shadow_end = end_color;
-				runtime_.background_shadow_start = begin_color;
-				runtime_.horizontal = horizontal;
+				bground_.gradual_from = from;
+				bground_.gradual_to = to;
+				bground_.horizontal = horizontal;

 				_m_draw_background();
 			}
@@ -244,10 +241,12 @@ namespace nana
 			{
 				if(graph_ && (bground_mode::basic != API::effects_bground_mode(*widget_)))
 				{
-					if(runtime_.background_shadow_end == runtime_.background_shadow_start)
-						graph_->rectangle((runtime_.background_shadow_end ? runtime_.background_shadow_end : widget_->background()), true);
+					if (bground_.gradual_from.invisible() || bground_.gradual_to.invisible())
+						graph_->rectangle(true, widget_->bgcolor());
+					else if(bground_.gradual_from == bground_.gradual_to)
+						graph_->rectangle(true, bground_.gradual_from);
 					else
-						graph_->shadow_rectangle(graph_->size(), runtime_.background_shadow_start, runtime_.background_shadow_end, !runtime_.horizontal);
+						graph_->gradual_rectangle(graph_->size(), bground_.gradual_from, bground_.gradual_to, !bground_.horizontal);
 				}
 			}
 		//end class picture_drawer
@@ -278,9 +277,9 @@ namespace nana
 				API::refresh_window(*this);
 		}

-		void picture::set_shadow_background(unsigned begin_color, unsigned end_color, bool horizontal)
+		void picture::set_gradual_background(const ::nana::expr_color& from, const ::nana::expr_color& to, bool horizontal)
 		{
-			get_drawer_trigger().set_shadow_background(begin_color, end_color, horizontal);
+			get_drawer_trigger().set_shadow_background(from, to, horizontal);
 		}

 		void picture::transparent(bool enabled)
--- a/source/gui/widgets/progress.cpp
+++ b/source/gui/widgets/progress.cpp
@@ -18,11 +18,6 @@ namespace nana
 		namespace progress
 		{
 			//class trigger
-			trigger::trigger()
-				:   graph_(nullptr), draw_width_(static_cast<unsigned>(-1)), has_value_(true),
-                    unknown_(false), max_(100), value_(0)
-			{}
-
 			void trigger::attached(widget_reference wd, graph_reference graph)
 			{
 				widget_	= &wd;
@@ -112,8 +107,9 @@ namespace nana
 			void trigger::_m_draw_box(graph_reference graph)
 			{
 				rectangle r = graph.size();
-				graph.shadow_rectangle(r, color::button_face_shadow_end, color::button_face_shadow_start, true);
-				graph.rectangle_line(r, 0x808080, 0x808080, 0xFFFFFF, 0xFFFFFF);
+				graph.gradual_rectangle(r, colors::button_face_shadow_end, colors::button_face_shadow_start, true);
+				::nana::expr_color lt{ 0x80, 0x80, 0x80 }, rb{colors::white};
+				graph.frame_rectangle(r, lt, lt, rb, rb);
 			}

 			void trigger::_m_draw_progress(graph_reference graph)
@@ -124,7 +120,7 @@ namespace nana
 				if(false == unknown_)
 				{
 					if(draw_width_)
-						graph.shadow_rectangle(border, border, draw_width_, height, 0x6FFFA8, 0x107515, true);
+						graph.gradual_rectangle({ static_cast<int>(border), static_cast<int>(border), draw_width_, height }, { 0x6F, 0xFF, 0xA8 }, { 0x10, 0x75, 0x15 }, true);
 				}
 				else
 				{
@@ -134,7 +130,7 @@ namespace nana
 					int right = (value_ >= width - 1 + border? width - 1 + border: value_);

 					if(right >= left)
-						graph.shadow_rectangle(left, border, right - left + 1, height, 0x6FFFA8, 0x107515, true);
+						graph.gradual_rectangle({ left, static_cast<int>(border), static_cast<unsigned>(right - left + 1), height }, { 0x6F, 0xFF, 0xA8 }, { 0x10, 0x75, 0x15 }, true);

 					if(value_ >= width + block)	value_ = 0;
 				}
--- a/source/gui/widgets/scroll.cpp
+++ b/source/gui/widgets/scroll.cpp
@@ -1,6 +1,7 @@
 /*
 *	A Scroll Implementation
- *	Copyright(C) 2003-2013 Jinhao(cnjinhao@hotmail.com)
+ *	Nana C++ Library(http://www.nanapro.org)
+ *	Copyright(C) 2003-2014 Jinhao(cnjinhao@hotmail.com)
 *
 *	Distributed under the Boost Software License, Version 1.0. 
 *	(See accompanying file LICENSE_1_0.txt or copy at 
@@ -139,31 +140,26 @@ namespace nana

 				_m_background(graph);

-				unsigned width, height;
-				int x, y;
+				::nana::rectangle r(graph.size());
 				if(vertical_)
 				{
-					x = 0;
-					y = graph.height() - fixedsize;
-					width = graph.width();
-					height = fixedsize;
+					r.y = r.height - fixedsize;
+					r.height = fixedsize;
 				}
 				else
 				{
-					x = graph.width() - fixedsize;
-					y = 0;
-					width = fixedsize;
-					height = graph.height();
+					r.x = r.width - fixedsize;
+					r.width = fixedsize;
 				}

 				int state = ((_m_check() == false || what == buttons::none) ? states::none : states::highlight);
 				int moused_state = (_m_check() ? (metrics_.pressed ? states::selected : states::actived) : states::none);

 				//draw first
-				_m_draw_button(graph, 0, 0, width, height, buttons::first, (buttons::first == what ? moused_state : state));
+				_m_draw_button(graph, { 0, 0, r.width, r.height }, buttons::first, (buttons::first == what ? moused_state : state));

 				//draw second
-				_m_draw_button(graph, x, y, width, height, buttons::second, (buttons::second == what ? moused_state : state));
+				_m_draw_button(graph, r, buttons::second, (buttons::second == what ? moused_state : state));

 				//draw scroll
 				_m_draw_scroll(graph, (buttons::scroll == what ? moused_state : states::highlight));
@@ -172,7 +168,7 @@ namespace nana
 		//private:
 			void drawer::_m_background(graph_reference graph)
 			{
-				graph.rectangle(0xF0F0F0, true);
+				graph.rectangle(true, {0xf0, 0xf0, 0xf0});

 				if(metrics_.pressed && _m_check())
 				{
@@ -193,45 +189,44 @@ namespace nana
 						return;

 					if(width && height)
-						graph.rectangle(x, y, width, height, 0xDCDCDC, true);
+						graph.rectangle({ x, y, width, height }, true, {0xDC, 0xDC, 0xDC});
 				}
 			}

-			void drawer::_m_button_frame(graph_reference graph, int x, int y, unsigned width, unsigned height, int state)
+			void drawer::_m_button_frame(graph_reference graph, rectangle r, int state)
 			{
 				if(state)
 				{
-					unsigned color = 0x979797; //highlight
+					::nana::expr_color clr{0x97, 0x97, 0x97}; //highlight
 					switch(state)
 					{
 					case states::actived:
-						color = 0x86D5FD; break;
+						clr.from_rgb(0x86, 0xD5, 0xFD); break;
 					case states::selected:
-						color = 0x3C7FB1; break;
+						clr.from_rgb(0x3C, 0x7F, 0xB1); break;
 					}
 					
-					graph.rectangle(rectangle(x, y, width, height), color, false);
+					graph.rectangle(r, false, clr);

-					unsigned color_x = graph.mix(color, 0xFFFFFF, 0.5);
+					graph.set_color(clr.blend(colors::white, 0.5));
+					//unsigned color_x = graph.mix(color, 0xFFFFFF, 0.5);	//deprecated

-					x += 2;
-					y += 2;
-					width -= 4;
-					height -= 4;
+					r.pare_off(2);

 					if(vertical_)
 					{
-						unsigned half = width / 2;
-						graph.rectangle(x + (width - half), y, half, height, color_x, true);
-						width -= half;
+						unsigned half = r.width / 2;
+						graph.rectangle({ r.x + static_cast<int>(r.width - half), r.y, half, r.height }, true);
+						r.width -= half;
 					}
 					else
 					{
-						unsigned half = height / 2;
-						graph.rectangle(x, y + height - half, width, half, color_x, true);
-						height -= half;
+						unsigned half = r.height / 2;
+						graph.rectangle({r.x, r.y + static_cast<int>(r.height - half), r.width, half}, true);
+						r.height -= half;
 					}
-					graph.shadow_rectangle(x, y, width, height, 0xFFFFFF, color_x, !vertical_);
+					//graph.shadow_rectangle(x, y, width, height, 0xFFFFFF, color_x, !vertical_);
+					graph.gradual_rectangle(r, colors::white, clr, !vertical_);
 				}
 			}

@@ -275,34 +270,27 @@ namespace nana
 			{
 				if(_m_check())
 				{
-					int x, y;
-					unsigned width, height;
+					::nana::rectangle r(graph.size());

 					if(vertical_)
 					{
-						x = 0;
-						y = fixedsize + metrics_.scroll_pos;
-
-						width = graph.width();
-						height = static_cast<unsigned>(metrics_.scroll_length);
+						r.y = fixedsize + metrics_.scroll_pos;
+						r.height = static_cast<unsigned>(metrics_.scroll_length);
 					}
 					else
 					{
-						x = fixedsize + metrics_.scroll_pos;
-						y = 0;
-
-						width = static_cast<unsigned>(metrics_.scroll_length);
-						height = graph.height();						
+						r.x = fixedsize + metrics_.scroll_pos;
+						r.width = static_cast<unsigned>(metrics_.scroll_length);					
 					}

-					_m_button_frame(graph, x, y, width, height, state);
+					_m_button_frame(graph, r, state);
 				}
 			}

-			void drawer::_m_draw_button(graph_reference graph, int x, int y, unsigned width, unsigned height, buttons what, int state)
+			void drawer::_m_draw_button(graph_reference graph, rectangle r, buttons what, int state)
 			{
 				if(_m_check())
-					_m_button_frame(graph, x, y, width, height, state);
+					_m_button_frame(graph, r, state);
 				
 				using namespace nana::paint::gadget;

@@ -314,12 +302,12 @@ namespace nana
 					{
 						if(vertical_)
 						{
-							y = static_cast<int>(sz.height - fixedsize);
+							r.y = static_cast<int>(sz.height - fixedsize);
 							dir = directions::to_south;
 						}
 						else
 						{
-							x = static_cast<int>(sz.width - fixedsize);
+							r.x = static_cast<int>(sz.width - fixedsize);
 							dir = directions::to_east;
 						}
 					}
@@ -327,11 +315,11 @@ namespace nana
 						dir = vertical_ ? directions::to_north : directions::to_west;

 					if(vertical_)
-						x = (static_cast<int>(sz.width) - 16) / 2;
+						r.x = (static_cast<int>(sz.width) - 16) / 2;
 					else
-						y = (static_cast<int>(sz.height) - 16) / 2;
+						r.y = (static_cast<int>(sz.height) - 16) / 2;
 					
-					arrow_16_pixels(graph, x, y, _m_check() ? 0x0 : 0x808080, (states::none == state ? 0 : 1), dir);
+					arrow_16_pixels(graph, r.x, r.y, (_m_check() ? expr_color(colors::black) : expr_color(0x80, 0x80, 0x80)), (states::none == state ? 0 : 1), dir);
 				}
 			}
 		//end class drawer
--- a/source/gui/widgets/skeletons/text_editor.cpp
+++ b/source/gui/widgets/skeletons/text_editor.cpp
@@ -248,7 +248,7 @@ namespace nana{	namespace widgets
 			virtual std::size_t take_lines(std::size_t pos) const = 0;

 			virtual void update_line(std::size_t textline, std::size_t secondary_before) = 0;
-			virtual void render(nana::color_t fgcolor) = 0;
+			virtual void render(const ::nana::expr_color& fgcolor) = 0;
 			virtual	nana::point		caret_to_screen(upoint) = 0;
 			virtual nana::upoint	screen_to_caret(point scrpos) = 0;
 			virtual bool move_caret_ns(bool to_north) = 0;
@@ -282,11 +282,11 @@ namespace nana{	namespace widgets
 			void update_line(std::size_t textline, std::size_t secondary_before) override
 			{
 				int top = editor_._m_text_top_base() + static_cast<int>(editor_.line_height() * (textline - editor_.points_.offset.y));
-				editor_.graph_.rectangle(editor_.text_area_.area.x, top, editor_.text_area_.area.width, editor_.line_height(), API::background(editor_.window_), true);
-				editor_._m_draw_string(top, API::foreground(editor_.window_), nana::upoint(0, editor_.points_.caret.y), editor_.textbase_.getline(textline), true);
+				editor_.graph_.rectangle({ editor_.text_area_.area.x, top, editor_.text_area_.area.width, editor_.line_height() }, true, API::bgcolor(editor_.window_));
+				editor_._m_draw_string(top, API::fgcolor(editor_.window_), nana::upoint(0, editor_.points_.caret.y), editor_.textbase_.getline(textline), true);
 			}

-			void render(nana::color_t fgcolor) override
+			void render(const ::nana::expr_color& fgcolor) override
 			{
 				auto & points = editor_.points_;

@@ -685,9 +685,9 @@ namespace nana{	namespace widgets
 					int top = caret_to_screen(upoint{ 0, static_cast<unsigned>(textline) }).y;

 					const unsigned pixels = editor_.line_height();
-					editor_.graph_.rectangle(editor_.text_area_.area.x, top, editor_.width_pixels(), static_cast<unsigned>(pixels * secondary_before), API::background(editor_.window_), true);
+					editor_.graph_.rectangle({ editor_.text_area_.area.x, top, editor_.width_pixels(), static_cast<unsigned>(pixels * secondary_before) }, true, API::bgcolor(editor_.window_));

-					auto fgcolor = API::foreground(editor_.window_);
+					auto fgcolor = API::fgcolor(editor_.window_);
 					auto text_ptr = editor_.textbase_.getline(textline).data();

 					for (std::size_t pos = 0; pos < secondary_before; ++pos, top+=pixels)
@@ -700,7 +700,7 @@ namespace nana{	namespace widgets
 					editor_.render(API::is_focus_window(editor_.window_));
 			}

-			void render(nana::color_t fgcolor) override
+			void render(const ::nana::expr_color& fgcolor) override
 			{
 				std::size_t scrlines = editor_.screen_lines();

@@ -1154,8 +1154,8 @@ namespace nana{	namespace widgets
 			select_.dragged = false;

 			API::create_caret(wd, 1, line_height());
-			API::background(wd, 0xFFFFFF);
-			API::foreground(wd, 0x000000);
+			API::bgcolor(wd, colors::white);
+			API::fgcolor(wd, colors::black);
 		}

 		text_editor::~text_editor()
@@ -1243,7 +1243,7 @@ namespace nana{	namespace widgets
 			return false;
 		}

-		void text_editor::border_renderer(std::function<void(nana::paint::graphics&, nana::color_t)> f)
+		void text_editor::border_renderer(std::function<void(nana::paint::graphics&, const ::nana::expr_color&)> f)
 		{
 			text_area_.border_renderer = f;
 		}
@@ -1650,23 +1650,23 @@ namespace nana{	namespace widgets
 		{
 			if(text_area_.vscroll && text_area_.hscroll)
 			{
-				graph_.rectangle( text_area_.area.x + static_cast<int>(text_area_.area.width - text_area_.vscroll),
-									text_area_.area.y + static_cast<int>(text_area_.area.height - text_area_.hscroll),
-									text_area_.vscroll, text_area_.hscroll, nana::color::button_face, true);
+				graph_.rectangle({ text_area_.area.right() - static_cast<int>(text_area_.vscroll), text_area_.area.bottom() - static_cast<int>(text_area_.hscroll), text_area_.vscroll, text_area_.hscroll },
+								true, colors::button_face);
 			}
 		}

 		void text_editor::render(bool has_focus)
 		{
-			const nana::color_t bgcolor = _m_bgcolor();
+			const auto bgcolor = _m_bgcolor();

-			nana::color_t fgcolor = API::foreground(window_);
+			auto fgcolor = API::fgcolor(window_);
 			if (!API::window_enabled(window_))
-				fgcolor = nana::paint::graphics::mix(bgcolor, fgcolor, 0.5);
+				fgcolor.blend(bgcolor, 0.5);
+				//fgcolor = nana::paint::graphics::mix(bgcolor, fgcolor, 0.5);	//deprecated

 			//Draw background
 			if(attributes_.enable_background)
-				graph_.rectangle(text_area_.area, bgcolor, true);
+				graph_.rectangle(text_area_.area, true, bgcolor);

 			if(ext_renderer_.background)
 				ext_renderer_.background(graph_, text_area_.area, bgcolor);
@@ -2040,9 +2040,9 @@ namespace nana{	namespace widgets
 			return false;
 		}

-		nana::color_t text_editor::_m_bgcolor() const
+		::nana::expr_color text_editor::_m_bgcolor() const
 		{
-			return (!API::window_enabled(window_) ? 0xE0E0E0 : API::background(window_));
+			return (!API::window_enabled(window_) ? expr_color{ 0xE0, 0xE0, 0xE0 } : API::bgcolor(window_));
 		}

 		bool text_editor::_m_scroll_text(bool vert)
@@ -2502,10 +2502,10 @@ namespace nana{	namespace widgets

 		void text_editor::_m_draw_tip_string() const
 		{
-			graph_.string(text_area_.area.x - points_.offset.x, text_area_.area.y, 0x787878, attributes_.tip_string);
+			graph_.string({ text_area_.area.x - points_.offset.x, text_area_.area.y }, attributes_.tip_string, {0x78, 0x78, 0x78});
 		}

-		void text_editor::_m_draw_string(int top, nana::color_t color, const nana::upoint& str_pos, const nana::string& linestr, bool if_mask) const
+		void text_editor::_m_draw_string(int top, const ::nana::expr_color& clr, const nana::upoint& str_pos, const nana::string& linestr, bool if_mask) const
 		{
 			int x = text_area_.area.x - points_.offset.x;
 			int xend = text_area_.area.x + static_cast<int>(text_area_.area.width);
@@ -2514,7 +2514,7 @@ namespace nana{	namespace widgets
 			{
 				nana::string maskstr;
 				maskstr.append(linestr.size(), mask_char_);
-				graph_.string(x, top, color, maskstr);
+				graph_.string({ x, top }, maskstr, clr);
 				return;
 			}

@@ -2528,6 +2528,8 @@ namespace nana{	namespace widgets

 			//The line of text is in the range of selection
 			nana::upoint a, b;
+			graph_.set_text_color(clr);
+			graph_.set_color({ 0x33, 0x99, 0xFF });

 			//The text is not selected or the whole line text is selected
 			if ((!_m_get_sort_select_points(a, b)) || (select_.a.y != str_pos.y && select_.b.y != str_pos.y))
@@ -2542,27 +2544,30 @@ namespace nana{	namespace widgets
 					{
 						if (selected)
 						{
-							color = 0xFFFFFF;
-							graph_.rectangle(x, top, str_w, line_h_pixels, 0x3399FF, true);
+							//color = 0xFFFFFF;	//deprecated
+							graph_.set_text_color(colors::white);
+							graph_.rectangle({ x, top, str_w, line_h_pixels }, true);
 						}

-						graph_.string(x, top, color, ent.begin, len);
+						graph_.string({x, top}, ent.begin, len);
 					}
 					x += static_cast<int>(str_w);
 				}
 				if (selected)
-					graph_.rectangle(x, top, whitespace_w, line_h_pixels, 0x3399FF, true);
+					graph_.rectangle({ x, top, whitespace_w, line_h_pixels }, true);
 			}
 			else
 			{
-				auto rtl_string = [this,line_h_pixels](point strpos, nana::color_t color, const nana::char_t* str, std::size_t len, std::size_t str_px, unsigned glyph_front, unsigned glyph_selected){
-					graph_.string(strpos.x, strpos.y, color, str, len);
+				auto rtl_string = [this, line_h_pixels](point strpos, const nana::char_t* str, std::size_t len, std::size_t str_px, unsigned glyph_front, unsigned glyph_selected){
+					graph_.string(strpos, str, len);
 					paint::graphics graph(glyph_selected, line_h_pixels);
 					graph.typeface(this->graph_.typeface());
-					graph.rectangle(0x3399FF, true);
+					graph.rectangle(true, { 0x33, 0x99, 0xFF });

 					int sel_xpos = static_cast<int>(str_px - (glyph_front + glyph_selected));
-					graph.string(-sel_xpos, 0, 0xFFFFFF, str, len);
+
+					graph.set_text_color(colors::white);
+					graph.string({-sel_xpos, 0}, str, len);
 					graph_.bitblt(nana::rectangle(strpos.x + sel_xpos, strpos.y, glyph_selected, line_h_pixels), graph);
 				};

@@ -2580,13 +2585,15 @@ namespace nana{	namespace widgets
 							if (pos + len <= a.x || pos >= b.x)
 							{
 								//NOT selected
-								graph_.string(x, top, color, ent.begin, len);
+								graph_.set_text_color(clr);
+								graph_.string({ x, top }, ent.begin, len);
 							}
 							else if (a.x <= pos && pos + len <= b.x)
 							{
 								//Whole selected
-								graph_.rectangle(x, top, str_w, line_h_pixels, 0x3399FF, true);
-								graph_.string(x, top, 0xFFFFFF, ent.begin, len);
+								graph_.rectangle({ x, top, str_w, line_h_pixels }, true);
+								graph_.set_text_color(colors::white);
+								graph_.string({x, top}, ent.begin, len);
 							}
 							else if (pos <= a.x && a.x < pos + len)
 							{	//Partial selected
@@ -2598,19 +2605,22 @@ namespace nana{	namespace widgets
 									auto head_w = std::accumulate(pxbuf, pxbuf + (a.x - pos), unsigned());
 									auto sel_w = std::accumulate(pxbuf + (a.x - pos), pxbuf + (endpos - pos), unsigned());

+									graph_.set_text_color(clr);
 									if (_m_is_right_text(ent))
 									{	//RTL
-										rtl_string(point{x, top}, color, ent.begin, len, str_w, head_w, sel_w);
+										rtl_string(point{x, top}, ent.begin, len, str_w, head_w, sel_w);
 									}
 									else
 									{	//LTR
-										graph_.string(x, top, color, ent.begin, a.x - pos);
+										graph_.string({ x, top }, ent.begin, a.x - pos);

-										graph_.rectangle(x + head_w, top, sel_w, line_h_pixels, 0x3399FF, true);
-										graph_.string(x + head_w, top, 0xFFFFFF, ent.begin + (a.x - pos), endpos - a.x);
+										graph_.rectangle({x + static_cast<int>(head_w), top, sel_w, line_h_pixels}, true);
+
+										graph_.set_text_color(colors::white);
+										graph_.string({ x + static_cast<int>(head_w), top }, ent.begin + (a.x - pos), endpos - a.x);

 										if (static_cast<size_t>(endpos) < pos + len)
-											graph_.string(x + static_cast<int>(head_w + sel_w), top, color, ent.begin + (endpos - pos), pos + len - endpos);
+											graph_.string({x + static_cast<int>(head_w + sel_w), top}, ent.begin + (endpos - pos), pos + len - endpos);
 									}
 								}
 							}
@@ -2618,15 +2628,20 @@ namespace nana{	namespace widgets
 							{	//Partial selected
 								int endpos = b.x;
 								unsigned sel_w = graph_.glyph_extent_size(ent.begin, len, 0, endpos - pos).width;
+
 								if (_m_is_right_text(ent))
 								{	//RTL
-									rtl_string(point{x, top}, color, ent.begin, len, str_w, 0, sel_w);
+									graph_.set_text_color(clr);
+									rtl_string({x, top}, ent.begin, len, str_w, 0, sel_w);
 								}
 								else
 								{	//LTR
-									graph_.rectangle(x, top, sel_w, line_h_pixels, 0x3399FF, true);
-									graph_.string(x, top, 0xFFFFFF, ent.begin, endpos - pos);
-									graph_.string(x + sel_w, top, color, ent.begin + (endpos - pos), pos + len - endpos);
+									graph_.rectangle({ x, top, sel_w, line_h_pixels }, true);
+
+									graph_.set_text_color(colors::white);
+									graph_.string({ x, top }, ent.begin, endpos - pos);
+									graph_.set_text_color(clr);
+									graph_.string({x + static_cast<int>(sel_w), top}, ent.begin + (endpos - pos), pos + len - endpos);
 								}
 							}
 						}
@@ -2641,30 +2656,33 @@ namespace nana{	namespace widgets
 						unsigned str_w = graph_.text_extent_size(ent.begin, len).width;
 						if ((x + static_cast<int>(str_w) > text_area_.area.x) && (x < xend))
 						{
+							graph_.set_text_color(clr);
 							std::size_t pos = ent.begin - strbeg + str_pos.x;
 							if (pos + len <= a.x)
 							{
 								//Not selected
-								graph_.string(x, top, color, ent.begin, len);
+								graph_.string({x, top}, ent.begin, len);
 							}
 							else if (a.x < pos)
 							{
 								//Whole selected
-								graph_.rectangle(x, top, str_w, line_h_pixels, 0x3399FF, true);
-								graph_.string(x, top, 0xFFFFFF, ent.begin, len);
+								graph_.rectangle({ x, top, str_w, line_h_pixels }, true, { 0x33, 0x99, 0xFF });
+								graph_.set_text_color(colors::white);
+								graph_.string({x, top}, ent.begin, len);
 							}
 							else
 							{
 								unsigned head_w = graph_.glyph_extent_size(ent.begin, len, 0, a.x - pos).width;
 								if (_m_is_right_text(ent))
 								{	//RTL
-									rtl_string(point{x, top}, color, ent.begin, len, str_w, head_w, str_w - head_w);
+									rtl_string(point{x, top}, ent.begin, len, str_w, head_w, str_w - head_w);
 								}
 								else
 								{	//LTR
-									graph_.string(x, top, color, ent.begin, a.x - pos);
-									graph_.rectangle(x + head_w, top, str_w - head_w, line_h_pixels, 0x3399FF, true);
-									graph_.string(x + head_w, top, 0xFFFFFF, ent.begin + a.x - pos, len - (a.x - pos));
+									graph_.string({ x, top }, ent.begin, a.x - pos);
+									graph_.rectangle({ x + static_cast<int>(head_w), top, str_w - head_w, line_h_pixels }, true);
+									graph_.set_text_color(colors::white);
+									graph_.string({ x + static_cast<int>(head_w), top }, ent.begin + a.x - pos, len - (a.x - pos));
 								}
 							}
 						}
@@ -2672,7 +2690,7 @@ namespace nana{	namespace widgets
 						x += static_cast<int>(str_w);
 					}
 					if (a.y <= static_cast<unsigned>(str_pos.y) && static_cast<unsigned>(str_pos.y) < b.y)
-						graph_.rectangle(x, top, whitespace_w, line_h_pixels, 0x3399FF, true);
+						graph_.rectangle({ x, top, whitespace_w, line_h_pixels }, true);
 				}
 				else if (b.y == str_pos.y)
 				{
@@ -2683,28 +2701,32 @@ namespace nana{	namespace widgets
 						if ((x + static_cast<int>(str_w) > text_area_.area.x) && (x < xend))
 						{
 							std::size_t pos = ent.begin - strbeg + str_pos.x;
-
+							graph_.set_text_color(clr);
 							if (pos + len <= b.x)
 							{
-								graph_.rectangle(x, top, str_w, line_h_pixels, 0x3399FF, true);
-								graph_.string(x, top, 0xFFFFFF, ent.begin, len);
+								graph_.rectangle({ x, top, str_w, line_h_pixels }, true);
+								graph_.set_text_color(colors::white);
+								graph_.string({ x, top }, ent.begin, len);
 							}
 							else if (pos <= b.x && b.x < pos + len)
 							{
 								unsigned sel_w = graph_.glyph_extent_size(ent.begin, len, 0, b.x - pos).width;
 								if (_m_is_right_text(ent))
 								{	//RTL
-									rtl_string(point{x, top}, color, ent.begin, len,str_w, 0, sel_w);
+									rtl_string(point{ x, top }, ent.begin, len, str_w, 0, sel_w);
 								}
 								else
 								{
-									graph_.rectangle(x, top, sel_w, line_h_pixels, 0x3399FF, true);
-									graph_.string(x, top, 0xFFFFFF, ent.begin, b.x - pos);
-									graph_.string(x + sel_w, top, color, ent.begin + b.x - pos, len - (b.x - pos));
+									graph_.rectangle({ x, top, sel_w, line_h_pixels }, true);
+
+									graph_.set_text_color(colors::white);
+									graph_.string({ x, top }, ent.begin, b.x - pos);
+									graph_.set_text_color(clr);
+									graph_.string({ x + static_cast<int>(sel_w), top }, ent.begin + b.x - pos, len - (b.x - pos));
 								}
 							}
 							else
-								graph_.string(x, top, color, ent.begin, len);
+								graph_.string({x, top}, ent.begin, len);
 						}
 						x += static_cast<int>(str_w);
 					}
--- a/source/gui/widgets/slider.cpp
+++ b/source/gui/widgets/slider.cpp
@@ -8,50 +8,54 @@ namespace nana
 		namespace slider
 		{

-			provider::~provider(){}
-
-			renderer::~renderer(){}
-
 			class interior_renderer
 				: public renderer
 			{
 			private:
 				virtual void background(window wd, graph_reference graph, bool isglass)
 				{
-					if(isglass == false)
-						graph.rectangle(API::background(wd), true);
+					if(!isglass)
+						graph.rectangle(true, API::bgcolor(wd));
 				}

 				virtual void bar(window, graph_reference graph, const bar_t& bi)
 				{
 					//draw border
-					const nana::color_t dark = 0x83909F;
-					const nana::color_t gray = 0x9DAEC2;
+					::nana::expr_color lt(0x83, 0x90, 0x97), rb(0x9d,0xae,0xc2);
+					graph.frame_rectangle(bi.r, lt, lt, rb, rb);
+					//const nana::color_t dark = 0x83909F;	//deprecated
+					//const nana::color_t gray = 0x9DAEC2;

-					graph.rectangle_line(bi.r, 
-							dark, dark, gray, gray);
+					//graph.rectangle_line(bi.r, 
+					//		dark, dark, gray, gray);	//deprecated
 				}

 				virtual void adorn(window, graph_reference graph, const adorn_t& ad)
 				{
-					int len = ad.bound.y - ad.bound.x;
-					const unsigned upperblock = ad.block - ad.block / 2;
+					auto len = static_cast<const unsigned>(ad.bound.y - ad.bound.x);
+					const auto upperblock = ad.block - ad.block / 2;
+
+					::nana::expr_color clr_from(0x84, 0xc5, 0xff), clr_trans(0x0f, 0x41, 0xcd), clr_to(0x6e, 0x96, 0xff);
 					if(ad.horizontal)
 					{
-						graph.shadow_rectangle(ad.bound.x, ad.fixedpos, len, upperblock, 0x84C5FF, 0x0F41CD, true);
-						graph.shadow_rectangle(ad.bound.x, ad.fixedpos + upperblock, len, ad.block - upperblock, 0x0F41CD, 0x6E96FF, true);
+						//graph.shadow_rectangle(ad.bound.x, ad.fixedpos, len, upperblock, 0x84C5FF, 0x0F41CD, true);	//deprecated
+						//graph.shadow_rectangle(ad.bound.x, ad.fixedpos + upperblock, len, ad.block - upperblock, 0x0F41CD, 0x6E96FF, true);
+						graph.gradual_rectangle({ ad.bound.x, ad.fixedpos, len, upperblock }, clr_from, clr_trans, true);
+						graph.gradual_rectangle({ ad.bound.x, ad.fixedpos + static_cast<int>(upperblock), len, ad.block - upperblock }, clr_trans, clr_to, true);
 					}
 					else
 					{
-						graph.shadow_rectangle(ad.fixedpos, ad.bound.x, upperblock, len, 0x84C5FF, 0x0F41CD, false);
-						graph.shadow_rectangle(ad.fixedpos + upperblock, ad.bound.x, ad.block - upperblock, len, 0x0F41CD, 0x6E96FF, false);
+						//graph.shadow_rectangle(ad.fixedpos, ad.bound.x, upperblock, len, 0x84C5FF, 0x0F41CD, false);	//deprecatd
+						//graph.shadow_rectangle(ad.fixedpos + upperblock, ad.bound.x, ad.block - upperblock, len, 0x0F41CD, 0x6E96FF, false);
+						graph.gradual_rectangle({ ad.fixedpos, ad.bound.x, upperblock, len }, clr_from, clr_trans, false);	//deprecatd
+						graph.gradual_rectangle({ ad.fixedpos + static_cast<int>(upperblock), ad.bound.x, ad.block - upperblock, len }, clr_trans, clr_to, false);
 					}
 				}

 				virtual void adorn_textbox(window, graph_reference graph, const nana::string& str, const nana::rectangle & r)
 				{
-					graph.rectangle(r, 0xFFFFFF, false);
-					graph.string(r.x + 2, r.y + 1, 0xFFFFFF, str);
+					graph.rectangle(r, false, colors::white);
+					graph.string({ r.x + 2, r.y + 1 }, str, colors::white);
 				}

 				virtual void slider(window, graph_reference graph, const slider_t& s)
@@ -67,7 +71,7 @@ namespace nana
 						r.y = s.pos;
 						r.height = s.scale;
 					}
-					graph.round_rectangle(r, 3, 3, 0x0, true, 0xF0F0F0);
+					graph.round_rectangle(r, 3, 3, colors::black, true, {0xf0,0xf0,0xf0});
 				}
 			};

--- a/source/gui/widgets/tabbar.cpp
+++ b/source/gui/widgets/tabbar.cpp
@@ -20,55 +20,43 @@ namespace nana
 	{
 		namespace tabbar
 		{
-			event_agent_interface::~event_agent_interface()
-			{}
-
 			struct item_t
 			{
-				window relative;
+				window relative{nullptr};
 				paint::image img;
 				nana::string text;
 				any	value;

-				color_t bgcolor;
-				color_t fgcolor;
-
-				item_t()
-					:relative(nullptr), bgcolor(nana::null_color), fgcolor(nana::null_color)
-				{}
+				::nana::expr_color bgcolor;
+				::nana::expr_color fgcolor;
 			};

 			class def_renderer
 				: public item_renderer
 			{
-			public:
-				def_renderer()
-					: bgcolor_(0xFF000000)
-				{}
-
 			private:
-				virtual void background(graph_reference graph, const nana::rectangle& r, nana::color_t bgcolor)
+				virtual void background(graph_reference graph, const nana::rectangle& r, const ::nana::expr_color& bgcolor)
 				{
 					if(bgcolor_ != bgcolor)
 					{
 						bgcolor_ = bgcolor;
-						dark_bgcolor_ = nana::paint::graphics::mix(bgcolor, 0, 0.9);
-						blcolor_ = nana::paint::graphics::mix(bgcolor, 0, 0.5);
-						ilcolor_ = nana::paint::graphics::mix(bgcolor, 0xFFFFFF, 0.5);
+						dark_bgcolor_ = ::nana::expr_color{ colors::black }.blend(bgcolor, 0.1);
+						blcolor_ = ::nana::expr_color{ colors::black }.blend(bgcolor, 0.5);
+						ilcolor_ = ::nana::expr_color{ colors::white }.blend(bgcolor, 0.1);
 					}

-					graph.rectangle(bgcolor, true);
+					graph.rectangle(true, bgcolor);
 				}

 				virtual void item(graph_reference graph, const item_t& m, bool active, state_t sta)
 				{
 					//*
 					const nana::rectangle & r = m.r;
-					nana::color_t bgcolor;
-					nana::color_t blcolor;
-					nana::color_t dark_bgcolor;
+					expr_color bgcolor;
+					expr_color blcolor;
+					expr_color dark_bgcolor;

-					if(m.bgcolor == nana::null_color)
+					if(m.bgcolor.invisible())
 					{
 						bgcolor = bgcolor_;
 						blcolor = blcolor_;
@@ -77,80 +65,82 @@ namespace nana
 					else
 					{
 						bgcolor = m.bgcolor;
-						blcolor = graph.mix(m.bgcolor, 0, 0.5);
-						dark_bgcolor = nana::paint::graphics::mix(m.bgcolor, 0, 0.9);
+						blcolor = expr_color{ colors::black }.blend(m.bgcolor, 0.5);
+						//dark_bgcolor = nana::paint::graphics::mix(m.bgcolor, 0, 0.9); //deprecated
+						dark_bgcolor = expr_color{ colors::black }.blend(m.bgcolor, 0.1);
 					}

-					graph.round_rectangle(r.x, r.y, r.width, r.height + 2, 3, 3, blcolor, true, 0xFFFFFF);
+					auto round_r = r;
+					round_r.height += 2;
+					graph.round_rectangle(round_r, 3, 3, blcolor, true, colors::white);

-					nana::color_t beg = bgcolor;
-					nana::color_t end = dark_bgcolor;
+					auto beg = bgcolor;
+					auto end = dark_bgcolor;

 					if(active)
 					{
-						if(m.bgcolor == nana::null_color)
+						if (m.bgcolor.invisible())
 							beg = ilcolor_;
 						else
-							beg = nana::paint::graphics::mix(m.bgcolor, 0xFFFFFF, 0.5);
+							beg = expr_color{ m.bgcolor }.blend(colors::white, 0.5);
 						end = bgcolor;
 					}

-					if(sta == item_renderer::highlight)
-						beg = nana::paint::graphics::mix(beg, 0xFFFFFF, 0.5);
+					if (sta == item_renderer::highlight)
+						beg.blend(colors::white, 0.5);

-					graph.shadow_rectangle(r.x + 2, r.y + 2, r.width - 4, r.height - 2, beg,  end, true);
+					//graph.shadow_rectangle(r.x + 2, r.y + 2, r.width - 4, r.height - 2, beg,  end, true);	//deprecated
+					graph.gradual_rectangle(round_r.pare_off(2), beg, end, true);
 				}

 				virtual void add(graph_reference graph, const nana::rectangle& r, state_t sta)
 				{
 					int x = r.x + (static_cast<int>(r.width) - 14) / 2;
 					int y = r.y + (static_cast<int>(r.height) - 14) / 2;
-					nana::color_t color;
+					
+					::nana::expr_color clr;

 					switch(sta)
 					{
 					case item_renderer::highlight:
-						color = 0xFFFFFF; break;
+						clr = { colors::white }; break;
 					case item_renderer::press:
-						color = 0xA0A0A0; break;
+						clr = { 0xA0, 0xA0, 0xA0 }; break;
 					case item_renderer::disable:
-						color = 0x808080; break;
+						clr = { 0x80, 0x80, 0x80 }; break;
 					default:
-						color = 0xF0F0F0;
+						clr = { 0xF0, 0xF0, 0xF0 };
 					}
-					graph.rectangle(r, bgcolor_, true);
-					nana::paint::gadget::cross(graph, x, y, 14, 6, color);
+					graph.rectangle(r, true, bgcolor_);
+					nana::paint::gadget::cross(graph, x, y, 14, 6, clr);
 				}

 				virtual void close(graph_reference graph, const nana::rectangle& r, state_t sta)
 				{
-					nana::paint::gadget::close_16_pixels(graph, r.x + (r.width - 16) / 2, r.y + (r.height - 16) / 2, 1, 0x0);
-					if(sta == item_renderer::highlight)
-					{
-						graph.rectangle(r, 0xA0A0A0, false);
-					}
+					nana::paint::gadget::close_16_pixels(graph, r.x + (r.width - 16) / 2, r.y + (r.height - 16) / 2, 1, colors::black);
+					if(item_renderer::highlight == sta)
+						graph.rectangle(r, false, {0xa0, 0xa0, 0xa0});
 				}

 				virtual void close_fly(graph_reference graph, const nana::rectangle& r, bool active, state_t sta)
 				{
 					using namespace nana::paint;
-					nana::color_t color = (active ? 0x0 : 0x9299A4);
+					::nana::expr_color clr{ colors::black };

-					if(item_renderer::highlight == sta)
+					if (sta == item_renderer::highlight)
 					{
-						nana::color_t bgcolor = 0xCCD2DD;
-						graph.round_rectangle(r.x, r.y, r.width, r.height, 1, 1, 0x9DA3AB, false, 0);
+						::nana::expr_color bgcolor{ 0xCC, 0xD2, 0xDD };
+						::nana::expr_color rect_clr{0x9d, 0xa3, 0xab};
+						graph.round_rectangle(r, 1, 1, rect_clr, false, {});
 						nana::rectangle draw_r(r);
-						graph.rectangle(draw_r.pare_off(1), graph.mix(0x9DA3AB, bgcolor, 0.8), false);
-						graph.rectangle(draw_r.pare_off(1), graph.mix(0x9DA3AB, bgcolor, 0.4), false);
-						graph.rectangle(draw_r.pare_off(1), graph.mix(0x9DA3AB, bgcolor, 0.2), false);
-						color = 0x0;
+						graph.rectangle(draw_r.pare_off(1), false, ::nana::expr_color{ rect_clr }.blend(bgcolor, 0.8));
+						graph.rectangle(draw_r.pare_off(1), false, ::nana::expr_color{ rect_clr }.blend(bgcolor, 0.4));
+						graph.rectangle(draw_r.pare_off(1), false, ::nana::expr_color{ rect_clr }.blend(bgcolor, 0.2));
 					}
+					else if (!active)
+						clr = ::nana::expr_color{ 0x92, 0x99, 0xA4 };

-					int x = r.x - (16 - r.width) / 2;
-					int y = r.y - (16 - r.height) / 2;
-
-					gadget::close_16_pixels(graph, x, y, 1, color);
+					gadget::close_16_pixels(graph, r.x - (16 - r.width) / 2, r.y - (16 - r.height) / 2, 1, clr);
 				}

 				virtual void back(graph_reference graph, const nana::rectangle& r, state_t sta)
@@ -175,24 +165,23 @@ namespace nana
 				{
 					using namespace nana::paint::gadget;

-					nana::color_t fgcolor = 0x0;
+					::nana::expr_color fgcolor(colors::black);
 					int style = 1;
 					if(sta == item_renderer::disable)
 					{
 						style = 0;
-						fgcolor = 0x808080;
+						fgcolor = { 0x80, 0x80, 0x80 };
 					}
 					arrow_16_pixels(graph, r.x + (r.width - 16) / 2, r.y + (r.height - 16) / 2, fgcolor, style, dir);
-					if(sta == item_renderer::highlight)
-					{
-						graph.rectangle(r, 0xA0A0A0, false);
-					}
+
+					if(item_renderer::highlight == sta)
+						graph.rectangle(r, false, { 0xA0, 0xA0, 0xA0 });
 				}
 			private:
-				nana::color_t bgcolor_;
-				nana::color_t dark_bgcolor_;
-				nana::color_t blcolor_;
-				nana::color_t ilcolor_;
+				::nana::expr_color bgcolor_;
+				::nana::expr_color dark_bgcolor_;
+				::nana::expr_color blcolor_;
+				::nana::expr_color ilcolor_;
 			};

 			class toolbox
@@ -606,26 +595,16 @@ namespace nana
 					}
 				}

-				bool tab_color(std::size_t pos, bool is_bgcolor, nana::color_t color)
+				bool tab_color(std::size_t pos, bool is_bgcolor, const ::nana::expr_color& clr)
 				{
 					if(pos < list_.size())
 					{
 						auto & m = *iterator_at(pos);
-						if(is_bgcolor)
+						auto & m_clr = (is_bgcolor ? m.bgcolor : m.fgcolor);
+						if (m_clr != clr)
 						{
-							if(m.bgcolor != color)
-							{
-								m.bgcolor = color;
-								return true;
-							}
-						}
-						else
-						{
-							if(m.fgcolor != color)
-							{
-								m.fgcolor = color;
-								return true;
-							}
+							m_clr = clr;
+							return true;
 						}
 					}
 					return false;
@@ -959,15 +938,15 @@ namespace nana

 				void _m_render()
 				{
-					if(basis_.renderer == 0 || basis_.graph == 0) return;
-					nana::color_t bgcolor = API::background(basis_.wd);
+					if(!basis_.renderer || (nullptr == basis_.graph))
+						return;

-					item_renderer::item_t m;
-					m.r.width = basis_.graph->width();
-					m.r.height = basis_.graph->height();
+					auto bgcolor = API::bgcolor(basis_.wd);
+					auto fgcolor = API::fgcolor(basis_.wd);
+
+					item_renderer::item_t m = { basis_.graph->size() };

 					basis_.renderer->background(*basis_.graph, m.r, bgcolor);
-					nana::color_t fgcolor = API::foreground(basis_.wd);

 					//the max number of pixels of tabs.
 					int pixels = static_cast<int>(m.r.width - _m_toolbox_pixels());
@@ -1008,8 +987,10 @@ namespace nana
 							if(item.text.size())
 							{
 								nana::size ts = basis_.graph->text_extent_size(item.text);
+								basis_.graph->set_text_color(m.fgcolor.invisible() ? fgcolor : m.fgcolor);
 								nana::paint::text_renderer tr(*basis_.graph);
-								tr.render(m.r.x + 24, m.r.y + (m.r.height - ts.height) / 2, (m.fgcolor == nana::null_color ? fgcolor : m.fgcolor), item.text.c_str(), item.text.length(), basis_.item_pixels - 24 - 18, true);
+								tr.render({ m.r.x + 24, m.r.y + static_cast<int>(m.r.height - ts.height) / 2 },
+											item.text.c_str(), item.text.length(), basis_.item_pixels - 24 - 18, true);
 							}
 						}

@@ -1023,26 +1004,28 @@ namespace nana
 					if(_m_nextable())
 					{
 						int x = _m_itembar_right();
-						if(x > 0)
+						if (x > 0)
 						{
-							basis_.graph->line(x - 2, 0, x - 2, bottom, 0x808080);
-							basis_.graph->line(x - 1, 0, x - 1, bottom, 0xF0F0F0);
+							basis_.graph->line({ x - 2, 0 }, { x - 2, bottom }, { 0x80, 0x80, 0x80 });
+							basis_.graph->line({ x - 1, 0 }, { x - 1, bottom }, {0xf0, 0xf0, 0xf0});
 						}
 					}

+					basis_.graph->set_color({ 0x80, 0x80, 0x80 });
+
 					int right = static_cast<int>(basis_.graph->width());
 					int end = active_m.r.x + static_cast<int>(active_m.r.width);
 					if(0 < active_m.r.x && active_m.r.x < right)
-						basis_.graph->line(0, bottom, active_m.r.x, bottom, 0x808080);
+						basis_.graph->line({ 0, bottom }, { active_m.r.x, bottom });
 					if(0 <= end && end < right)
-						basis_.graph->line(end, bottom, right, bottom, 0x808080);
+						basis_.graph->line({ end, bottom }, { right, bottom });
 				}

-				void _m_render_toolbox(nana::color_t bgcolor)
+				void _m_render_toolbox(const ::nana::expr_color& bgcolor)
 				{
 					bool backable = (basis_.scroll_pixels != 0);
 					int xbase = _m_toolbox_pos();
-					basis_.graph->rectangle(xbase, 0, _m_toolbox_pixels(), basis_.graph->height(), bgcolor, true);
+					basis_.graph->rectangle({ xbase, 0, _m_toolbox_pixels(), basis_.graph->height() }, true, bgcolor);
 					for(int i = toolbox::ButtonAdd; i < toolbox::ButtonSize; ++i)
 					{
 						toolbox::button_t btn = static_cast<toolbox::button_t>(i);
@@ -1104,27 +1087,20 @@ namespace nana

 				struct basis_tag
 				{
-					window wd;
-					nana::paint::graphics * graph;
+					window wd{nullptr};
+					nana::paint::graphics * graph{nullptr};
 					pat::cloneable<item_renderer> renderer;
-					unsigned max_pixels;
-					unsigned min_pixels;
-					unsigned item_pixels;
-					unsigned scroll_pixels;
-					std::size_t active;
+					unsigned max_pixels{250};
+					unsigned min_pixels{100};
+					unsigned item_pixels{max_pixels};
+					unsigned scroll_pixels{0};
+					std::size_t active{npos};

-					basis_tag()
-						:	wd(nullptr), graph(nullptr),
-							renderer(def_renderer()),
-							max_pixels(250), min_pixels(100), item_pixels(max_pixels), scroll_pixels(0),
-							active(npos)
-					{
-					}
+					basis_tag():renderer{ def_renderer() }
+					{}
 				}basis_;
 			};

-			item_renderer::~item_renderer(){}
-
 			//class trigger
 				trigger::trigger()
 					: layouter_(new layouter)
@@ -1191,9 +1167,9 @@ namespace nana
 					layouter_->relate(i, wd);
 				}

-				void trigger::tab_color(std::size_t i, bool is_bgcolor, nana::color_t color)
+				void trigger::tab_color(std::size_t i, bool is_bgcolor, const ::nana::expr_color& clr)
 				{
-					if(layouter_->tab_color(i, is_bgcolor, color))
+					if(layouter_->tab_color(i, is_bgcolor, clr))
 						API::refresh_window(layouter_->widget_handle());
 				}

--- a/source/gui/widgets/textbox.cpp
+++ b/source/gui/widgets/textbox.cpp
@@ -59,8 +59,8 @@ namespace nana{	namespace drawerbase {

 			editor_ = new text_editor(wd, graph);
 			editor_->textbase().set_event_agent(evt_agent_.get());
-			editor_->border_renderer([this](graph_reference graph, nana::color_t color){
-				this->_m_draw_border(graph, color);
+			editor_->border_renderer([this](graph_reference graph, const ::nana::expr_color& clr){
+				this->_m_draw_border(graph, clr);
 			});

 			_m_text_area(graph.width(), graph.height());
@@ -177,13 +177,13 @@ namespace nana{	namespace drawerbase {
 			}
 		}

-		void drawer::_m_draw_border(graph_reference graph, nana::color_t bgcolor)
+		void drawer::_m_draw_border(graph_reference graph, const ::nana::expr_color& bgcolor)
 		{
 			if (!API::widget_borderless(widget_->handle()))
 			{
 				nana::rectangle r(graph.size());
-				graph.rectangle(r, (status_.has_focus ? 0x0595E2 : 0x999A9E), false);
-				graph.rectangle(r.pare_off(1), bgcolor, false);
+				graph.rectangle(r, false, (status_.has_focus ? ::nana::expr_color(0x05, 0x95, 0xE2) : ::nana::expr_color(0x99, 0x9A, 0x9E)));
+				graph.rectangle(r.pare_off(1), false, bgcolor);
 			}
 		}
 	//end class drawer
--- a/source/gui/widgets/toolbar.cpp
+++ b/source/gui/widgets/toolbar.cpp
@@ -29,45 +29,43 @@ namespace nana

 			struct item_type
 			{
-				enum{TypeButton, TypeContainer};
+				enum kind{ button, container};

 				typedef std::size_t size_type;

 				nana::string text;
 				nana::paint::image image;
-				unsigned	pixels;
+				unsigned	pixels{0};
 				nana::size	textsize;
-				bool		enable;
-				window other;
+				bool		enable{true};
+				window other{nullptr};

-				int type;
+				kind type;
 				std::function<void(size_type, size_type)> answer;
 				std::vector<listitem> children;

-				item_type(const nana::string& text, const nana::paint::image& img, int type)
-					:text(text), image(img), pixels(0), enable(true), other(nullptr), type(type)
+				item_type(const nana::string& text, const nana::paint::image& img, kind type)
+					:text(text), image(img), type(type)
 				{}
 			};

 			class container
 			{
-				container(const container&);
-				container& operator=(const container&);
+				container(const container&) = delete;
+				container& operator=(const container&) = delete;
 			public:
 				typedef std::vector<item_type*>::size_type size_type;
 				typedef std::vector<item_type*>::iterator iterator;
 				typedef std::vector<item_type*>::const_iterator const_iterator;

-				container()
-				{}
-
+				container() = default;
 				~container()
 				{
 					for(auto ptr : cont_)
 						delete ptr;
 				}

-				void insert(size_type pos, const nana::string& text, const nana::paint::image& img, int type)
+				void insert(size_type pos, const nana::string& text, const nana::paint::image& img, item_type::kind type)
 				{
 					item_type* m = new item_type(text, img, type);

@@ -79,12 +77,12 @@ namespace nana

 				void push_back(const nana::string& text, const nana::paint::image& img)
 				{
-					insert(cont_.size(), text, img, item_type::TypeButton);
+					insert(cont_.size(), text, img, item_type::kind::button);
 				}

 				void push_back(const nana::string& text)
 				{
-					insert(cont_.size(), text, nana::paint::image(), item_type::TypeButton);
+					insert(cont_.size(), text, nana::paint::image(), item_type::kind::button);
 				}

 				void insert(size_type pos)
@@ -142,22 +140,22 @@ namespace nana
 				enum class state_t{normal, highlighted, selected};
 				const static unsigned extra_size = 6;

-				item_renderer(nana::paint::graphics& graph, bool textout, unsigned scale, nana::color_t color)
-					:graph(graph), textout(textout), scale(scale), color(color)
+				item_renderer(nana::paint::graphics& graph, bool textout, unsigned scale, const ::nana::expr_color& bgcolor)
+					:graph(graph), textout(textout), scale(scale), bgcolor(bgcolor)
 				{}

 				void operator()(int x, int y, unsigned width, unsigned height, item_type& item, state_t state)
 				{
 					//draw background
 					if(state != state_t::normal)
-						graph.rectangle(x, y, width, height, 0x3399FF, false);
+						graph.rectangle({ x, y, width, height }, false, { 0x33, 0x99, 0xFF });
 					switch(state)
 					{
 					case state_t::highlighted:
-						graph.shadow_rectangle(x + 1, y + 1, width - 2, height - 2, color, /*graph.mix(color, 0xC0DDFC, 0.5)*/ 0xC0DDFC, true);
+						graph.gradual_rectangle({ x + 1, y + 1, width - 2, height - 2 }, bgcolor, { 0xC0, 0xDD, 0xFC }, true);
 						break;
 					case state_t::selected:
-						graph.shadow_rectangle(x + 1, y + 1, width - 2, height - 2, color, /*graph.mix(color, 0x99CCFF, 0.5)*/0x99CCFF, true);
+						graph.gradual_rectangle({ x + 1, y + 1, width - 2, height - 2 }, bgcolor, { 0x99, 0xCC, 0xFF }, true);
 					default:	break;
 					}

@@ -180,7 +178,7 @@ namespace nana
 							gh.paste(graph, pos.x, pos.y);
 						}
 						else if(state == state_t::normal)
-							graph.blend(nana::rectangle(pos, size), graph.mix(color, 0xC0DDFC, 0.5), 0.25);
+							graph.blend(nana::rectangle(pos, size), ::nana::expr_color(0xc0, 0xdd, 0xfc).blend(bgcolor, 0.5), 0.25);

 						x += scale;
 						width -= scale;
@@ -188,7 +186,7 @@ namespace nana

 					if(textout)
 					{
-						graph.string(x + (width - item.textsize.width) / 2, y + (height - item.textsize.height) / 2, 0x0, item.text);
+						graph.string({ x + static_cast<int>(width - item.textsize.width) / 2, y + static_cast<int>(height - item.textsize.height) / 2 }, item.text);
 					}
 				}

@@ -196,27 +194,19 @@ namespace nana
 				nana::paint::graphics& graph;
 				bool textout;
 				unsigned scale;
-				nana::color_t color;
+				::nana::expr_color bgcolor;
 			};

 			struct drawer::drawer_impl_type
 			{
-				event_handle event_size;
-				unsigned scale;
-				bool textout;
-				size_type which;
-				item_renderer::state_t state;
+				event_handle event_size{nullptr};
+				unsigned scale{16};
+				bool textout{false};
+				size_type which{npos};
+				item_renderer::state_t state{item_renderer::state_t::normal};

 				container cont;
-				nana::tooltip tooltip;
-
-				drawer_impl_type()
-					:	event_size(nullptr),
-						scale(16),
-						textout(false),
-						which(npos),
-						state(item_renderer::state_t::normal)
-				{}
+				::nana::tooltip tooltip;
 			};

 			//class drawer
@@ -403,19 +393,20 @@ namespace nana
 					return npos;
 				}

-				void drawer::_m_draw_background(nana::color_t color)
+				void drawer::_m_draw_background(const ::nana::expr_color& clr)
 				{
-					graph_->shadow_rectangle(graph_->size(), graph_->mix(color, 0xFFFFFF, 0.9), graph_->mix(color, 0x0, 0.95), true);
+					graph_->gradual_rectangle(graph_->size(), ::nana::expr_color(colors::white).blend(clr, 0.1), ::nana::expr_color(colors::black).blend(clr, 0.05), true);
 				}

 				void drawer::_m_draw()
 				{
 					int x = 2, y = 2;

-					unsigned color = API::background(widget_->handle());
-					_m_draw_background(color);
+					auto bgcolor = API::bgcolor(widget_->handle());
+					graph_->set_text_color(bgcolor);
+					_m_draw_background(bgcolor);

-					item_renderer ir(*graph_, impl_->textout, impl_->scale, color);
+					item_renderer ir(*graph_, impl_->textout, impl_->scale, bgcolor);
 					size_type index = 0;

 					for(auto item : impl_->cont)
@@ -428,7 +419,7 @@ namespace nana
 						}
 						else
 						{
-							graph_->line(x + 2, y + 2, x + 2, y + impl_->scale + ir.extra_size - 4, 0x808080);
+							graph_->line({ x + 2, y + 2 }, { x + 2, y + static_cast<int>(impl_->scale + ir.extra_size) - 4 }, { 0x80, 0x80, 0x80 });
 							x += 6;
 						}
 						++index;
@@ -463,9 +454,6 @@ namespace nana
 	}//end namespace drawerbase

 	//class toolbar
-		toolbar::toolbar()
-		{}
-
 		toolbar::toolbar(window wd, bool visible)
 		{
 			create(wd, rectangle(), visible);
--- a/source/gui/widgets/treebox.cpp
+++ b/source/gui/widgets/treebox.cpp
@@ -223,7 +223,7 @@ namespace nana
 							show_scroll();

 						//Draw background
-						data.graph->rectangle(data.widget_ptr->background(), true);
+						data.graph->rectangle(true, data.widget_ptr->bgcolor());

 						//Draw tree
 						attr.tree_cont.for_each(shape.first, Renderer(this, nana::point(static_cast<int>(attr.tree_cont.indent_size(shape.first) * shape.indent_pixels) - shape.offset_x, 1)));
@@ -1093,26 +1093,26 @@ namespace nana

 					if(compset->comp_attribute(component::bground, attr))
 					{
-						const nana::color_t color_table[][2] = {	{0xE8F5FD, 0xD8F0FA}, //highlighted
-															{0xC4E8FA, 0xB6E6FB}, //Selected and highlighted
-															{0xD5EFFC, 0x99DEFD}  //Selected but not highlighted
+						const ::nana::expr_color color_table[][2] = { { { 0xE8, 0xF5, 0xFD }, { 0xD8, 0xF0, 0xFA } }, //highlighted
+						{ { 0xC4, 0xE8, 0xFA }, { 0xB6, 0xE6, 0xFB } }, //Selected and highlighted
+						{ { 0xD5, 0xEF, 0xFC }, {0x99, 0xDE, 0xFD } }  //Selected but not highlighted
 														};

-						const nana::color_t *colptr = nullptr;
+						const ::nana::expr_color *clrptr = nullptr;
 						if(compset->item_attribute().mouse_pointed)
 						{
 							if(compset->item_attribute().selected)
-								colptr = color_table[1];
+								clrptr = color_table[1];
 							else
-								colptr = color_table[0];
+								clrptr = color_table[0];
 						}
 						else if(compset->item_attribute().selected)
-							colptr = color_table[2];
+							clrptr = color_table[2];

-						if(colptr)
+						if (clrptr)
 						{
-							graph.rectangle(attr.area, colptr[1], false);
-							graph.rectangle(attr.area.pare_off(1), *colptr, true);
+							graph.rectangle(attr.area, false, clrptr[1]);
+							graph.rectangle(attr.area.pare_off(1), true, *clrptr);
 						}
 					}
 				}
@@ -1131,7 +1131,7 @@ namespace nana
 							style = 0;
 							dir = gadget::directions::to_east;
 						}
-						gadget::arrow_16_pixels(graph, attr.area.x, attr.area.y + (attr.area.height - 16) / 2, (attr.mouse_pointed ? 0x1CC4F7 : 0x0), style, dir);
+						gadget::arrow_16_pixels(graph, attr.area.x, attr.area.y + (attr.area.height - 16) / 2, (attr.mouse_pointed ? expr_color(0x1C, 0xC4, 0xF7) : expr_color(colors::black)), style, dir);
 					}
 				}

@@ -1409,7 +1409,7 @@ namespace nana
 						renderer_->text(item_graph, this);

 						item_graph.paste(attr.area, *graph_, 1, 1);
-						graph_->rectangle(0x0, false);
+						graph_->rectangle(false, colors::black);
 					}
 				}
 			private:
@@ -1798,7 +1798,7 @@ namespace nana
 				{
 					impl_->data.graph = &graph;

-					widget.background(0xFFFFFF);
+					widget.bgcolor(colors::white);
 					impl_->data.widget_ptr = static_cast< ::nana::treebox*>(&widget);
 					widget.caption(STR("Nana Treebox"));
 				}
--- a/source/gui/widgets/widget.cpp
+++ b/source/gui/widgets/widget.cpp
@@ -141,7 +141,8 @@ namespace nana
 			_m_move(r);
 		}

-		void widget::foreground(nana::color_t value)
+		/*
+		void widget::foreground(nana::color_t value) //deprecated
 		{
 			_m_fgcolor(expr_color(static_cast<colors>(value)));
 		}
@@ -160,6 +161,7 @@ namespace nana
 		{
 			return _m_bgcolor().argb().value;
 		}
+		*/

 		void widget::fgcolor(const nana::expr_color& col)
 		{