├── languages ├── woocommerce-colors-nl_NL.mo ├── woocommerce-colors.pot └── woocommerce-colors-nl_NL.po ├── .gitignore ├── .jshintrc ├── .editorconfig ├── package.json ├── Gruntfile.js ├── readme.txt ├── woocommerce-colors.php ├── includes ├── class-wc-colors-customizer.php └── views │ └── scss.php └── assets └── js ├── customizer.min.js ├── tinycolor.min.js ├── customizer.js └── tinycolor.js /languages/woocommerce-colors-nl_NL.mo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/woocommerce/woocommerce-colors/HEAD/languages/woocommerce-colors-nl_NL.mo -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | project.xml 2 | project.properties 3 | .DS_Store 4 | Thumbs.db 5 | .buildpath 6 | .project 7 | .settings* 8 | sftp-config.json 9 | deploy.sh 10 | node_modules/ 11 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "boss": true, 3 | "curly": true, 4 | "eqeqeq": true, 5 | "eqnull": true, 6 | "es3": true, 7 | "expr": true, 8 | "immed": true, 9 | "noarg": true, 10 | "onevar": true, 11 | "quotmark": "single", 12 | "trailing": true, 13 | "undef": true, 14 | "unused": true, 15 | 16 | "browser": true, 17 | 18 | "globals": { 19 | "_": false, 20 | "Backbone": false, 21 | "jQuery": false, 22 | "wp": false 23 | } 24 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_size = 4 8 | tab_width = 4 9 | indent_style = tab 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | 16 | [*.txt] 17 | trim_trailing_whitespace = false 18 | 19 | [*.json] 20 | insert_final_newline = false 21 | indent_size = 2 22 | tab_width = 2 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "woocommerce-colors", 3 | "description": "WooCommerce Colors", 4 | "version": "1.0.7", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/woothemes/woocommerce-colors.git" 8 | }, 9 | "main": "Gruntfile.js", 10 | "devDependencies": { 11 | "grunt": "~0.4.5", 12 | "grunt-contrib-jshint": "~0.10.0", 13 | "grunt-contrib-uglify": "~0.6.0", 14 | "grunt-contrib-watch": "~0.6.1", 15 | "grunt-wp-i18n": "~0.4.9", 16 | "grunt-checktextdomain": "~0.1.1", 17 | "grunt-po2mo": "~0.1.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /languages/woocommerce-colors.pot: -------------------------------------------------------------------------------- 1 | # Copyright (C) 2015 WooThemes 2 | # This file is distributed under the GPLv2 or later. 3 | msgid "" 4 | msgstr "" 5 | "Project-Id-Version: WooCommerce Colors 1.0.5\n" 6 | "Report-Msgid-Bugs-To: " 7 | "http://wordpress.org/support/plugin/woocommerce-frontend-styles/\n" 8 | "POT-Creation-Date: 2015-02-25 14:52:28+00:00\n" 9 | "MIME-Version: 1.0\n" 10 | "Content-Type: text/plain; charset=utf-8\n" 11 | "Content-Transfer-Encoding: 8bit\n" 12 | "PO-Revision-Date: 2015-MO-DA HO:MI+ZONE\n" 13 | "Last-Translator: FULL NAME \n" 14 | "Language-Team: LANGUAGE \n" 15 | "X-Generator: grunt-wp-i18n 0.4.9\n" 16 | 17 | #: includes/class-wc-colors-customizer.php:40 18 | msgid "WooCommerce" 19 | msgstr "" 20 | 21 | #. Description of the plugin/theme 22 | msgid "WooCommerce Colors." 23 | msgstr "" 24 | 25 | #: includes/class-wc-colors-customizer.php:54 26 | msgid "Primary Color %s" 27 | msgstr "" 28 | 29 | #: includes/class-wc-colors-customizer.php:54 30 | msgid "action buttons/price slider/layered nav UI" 31 | msgstr "" 32 | 33 | #: includes/class-wc-colors-customizer.php:69 34 | msgid "Secondary Color %s" 35 | msgstr "" 36 | 37 | #: includes/class-wc-colors-customizer.php:69 38 | msgid "buttons and tabs" 39 | msgstr "" 40 | 41 | #: includes/class-wc-colors-customizer.php:84 42 | msgid "Highlight Color %s" 43 | msgstr "" 44 | 45 | #: includes/class-wc-colors-customizer.php:84 46 | msgid "price labels and sale flashes" 47 | msgstr "" 48 | 49 | #: includes/class-wc-colors-customizer.php:99 50 | msgid "Content Background Color %s" 51 | msgstr "" 52 | 53 | #: includes/class-wc-colors-customizer.php:99 54 | msgid "your themes page background - used for tab active states" 55 | msgstr "" 56 | 57 | #: includes/class-wc-colors-customizer.php:114 58 | msgid "Subtext Color %s" 59 | msgstr "" 60 | 61 | #: includes/class-wc-colors-customizer.php:114 62 | msgid "used for certain text and asides - breadcrumbs, small text etc" 63 | msgstr "" 64 | 65 | #: woocommerce-colors.php:164 66 | msgid "WooCommerce Colors depends on the last version of %s or later to work!" 67 | msgstr "" 68 | 69 | #: woocommerce-colors.php:164 70 | msgid "WooCommerce 2.3" 71 | msgstr "" 72 | 73 | #. Plugin Name of the plugin/theme 74 | msgid "WooCommerce Colors" 75 | msgstr "" 76 | 77 | #. Plugin URI of the plugin/theme 78 | msgid "http://wordpress.org/plugins/woocommerce-colors/" 79 | msgstr "" 80 | 81 | #. Author of the plugin/theme 82 | msgid "WooThemes" 83 | msgstr "" 84 | 85 | #. Author URI of the plugin/theme 86 | msgid "http://woothemes.com" 87 | msgstr "" -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /*jshint node:true */ 2 | module.exports = function( grunt ) { 3 | 'use strict'; 4 | 5 | grunt.initConfig({ 6 | 7 | // Gets the package vars 8 | pkg: grunt.file.readJSON( 'package.json' ), 9 | 10 | // Setting folder templates 11 | dirs: { 12 | css: 'assets/css', 13 | fonts: 'assets/fonts', 14 | images: 'assets/images', 15 | js: 'assets/js' 16 | }, 17 | 18 | // Javascript linting with jshint 19 | jshint: { 20 | options: { 21 | jshintrc: '.jshintrc' 22 | }, 23 | all: [ 24 | 'Gruntfile.js', 25 | '<%= dirs.js %>/*/*.js', 26 | '!<%= dirs.js %>/*/*.min.js' 27 | ] 28 | }, 29 | 30 | // Minify .js files 31 | uglify: { 32 | options: { 33 | preserveComments: 'some' 34 | }, 35 | dist: { 36 | files: [{ 37 | expand: true, 38 | cwd: '<%= dirs.js %>/', 39 | src: [ 40 | '*.js', 41 | '!*.min.js' 42 | ], 43 | dest: '<%= dirs.js %>/', 44 | ext: '.min.js' 45 | }] 46 | } 47 | }, 48 | 49 | // Watch changes for assets 50 | watch: { 51 | js: { 52 | files: [ 53 | '<%= dirs.js %>/*js', 54 | '!<%= dirs.js %>/*.min.js' 55 | ], 56 | tasks: ['jshint', 'uglify'] 57 | } 58 | }, 59 | 60 | // Create translation files 61 | makepot: { 62 | dist: { 63 | options: { 64 | type: 'wp-plugin', 65 | potHeaders: { 66 | 'report-msgid-bugs-to': 'http://wordpress.org/support/plugin/woocommerce-frontend-styles/', 67 | 'language-team': 'LANGUAGE ' 68 | } 69 | } 70 | } 71 | }, 72 | 73 | // Check text domains 74 | checktextdomain: { 75 | options:{ 76 | text_domain: '<%= pkg.name %>', 77 | keywords: [ 78 | '__:1,2d', 79 | '_e:1,2d', 80 | '_x:1,2c,3d', 81 | 'esc_html__:1,2d', 82 | 'esc_html_e:1,2d', 83 | 'esc_html_x:1,2c,3d', 84 | 'esc_attr__:1,2d', 85 | 'esc_attr_e:1,2d', 86 | 'esc_attr_x:1,2c,3d', 87 | '_ex:1,2c,3d', 88 | '_n:1,2,4d', 89 | '_nx:1,2,4c,5d', 90 | '_n_noop:1,2,3d', 91 | '_nx_noop:1,2,3c,4d' 92 | ] 93 | }, 94 | files: { 95 | src: [ 96 | '**/*.php', // Include all files 97 | '!node_modules/**' // Exclude node_modules/ 98 | ], 99 | expand: true 100 | } 101 | }, 102 | 103 | // Convert .po to .mo 104 | po2mo: { 105 | files: { 106 | src: 'languages/*.po', 107 | expand: true 108 | } 109 | } 110 | }); 111 | 112 | // Load tasks 113 | grunt.loadNpmTasks( 'grunt-contrib-watch' ); 114 | grunt.loadNpmTasks( 'grunt-contrib-jshint' ); 115 | grunt.loadNpmTasks( 'grunt-contrib-uglify' ); 116 | grunt.loadNpmTasks( 'grunt-wp-i18n' ); 117 | grunt.loadNpmTasks( 'grunt-checktextdomain' ); 118 | grunt.loadNpmTasks( 'grunt-po2mo' ); 119 | 120 | // Register tasks 121 | grunt.registerTask( 'default', [ 122 | 'jshint', 123 | 'uglify' 124 | ]); 125 | }; 126 | -------------------------------------------------------------------------------- /readme.txt: -------------------------------------------------------------------------------- 1 | === WooCommerce Colors === 2 | Contributors: woothemes, claudiosanches 3 | Tags: woocommerce, shortcodes 4 | Requires at least: 4.0 5 | Tested up to: 4.9 6 | Stable tag: 1.0.7 7 | License: GPLv2 or later 8 | License URI: http://www.gnu.org/licenses/gpl-2.0.html 9 | 10 | Allows you to change the buttons color and other elements of WooCommerce. Beautifully. 11 | 12 | == Description == 13 | 14 | This plugin adds a new section called WooCommerce on the Customize menu, allowing you to easily change color of buttons and [WooCommerce](http://wordpress.org/plugins/woocommerce/) elements. 15 | 16 | Starting WooCommerce 2.3 the Frontend styles options will no longer be part of WooCommerce and will only be available by using this plugin. 17 | 18 | = WooCommerce Colors in action: = 19 | 20 | [youtube https://www.youtube.com/watch?v=Hvyy36FOiTA] 21 | 22 | = Requeriments = 23 | 24 | * WordPress 4.0 or later. 25 | * WooCommerce 2.3 or later. 26 | 27 | = Contribute = 28 | 29 | You can contribute to the source code in our [GitHub](https://github.com/woothemes/woocommerce-colors/) page. 30 | 31 | == Installation == 32 | 33 | * Upload plugin files to your plugins folder, or install using WordPress built-in Add New Plugin installer; 34 | * Activate the plugin; 35 | * This ready! You can now use change the colors of your store on the Customize menu. 36 | 37 | == Frequently Asked Questions == 38 | 39 | = What is the plugin license? = 40 | 41 | * This plugin is released under a GPL license. 42 | 43 | = What is needed to use this plugin? = 44 | 45 | * WordPress 4.0 or later. 46 | * WooCommerce 2.3 or later. 47 | 48 | = How this plugin works? = 49 | 50 | * Works just adding new colors options on the Customize menu. 51 | 52 | = Where is the Cutomize menu? = 53 | 54 | You can find the customizer menu within your WordPress admin in Appearance section. 55 | 56 | == Screenshots == 57 | 58 | 1. WooCommerce Colors on Customizer menu. 59 | 60 | == Changelog == 61 | 62 | = 1.0.7 - 2017/10/18 = 63 | 64 | * Updated version, tested with WordPress 4.9 and WooCommerce 3.2. 65 | 66 | = 1.0.6 - 2015/03/16 = 67 | 68 | * Prevented to load the `scssc` twice. 69 | * Removed the product tabs styles. 70 | 71 | = 1.0.5 - 2015/02/19 = 72 | 73 | * Removed `!important`, somethings need to be overwrite by themes. 74 | * Fixed the product tabs. 75 | 76 | = 1.0.4 - 2015/02/19 = 77 | 78 | * Added `!important` to ensure that always the styles will overwrite the css in any theme. 79 | 80 | = 1.0.3 - 2015/02/13 = 81 | 82 | * Fixed the WooCommerce notices when install the WooCommerce Colors. 83 | 84 | = 1.0.2 - 2015/02/12 = 85 | 86 | * Added descriptions in the customizer options (see the screenshot). 87 | 88 | = 1.0.1 - 2015/01/14 = 89 | 90 | * Fixed the styles for tabs and checkout buddle. 91 | 92 | = 1.0.0 = 93 | 94 | * Initial version. 95 | 96 | == Upgrade Notice == 97 | 98 | = 1.0.7 = 99 | 100 | Updated version, tested with WordPress 4.9 and WooCommerce 3.2. 101 | 102 | -------------------------------------------------------------------------------- /languages/woocommerce-colors-nl_NL.po: -------------------------------------------------------------------------------- 1 | # Copyright (C) 2015 WooThemes 2 | # This file is distributed under the GPLv2 or later. 3 | msgid "" 4 | msgstr "" 5 | "Project-Id-Version: WooCommerce Colors 1.0.5\n" 6 | "Report-Msgid-Bugs-To: http://wordpress.org/support/plugin/woocommerce-" 7 | "frontend-styles/\n" 8 | "POT-Creation-Date: 2015-07-03 11:06+0200\n" 9 | "MIME-Version: 1.0\n" 10 | "Content-Type: text/plain; charset=UTF-8\n" 11 | "Content-Transfer-Encoding: 8bit\n" 12 | "PO-Revision-Date: 2015-07-03 11:10+0200\n" 13 | "Last-Translator: Carsten \n" 14 | "Language-Team: EMAIL@ADDRESS\n" 15 | "X-Generator: Poedit 1.8.2\n" 16 | "Plural-Forms: nplurals=2; plural=(n != 1);\n" 17 | "Language: nl_NL\n" 18 | 19 | #: includes/class-wc-colors-customizer.php:40 20 | msgid "WooCommerce" 21 | msgstr "WooCommerce" 22 | 23 | #. Description of the plugin/theme 24 | msgid "WooCommerce Colors." 25 | msgstr "WooCommerce Kleuren." 26 | 27 | #: includes/class-wc-colors-customizer.php:54 28 | msgid "Primary Color %s" 29 | msgstr "Primaire kleur %s" 30 | 31 | #: includes/class-wc-colors-customizer.php:54 32 | msgid "action buttons/price slider/layered nav UI" 33 | msgstr "actie knoppen / prijs slider / gelaagde navigatie interface" 34 | 35 | #: includes/class-wc-colors-customizer.php:69 36 | msgid "Secondary Color %s" 37 | msgstr "Secondaire kleur %s" 38 | 39 | #: includes/class-wc-colors-customizer.php:69 40 | msgid "buttons and tabs" 41 | msgstr "knoppen en tabbladen" 42 | 43 | #: includes/class-wc-colors-customizer.php:84 44 | msgid "Highlight Color %s" 45 | msgstr "Uitgelichte kleur %s" 46 | 47 | #: includes/class-wc-colors-customizer.php:84 48 | msgid "price labels and sale flashes" 49 | msgstr "prijslabels en uitverkoop meldingen" 50 | 51 | #: includes/class-wc-colors-customizer.php:99 52 | msgid "Content Background Color %s" 53 | msgstr "Inhoud achtergrondkleur %s" 54 | 55 | #: includes/class-wc-colors-customizer.php:99 56 | msgid "your themes page background - used for tab active states" 57 | msgstr "kleur van de pagina achtergrond - gebruikt voor status actief tabblad" 58 | 59 | #: includes/class-wc-colors-customizer.php:114 60 | msgid "Subtext Color %s" 61 | msgstr "Subtekst kleur %s" 62 | 63 | #: includes/class-wc-colors-customizer.php:114 64 | msgid "used for certain text and asides - breadcrumbs, small text etc" 65 | msgstr "gebruikt voor sommige teksten - broodkruimelpad, kleine teksten, etc." 66 | 67 | #: woocommerce-colors.php:164 68 | msgid "WooCommerce Colors depends on the last version of %s or later to work!" 69 | msgstr "" 70 | "WooCommerce Colors heeft minimaal de laatste versie van %s nodig om te " 71 | "werken!" 72 | 73 | #: woocommerce-colors.php:164 74 | msgid "WooCommerce 2.3" 75 | msgstr "WooCommerce 2.3" 76 | 77 | #. Plugin Name of the plugin/theme 78 | msgid "WooCommerce Colors" 79 | msgstr "WooCommerce Colors" 80 | 81 | #. Plugin URI of the plugin/theme 82 | msgid "http://wordpress.org/plugins/woocommerce-colors/" 83 | msgstr "http://wordpress.org/plugins/woocommerce-colors/" 84 | 85 | #. Author of the plugin/theme 86 | msgid "WooThemes" 87 | msgstr "WooThemes" 88 | 89 | #. Author URI of the plugin/theme 90 | msgid "http://woothemes.com" 91 | msgstr "http://woothemes.com" 92 | -------------------------------------------------------------------------------- /woocommerce-colors.php: -------------------------------------------------------------------------------- 1 | =' ) ) { 48 | $this->includes(); 49 | } else { 50 | add_action( 'admin_notices', array( $this, 'woocommerce_missing_notice' ) ); 51 | } 52 | } 53 | 54 | /** 55 | * Return an instance of this class. 56 | * 57 | * @return object A single instance of this class. 58 | */ 59 | public static function get_instance() { 60 | // If the single instance hasn't been set, set it now. 61 | if ( null == self::$instance ) { 62 | self::$instance = new self; 63 | } 64 | 65 | return self::$instance; 66 | } 67 | 68 | /** 69 | * Get assets url. 70 | * 71 | * @return string 72 | */ 73 | public static function get_assets_url() { 74 | return plugins_url( 'assets/', __FILE__ ); 75 | } 76 | 77 | /** 78 | * Load the plugin text domain for translation. 79 | */ 80 | public function load_plugin_textdomain() { 81 | $locale = apply_filters( 'plugin_locale', get_locale(), 'woocommerce-colors' ); 82 | 83 | load_textdomain( 'woocommerce-colors', trailingslashit( WP_LANG_DIR ) . 'woocommerce-colors/woocommerce-colors-' . $locale . '.mo' ); 84 | load_plugin_textdomain( 'woocommerce-colors', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' ); 85 | } 86 | 87 | /** 88 | * Includes. 89 | */ 90 | private function includes() { 91 | include_once 'includes/class-wc-colors-customizer.php'; 92 | } 93 | 94 | /** 95 | * Get the plugin options. 96 | * 97 | * @param array $colors 98 | * 99 | * @return array 100 | */ 101 | public static function get_options( $colors ) { 102 | $colors = array_map( 'esc_attr', (array) $colors ); 103 | 104 | // Defaults. 105 | if ( empty( $colors['primary'] ) ) { 106 | $colors['primary'] = '#a46497'; 107 | } 108 | if ( empty( $colors['secondary'] ) ) { 109 | $colors['secondary'] = '#ebe9eb'; 110 | } 111 | if ( empty( $colors['highlight'] ) ) { 112 | $colors['highlight'] = '#77a464'; 113 | } 114 | if ( empty( $colors['content_bg'] ) ) { 115 | $colors['content_bg'] = '#ffffff'; 116 | } 117 | if ( empty( $colors['subtext'] ) ) { 118 | $colors['subtext'] = '#777777'; 119 | } 120 | 121 | return $colors; 122 | } 123 | 124 | /** 125 | * Install method. 126 | */ 127 | public static function install() { 128 | // Get old frontend colors from WooCommerce core. 129 | $colors = get_option( 'woocommerce_frontend_css_colors' ); 130 | 131 | if ( $colors ) { 132 | $colors = self::get_options( $colors ); 133 | 134 | update_option( 'woocommerce_colors', $colors ); 135 | 136 | // Compile the css. 137 | if ( ! class_exists( 'scssc' ) && ! class_exists( 'scss_formatter_nested' ) ) { 138 | include_once 'includes/libs/class-scss.php'; 139 | } 140 | 141 | ob_start(); 142 | include 'includes/views/scss.php'; 143 | $scss = ob_get_clean(); 144 | 145 | $compiler = new scssc; 146 | $compiler->setFormatter( 'scss_formatter_compressed' ); 147 | $compiled_css = $compiler->compile( trim( $scss ) ); 148 | 149 | update_option( 'woocommerce_colors_css', $compiled_css ); 150 | 151 | // Delete the old option. 152 | delete_option( 'woocommerce_frontend_css_colors' ); 153 | 154 | // Remove the notice. 155 | $notices = array_diff( get_option( 'woocommerce_admin_notices', array() ), array( 'frontend_colors' ) ); 156 | update_option( 'woocommerce_admin_notices', $notices ); 157 | } 158 | } 159 | 160 | /** 161 | * WooCommerce fallback notice. 162 | * 163 | * @return string 164 | */ 165 | public function woocommerce_missing_notice() { 166 | echo '

' . sprintf( __( 'WooCommerce Colors depends on the last version of %s or later to work!', 'woocommerce-colors' ), '' . __( 'WooCommerce 2.3', 'woocommerce-colors' ) . '' ) . '

'; 167 | } 168 | } 169 | 170 | // Plugin install. 171 | register_activation_hook( __FILE__, array( 'WC_Colors', 'install' ) ); 172 | 173 | add_action( 'plugins_loaded', array( 'WC_Colors', 'get_instance' ) ); 174 | 175 | endif; 176 | -------------------------------------------------------------------------------- /includes/class-wc-colors-customizer.php: -------------------------------------------------------------------------------- 1 | add_section( $this->section_slug, array( 40 | 'title' => __( 'WooCommerce', 'woocommerce-colors' ), 41 | 'priority' => 60, 42 | 'description' => __( 'WooCommerce Colors.', 'woocommerce-colors' ) 43 | ) ); 44 | 45 | // Primary Color. 46 | $wp_customize->add_setting( $this->section_slug . '[primary]', array( 47 | 'default' => '#a46497', 48 | 'type' => 'option', 49 | 'transport' => 'postMessage', 50 | 'sanitize_callback' => 'sanitize_hex_color', 51 | ) ); 52 | 53 | $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'woocommerce_primary', array( 54 | 'label' => sprintf( __( 'Primary Color %s', 'woocommerce-colors' ), '(' . __( 'action buttons/price slider/layered nav UI', 'woocommerce-colors' ) . ')' ), 55 | 'section' => $this->section_slug, 56 | 'settings' => $this->section_slug . '[primary]', 57 | 'priority' => 1 58 | ) ) ); 59 | 60 | // Secondary Color. 61 | $wp_customize->add_setting( $this->section_slug . '[secondary]', array( 62 | 'default' => '#ebe9eb', 63 | 'type' => 'option', 64 | 'transport' => 'postMessage', 65 | 'sanitize_callback' => 'sanitize_hex_color', 66 | ) ); 67 | 68 | $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'woocommerce_secondary', array( 69 | 'label' => sprintf( __( 'Secondary Color %s', 'woocommerce-colors' ), '(' . __( 'buttons and tabs', 'woocommerce-colors' ) . ')' ), 70 | 'section' => $this->section_slug, 71 | 'settings' => $this->section_slug . '[secondary]', 72 | 'priority' => 1 73 | ) ) ); 74 | 75 | // Highlight Color. 76 | $wp_customize->add_setting( $this->section_slug . '[highlight]', array( 77 | 'default' => '#77a464', 78 | 'type' => 'option', 79 | 'transport' => 'postMessage', 80 | 'sanitize_callback' => 'sanitize_hex_color', 81 | ) ); 82 | 83 | $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'woocommerce_highlight', array( 84 | 'label' => sprintf( __( 'Highlight Color %s', 'woocommerce-colors' ), '(' . __( 'price labels and sale flashes', 'woocommerce-colors' ) . ')' ), 85 | 'section' => $this->section_slug, 86 | 'settings' => $this->section_slug . '[highlight]', 87 | 'priority' => 1 88 | ) ) ); 89 | 90 | // Content Background Color. 91 | $wp_customize->add_setting( $this->section_slug . '[contentbg]', array( 92 | 'default' => '#ffffff', 93 | 'type' => 'option', 94 | 'transport' => 'postMessage', 95 | 'sanitize_callback' => 'sanitize_hex_color', 96 | ) ); 97 | 98 | $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'woocommerce_contentbg', array( 99 | 'label' => sprintf( __( 'Content Background Color %s', 'woocommerce-colors' ), '(' . __( 'your themes page background - used for tab active states', 'woocommerce-colors' ) . ')' ), 100 | 'section' => $this->section_slug, 101 | 'settings' => $this->section_slug . '[contentbg]', 102 | 'priority' => 1 103 | ) ) ); 104 | 105 | // Subtext Color. 106 | $wp_customize->add_setting( $this->section_slug . '[subtext]', array( 107 | 'default' => '#777777', 108 | 'type' => 'option', 109 | 'transport' => 'postMessage', 110 | 'sanitize_callback' => 'sanitize_hex_color', 111 | ) ); 112 | 113 | $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'woocommerce_subtext', array( 114 | 'label' => sprintf( __( 'Subtext Color %s', 'woocommerce-colors' ), '(' . __( 'used for certain text and asides - breadcrumbs, small text etc', 'woocommerce-colors' ) . ')' ), 115 | 'section' => $this->section_slug, 116 | 'settings' => $this->section_slug . '[subtext]', 117 | 'priority' => 1 118 | ) ) ); 119 | } 120 | 121 | /** 122 | * Customizer live preview. 123 | */ 124 | public function live_preview() { 125 | $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min'; 126 | 127 | wp_enqueue_script( 'tinycolor', WC_Colors::get_assets_url() . 'js/tinycolor' . $suffix . '.js', array(), '1.1.1', true ); 128 | wp_enqueue_script( 'woocommerce-colors-customizer', WC_Colors::get_assets_url() . 'js/customizer' . $suffix . '.js', array( 'jquery', 'customize-preview', 'tinycolor' ), WC_Colors::VERSION, true ); 129 | } 130 | 131 | /** 132 | * Compile the SCSS. 133 | * 134 | * @return string 135 | */ 136 | protected function compile_scss() { 137 | if ( ! class_exists( 'scssc' ) && ! class_exists( 'scss_formatter_nested' ) ) { 138 | include_once 'libs/class-scss.php'; 139 | } 140 | 141 | // Get options 142 | $colors = WC_Colors::get_options( get_option( 'woocommerce_colors' ) ); 143 | 144 | ob_start(); 145 | include 'views/scss.php'; 146 | $scss = ob_get_clean(); 147 | 148 | $compiler = new scssc; 149 | $compiler->setFormatter( 'scss_formatter_compressed' ); 150 | $compiled_css = $compiler->compile( trim( $scss ) ); 151 | 152 | return $compiled_css; 153 | } 154 | 155 | /** 156 | * Save the colors. 157 | * 158 | * @param WP_Customize_Manager $customize 159 | */ 160 | public function save_after( $customize ) { 161 | if ( ! isset( $_REQUEST['customized'] ) ) { 162 | return; 163 | } 164 | 165 | $customized = json_decode( stripslashes( $_REQUEST['customized'] ), true ); 166 | $save = false; 167 | 168 | foreach ( $customized as $key => $value ) { 169 | if ( false !== strpos( $key, $this->section_slug ) ) { 170 | $save = true; 171 | break; 172 | } 173 | } 174 | 175 | if ( $save ) { 176 | $css = $this->compile_scss(); 177 | 178 | update_option( 'woocommerce_colors_css', $css ); 179 | } 180 | } 181 | 182 | /** 183 | * Header output. 184 | */ 185 | public function header_output() { 186 | $css = get_option( 'woocommerce_colors_css' ); 187 | 188 | echo "\n"; 189 | echo "\n"; 192 | echo "\n"; 193 | } 194 | } 195 | 196 | new WC_Colors_Customizer(); 197 | -------------------------------------------------------------------------------- /includes/views/scss.php: -------------------------------------------------------------------------------- 1 | 6 | 7 | // Varibles. 8 | $primary: ; 9 | $primarytext: ; 10 | $secondary: ; 11 | $secondarytext: ; 12 | $highlight: ; 13 | $highlightext: ; 14 | $contentbg: ; 15 | $subtext: ; 16 | 17 | p.demo_store { 18 | background-color: $primary; 19 | color: $primarytext; 20 | } 21 | 22 | .woocommerce { 23 | 24 | // .woocommerce-message, 25 | // .woocommerce-error, 26 | // .woocommerce-info { 27 | // background-color: lighten($secondary,5%); 28 | // color: $secondarytext; 29 | // } 30 | 31 | small.note { 32 | color: $subtext; 33 | } 34 | 35 | .woocommerce-breadcrumb { 36 | color: $subtext; 37 | 38 | a { 39 | color: $subtext; 40 | } 41 | } 42 | 43 | div.product { 44 | span.price, 45 | p.price { 46 | color: $highlight; 47 | } 48 | 49 | .stock { 50 | color: $highlight; 51 | } 52 | 53 | // .woocommerce-tabs { 54 | // ul.tabs { 55 | // li { 56 | // border: 1px solid darken( $secondary, 10% ); 57 | // background-color: $secondary; 58 | 59 | // a { 60 | // color: $secondarytext; 61 | 62 | // &:hover { 63 | // color: lighten( $secondarytext, 10% ); 64 | // } 65 | // } 66 | 67 | // &.active { 68 | // background: $contentbg; 69 | // border-bottom-color: $contentbg; 70 | 71 | // &:before { 72 | // box-shadow: 2px 2px 0 $contentbg; 73 | // } 74 | 75 | // &:after { 76 | // box-shadow: -2px 2px 0 $contentbg; 77 | // } 78 | // } 79 | 80 | // &:before, 81 | // &:after { 82 | // border: 1px solid darken( $secondary, 10% ); 83 | // position: absolute; 84 | // bottom: -1px; 85 | // width: 5px; 86 | // height: 5px; 87 | // content: " "; 88 | // } 89 | 90 | // &:before { 91 | // left: -6px; 92 | // -webkit-border-bottom-right-radius: 4px; 93 | // -moz-border-bottom-right-radius: 4px; 94 | // border-bottom-right-radius: 4px; 95 | // border-width: 0 1px 1px 0; 96 | // box-shadow: 2px 2px 0 $secondary; 97 | // } 98 | 99 | // &:after { 100 | // right: -6px; 101 | // -webkit-border-bottom-left-radius: 4px; 102 | // -moz-border-bottom-left-radius: 4px; 103 | // border-bottom-left-radius: 4px; 104 | // border-width: 0 0 1px 1px; 105 | // box-shadow: -2px 2px 0 $secondary; 106 | // } 107 | // } 108 | 109 | // &:before { 110 | // border-bottom: 1px solid darken( $secondary, 10% ); 111 | // } 112 | // } 113 | // } 114 | } 115 | 116 | span.onsale { 117 | background-color: $highlight; 118 | color: $highlightext; 119 | } 120 | 121 | ul.products { 122 | li.product { 123 | .price { 124 | color: $highlight; 125 | 126 | .from { 127 | color: rgba(desaturate($highlight, 75%), 0.5); 128 | } 129 | } 130 | } 131 | } 132 | 133 | nav.woocommerce-pagination { 134 | ul { 135 | border: 1px solid darken( $secondary, 10% ); 136 | 137 | li { 138 | border-right: 1px solid darken( $secondary, 10% ); 139 | 140 | span.current, 141 | a:hover, 142 | a:focus { 143 | background: $secondary; 144 | color: darken( $secondary, 40% ); 145 | } 146 | } 147 | } 148 | } 149 | 150 | a.button, 151 | button.button, 152 | input.button, 153 | #respond input#submit { 154 | color: $secondarytext; 155 | background-color: $secondary; 156 | 157 | &:hover { 158 | background-color: $secondary - #111; 159 | color: $secondarytext; 160 | } 161 | 162 | &.alt { 163 | background-color: $primary; 164 | color: $primarytext; 165 | 166 | &:hover { 167 | background-color: $primary - #111; 168 | color: $primarytext; 169 | } 170 | 171 | &.disabled, 172 | &:disabled, 173 | &:disabled[disabled], 174 | &.disabled:hover, 175 | &:disabled:hover, 176 | &:disabled[disabled]:hover { 177 | background-color: $primary; 178 | color: $primarytext; 179 | } 180 | } 181 | 182 | &:disabled, 183 | &.disabled, 184 | &:disabled[disabled] { 185 | &:hover { 186 | background-color: $secondary; 187 | } 188 | } 189 | } 190 | 191 | #reviews { 192 | h2 small { 193 | color: $subtext; 194 | 195 | a { 196 | color: $subtext; 197 | } 198 | } 199 | 200 | #comments { 201 | ol.commentlist { 202 | li { 203 | .meta { 204 | color: $subtext; 205 | } 206 | 207 | img.avatar { 208 | background: $secondary; 209 | border: 1px solid darken( $secondary, 3% ); 210 | } 211 | 212 | .comment-text { 213 | border: 1px solid darken( $secondary, 3% ); 214 | } 215 | } 216 | 217 | #respond { 218 | border: 1px solid darken( $secondary, 3% ); 219 | } 220 | } 221 | } 222 | } 223 | 224 | .star-rating { 225 | &:before { 226 | color: darken( $secondary, 10% ); 227 | } 228 | } 229 | 230 | &.widget_shopping_cart, 231 | .widget_shopping_cart { 232 | .total { 233 | border-top: 3px double $secondary; 234 | } 235 | } 236 | 237 | form.login, 238 | form.checkout_coupon, 239 | form.register { 240 | border: 1px solid darken( $secondary, 10% ); 241 | } 242 | 243 | .order_details { 244 | li { 245 | border-right: 1px dashed darken( $secondary, 10% ); 246 | } 247 | } 248 | 249 | .widget_price_filter { 250 | .ui-slider .ui-slider-handle { 251 | background-color: $primary; 252 | } 253 | 254 | .ui-slider .ui-slider-range { 255 | background-color: $primary; 256 | } 257 | 258 | .price_slider_wrapper .ui-widget-content { 259 | background-color: $primary - #444; 260 | } 261 | } 262 | } 263 | 264 | .woocommerce-cart { 265 | table.cart { 266 | td.actions { 267 | .coupon { 268 | .input-text { 269 | border: 1px solid darken( $secondary, 10% ); 270 | } 271 | } 272 | } 273 | } 274 | 275 | .cart-collaterals { 276 | .cart_totals { 277 | p { 278 | small { 279 | color: $subtext; 280 | } 281 | } 282 | 283 | table { 284 | small { 285 | color: $subtext; 286 | } 287 | } 288 | 289 | .discount td { 290 | color: $highlight; 291 | } 292 | 293 | tr td, 294 | tr th { 295 | border-top: 1px solid $secondary; 296 | } 297 | } 298 | } 299 | } 300 | 301 | .woocommerce-checkout { 302 | .checkout { 303 | .create-account small { 304 | color: $subtext; 305 | } 306 | } 307 | 308 | #payment { 309 | background: $secondary; 310 | 311 | ul.payment_methods { 312 | border-bottom: 1px solid darken( $secondary, 10% ); 313 | } 314 | 315 | div.payment_box { 316 | background-color: darken( $secondary, 5% ); 317 | color: $secondarytext; 318 | 319 | input.input-text, textarea { 320 | border-color: darken( $secondary, 15% ); 321 | border-top-color: darken( $secondary, 20% ); 322 | } 323 | 324 | ::-webkit-input-placeholder { 325 | color: darken( $secondary, 20% ); 326 | } 327 | 328 | :-moz-placeholder { 329 | color: darken( $secondary, 20% ); 330 | } 331 | 332 | :-ms-input-placeholder { 333 | color: darken( $secondary, 20% ); 334 | } 335 | 336 | span.help { 337 | color: $subtext; 338 | } 339 | 340 | &:after { 341 | content: ""; 342 | display: block; 343 | border: 8px solid darken( $secondary, 5% ); 344 | border-right-color: transparent; 345 | border-left-color: transparent; 346 | border-top-color: transparent; 347 | position: absolute; 348 | top: -3px; 349 | left: 0; 350 | margin: -1em 0 0 2em; 351 | } 352 | } 353 | } 354 | } 355 | -------------------------------------------------------------------------------- /assets/js/customizer.min.js: -------------------------------------------------------------------------------- 1 | !function(a){function b(a){var b=tinycolor(a).toRgb(),c=(299*b.r+587*b.g+114*b.b)/1e3;return 155>c}function c(a,c,d){return b(a)?tinycolor(a).lighten(c).desaturate(d).toString():tinycolor(a).darken(c).desaturate(d).toString()}function d(a){var b=6-a.length;if(0===b)return a;for(var c=0;b>c;c++)a="0"+a;return a}function e(a,b){return"#"+d(Math.abs(parseInt(a.replace("#",""),16)-parseInt(b.replace("#",""),16)).toString(16))}wp.customize("woocommerce_colors[primary]",function(b){b.bind(function(b){var d="",f=c(b,50,18);d+=".woocommerce p.demo_store, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce #respond input#submit.alt.disabled, .woocommerce #respond input#submit.alt.disabled:hover, .woocommerce #respond input#submit.alt:disabled, .woocommerce #respond input#submit.alt:disabled:hover, .woocommerce #respond input#submit.alt:disabled[disabled], .woocommerce #respond input#submit.alt:disabled[disabled]:hover, .woocommerce a.button.alt.disabled, .woocommerce a.button.alt.disabled:hover, .woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled:hover, .woocommerce a.button.alt:disabled[disabled], .woocommerce a.button.alt:disabled[disabled]:hover, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled:hover, .woocommerce button.button.alt:disabled[disabled], .woocommerce button.button.alt:disabled[disabled]:hover, .woocommerce input.button.alt.disabled, .woocommerce input.button.alt.disabled:hover, .woocommerce input.button.alt:disabled, .woocommerce input.button.alt:disabled:hover, .woocommerce input.button.alt:disabled[disabled], .woocommerce input.button.alt:disabled[disabled]:hover { background-color: "+b+"; color: "+f+" }",d+=".woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { background-color: "+e(b,"#111111")+"; color: "+f+" }",d+=".woocommerce .widget_price_filter .ui-slider .ui-slider-handle, .woocommerce .widget_price_filter .ui-slider .ui-slider-range { background-color: "+b+" }",d+=".woocommerce .price_slider_wrapper .ui-widget-content { background-color: "+e(b,"#444444")+" }",a("#woocommerce-colors-primary").remove(),a("head").append('")})}),wp.customize("woocommerce_colors[secondary]",function(b){b.bind(function(b){var d="",f=c(b,60,18);d+=".woocommerce .woocommerce-message, .woocommerce .woocommerce-error, .woocommerce .woocommerce-info { background-color: "+tinycolor(b).lighten(5).toString()+"; color: "+f+" }",d+=".woocommerce nav.woocommerce-pagination ul { border: 1px solid "+tinycolor(b).darken(10).toString()+"; }",d+=".woocommerce nav.woocommerce-pagination ul li { border-right: 1px solid "+tinycolor(b).darken(10).toString()+"; }",d+=".woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li a:focus { background: "+b+"; color: "+tinycolor(b).darken(40).toString()+"; }",d+=".woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { color: "+f+"; background-color: "+b+"; }",d+=".woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background-color: "+e(b,"#111111")+"; color: "+f+"; }",d+=".woocommerce a.button:disabled:hover, .woocommerce a.button.disabled:hover, .woocommerce a.button:disabled[disabled]:hover, .woocommerce button.button:disabled:hover, .woocommerce button.button.disabled:hover, .woocommerce button.button:disabled[disabled]:hover, .woocommerce input.button:disabled:hover, .woocommerce input.button.disabled:hover, .woocommerce input.button:disabled[disabled]:hover, .woocommerce #respond input#submit:disabled:hover, .woocommerce #respond input#submit.disabled:hover, .woocommerce #respond input#submit:disabled[disabled]:hover { background-color: "+b+"; }",d+=".woocommerce #reviews #comments ol.commentlist li img.avatar { background: "+b+"; border: 1px solid "+tinycolor(b).darken(4).toString()+"; }",d+=".woocommerce #reviews #comments ol.commentlist li .comment-text { border: 1px solid "+tinycolor(b).darken(4).toString()+"; }",d+=".woocommerce #reviews #comments ol.commentlist #respond { border: 1px solid "+tinycolor(b).darken(4).toString()+"; }",d+=".woocommerce .star-rating:before { color: "+tinycolor(b).darken(10).toString()+"; }",d+=".woocommerce.widget_shopping_cart .total, .woocommerce .widget_shopping_cart .total { border-top: 3px double "+b+"; }",d+=".woocommerce form.login, .woocommerce form.checkout_coupon, .woocommerce form.register { border: 1px solid "+tinycolor(b).darken(10).toString()+"; }",d+=".woocommerce .order_details li { border-right: 1px dashed "+tinycolor(b).darken(10).toString()+"; }",d+=".woocommerce-cart table.cart td.actions .coupon .input-text { border: 1px solid "+tinycolor(b).darken(10).toString()+"; }",d+=".woocommerce-cart .cart-collaterals .cart_totals tr td, .woocommerce-cart .cart-collaterals .cart_totals tr th { border-top: 1px solid "+b+"; }",d+=".woocommerce-checkout #payment { background: "+b+"; }",d+=".woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid "+tinycolor(b).darken(10).toString()+"; }",d+=".woocommerce-checkout #payment div.payment_box { background-color: "+tinycolor(b).darken(5).toString()+"; color: "+f+"; }",d+=".woocommerce-checkout #payment div.payment_box input.input-text, .woocommerce-checkout #payment div.payment_box textarea { border-color: "+tinycolor(b).darken(15).toString()+"; border-top-color: "+tinycolor(b).darken(20).toString()+"; }",d+=".woocommerce-checkout #payment div.payment_box ::-webkit-input-placeholder { color: "+tinycolor(b).darken(20).toString()+"; }",d+=".woocommerce-checkout #payment div.payment_box :-moz-placeholder { color: "+tinycolor(b).darken(20).toString()+"; }",d+=".woocommerce-checkout #payment div.payment_box :-ms-input-placeholder { color: "+tinycolor(b).darken(20).toString()+"; }",d+=".woocommerce-checkout #payment div.payment_box:after { border: 8px solid "+tinycolor(b).darken(5).toString()+'; content: ""; display: block; border-right-color: transparent; border-left-color: transparent; border-top-color: transparent; position: absolute; top: -3px; left: 0; margin: -1em 0 0 2em; }',a("#woocommerce-colors-secondary").remove(),a("head").append('")})}),wp.customize("woocommerce_colors[highlight]",function(b){b.bind(function(b){var d="",e=c(b,60,18);d+=".woocommerce div.product span.price, .woocommerce div.product p.price { color: "+b+"; }",d+=".woocommerce div.product .stock { color: "+b+"; }",d+=".woocommerce span.onsale { background-color: "+b+"; color: "+e+"; }",d+=".woocommerce ul.products li.product .price { color: "+b+"; }",d+=".woocommerce ul.products li.product .price .from { color: "+tinycolor(b).desaturate(75).setAlpha(.5).toString()+"; }",d+=".woocommerce-cart .cart-collaterals .cart_totals .discount td { color: "+b+"; }",a("#woocommerce-colors-highlight").remove(),a("head").append('")})}),wp.customize("woocommerce_colors[contentbg]",function(b){b.bind(function(){var b="";a("#woocommerce-colors-contentbg").remove(),a("head").append('")})}),wp.customize("woocommerce_colors[subtext]",function(b){b.bind(function(b){var c="";c+=".woocommerce small.note { color: "+b+"; }",c+=".woocommerce .woocommerce-breadcrumb { color: "+b+"; }",c+=".woocommerce .woocommerce-breadcrumb a { color: "+b+"; }",c+=".woocommerce #reviews h2 small { color: "+b+"; }",c+=".woocommerce #reviews h2 small a { color: "+b+"; }",c+=".woocommerce #reviews #comments ol.commentlist li .meta { color: "+b+"; }",c+=".woocommerce-cart .cart-collaterals .cart_totals p small { color: "+b+"; }",c+=".woocommerce-cart .cart-collaterals .cart_totals table small { color: "+b+"; }",c+=".woocommerce-checkout .checkout .create-account small { color: "+b+"; }",c+=".woocommerce-checkout #payment div.payment_box span.help { color: "+b+"; }",a("#woocommerce-colors-subtext").remove(),a("head").append('")})})}(jQuery); -------------------------------------------------------------------------------- /assets/js/tinycolor.min.js: -------------------------------------------------------------------------------- 1 | !function(){function a(a){var c={r:0,g:0,b:0},e=1,g=!1,h=!1;return"string"==typeof a&&(a=G(a)),"object"==typeof a&&(a.hasOwnProperty("r")&&a.hasOwnProperty("g")&&a.hasOwnProperty("b")?(c=b(a.r,a.g,a.b),g=!0,h="%"===String(a.r).substr(-1)?"prgb":"rgb"):a.hasOwnProperty("h")&&a.hasOwnProperty("s")&&a.hasOwnProperty("v")?(a.s=D(a.s),a.v=D(a.v),c=f(a.h,a.s,a.v),g=!0,h="hsv"):a.hasOwnProperty("h")&&a.hasOwnProperty("s")&&a.hasOwnProperty("l")&&(a.s=D(a.s),a.l=D(a.l),c=d(a.h,a.s,a.l),g=!0,h="hsl"),a.hasOwnProperty("a")&&(e=a.a)),e=w(e),{ok:g,format:a.format||h,r:M(255,N(c.r,0)),g:M(255,N(c.g,0)),b:M(255,N(c.b,0)),a:e}}function b(a,b,c){return{r:255*x(a,255),g:255*x(b,255),b:255*x(c,255)}}function c(a,b,c){a=x(a,255),b=x(b,255),c=x(c,255);var d,e,f=N(a,b,c),g=M(a,b,c),h=(f+g)/2;if(f==g)d=e=0;else{var i=f-g;switch(e=h>.5?i/(2-f-g):i/(f+g),f){case a:d=(b-c)/i+(c>b?6:0);break;case b:d=(c-a)/i+2;break;case c:d=(a-b)/i+4}d/=6}return{h:d,s:e,l:h}}function d(a,b,c){function d(a,b,c){return 0>c&&(c+=1),c>1&&(c-=1),1/6>c?a+6*(b-a)*c:.5>c?b:2/3>c?a+(b-a)*(2/3-c)*6:a}var e,f,g;if(a=x(a,360),b=x(b,100),c=x(c,100),0===b)e=f=g=c;else{var h=.5>c?c*(1+b):c+b-c*b,i=2*c-h;e=d(i,h,a+1/3),f=d(i,h,a),g=d(i,h,a-1/3)}return{r:255*e,g:255*f,b:255*g}}function e(a,b,c){a=x(a,255),b=x(b,255),c=x(c,255);var d,e,f=N(a,b,c),g=M(a,b,c),h=f,i=f-g;if(e=0===f?0:i/f,f==g)d=0;else{switch(f){case a:d=(b-c)/i+(c>b?6:0);break;case b:d=(c-a)/i+2;break;case c:d=(a-b)/i+4}d/=6}return{h:d,s:e,v:h}}function f(a,b,c){a=6*x(a,360),b=x(b,100),c=x(c,100);var d=K.floor(a),e=a-d,f=c*(1-b),g=c*(1-e*b),h=c*(1-(1-e)*b),i=d%6,j=[c,g,f,f,h,c][i],k=[h,c,c,g,f,f][i],l=[f,f,h,c,c,g][i];return{r:255*j,g:255*k,b:255*l}}function g(a,b,c,d){var e=[C(L(a).toString(16)),C(L(b).toString(16)),C(L(c).toString(16))];return d&&e[0].charAt(0)==e[0].charAt(1)&&e[1].charAt(0)==e[1].charAt(1)&&e[2].charAt(0)==e[2].charAt(1)?e[0].charAt(0)+e[1].charAt(0)+e[2].charAt(0):e.join("")}function h(a,b,c,d){var e=[C(E(d)),C(L(a).toString(16)),C(L(b).toString(16)),C(L(c).toString(16))];return e.join("")}function i(a,b){b=0===b?0:b||10;var c=P(a).toHsl();return c.s-=b/100,c.s=y(c.s),P(c)}function j(a,b){b=0===b?0:b||10;var c=P(a).toHsl();return c.s+=b/100,c.s=y(c.s),P(c)}function k(a){return P(a).desaturate(100)}function l(a,b){b=0===b?0:b||10;var c=P(a).toHsl();return c.l+=b/100,c.l=y(c.l),P(c)}function m(a,b){b=0===b?0:b||10;var c=P(a).toRgb();return c.r=N(0,M(255,c.r-L(255*-(b/100)))),c.g=N(0,M(255,c.g-L(255*-(b/100)))),c.b=N(0,M(255,c.b-L(255*-(b/100)))),P(c)}function n(a,b){b=0===b?0:b||10;var c=P(a).toHsl();return c.l-=b/100,c.l=y(c.l),P(c)}function o(a,b){var c=P(a).toHsl(),d=(L(c.h)+b)%360;return c.h=0>d?360+d:d,P(c)}function p(a){var b=P(a).toHsl();return b.h=(b.h+180)%360,P(b)}function q(a){var b=P(a).toHsl(),c=b.h;return[P(a),P({h:(c+120)%360,s:b.s,l:b.l}),P({h:(c+240)%360,s:b.s,l:b.l})]}function r(a){var b=P(a).toHsl(),c=b.h;return[P(a),P({h:(c+90)%360,s:b.s,l:b.l}),P({h:(c+180)%360,s:b.s,l:b.l}),P({h:(c+270)%360,s:b.s,l:b.l})]}function s(a){var b=P(a).toHsl(),c=b.h;return[P(a),P({h:(c+72)%360,s:b.s,l:b.l}),P({h:(c+216)%360,s:b.s,l:b.l})]}function t(a,b,c){b=b||6,c=c||30;var d=P(a).toHsl(),e=360/c,f=[P(a)];for(d.h=(d.h-(e*b>>1)+720)%360;--b;)d.h=(d.h+e)%360,f.push(P(d));return f}function u(a,b){b=b||6;for(var c=P(a).toHsv(),d=c.h,e=c.s,f=c.v,g=[],h=1/b;b--;)g.push(P({h:d,s:e,v:f})),f=(f+h)%1;return g}function v(a){var b={};for(var c in a)a.hasOwnProperty(c)&&(b[a[c]]=c);return b}function w(a){return a=parseFloat(a),(isNaN(a)||0>a||a>1)&&(a=1),a}function x(a,b){A(a)&&(a="100%");var c=B(a);return a=M(b,N(0,parseFloat(a))),c&&(a=parseInt(a*b,10)/100),K.abs(a-b)<1e-6?1:a%b/parseFloat(b)}function y(a){return M(1,N(0,a))}function z(a){return parseInt(a,16)}function A(a){return"string"==typeof a&&-1!=a.indexOf(".")&&1===parseFloat(a)}function B(a){return"string"==typeof a&&-1!=a.indexOf("%")}function C(a){return 1==a.length?"0"+a:""+a}function D(a){return 1>=a&&(a=100*a+"%"),a}function E(a){return Math.round(255*parseFloat(a)).toString(16)}function F(a){return z(a)/255}function G(a){a=a.replace(H,"").replace(I,"").toLowerCase();var b=!1;if(Q[a])a=Q[a],b=!0;else if("transparent"==a)return{r:0,g:0,b:0,a:0,format:"name"};var c;return(c=S.rgb.exec(a))?{r:c[1],g:c[2],b:c[3]}:(c=S.rgba.exec(a))?{r:c[1],g:c[2],b:c[3],a:c[4]}:(c=S.hsl.exec(a))?{h:c[1],s:c[2],l:c[3]}:(c=S.hsla.exec(a))?{h:c[1],s:c[2],l:c[3],a:c[4]}:(c=S.hsv.exec(a))?{h:c[1],s:c[2],v:c[3]}:(c=S.hsva.exec(a))?{h:c[1],s:c[2],v:c[3],a:c[4]}:(c=S.hex8.exec(a))?{a:F(c[1]),r:z(c[2]),g:z(c[3]),b:z(c[4]),format:b?"name":"hex8"}:(c=S.hex6.exec(a))?{r:z(c[1]),g:z(c[2]),b:z(c[3]),format:b?"name":"hex"}:(c=S.hex3.exec(a))?{r:z(c[1]+""+c[1]),g:z(c[2]+""+c[2]),b:z(c[3]+""+c[3]),format:b?"name":"hex"}:!1}var H=/^[\s,#]+/,I=/\s+$/,J=0,K=Math,L=K.round,M=K.min,N=K.max,O=K.random,P=function T(b,c){if(b=b?b:"",c=c||{},b instanceof T)return b;if(!(this instanceof T))return new T(b,c);var d=a(b);this._originalInput=b,this._r=d.r,this._g=d.g,this._b=d.b,this._a=d.a,this._roundA=L(100*this._a)/100,this._format=c.format||d.format,this._gradientType=c.gradientType,this._r<1&&(this._r=L(this._r)),this._g<1&&(this._g=L(this._g)),this._b<1&&(this._b=L(this._b)),this._ok=d.ok,this._tc_id=J++};P.prototype={isDark:function(){return this.getBrightness()<128},isLight:function(){return!this.isDark()},isValid:function(){return this._ok},getOriginalInput:function(){return this._originalInput},getFormat:function(){return this._format},getAlpha:function(){return this._a},getBrightness:function(){var a=this.toRgb();return(299*a.r+587*a.g+114*a.b)/1e3},setAlpha:function(a){return this._a=w(a),this._roundA=L(100*this._a)/100,this},toHsv:function(){var a=e(this._r,this._g,this._b);return{h:360*a.h,s:a.s,v:a.v,a:this._a}},toHsvString:function(){var a=e(this._r,this._g,this._b),b=L(360*a.h),c=L(100*a.s),d=L(100*a.v);return 1==this._a?"hsv("+b+", "+c+"%, "+d+"%)":"hsva("+b+", "+c+"%, "+d+"%, "+this._roundA+")"},toHsl:function(){var a=c(this._r,this._g,this._b);return{h:360*a.h,s:a.s,l:a.l,a:this._a}},toHslString:function(){var a=c(this._r,this._g,this._b),b=L(360*a.h),d=L(100*a.s),e=L(100*a.l);return 1==this._a?"hsl("+b+", "+d+"%, "+e+"%)":"hsla("+b+", "+d+"%, "+e+"%, "+this._roundA+")"},toHex:function(a){return g(this._r,this._g,this._b,a)},toHexString:function(a){return"#"+this.toHex(a)},toHex8:function(){return h(this._r,this._g,this._b,this._a)},toHex8String:function(){return"#"+this.toHex8()},toRgb:function(){return{r:L(this._r),g:L(this._g),b:L(this._b),a:this._a}},toRgbString:function(){return 1==this._a?"rgb("+L(this._r)+", "+L(this._g)+", "+L(this._b)+")":"rgba("+L(this._r)+", "+L(this._g)+", "+L(this._b)+", "+this._roundA+")"},toPercentageRgb:function(){return{r:L(100*x(this._r,255))+"%",g:L(100*x(this._g,255))+"%",b:L(100*x(this._b,255))+"%",a:this._a}},toPercentageRgbString:function(){return 1==this._a?"rgb("+L(100*x(this._r,255))+"%, "+L(100*x(this._g,255))+"%, "+L(100*x(this._b,255))+"%)":"rgba("+L(100*x(this._r,255))+"%, "+L(100*x(this._g,255))+"%, "+L(100*x(this._b,255))+"%, "+this._roundA+")"},toName:function(){return 0===this._a?"transparent":this._a<1?!1:R[g(this._r,this._g,this._b,!0)]||!1},toFilter:function(a){var b="#"+h(this._r,this._g,this._b,this._a),c=b,d=this._gradientType?"GradientType = 1, ":"";if(a){var e=P(a);c=e.toHex8String()}return"progid:DXImageTransform.Microsoft.gradient("+d+"startColorstr="+b+",endColorstr="+c+")"},toString:function(a){var b=!!a;a=a||this._format;var c=!1,d=this._a<1&&this._a>=0,e=!b&&d&&("hex"===a||"hex6"===a||"hex3"===a||"name"===a);return e?"name"===a&&0===this._a?this.toName():this.toRgbString():("rgb"===a&&(c=this.toRgbString()),"prgb"===a&&(c=this.toPercentageRgbString()),("hex"===a||"hex6"===a)&&(c=this.toHexString()),"hex3"===a&&(c=this.toHexString(!0)),"hex8"===a&&(c=this.toHex8String()),"name"===a&&(c=this.toName()),"hsl"===a&&(c=this.toHslString()),"hsv"===a&&(c=this.toHsvString()),c||this.toHexString())},_applyModification:function(a,b){var c=a.apply(null,[this].concat([].slice.call(b)));return this._r=c._r,this._g=c._g,this._b=c._b,this.setAlpha(c._a),this},lighten:function(){return this._applyModification(l,arguments)},brighten:function(){return this._applyModification(m,arguments)},darken:function(){return this._applyModification(n,arguments)},desaturate:function(){return this._applyModification(i,arguments)},saturate:function(){return this._applyModification(j,arguments)},greyscale:function(){return this._applyModification(k,arguments)},spin:function(){return this._applyModification(o,arguments)},_applyCombination:function(a,b){return a.apply(null,[this].concat([].slice.call(b)))},analogous:function(){return this._applyCombination(t,arguments)},complement:function(){return this._applyCombination(p,arguments)},monochromatic:function(){return this._applyCombination(u,arguments)},splitcomplement:function(){return this._applyCombination(s,arguments)},triad:function(){return this._applyCombination(q,arguments)},tetrad:function(){return this._applyCombination(r,arguments)}},P.fromRatio=function(a,b){if("object"==typeof a){var c={};for(var d in a)a.hasOwnProperty(d)&&(c[d]="a"===d?a[d]:D(a[d]));a=c}return P(a,b)},P.equals=function(a,b){return a&&b?P(a).toRgbString()==P(b).toRgbString():!1},P.random=function(){return P.fromRatio({r:O(),g:O(),b:O()})},P.mix=function(a,b,c){c=0===c?0:c||50;var d,e=P(a).toRgb(),f=P(b).toRgb(),g=c/100,h=2*g-1,i=f.a-e.a;d=h*i==-1?h:(h+i)/(1+h*i),d=(d+1)/2;var j=1-d,k={r:f.r*d+e.r*j,g:f.g*d+e.g*j,b:f.b*d+e.b*j,a:f.a*g+e.a*(1-g)};return P(k)},P.readability=function(a,b){var c=P(a),d=P(b),e=c.toRgb(),f=d.toRgb(),g=c.getBrightness(),h=d.getBrightness(),i=Math.max(e.r,f.r)-Math.min(e.r,f.r)+Math.max(e.g,f.g)-Math.min(e.g,f.g)+Math.max(e.b,f.b)-Math.min(e.b,f.b);return{brightness:Math.abs(g-h),color:i}},P.isReadable=function(a,b){var c=P.readability(a,b);return c.brightness>125&&c.color>500},P.mostReadable=function(a,b){for(var c=null,d=0,e=!1,f=0;f125&&g.color>500,i=3*(g.brightness/125)+g.color/500;(h&&!e||h&&e&&i>d||!h&&!e&&i>d)&&(e=h,d=i,c=P(b[f]))}return c};var Q=P.names={aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"0ff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000",blanchedalmond:"ffebcd",blue:"00f",blueviolet:"8a2be2",brown:"a52a2a",burlywood:"deb887",burntsienna:"ea7e5d",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"0ff",darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgreen:"006400",darkgrey:"a9a9a9",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f",darkslategrey:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dimgrey:"696969",dodgerblue:"1e90ff",firebrick:"b22222",floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"f0f",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",green:"008000",greenyellow:"adff2f",grey:"808080",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5",lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgray:"d3d3d3",lightgreen:"90ee90",lightgrey:"d3d3d3",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslategray:"789",lightslategrey:"789",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"0f0",limegreen:"32cd32",linen:"faf0e6",magenta:"f0f",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3",mediumpurple:"9370db",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"db7093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f",pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",rebeccapurple:"663399",red:"f00",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",slategrey:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",wheat:"f5deb3",white:"fff",whitesmoke:"f5f5f5",yellow:"ff0",yellowgreen:"9acd32"},R=P.hexNames=v(Q),S=function(){var a="[-\\+]?\\d+%?",b="[-\\+]?\\d*\\.\\d+%?",c="(?:"+b+")|(?:"+a+")",d="[\\s|\\(]+("+c+")[,|\\s]+("+c+")[,|\\s]+("+c+")\\s*\\)?",e="[\\s|\\(]+("+c+")[,|\\s]+("+c+")[,|\\s]+("+c+")[,|\\s]+("+c+")\\s*\\)?";return{rgb:new RegExp("rgb"+d),rgba:new RegExp("rgba"+e),hsl:new RegExp("hsl"+d),hsla:new RegExp("hsla"+e),hsv:new RegExp("hsv"+d),hsva:new RegExp("hsva"+e),hex3:/^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex8:/^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/}}();"undefined"!=typeof module&&module.exports?module.exports=P:"function"==typeof define&&define.amd?define(function(){return P}):window.tinycolor=P}(); -------------------------------------------------------------------------------- /assets/js/customizer.js: -------------------------------------------------------------------------------- 1 | /*global tinycolor */ 2 | ( function( $ ) { 3 | 4 | function isDark( color ) { 5 | var rgb = tinycolor( color ).toRgb(), 6 | brightness = ( ( rgb.r * 299 ) + ( rgb.g * 587 ) + ( rgb.b * 114 ) ) / 1000; 7 | 8 | return brightness < 155; 9 | } 10 | 11 | function changeColor( color, adjustment, saturation ) { 12 | if ( isDark( color ) ) { 13 | return tinycolor( color ).lighten( adjustment ).desaturate( saturation ).toString(); 14 | } else { 15 | return tinycolor( color ).darken( adjustment ).desaturate( saturation ).toString(); 16 | } 17 | } 18 | 19 | function colorZeroPad( number ) { 20 | var total = 6 - number.length; 21 | 22 | if ( 0 === total ) { 23 | return number; 24 | } 25 | 26 | for ( var i = 0; i < total; i++ ) { 27 | number = '0' + number; 28 | } 29 | 30 | return number; 31 | } 32 | 33 | function subtractColor( color, subtract ) { 34 | return '#' + colorZeroPad( Math.abs( parseInt( color.replace( '#', '' ), 16 ) - parseInt( subtract.replace( '#', '' ), 16 ) ).toString( 16 ) ); 35 | } 36 | 37 | // Primary Color. 38 | wp.customize( 'woocommerce_colors[primary]', function( value ) { 39 | value.bind( function( primary ) { 40 | var css = '', 41 | primaryText = changeColor( primary, 50, 18 ); 42 | 43 | // Buttons. 44 | css += '.woocommerce p.demo_store, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce #respond input#submit.alt.disabled, .woocommerce #respond input#submit.alt.disabled:hover, .woocommerce #respond input#submit.alt:disabled, .woocommerce #respond input#submit.alt:disabled:hover, .woocommerce #respond input#submit.alt:disabled[disabled], .woocommerce #respond input#submit.alt:disabled[disabled]:hover, .woocommerce a.button.alt.disabled, .woocommerce a.button.alt.disabled:hover, .woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled:hover, .woocommerce a.button.alt:disabled[disabled], .woocommerce a.button.alt:disabled[disabled]:hover, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled:hover, .woocommerce button.button.alt:disabled[disabled], .woocommerce button.button.alt:disabled[disabled]:hover, .woocommerce input.button.alt.disabled, .woocommerce input.button.alt.disabled:hover, .woocommerce input.button.alt:disabled, .woocommerce input.button.alt:disabled:hover, .woocommerce input.button.alt:disabled[disabled], .woocommerce input.button.alt:disabled[disabled]:hover { background-color: ' + primary + '; color: ' + primaryText + ' }'; 45 | css += '.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { background-color: ' + subtractColor( primary, '#111111' ) + '; color: ' + primaryText + ' }'; 46 | 47 | // Widget proce filter. 48 | css += '.woocommerce .widget_price_filter .ui-slider .ui-slider-handle, .woocommerce .widget_price_filter .ui-slider .ui-slider-range { background-color: ' + primary + ' }'; 49 | css += '.woocommerce .price_slider_wrapper .ui-widget-content { background-color: ' + subtractColor( primary, '#444444' ) + ' }'; 50 | 51 | $( '#woocommerce-colors-primary' ).remove(); 52 | $( 'head' ).append( '' ); 53 | }); 54 | }); 55 | 56 | // Secondary Color. 57 | wp.customize( 'woocommerce_colors[secondary]', function( value ) { 58 | value.bind( function( secondary ) { 59 | var css = '', 60 | secondaryText = changeColor( secondary, 60, 18 ); 61 | 62 | // Messages. 63 | css += '.woocommerce .woocommerce-message, .woocommerce .woocommerce-error, .woocommerce .woocommerce-info { background-color: ' + tinycolor( secondary ).lighten( 5 ).toString() + '; color: ' + secondaryText + ' }'; 64 | 65 | // Tabs. 66 | // css += '.woocommerce div.product .woocommerce-tabs ul.tabs li { border: 1px solid ' + tinycolor( secondary ).darken( 10 ).toString() + '; background-color: ' + secondary + '; }'; 67 | // css += '.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: ' + secondaryText + '; }'; 68 | // css += '.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: ' + tinycolor( secondaryText ).lighten( 10 ).toString() + '; }'; 69 | // css += '.woocommerce div.product .woocommerce-tabs ul.tabs li:before, .woocommerce div.product .woocommerce-tabs ul.tabs li:after { border: 1px solid ' + tinycolor( secondary ).darken( 10 ).toString() + '; position: absolute; bottom: -1px; width: 5px; height: 5px; content: " "; }'; 70 | // css += '.woocommerce div.product .woocommerce-tabs ul.tabs li:before { box-shadow: 2px 2px 0 ' + secondary + '; left: -6px; -webkit-border-bottom-right-radius: 4px; -moz-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; border-width: 0 1px 1px 0; }'; 71 | // css += '.woocommerce div.product .woocommerce-tabs ul.tabs li:after { box-shadow: -2px 2px 0 ' + secondary + '; right: -6px; -webkit-border-bottom-left-radius: 4px; -moz-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; border-width: 0 0 1px 1px; }'; 72 | // css += '.woocommerce div.product .woocommerce-tabs ul.tabs:before { border-bottom: 1px solid ' + tinycolor( secondary ).darken( 10 ).toString() + '; }'; 73 | 74 | // Pagination. 75 | css += '.woocommerce nav.woocommerce-pagination ul { border: 1px solid ' + tinycolor( secondary ).darken( 10 ).toString() + '; }'; 76 | css += '.woocommerce nav.woocommerce-pagination ul li { border-right: 1px solid ' + tinycolor( secondary ).darken( 10 ).toString() + '; }'; 77 | css += '.woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li a:focus { background: ' + secondary + '; color: ' + tinycolor( secondary ).darken( 40 ).toString() + '; }'; 78 | 79 | // Buttons. 80 | css += '.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { color: ' + secondaryText + '; background-color: ' + secondary + '; }'; 81 | css += '.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background-color: ' + subtractColor( secondary, '#111111' ) + '; color: ' + secondaryText + '; }'; 82 | css += '.woocommerce a.button:disabled:hover, .woocommerce a.button.disabled:hover, .woocommerce a.button:disabled[disabled]:hover, .woocommerce button.button:disabled:hover, .woocommerce button.button.disabled:hover, .woocommerce button.button:disabled[disabled]:hover, .woocommerce input.button:disabled:hover, .woocommerce input.button.disabled:hover, .woocommerce input.button:disabled[disabled]:hover, .woocommerce #respond input#submit:disabled:hover, .woocommerce #respond input#submit.disabled:hover, .woocommerce #respond input#submit:disabled[disabled]:hover { background-color: ' + secondary + '; }'; 83 | 84 | // Reviews. 85 | css += '.woocommerce #reviews #comments ol.commentlist li img.avatar { background: ' + secondary + '; border: 1px solid ' + tinycolor( secondary ).darken( 4 ).toString() + '; }'; 86 | css += '.woocommerce #reviews #comments ol.commentlist li .comment-text { border: 1px solid ' + tinycolor( secondary ).darken( 4 ).toString() + '; }'; 87 | css += '.woocommerce #reviews #comments ol.commentlist #respond { border: 1px solid ' + tinycolor( secondary ).darken( 4 ).toString() + '; }'; 88 | 89 | // Ratings. 90 | css += '.woocommerce .star-rating:before { color: ' + tinycolor( secondary ).darken( 10 ).toString() + '; }'; 91 | 92 | // Widget shopping cart. 93 | css += '.woocommerce.widget_shopping_cart .total, .woocommerce .widget_shopping_cart .total { border-top: 3px double ' + secondary + '; }'; 94 | 95 | // Forms. 96 | css += '.woocommerce form.login, .woocommerce form.checkout_coupon, .woocommerce form.register { border: 1px solid ' + tinycolor( secondary ).darken( 10 ).toString() + '; }'; 97 | 98 | // Order page. 99 | css += '.woocommerce .order_details li { border-right: 1px dashed ' + tinycolor( secondary ).darken( 10 ).toString() + '; }'; 100 | 101 | // Cart page. 102 | css += '.woocommerce-cart table.cart td.actions .coupon .input-text { border: 1px solid ' + tinycolor( secondary ).darken( 10 ).toString() + '; }'; 103 | css += '.woocommerce-cart .cart-collaterals .cart_totals tr td, .woocommerce-cart .cart-collaterals .cart_totals tr th { border-top: 1px solid ' + secondary + '; }'; 104 | 105 | // Checkout page. 106 | css += '.woocommerce-checkout #payment { background: ' + secondary + '; }'; 107 | css += '.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid ' + tinycolor( secondary ).darken( 10 ).toString() + '; }'; 108 | css += '.woocommerce-checkout #payment div.payment_box { background-color: ' + tinycolor( secondary ).darken( 5 ).toString() + '; color: ' + secondaryText + '; }'; 109 | css += '.woocommerce-checkout #payment div.payment_box input.input-text, .woocommerce-checkout #payment div.payment_box textarea { border-color: ' + tinycolor( secondary ).darken( 15 ).toString() + '; border-top-color: ' + tinycolor( secondary ).darken( 20 ).toString() + '; }'; 110 | css += '.woocommerce-checkout #payment div.payment_box ::-webkit-input-placeholder { color: ' + tinycolor( secondary ).darken( 20 ).toString() + '; }'; 111 | css += '.woocommerce-checkout #payment div.payment_box :-moz-placeholder { color: ' + tinycolor( secondary ).darken( 20 ).toString() + '; }'; 112 | css += '.woocommerce-checkout #payment div.payment_box :-ms-input-placeholder { color: ' + tinycolor( secondary ).darken( 20 ).toString() + '; }'; 113 | css += '.woocommerce-checkout #payment div.payment_box:after { border: 8px solid ' + tinycolor( secondary ).darken( 5 ).toString() + '; content: ""; display: block; border-right-color: transparent; border-left-color: transparent; border-top-color: transparent; position: absolute; top: -3px; left: 0; margin: -1em 0 0 2em; }'; 114 | 115 | $( '#woocommerce-colors-secondary' ).remove(); 116 | $( 'head' ).append( '' ); 117 | 118 | }); 119 | }); 120 | 121 | // Highlight Color. 122 | wp.customize( 'woocommerce_colors[highlight]', function( value ) { 123 | value.bind( function( highlight ) { 124 | var css = '', 125 | highlightText = changeColor( highlight, 60, 18 ); 126 | 127 | // Product page. 128 | css += '.woocommerce div.product span.price, .woocommerce div.product p.price { color: ' + highlight + '; }'; 129 | css += '.woocommerce div.product .stock { color: ' + highlight + '; }'; 130 | 131 | // On Sale. 132 | css += '.woocommerce span.onsale { background-color: ' + highlight + '; color: ' + highlightText + '; }'; 133 | 134 | // Products loop. 135 | css += '.woocommerce ul.products li.product .price { color: ' + highlight + '; }'; 136 | css += '.woocommerce ul.products li.product .price .from { color: ' + tinycolor( highlight ).desaturate( 75 ).setAlpha( 0.5 ).toString() + '; }'; 137 | 138 | // Cart page. 139 | css += '.woocommerce-cart .cart-collaterals .cart_totals .discount td { color: ' + highlight + '; }'; 140 | 141 | $( '#woocommerce-colors-highlight' ).remove(); 142 | $( 'head' ).append( '' ); 143 | }); 144 | }); 145 | 146 | // Content Background Color. 147 | wp.customize( 'woocommerce_colors[contentbg]', function( value ) { 148 | value.bind( function( contentbg ) { 149 | var css = ''; 150 | 151 | // Product page. 152 | // css += '.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: ' + contentbg + '; border-bottom-color: ' + contentbg + '; }'; 153 | // css += '.woocommerce div.product .woocommerce-tabs ul.tabs li.active:before { box-shadow: 2px 2px 0 ' + contentbg + '; }'; 154 | // css += '.woocommerce div.product .woocommerce-tabs ul.tabs li.active:after { box-shadow: -2px 2px 0 ' + contentbg + '; }'; 155 | 156 | $( '#woocommerce-colors-contentbg' ).remove(); 157 | $( 'head' ).append( '' ); 158 | }); 159 | }); 160 | 161 | // Subtext Color. 162 | wp.customize( 'woocommerce_colors[subtext]', function( value ) { 163 | value.bind( function( subtext ) { 164 | var css = ''; 165 | 166 | // Notes. 167 | css += '.woocommerce small.note { color: ' + subtext + '; }'; 168 | 169 | // Breadcrumbs. 170 | css += '.woocommerce .woocommerce-breadcrumb { color: ' + subtext + '; }'; 171 | css += '.woocommerce .woocommerce-breadcrumb a { color: ' + subtext + '; }'; 172 | 173 | // Reviews. 174 | css += '.woocommerce #reviews h2 small { color: ' + subtext + '; }'; 175 | css += '.woocommerce #reviews h2 small a { color: ' + subtext + '; }'; 176 | css += '.woocommerce #reviews #comments ol.commentlist li .meta { color: ' + subtext + '; }'; 177 | 178 | // Cart page. 179 | css += '.woocommerce-cart .cart-collaterals .cart_totals p small { color: ' + subtext + '; }'; 180 | css += '.woocommerce-cart .cart-collaterals .cart_totals table small { color: ' + subtext + '; }'; 181 | 182 | // Checkout page. 183 | css += '.woocommerce-checkout .checkout .create-account small { color: ' + subtext + '; }'; 184 | css += '.woocommerce-checkout #payment div.payment_box span.help { color: ' + subtext + '; }'; 185 | 186 | $( '#woocommerce-colors-subtext' ).remove(); 187 | $( 'head' ).append( '' ); 188 | }); 189 | }); 190 | 191 | })( jQuery ); 192 | -------------------------------------------------------------------------------- /assets/js/tinycolor.js: -------------------------------------------------------------------------------- 1 | // TinyColor v1.1.1 2 | // https://github.com/bgrins/TinyColor 3 | // Brian Grinstead, MIT License 4 | 5 | (function() { 6 | 7 | var trimLeft = /^[\s,#]+/, 8 | trimRight = /\s+$/, 9 | tinyCounter = 0, 10 | math = Math, 11 | mathRound = math.round, 12 | mathMin = math.min, 13 | mathMax = math.max, 14 | mathRandom = math.random; 15 | 16 | var tinycolor = function tinycolor (color, opts) { 17 | 18 | color = (color) ? color : ''; 19 | opts = opts || { }; 20 | 21 | // If input is already a tinycolor, return itself 22 | if (color instanceof tinycolor) { 23 | return color; 24 | } 25 | // If we are called as a function, call using new instead 26 | if (!(this instanceof tinycolor)) { 27 | return new tinycolor(color, opts); 28 | } 29 | 30 | var rgb = inputToRGB(color); 31 | this._originalInput = color, 32 | this._r = rgb.r, 33 | this._g = rgb.g, 34 | this._b = rgb.b, 35 | this._a = rgb.a, 36 | this._roundA = mathRound(100*this._a) / 100, 37 | this._format = opts.format || rgb.format; 38 | this._gradientType = opts.gradientType; 39 | 40 | // Don't let the range of [0,255] come back in [0,1]. 41 | // Potentially lose a little bit of precision here, but will fix issues where 42 | // .5 gets interpreted as half of the total, instead of half of 1 43 | // If it was supposed to be 128, this was already taken care of by `inputToRgb` 44 | if (this._r < 1) { this._r = mathRound(this._r); } 45 | if (this._g < 1) { this._g = mathRound(this._g); } 46 | if (this._b < 1) { this._b = mathRound(this._b); } 47 | 48 | this._ok = rgb.ok; 49 | this._tc_id = tinyCounter++; 50 | }; 51 | 52 | tinycolor.prototype = { 53 | isDark: function() { 54 | return this.getBrightness() < 128; 55 | }, 56 | isLight: function() { 57 | return !this.isDark(); 58 | }, 59 | isValid: function() { 60 | return this._ok; 61 | }, 62 | getOriginalInput: function() { 63 | return this._originalInput; 64 | }, 65 | getFormat: function() { 66 | return this._format; 67 | }, 68 | getAlpha: function() { 69 | return this._a; 70 | }, 71 | getBrightness: function() { 72 | var rgb = this.toRgb(); 73 | return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000; 74 | }, 75 | setAlpha: function(value) { 76 | this._a = boundAlpha(value); 77 | this._roundA = mathRound(100*this._a) / 100; 78 | return this; 79 | }, 80 | toHsv: function() { 81 | var hsv = rgbToHsv(this._r, this._g, this._b); 82 | return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a }; 83 | }, 84 | toHsvString: function() { 85 | var hsv = rgbToHsv(this._r, this._g, this._b); 86 | var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100); 87 | return (this._a == 1) ? 88 | "hsv(" + h + ", " + s + "%, " + v + "%)" : 89 | "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")"; 90 | }, 91 | toHsl: function() { 92 | var hsl = rgbToHsl(this._r, this._g, this._b); 93 | return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a }; 94 | }, 95 | toHslString: function() { 96 | var hsl = rgbToHsl(this._r, this._g, this._b); 97 | var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100); 98 | return (this._a == 1) ? 99 | "hsl(" + h + ", " + s + "%, " + l + "%)" : 100 | "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")"; 101 | }, 102 | toHex: function(allow3Char) { 103 | return rgbToHex(this._r, this._g, this._b, allow3Char); 104 | }, 105 | toHexString: function(allow3Char) { 106 | return '#' + this.toHex(allow3Char); 107 | }, 108 | toHex8: function() { 109 | return rgbaToHex(this._r, this._g, this._b, this._a); 110 | }, 111 | toHex8String: function() { 112 | return '#' + this.toHex8(); 113 | }, 114 | toRgb: function() { 115 | return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a }; 116 | }, 117 | toRgbString: function() { 118 | return (this._a == 1) ? 119 | "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : 120 | "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; 121 | }, 122 | toPercentageRgb: function() { 123 | return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a }; 124 | }, 125 | toPercentageRgbString: function() { 126 | return (this._a == 1) ? 127 | "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" : 128 | "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")"; 129 | }, 130 | toName: function() { 131 | if (this._a === 0) { 132 | return "transparent"; 133 | } 134 | 135 | if (this._a < 1) { 136 | return false; 137 | } 138 | 139 | return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; 140 | }, 141 | toFilter: function(secondColor) { 142 | var hex8String = '#' + rgbaToHex(this._r, this._g, this._b, this._a); 143 | var secondHex8String = hex8String; 144 | var gradientType = this._gradientType ? "GradientType = 1, " : ""; 145 | 146 | if (secondColor) { 147 | var s = tinycolor(secondColor); 148 | secondHex8String = s.toHex8String(); 149 | } 150 | 151 | return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"; 152 | }, 153 | toString: function(format) { 154 | var formatSet = !!format; 155 | format = format || this._format; 156 | 157 | var formattedString = false; 158 | var hasAlpha = this._a < 1 && this._a >= 0; 159 | var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "name"); 160 | 161 | if (needsAlphaFormat) { 162 | // Special case for "transparent", all other non-alpha formats 163 | // will return rgba when there is transparency. 164 | if (format === "name" && this._a === 0) { 165 | return this.toName(); 166 | } 167 | return this.toRgbString(); 168 | } 169 | if (format === "rgb") { 170 | formattedString = this.toRgbString(); 171 | } 172 | if (format === "prgb") { 173 | formattedString = this.toPercentageRgbString(); 174 | } 175 | if (format === "hex" || format === "hex6") { 176 | formattedString = this.toHexString(); 177 | } 178 | if (format === "hex3") { 179 | formattedString = this.toHexString(true); 180 | } 181 | if (format === "hex8") { 182 | formattedString = this.toHex8String(); 183 | } 184 | if (format === "name") { 185 | formattedString = this.toName(); 186 | } 187 | if (format === "hsl") { 188 | formattedString = this.toHslString(); 189 | } 190 | if (format === "hsv") { 191 | formattedString = this.toHsvString(); 192 | } 193 | 194 | return formattedString || this.toHexString(); 195 | }, 196 | 197 | _applyModification: function(fn, args) { 198 | var color = fn.apply(null, [this].concat([].slice.call(args))); 199 | this._r = color._r; 200 | this._g = color._g; 201 | this._b = color._b; 202 | this.setAlpha(color._a); 203 | return this; 204 | }, 205 | lighten: function() { 206 | return this._applyModification(lighten, arguments); 207 | }, 208 | brighten: function() { 209 | return this._applyModification(brighten, arguments); 210 | }, 211 | darken: function() { 212 | return this._applyModification(darken, arguments); 213 | }, 214 | desaturate: function() { 215 | return this._applyModification(desaturate, arguments); 216 | }, 217 | saturate: function() { 218 | return this._applyModification(saturate, arguments); 219 | }, 220 | greyscale: function() { 221 | return this._applyModification(greyscale, arguments); 222 | }, 223 | spin: function() { 224 | return this._applyModification(spin, arguments); 225 | }, 226 | 227 | _applyCombination: function(fn, args) { 228 | return fn.apply(null, [this].concat([].slice.call(args))); 229 | }, 230 | analogous: function() { 231 | return this._applyCombination(analogous, arguments); 232 | }, 233 | complement: function() { 234 | return this._applyCombination(complement, arguments); 235 | }, 236 | monochromatic: function() { 237 | return this._applyCombination(monochromatic, arguments); 238 | }, 239 | splitcomplement: function() { 240 | return this._applyCombination(splitcomplement, arguments); 241 | }, 242 | triad: function() { 243 | return this._applyCombination(triad, arguments); 244 | }, 245 | tetrad: function() { 246 | return this._applyCombination(tetrad, arguments); 247 | } 248 | }; 249 | 250 | // If input is an object, force 1 into "1.0" to handle ratios properly 251 | // String input requires "1.0" as input, so 1 will be treated as 1 252 | tinycolor.fromRatio = function(color, opts) { 253 | if (typeof color == "object") { 254 | var newColor = {}; 255 | for (var i in color) { 256 | if (color.hasOwnProperty(i)) { 257 | if (i === "a") { 258 | newColor[i] = color[i]; 259 | } 260 | else { 261 | newColor[i] = convertToPercentage(color[i]); 262 | } 263 | } 264 | } 265 | color = newColor; 266 | } 267 | 268 | return tinycolor(color, opts); 269 | }; 270 | 271 | // Given a string or object, convert that input to RGB 272 | // Possible string inputs: 273 | // 274 | // "red" 275 | // "#f00" or "f00" 276 | // "#ff0000" or "ff0000" 277 | // "#ff000000" or "ff000000" 278 | // "rgb 255 0 0" or "rgb (255, 0, 0)" 279 | // "rgb 1.0 0 0" or "rgb (1, 0, 0)" 280 | // "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1" 281 | // "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1" 282 | // "hsl(0, 100%, 50%)" or "hsl 0 100% 50%" 283 | // "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1" 284 | // "hsv(0, 100%, 100%)" or "hsv 0 100% 100%" 285 | // 286 | function inputToRGB(color) { 287 | 288 | var rgb = { r: 0, g: 0, b: 0 }; 289 | var a = 1; 290 | var ok = false; 291 | var format = false; 292 | 293 | if (typeof color == "string") { 294 | color = stringInputToObject(color); 295 | } 296 | 297 | if (typeof color == "object") { 298 | if (color.hasOwnProperty("r") && color.hasOwnProperty("g") && color.hasOwnProperty("b")) { 299 | rgb = rgbToRgb(color.r, color.g, color.b); 300 | ok = true; 301 | format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; 302 | } 303 | else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("v")) { 304 | color.s = convertToPercentage(color.s); 305 | color.v = convertToPercentage(color.v); 306 | rgb = hsvToRgb(color.h, color.s, color.v); 307 | ok = true; 308 | format = "hsv"; 309 | } 310 | else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("l")) { 311 | color.s = convertToPercentage(color.s); 312 | color.l = convertToPercentage(color.l); 313 | rgb = hslToRgb(color.h, color.s, color.l); 314 | ok = true; 315 | format = "hsl"; 316 | } 317 | 318 | if (color.hasOwnProperty("a")) { 319 | a = color.a; 320 | } 321 | } 322 | 323 | a = boundAlpha(a); 324 | 325 | return { 326 | ok: ok, 327 | format: color.format || format, 328 | r: mathMin(255, mathMax(rgb.r, 0)), 329 | g: mathMin(255, mathMax(rgb.g, 0)), 330 | b: mathMin(255, mathMax(rgb.b, 0)), 331 | a: a 332 | }; 333 | } 334 | 335 | 336 | // Conversion Functions 337 | // -------------------- 338 | 339 | // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from: 340 | // 341 | 342 | // `rgbToRgb` 343 | // Handle bounds / percentage checking to conform to CSS color spec 344 | // 345 | // *Assumes:* r, g, b in [0, 255] or [0, 1] 346 | // *Returns:* { r, g, b } in [0, 255] 347 | function rgbToRgb(r, g, b){ 348 | return { 349 | r: bound01(r, 255) * 255, 350 | g: bound01(g, 255) * 255, 351 | b: bound01(b, 255) * 255 352 | }; 353 | } 354 | 355 | // `rgbToHsl` 356 | // Converts an RGB color value to HSL. 357 | // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] 358 | // *Returns:* { h, s, l } in [0,1] 359 | function rgbToHsl(r, g, b) { 360 | 361 | r = bound01(r, 255); 362 | g = bound01(g, 255); 363 | b = bound01(b, 255); 364 | 365 | var max = mathMax(r, g, b), min = mathMin(r, g, b); 366 | var h, s, l = (max + min) / 2; 367 | 368 | if(max == min) { 369 | h = s = 0; // achromatic 370 | } 371 | else { 372 | var d = max - min; 373 | s = l > 0.5 ? d / (2 - max - min) : d / (max + min); 374 | switch(max) { 375 | case r: h = (g - b) / d + (g < b ? 6 : 0); break; 376 | case g: h = (b - r) / d + 2; break; 377 | case b: h = (r - g) / d + 4; break; 378 | } 379 | 380 | h /= 6; 381 | } 382 | 383 | return { h: h, s: s, l: l }; 384 | } 385 | 386 | // `hslToRgb` 387 | // Converts an HSL color value to RGB. 388 | // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100] 389 | // *Returns:* { r, g, b } in the set [0, 255] 390 | function hslToRgb(h, s, l) { 391 | var r, g, b; 392 | 393 | h = bound01(h, 360); 394 | s = bound01(s, 100); 395 | l = bound01(l, 100); 396 | 397 | function hue2rgb(p, q, t) { 398 | if(t < 0) t += 1; 399 | if(t > 1) t -= 1; 400 | if(t < 1/6) return p + (q - p) * 6 * t; 401 | if(t < 1/2) return q; 402 | if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; 403 | return p; 404 | } 405 | 406 | if(s === 0) { 407 | r = g = b = l; // achromatic 408 | } 409 | else { 410 | var q = l < 0.5 ? l * (1 + s) : l + s - l * s; 411 | var p = 2 * l - q; 412 | r = hue2rgb(p, q, h + 1/3); 413 | g = hue2rgb(p, q, h); 414 | b = hue2rgb(p, q, h - 1/3); 415 | } 416 | 417 | return { r: r * 255, g: g * 255, b: b * 255 }; 418 | } 419 | 420 | // `rgbToHsv` 421 | // Converts an RGB color value to HSV 422 | // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] 423 | // *Returns:* { h, s, v } in [0,1] 424 | function rgbToHsv(r, g, b) { 425 | 426 | r = bound01(r, 255); 427 | g = bound01(g, 255); 428 | b = bound01(b, 255); 429 | 430 | var max = mathMax(r, g, b), min = mathMin(r, g, b); 431 | var h, s, v = max; 432 | 433 | var d = max - min; 434 | s = max === 0 ? 0 : d / max; 435 | 436 | if(max == min) { 437 | h = 0; // achromatic 438 | } 439 | else { 440 | switch(max) { 441 | case r: h = (g - b) / d + (g < b ? 6 : 0); break; 442 | case g: h = (b - r) / d + 2; break; 443 | case b: h = (r - g) / d + 4; break; 444 | } 445 | h /= 6; 446 | } 447 | return { h: h, s: s, v: v }; 448 | } 449 | 450 | // `hsvToRgb` 451 | // Converts an HSV color value to RGB. 452 | // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100] 453 | // *Returns:* { r, g, b } in the set [0, 255] 454 | function hsvToRgb(h, s, v) { 455 | 456 | h = bound01(h, 360) * 6; 457 | s = bound01(s, 100); 458 | v = bound01(v, 100); 459 | 460 | var i = math.floor(h), 461 | f = h - i, 462 | p = v * (1 - s), 463 | q = v * (1 - f * s), 464 | t = v * (1 - (1 - f) * s), 465 | mod = i % 6, 466 | r = [v, q, p, p, t, v][mod], 467 | g = [t, v, v, q, p, p][mod], 468 | b = [p, p, t, v, v, q][mod]; 469 | 470 | return { r: r * 255, g: g * 255, b: b * 255 }; 471 | } 472 | 473 | // `rgbToHex` 474 | // Converts an RGB color to hex 475 | // Assumes r, g, and b are contained in the set [0, 255] 476 | // Returns a 3 or 6 character hex 477 | function rgbToHex(r, g, b, allow3Char) { 478 | 479 | var hex = [ 480 | pad2(mathRound(r).toString(16)), 481 | pad2(mathRound(g).toString(16)), 482 | pad2(mathRound(b).toString(16)) 483 | ]; 484 | 485 | // Return a 3 character hex if possible 486 | if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) { 487 | return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); 488 | } 489 | 490 | return hex.join(""); 491 | } 492 | // `rgbaToHex` 493 | // Converts an RGBA color plus alpha transparency to hex 494 | // Assumes r, g, b and a are contained in the set [0, 255] 495 | // Returns an 8 character hex 496 | function rgbaToHex(r, g, b, a) { 497 | 498 | var hex = [ 499 | pad2(convertDecimalToHex(a)), 500 | pad2(mathRound(r).toString(16)), 501 | pad2(mathRound(g).toString(16)), 502 | pad2(mathRound(b).toString(16)) 503 | ]; 504 | 505 | return hex.join(""); 506 | } 507 | 508 | // `equals` 509 | // Can be called with any tinycolor input 510 | tinycolor.equals = function (color1, color2) { 511 | if (!color1 || !color2) { return false; } 512 | return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); 513 | }; 514 | tinycolor.random = function() { 515 | return tinycolor.fromRatio({ 516 | r: mathRandom(), 517 | g: mathRandom(), 518 | b: mathRandom() 519 | }); 520 | }; 521 | 522 | 523 | // Modification Functions 524 | // ---------------------- 525 | // Thanks to less.js for some of the basics here 526 | // 527 | 528 | function desaturate(color, amount) { 529 | amount = (amount === 0) ? 0 : (amount || 10); 530 | var hsl = tinycolor(color).toHsl(); 531 | hsl.s -= amount / 100; 532 | hsl.s = clamp01(hsl.s); 533 | return tinycolor(hsl); 534 | } 535 | 536 | function saturate(color, amount) { 537 | amount = (amount === 0) ? 0 : (amount || 10); 538 | var hsl = tinycolor(color).toHsl(); 539 | hsl.s += amount / 100; 540 | hsl.s = clamp01(hsl.s); 541 | return tinycolor(hsl); 542 | } 543 | 544 | function greyscale(color) { 545 | return tinycolor(color).desaturate(100); 546 | } 547 | 548 | function lighten (color, amount) { 549 | amount = (amount === 0) ? 0 : (amount || 10); 550 | var hsl = tinycolor(color).toHsl(); 551 | hsl.l += amount / 100; 552 | hsl.l = clamp01(hsl.l); 553 | return tinycolor(hsl); 554 | } 555 | 556 | function brighten(color, amount) { 557 | amount = (amount === 0) ? 0 : (amount || 10); 558 | var rgb = tinycolor(color).toRgb(); 559 | rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); 560 | rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); 561 | rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); 562 | return tinycolor(rgb); 563 | } 564 | 565 | function darken (color, amount) { 566 | amount = (amount === 0) ? 0 : (amount || 10); 567 | var hsl = tinycolor(color).toHsl(); 568 | hsl.l -= amount / 100; 569 | hsl.l = clamp01(hsl.l); 570 | return tinycolor(hsl); 571 | } 572 | 573 | // Spin takes a positive or negative amount within [-360, 360] indicating the change of hue. 574 | // Values outside of this range will be wrapped into this range. 575 | function spin(color, amount) { 576 | var hsl = tinycolor(color).toHsl(); 577 | var hue = (mathRound(hsl.h) + amount) % 360; 578 | hsl.h = hue < 0 ? 360 + hue : hue; 579 | return tinycolor(hsl); 580 | } 581 | 582 | // Combination Functions 583 | // --------------------- 584 | // Thanks to jQuery xColor for some of the ideas behind these 585 | // 586 | 587 | function complement(color) { 588 | var hsl = tinycolor(color).toHsl(); 589 | hsl.h = (hsl.h + 180) % 360; 590 | return tinycolor(hsl); 591 | } 592 | 593 | function triad(color) { 594 | var hsl = tinycolor(color).toHsl(); 595 | var h = hsl.h; 596 | return [ 597 | tinycolor(color), 598 | tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), 599 | tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }) 600 | ]; 601 | } 602 | 603 | function tetrad(color) { 604 | var hsl = tinycolor(color).toHsl(); 605 | var h = hsl.h; 606 | return [ 607 | tinycolor(color), 608 | tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), 609 | tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), 610 | tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }) 611 | ]; 612 | } 613 | 614 | function splitcomplement(color) { 615 | var hsl = tinycolor(color).toHsl(); 616 | var h = hsl.h; 617 | return [ 618 | tinycolor(color), 619 | tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}), 620 | tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l}) 621 | ]; 622 | } 623 | 624 | function analogous(color, results, slices) { 625 | results = results || 6; 626 | slices = slices || 30; 627 | 628 | var hsl = tinycolor(color).toHsl(); 629 | var part = 360 / slices; 630 | var ret = [tinycolor(color)]; 631 | 632 | for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) { 633 | hsl.h = (hsl.h + part) % 360; 634 | ret.push(tinycolor(hsl)); 635 | } 636 | return ret; 637 | } 638 | 639 | function monochromatic(color, results) { 640 | results = results || 6; 641 | var hsv = tinycolor(color).toHsv(); 642 | var h = hsv.h, s = hsv.s, v = hsv.v; 643 | var ret = []; 644 | var modification = 1 / results; 645 | 646 | while (results--) { 647 | ret.push(tinycolor({ h: h, s: s, v: v})); 648 | v = (v + modification) % 1; 649 | } 650 | 651 | return ret; 652 | } 653 | 654 | // Utility Functions 655 | // --------------------- 656 | 657 | tinycolor.mix = function(color1, color2, amount) { 658 | amount = (amount === 0) ? 0 : (amount || 50); 659 | 660 | var rgb1 = tinycolor(color1).toRgb(); 661 | var rgb2 = tinycolor(color2).toRgb(); 662 | 663 | var p = amount / 100; 664 | var w = p * 2 - 1; 665 | var a = rgb2.a - rgb1.a; 666 | 667 | var w1; 668 | 669 | if (w * a == -1) { 670 | w1 = w; 671 | } else { 672 | w1 = (w + a) / (1 + w * a); 673 | } 674 | 675 | w1 = (w1 + 1) / 2; 676 | 677 | var w2 = 1 - w1; 678 | 679 | var rgba = { 680 | r: rgb2.r * w1 + rgb1.r * w2, 681 | g: rgb2.g * w1 + rgb1.g * w2, 682 | b: rgb2.b * w1 + rgb1.b * w2, 683 | a: rgb2.a * p + rgb1.a * (1 - p) 684 | }; 685 | 686 | return tinycolor(rgba); 687 | }; 688 | 689 | 690 | // Readability Functions 691 | // --------------------- 692 | // 693 | 694 | // `readability` 695 | // Analyze the 2 colors and returns an object with the following properties: 696 | // `brightness`: difference in brightness between the two colors 697 | // `color`: difference in color/hue between the two colors 698 | tinycolor.readability = function(color1, color2) { 699 | var c1 = tinycolor(color1); 700 | var c2 = tinycolor(color2); 701 | var rgb1 = c1.toRgb(); 702 | var rgb2 = c2.toRgb(); 703 | var brightnessA = c1.getBrightness(); 704 | var brightnessB = c2.getBrightness(); 705 | var colorDiff = ( 706 | Math.max(rgb1.r, rgb2.r) - Math.min(rgb1.r, rgb2.r) + 707 | Math.max(rgb1.g, rgb2.g) - Math.min(rgb1.g, rgb2.g) + 708 | Math.max(rgb1.b, rgb2.b) - Math.min(rgb1.b, rgb2.b) 709 | ); 710 | 711 | return { 712 | brightness: Math.abs(brightnessA - brightnessB), 713 | color: colorDiff 714 | }; 715 | }; 716 | 717 | // `readable` 718 | // http://www.w3.org/TR/AERT#color-contrast 719 | // Ensure that foreground and background color combinations provide sufficient contrast. 720 | // *Example* 721 | // tinycolor.isReadable("#000", "#111") => false 722 | tinycolor.isReadable = function(color1, color2) { 723 | var readability = tinycolor.readability(color1, color2); 724 | return readability.brightness > 125 && readability.color > 500; 725 | }; 726 | 727 | // `mostReadable` 728 | // Given a base color and a list of possible foreground or background 729 | // colors for that base, returns the most readable color. 730 | // *Example* 731 | // tinycolor.mostReadable("#123", ["#fff", "#000"]) => "#000" 732 | tinycolor.mostReadable = function(baseColor, colorList) { 733 | var bestColor = null; 734 | var bestScore = 0; 735 | var bestIsReadable = false; 736 | for (var i=0; i < colorList.length; i++) { 737 | 738 | // We normalize both around the "acceptable" breaking point, 739 | // but rank brightness constrast higher than hue. 740 | 741 | var readability = tinycolor.readability(baseColor, colorList[i]); 742 | var readable = readability.brightness > 125 && readability.color > 500; 743 | var score = 3 * (readability.brightness / 125) + (readability.color / 500); 744 | 745 | if ((readable && ! bestIsReadable) || 746 | (readable && bestIsReadable && score > bestScore) || 747 | ((! readable) && (! bestIsReadable) && score > bestScore)) { 748 | bestIsReadable = readable; 749 | bestScore = score; 750 | bestColor = tinycolor(colorList[i]); 751 | } 752 | } 753 | return bestColor; 754 | }; 755 | 756 | 757 | // Big List of Colors 758 | // ------------------ 759 | // 760 | var names = tinycolor.names = { 761 | aliceblue: "f0f8ff", 762 | antiquewhite: "faebd7", 763 | aqua: "0ff", 764 | aquamarine: "7fffd4", 765 | azure: "f0ffff", 766 | beige: "f5f5dc", 767 | bisque: "ffe4c4", 768 | black: "000", 769 | blanchedalmond: "ffebcd", 770 | blue: "00f", 771 | blueviolet: "8a2be2", 772 | brown: "a52a2a", 773 | burlywood: "deb887", 774 | burntsienna: "ea7e5d", 775 | cadetblue: "5f9ea0", 776 | chartreuse: "7fff00", 777 | chocolate: "d2691e", 778 | coral: "ff7f50", 779 | cornflowerblue: "6495ed", 780 | cornsilk: "fff8dc", 781 | crimson: "dc143c", 782 | cyan: "0ff", 783 | darkblue: "00008b", 784 | darkcyan: "008b8b", 785 | darkgoldenrod: "b8860b", 786 | darkgray: "a9a9a9", 787 | darkgreen: "006400", 788 | darkgrey: "a9a9a9", 789 | darkkhaki: "bdb76b", 790 | darkmagenta: "8b008b", 791 | darkolivegreen: "556b2f", 792 | darkorange: "ff8c00", 793 | darkorchid: "9932cc", 794 | darkred: "8b0000", 795 | darksalmon: "e9967a", 796 | darkseagreen: "8fbc8f", 797 | darkslateblue: "483d8b", 798 | darkslategray: "2f4f4f", 799 | darkslategrey: "2f4f4f", 800 | darkturquoise: "00ced1", 801 | darkviolet: "9400d3", 802 | deeppink: "ff1493", 803 | deepskyblue: "00bfff", 804 | dimgray: "696969", 805 | dimgrey: "696969", 806 | dodgerblue: "1e90ff", 807 | firebrick: "b22222", 808 | floralwhite: "fffaf0", 809 | forestgreen: "228b22", 810 | fuchsia: "f0f", 811 | gainsboro: "dcdcdc", 812 | ghostwhite: "f8f8ff", 813 | gold: "ffd700", 814 | goldenrod: "daa520", 815 | gray: "808080", 816 | green: "008000", 817 | greenyellow: "adff2f", 818 | grey: "808080", 819 | honeydew: "f0fff0", 820 | hotpink: "ff69b4", 821 | indianred: "cd5c5c", 822 | indigo: "4b0082", 823 | ivory: "fffff0", 824 | khaki: "f0e68c", 825 | lavender: "e6e6fa", 826 | lavenderblush: "fff0f5", 827 | lawngreen: "7cfc00", 828 | lemonchiffon: "fffacd", 829 | lightblue: "add8e6", 830 | lightcoral: "f08080", 831 | lightcyan: "e0ffff", 832 | lightgoldenrodyellow: "fafad2", 833 | lightgray: "d3d3d3", 834 | lightgreen: "90ee90", 835 | lightgrey: "d3d3d3", 836 | lightpink: "ffb6c1", 837 | lightsalmon: "ffa07a", 838 | lightseagreen: "20b2aa", 839 | lightskyblue: "87cefa", 840 | lightslategray: "789", 841 | lightslategrey: "789", 842 | lightsteelblue: "b0c4de", 843 | lightyellow: "ffffe0", 844 | lime: "0f0", 845 | limegreen: "32cd32", 846 | linen: "faf0e6", 847 | magenta: "f0f", 848 | maroon: "800000", 849 | mediumaquamarine: "66cdaa", 850 | mediumblue: "0000cd", 851 | mediumorchid: "ba55d3", 852 | mediumpurple: "9370db", 853 | mediumseagreen: "3cb371", 854 | mediumslateblue: "7b68ee", 855 | mediumspringgreen: "00fa9a", 856 | mediumturquoise: "48d1cc", 857 | mediumvioletred: "c71585", 858 | midnightblue: "191970", 859 | mintcream: "f5fffa", 860 | mistyrose: "ffe4e1", 861 | moccasin: "ffe4b5", 862 | navajowhite: "ffdead", 863 | navy: "000080", 864 | oldlace: "fdf5e6", 865 | olive: "808000", 866 | olivedrab: "6b8e23", 867 | orange: "ffa500", 868 | orangered: "ff4500", 869 | orchid: "da70d6", 870 | palegoldenrod: "eee8aa", 871 | palegreen: "98fb98", 872 | paleturquoise: "afeeee", 873 | palevioletred: "db7093", 874 | papayawhip: "ffefd5", 875 | peachpuff: "ffdab9", 876 | peru: "cd853f", 877 | pink: "ffc0cb", 878 | plum: "dda0dd", 879 | powderblue: "b0e0e6", 880 | purple: "800080", 881 | rebeccapurple: "663399", 882 | red: "f00", 883 | rosybrown: "bc8f8f", 884 | royalblue: "4169e1", 885 | saddlebrown: "8b4513", 886 | salmon: "fa8072", 887 | sandybrown: "f4a460", 888 | seagreen: "2e8b57", 889 | seashell: "fff5ee", 890 | sienna: "a0522d", 891 | silver: "c0c0c0", 892 | skyblue: "87ceeb", 893 | slateblue: "6a5acd", 894 | slategray: "708090", 895 | slategrey: "708090", 896 | snow: "fffafa", 897 | springgreen: "00ff7f", 898 | steelblue: "4682b4", 899 | tan: "d2b48c", 900 | teal: "008080", 901 | thistle: "d8bfd8", 902 | tomato: "ff6347", 903 | turquoise: "40e0d0", 904 | violet: "ee82ee", 905 | wheat: "f5deb3", 906 | white: "fff", 907 | whitesmoke: "f5f5f5", 908 | yellow: "ff0", 909 | yellowgreen: "9acd32" 910 | }; 911 | 912 | // Make it easy to access colors via `hexNames[hex]` 913 | var hexNames = tinycolor.hexNames = flip(names); 914 | 915 | 916 | // Utilities 917 | // --------- 918 | 919 | // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }` 920 | function flip(o) { 921 | var flipped = { }; 922 | for (var i in o) { 923 | if (o.hasOwnProperty(i)) { 924 | flipped[o[i]] = i; 925 | } 926 | } 927 | return flipped; 928 | } 929 | 930 | // Return a valid alpha value [0,1] with all invalid values being set to 1 931 | function boundAlpha(a) { 932 | a = parseFloat(a); 933 | 934 | if (isNaN(a) || a < 0 || a > 1) { 935 | a = 1; 936 | } 937 | 938 | return a; 939 | } 940 | 941 | // Take input from [0, n] and return it as [0, 1] 942 | function bound01(n, max) { 943 | if (isOnePointZero(n)) { n = "100%"; } 944 | 945 | var processPercent = isPercentage(n); 946 | n = mathMin(max, mathMax(0, parseFloat(n))); 947 | 948 | // Automatically convert percentage into number 949 | if (processPercent) { 950 | n = parseInt(n * max, 10) / 100; 951 | } 952 | 953 | // Handle floating point rounding errors 954 | if ((math.abs(n - max) < 0.000001)) { 955 | return 1; 956 | } 957 | 958 | // Convert into [0, 1] range if it isn't already 959 | return (n % max) / parseFloat(max); 960 | } 961 | 962 | // Force a number between 0 and 1 963 | function clamp01(val) { 964 | return mathMin(1, mathMax(0, val)); 965 | } 966 | 967 | // Parse a base-16 hex value into a base-10 integer 968 | function parseIntFromHex(val) { 969 | return parseInt(val, 16); 970 | } 971 | 972 | // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 973 | // 974 | function isOnePointZero(n) { 975 | return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1; 976 | } 977 | 978 | // Check to see if string passed in is a percentage 979 | function isPercentage(n) { 980 | return typeof n === "string" && n.indexOf('%') != -1; 981 | } 982 | 983 | // Force a hex value to have 2 characters 984 | function pad2(c) { 985 | return c.length == 1 ? '0' + c : '' + c; 986 | } 987 | 988 | // Replace a decimal with it's percentage value 989 | function convertToPercentage(n) { 990 | if (n <= 1) { 991 | n = (n * 100) + "%"; 992 | } 993 | 994 | return n; 995 | } 996 | 997 | // Converts a decimal to a hex value 998 | function convertDecimalToHex(d) { 999 | return Math.round(parseFloat(d) * 255).toString(16); 1000 | } 1001 | // Converts a hex value to a decimal 1002 | function convertHexToDecimal(h) { 1003 | return (parseIntFromHex(h) / 255); 1004 | } 1005 | 1006 | var matchers = (function() { 1007 | 1008 | // 1009 | var CSS_INTEGER = "[-\\+]?\\d+%?"; 1010 | 1011 | // 1012 | var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; 1013 | 1014 | // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. 1015 | var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; 1016 | 1017 | // Actual matching. 1018 | // Parentheses and commas are optional, but not required. 1019 | // Whitespace can take the place of commas or opening paren 1020 | var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; 1021 | var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; 1022 | 1023 | return { 1024 | rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), 1025 | rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), 1026 | hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), 1027 | hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), 1028 | hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), 1029 | hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), 1030 | hex3: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, 1031 | hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, 1032 | hex8: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ 1033 | }; 1034 | })(); 1035 | 1036 | // `stringInputToObject` 1037 | // Permissive string parsing. Take in a number of formats, and output an object 1038 | // based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}` 1039 | function stringInputToObject(color) { 1040 | 1041 | color = color.replace(trimLeft,'').replace(trimRight, '').toLowerCase(); 1042 | var named = false; 1043 | if (names[color]) { 1044 | color = names[color]; 1045 | named = true; 1046 | } 1047 | else if (color == 'transparent') { 1048 | return { r: 0, g: 0, b: 0, a: 0, format: "name" }; 1049 | } 1050 | 1051 | // Try to match string input using regular expressions. 1052 | // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] 1053 | // Just return an object and let the conversion functions handle that. 1054 | // This way the result will be the same whether the tinycolor is initialized with string or object. 1055 | var match; 1056 | if ((match = matchers.rgb.exec(color))) { 1057 | return { r: match[1], g: match[2], b: match[3] }; 1058 | } 1059 | if ((match = matchers.rgba.exec(color))) { 1060 | return { r: match[1], g: match[2], b: match[3], a: match[4] }; 1061 | } 1062 | if ((match = matchers.hsl.exec(color))) { 1063 | return { h: match[1], s: match[2], l: match[3] }; 1064 | } 1065 | if ((match = matchers.hsla.exec(color))) { 1066 | return { h: match[1], s: match[2], l: match[3], a: match[4] }; 1067 | } 1068 | if ((match = matchers.hsv.exec(color))) { 1069 | return { h: match[1], s: match[2], v: match[3] }; 1070 | } 1071 | if ((match = matchers.hsva.exec(color))) { 1072 | return { h: match[1], s: match[2], v: match[3], a: match[4] }; 1073 | } 1074 | if ((match = matchers.hex8.exec(color))) { 1075 | return { 1076 | a: convertHexToDecimal(match[1]), 1077 | r: parseIntFromHex(match[2]), 1078 | g: parseIntFromHex(match[3]), 1079 | b: parseIntFromHex(match[4]), 1080 | format: named ? "name" : "hex8" 1081 | }; 1082 | } 1083 | if ((match = matchers.hex6.exec(color))) { 1084 | return { 1085 | r: parseIntFromHex(match[1]), 1086 | g: parseIntFromHex(match[2]), 1087 | b: parseIntFromHex(match[3]), 1088 | format: named ? "name" : "hex" 1089 | }; 1090 | } 1091 | if ((match = matchers.hex3.exec(color))) { 1092 | return { 1093 | r: parseIntFromHex(match[1] + '' + match[1]), 1094 | g: parseIntFromHex(match[2] + '' + match[2]), 1095 | b: parseIntFromHex(match[3] + '' + match[3]), 1096 | format: named ? "name" : "hex" 1097 | }; 1098 | } 1099 | 1100 | return false; 1101 | } 1102 | 1103 | // Node: Export function 1104 | if (typeof module !== "undefined" && module.exports) { 1105 | module.exports = tinycolor; 1106 | } 1107 | // AMD/requirejs: Define the module 1108 | else if (typeof define === 'function' && define.amd) { 1109 | define(function () {return tinycolor;}); 1110 | } 1111 | // Browser: Expose to window 1112 | else { 1113 | window.tinycolor = tinycolor; 1114 | } 1115 | 1116 | })(); 1117 | --------------------------------------------------------------------------------