pip-webui
Version:
HTML5 UI for LOB applications
232 lines (202 loc) • 6.87 kB
text/less
// @file Color Variables
// @copyright Digital Living Software Corp. 2014-2015
// Functional Colors
//----------------------------
@color-primary: rgba(0, 0, 0, 0.87);
@color-secondary: rgba(0, 0, 0, 0.54);
@color-disabled: rgba(0, 0, 0, 0.38);
@color-error: rgb(244, 67, 54);
@color-badge: rgba(255, 82, 82, 1);
@color-toast: rgba(46, 46, 46, 1);
@color-divider: rgba(0, 0, 0, 0.12);
@color-window: rgb(238, 238, 238);
@color-content: rgb(250, 250, 250);
// Named Pallette Colors
//------------------------------
@color-purple: #AB47BC;
@color-light-green: #8BC34A;
@color-green: #4CAF50;
@color-dark-red: #B71C1C;
@color-pink: #E91E63;
@color-cyan: #00BCD4;
@color-deep-orange: #FF5722;
@color-teal: #00796B;
// Numeric Pallette Colors
//------------------------------
@color-0: #ef5350;
@color-1: #ec407a;
@color-2: #ab47bc;
@color-3: #7e57c2;
@color-4: #5c6bc0;
@color-5: #03a9f4;
@color-6: #00bcd4;
@color-7: #009688;
@color-8: #4caf50;
@color-9: #8bc34a;
@color-10: #cddc39;
@color-11: #ffc107;
@color-12: #ff9800;
@color-13: #ff5722;
@color-14: #795548;
@color-15: #607d8b;
// Themes Pallette Colors
//------------------------------
@color-blue-primary: rgba(33, 150, 243, 1);
@color-blue-accent: rgba(0, 200, 83, 1);
@color-blue-hue: rgba(33, 150, 243, .54);
@color-blue-accent-hue: rgba(0, 200, 83, .54);
@color-pink-primary: rgba(188, 86, 121, 1);
@color-pink-accent: rgba(255, 128, 171, 1);
@color-pink-hue: rgba(188, 86, 121, .54);
@color-pink-accent-hue: rgba(255, 128, 171, .54);
@color-orange-primary: rgba(255, 112, 67, 1);
@color-orange-accent: rgba(255, 171, 64, 1);
@color-orange-hue: rgba(255, 112, 67, .54);
@color-orange-badge: rgba(213, 0, 0, 1);
@color-orange-accent-hue: rgba(255, 171, 64, .54);
@color-amber-primary: rgba(255, 152, 0, 1);
@color-amber-accent: rgba(255, 109, 0, 1);
@color-amber-hue: rgba(255, 152, 0, .54);
@color-amber-accent-hue: rgba(255, 109, 0, .54);
@color-green-primary: rgba(76, 175, 80, 1);
@color-green-accent: rgba(255, 171, 0, 1);
@color-green-hue: rgba(76, 175, 80, .54);
@color-green-accent-hue: rgba(255, 171, 0, .54);
@color-navy-primary: rgba(86, 97, 125, 1);
@color-navy-accent: rgba(0, 191, 165, 1);
@color-navy-hue: rgba(86, 97, 125, .54);
@color-navy-accent-hue: rgba(0, 191, 165, .54);
@color-grey-primary: rgba(96, 125, 139, 1);
@color-grey-accent: rgba(144, 164, 174, 1);
@color-grey-hue: rgba(96, 125, 139, .54);
@color-grey-accent-hue: rgba(144, 164, 174, .54);
@color-dark-primary: rgba(33, 33, 33, 1);
@color-dark-accent: rgba(0, 200, 83, 1);
@color-dark-hue: rgba(33, 33, 33, .54);
@color-dark-accent-hue: rgba(0, 200, 83, .54);
@color-black-primary: rgba(38, 50, 56, 1);
@color-black-accent: rgba(84, 110, 122, 1);
@color-black-hue: rgba(38, 50, 56, .54);
@color-black-accent-hue: rgba(84, 110, 122, .54);
@color-primary-dark: rgba(255,255,255,.87);
@color-secondary-dark: rgba(255,255,255,.54);
@color-divider-dark: rgba(255,255,255, .12);
@color-content-dark: rgba(66,66,66,1);
@color-window-dark: rgba(48,48,48,1);
@color-blue-theme:
@color-blue-primary // 1
@color-blue-accent // 2
@color-blue-hue // 3
@color-primary // 4
@color-secondary // 5
@color-badge // 6
@color-divider // 7
@color-toast // 8
@color-badge // 9
@color-content
@color-window
@color-blue-accent-hue;
@color-pink-theme:
@color-pink-primary
@color-pink-accent
@color-pink-hue
@color-primary
@color-secondary
@color-badge
@color-divider
@color-toast // 8
@color-badge
@color-content
@color-window
@color-pink-accent-hue;// 9
@color-orange-theme:
@color-orange-primary
@color-orange-accent
@color-orange-hue
@color-primary
@color-secondary
@color-orange-badge
@color-divider // 7
@color-toast // 8
@color-badge
@color-content
@color-window
@color-orange-accent-hue;// 9
@color-amber-theme:
@color-amber-primary
@color-amber-accent
@color-amber-hue
@color-primary
@color-secondary
@color-badge
@color-divider // 7
@color-toast // 8
@color-badge // 9
@color-content
@color-window
@color-amber-accent-hue;
@color-green-theme:
@color-green-primary
@color-green-accent
@color-green-hue
@color-primary
@color-secondary
@color-badge
@color-divider // 7
@color-toast // 8
@color-badge // 9
@color-content
@color-window
@color-green-accent-hue;
@color-navy-theme:
@color-navy-primary
@color-navy-accent
@color-navy-hue
@color-primary
@color-secondary
@color-badge
@color-divider // 7
@color-toast // 8
@color-badge
@color-content
@color-window
@color-navy-accent-hue; // 9
@color-grey-theme:
@color-grey-primary
@color-grey-accent
@color-grey-hue
@color-primary
@color-secondary
@color-badge
@color-divider // 7
@color-toast // 8
@color-badge // 9
@color-content
@color-window
@color-grey-accent-hue;
@color-dark-theme:
@color-dark-primary
@color-dark-accent
@color-dark-hue
@color-primary-dark
@color-secondary-dark
@color-badge
@color-divider-dark// 7
@color-toast // 8
@color-badge
@color-content-dark
@color-window-dark
@color-dark-accent-hue;// 9
@color-black-theme:
@color-black-primary
@color-black-accent
@color-black-hue
@color-primary-dark
@color-secondary-dark
@color-badge
@color-divider-dark// 7
@color-toast // 8
@color-badge
@color-content-dark
@color-window-dark
@color-black-accent-hue;