claro theme simplified to a few variables (almost perfect match)

variables.less

@claro-text: #000;
@claro-background: #fff;


// other colors are calculated based on these two
@claro-primary: #cfe5fa;
@claro-error: #d46464;

@claro-green: #97e68d;


// grays

@claro-gray-darker: #4a4a4a;
@claro-gray-dark: #818181;
@claro-gray-light: #d3d3d3;
@claro-gray-lighter: #efefef;

// below here is mostly calculated - just change above here for a new theme


// blues

// this produces #759dc0 instead of #769dc0
@claro-blue-1: spin(desaturate(darken(@claro-primary, 29), 44), -1);

// this produces #7dbdfa instead of #7dbefa
@claro-blue-2: spin(saturate(darken(@claro-primary, 16), 12), 0);

@claro-blue-3: spin(desaturate(darken(@claro-primary, 15), 67), 8);

@claro-blue-4: spin(saturate(darken(@claro-primary, 6), 19), 0);

@claro-blue-5: @claro-primary;

// this produces #e5f2fe rather than #e9f4fe
@claro-blue-6: spin(saturate(lighten(@claro-primary, 5), 10), 0);

// not sure if this counts as blue... maybe gray?
// this produces #f3ffff rather than #f4ffff
@claro-blue-7: spin(saturate(lighten(@claro-primary, 8), 19), -29);



// reds

// this produces #cd5151 rather than #ce4f4f
@claro-red-1: desaturate(darken(@claro-error, 5), 1);

@claro-red-2: @claro-error;

// this produces #f58585 rather than #f58383
@claro-red-3: saturate(lighten(@claro-error, 13), 28);





// Document level
@document-text-color: #131313;									// Text color for document itself (text outside of widgets)
@document-shadedsection-background-color: @claro-gray-lighter;// background color used for <pre>, <code>, and table header rows
@document-border-color: @claro-gray-light;								// Border for <pre>, <code>, tables, etc.


// General
@text-color: @claro-text;				// Text color for enabled widgets

@border-color: @claro-blue-3;				// Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer

@popup-border-color: @claro-blue-1;		// Border for Dialog, Menu, Tooltip.   Must also update tooltip.png (the arrow image file) to match

@minor-border-color: @claro-gray-light;		// Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar

@disabled-border-color: @claro-gray-light;	// Border color for disabled/readonly Button, TextBox etc. widgets

@disabled-background-color: @claro-gray-lighter;// Disabled button, textbox, etc.

@disabled-text-color: @claro-gray-dark;		// Text color for disabled/readonly widgets

@unselected-background-color: @claro-gray-lighter;// Background color for unselected/unopened tab button, accordion pane, TitlePane, Menu items

@unselected-text-color: @claro-gray-darker;	// Text color for unselected/unopened tab button, accordion pane, TitlePane, Menu items

@hovered-border-color: @claro-blue-1;		// Hover of textbox, tab label, BorderContainer splitter, Calendar, etc.

@hovered-background-color: @claro-blue-4;	// Background color for hover of Button, MenuBar, Accordion pane, Calendar... anything that has a (non-white) color to start with and gets darker on hover

@hovered-text-color: @text-color;	// Used for title of select Accordion pane, label of select tab, hovered Menu item, etc.

@pressed-border-color: @claro-blue-1;		// During click on Calendar day, Slider up/down buttons, tab button, etc.

@pressed-background-color: @claro-blue-2;	// Background color while clicking on Accordion/TitlePane title bar, tab button, Calendar day, Toolbar button, Tree row.

@selected-border-color: @claro-blue-1;	// Selected AccordionPane, tab of nested TabContainer (but plain TabContainer is special)
@selected-background-color: @claro-blue-5;// Selected Accordion pane, nested tab label, Tree row
@selected-text-color: @text-color;	// title of selected Accordion pane, label of selected tab, hovered Menu item, etc.

@bar-background-color: @claro-gray-lighter;		// MenuBar, Toolbar, action bar at bottom of dialog
@pane-background-color: @claro-background;		// Background color of Accordion panes, Dialogs, etc.
@popup-background-color: @claro-background;		// Background for Dialog.   TODO: currently use for ColorPalette, maybe should change.



// Buttons
@button-border-color: @claro-blue-1;				// Border for (stand-alone) buttons in normal, hovered, or active state
@button-background-color: @claro-blue-6;			// Background color for (unhovered) buttons
@button-hovered-background-color: @claro-blue-4;	// Background color for hovered buttons
@button-pressed-background-color: @claro-blue-4;	// Background color for active buttons
@button-border-radius: 4px;					// Rounded corner radius for buttons (except in toolbar)

// Input widgets
@focused-border-color: @claro-blue-1;				// Focused textbox, editor, select, etc.
@error-border-color: @claro-red-2;				// Border for textbox in error state
@error-focused-border-color: @claro-red-1;		// Border of textbox in error state, and focused
@erroricon-background-color: @claro-red-2;		// Background color for exclamation point validation icon (for TextBox in error state)
@textbox-background-color: @claro-background;			// Default background color of TextBox based widgets
@textbox-hovered-background-color: @claro-blue-6;	// Background color when hovering a unfocused TextBox, Select, Editor, or other input widget
@textbox-focused-background-color: @textbox-background-color;
@textbox-error-background-color: @textbox-background-color;
@textbox-disabled-background-color: @disabled-background-color;

@textbox-padding: 2px;						// Padding for Textbox, Textarea, etc.

// CheckBox, RadioButton
@focus-outline-color: @claro-gray-darker;				// Color for artificial focus outline around labels of checkboxes

// TabContainer
@nestedtab-hovered-background-color: @textbox-hovered-background-color;
@nestedtab-hovered-border-color: @claro-blue-5;
@nestedtab-selected-border-color: @selected-border-color;
@nestedtab-selected-background-color: @claro-blue-4;
@tab-disabled-background-color: @claro-gray-light;		// For disabled tabs of a TabContainer (not officially supported)

// Arrow buttons (stand alone, or inside ComboBox / ComboButton / Spinner / etc.)
@arrowbutton-background-color: @claro-gray-lighter;
@arrowbutton-hovered-background-color: @claro-blue-4;	// Color of arrow when hovering ComboBox.   But hovering Spinner doesn't change arrow color (TODO)
@arrowbutton-pressed-background-color: @claro-blue-4;
@arrowbutton-inner-border-color: @claro-background;			// Typically the arrows have an inner white border (a.k.a. padding) and then an outer black-ish border

// Slider
// Note: any changes here require corresponding changes in form/images/sliderThumbs.png
@slider-fullbar-background-color: @claro-blue-5;			// Background color for part of slider bar before (to the left or below) the handle
@slider-remainingbar-background-color: @claro-background;		// Background color for part of slider bar after (to the right or above) the handle
@slider-hovered-fullbar-background-color: @claro-blue-4;	// Background color for part of bar of hovered slider before (to the left or below) the handle
@slider-hovered-remainingbar-background-color: @claro-background;// Background color for part of bar of hovered slider after (to the right or above) the handle
@slider-hoveredButton-background-color: @claro-background;		// Background color of slider increment/decrement buttons when mouse is over slider but not over the buttons
@slider-focused-fullbar-background-color: @claro-blue-4;	// Background color for part of bar of focused slider before (to the left or below) the handle
@slider-focused-remainingbar-background-color: @claro-background;// Background color for part of bar of focused slider after (to the right or above) the handle
@slider-button-hovered-background-color: @claro-blue-5;	// Background color of slider increment/decrement buttons when mouse is over the buttons
@slider-button-pressed-background-color: @claro-blue-4;	// Background color of slider increment/decrement buttons while button is depressed

// Select, ComboBox
@select-dropdownitem-background-color: @claro-background;			// Background color for items in the drop down list of a ComboBox/Select
@select-dropdownitem-hovered-background-color: @claro-blue-2;	// Background color for the hovered item in the drop down list of a ComboBox/Select
@select-matchedtext-background-color: @claro-blue-4;			// Background color of text in ComboBox drop down that matches typed in phrase

// Menus
@menu-background-color: @popup-background-color;

// Calendar
@calendar-background-color: @claro-blue-5;
@calendar-currentmonth-background-color: @claro-background;		// Background color for days of the current month
@calendar-adjacentmonth-background-color: @claro-blue-6;	// Background color used for days from previous or next month
@calendar-adjacentmonth-text-color: @claro-blue-1;		// Text color used for days from previous or next month
@calendar-date-pressed-border-color: @claro-background;			// For some reason pressing a day of the month (as opposed to hovering it) makes the border go away, is this intentional?
@calendar-date-pressed-background-color: @pressed-background-color;
@calendar-date-selected-border-color: @selected-border-color;
@calendar-date-selected-background-color: @claro-blue-4;
@calendar-button-hovered-background-color: @claro-blue-6;	// for hover or next/previous year, and month drop down (TODO: border and background are built in to calendarArrows.png, can't control from here)
@calendar-button-hovered-border-color: @claro-background;		// for hover or next/previous year, and month drop down
@calendar-button-pressed-background-color: @claro-blue-5;
@calendar-button-pressed-border-color: @pressed-border-color;


// ProgressBar
@progressbar-border-color: @popup-border-color;	// Border color of progress bar
@progressbar-full-background-color:@claro-blue-4;		// Background color for part of progress bar indicating amount completed
@progressbar-empty-background-color: @claro-background;		// Background color for part of progress bar indicating amount remaining
@progressbar-text-color: @text-color;			// Color of progress bar text (ex: "35%").  Must contrast with both empty and full background colors.

// TimePicker
@timepicker-minorvalue-background-color: @claro-gray-lighter;	// For 3:15, 3:30, 3:45 but not 3:00 or 4:00
@timepicker-minorvalue-text-color: @claro-gray-dark;
@timepicker-majorvalue-background-color: @claro-blue-6;	// For 3:00, 4:00, 5:00, etc.
@timepicker-value-hovered-background-color: @claro-blue-2;
@timepicker-value-hovered-text-color: @hovered-text-color;
@timepicker-arrow-hovered-background-color: @claro-blue-4;

// ColorPalette
@colorpalette-background-color: @claro-background;
@swatch-border-color: @minor-border-color;
@swatch-hovered-border-color: @claro-blue-1;
@swatch-selected-border-color: @claro-blue-1;

// Dialog
@dialog-underlay-color: @claro-background;			// the thing that grays out the screen when a dialog is shown
@dialog-titlebar-border-color: @claro-background;	// Inner border around the title sectionof a Dialog, inside the main border of the Dialog and the border between title and content
@dialog-titlebar-background-color: @claro-blue-4;

// BorderContainer
@splitter-hovered-background-color: @claro-blue-5;	// Color of splitter when user hovers it, before mouse down
@splitter-dragged-background-color: @claro-blue-4;	// Color of splitter while it's being dragged

// Toolbar
@toolbar-button-checked-background-color: @claro-background;								// a toggled-on button in the toolbar
@toolbar-combobutton-hovered-unhoveredsection-background-color: @claro-blue-7;	// when user hovers a ComboButton in a Toolbar, the other half of the button turns this color
@toolbar-button-border-radius: 2px;			// Rounded corner radius for buttons for buttons in toolbar

// DnD
@dnd-avatar-background-color: @claro-background;					// Background color of little Dialog-type box indicating dragged items
@dnd-avatar-header-background-color: @claro-red-3;		// Title bar for dragged items
@dnd-avatar-candrop-header-background-color: @claro-green;// Title bar for dragged items when they can be dropped
@dnd-dropseparator-color: @claro-blue-1;					// Color of line indicating that user is about to drop between items A & B

// Mixins

.border-radius (@radius) {
	-moz-border-radius: @radius;
	border-radius: @radius;
}

.box-shadow (@value) {
	-webkit-box-shadow: @value;
	-moz-box-shadow: @value;
	box-shadow: @value;
}

.transition-property (@value) {
	-webkit-transition-property: @value;
	-moz-transition-property: @value;
	transition-property: @value;
}

.transition-property (@value1, @value2) {
	-webkit-transition-property: @value1, @value2;
	-moz-transition-property: @value1, @value2;
	transition-property: @value1, @value2;
}

.transition-duration (@value) {
	-webkit-transition-duration: @value;
	-moz-transition-duration: @value;
	transition-duration: @value;
}

.transition-duration (@value1, @value2) {
	-webkit-transition-duration: @value1, @value2;
	-moz-transition-duration: @value1, @value2;
	transition-duration: @value1, @value2;
}

.transition-timing-function (@value) {
	-webkit-transition-timing-function: @value;
	-moz-transition-timing-function: @value;
	transition-timing-function: @value;
}