From b6900df32d528ae585dff7cd3ef3388bfc693c88 Mon Sep 17 00:00:00 2001 From: Surjith S M Date: Sun, 27 Jun 2021 14:31:39 +0530 Subject: [PATCH 1/5] Feature: Added Support for Tailwind CSS --- bower.json | 6 +- build_release | 2 +- compile-templates.js | 139 ++++++++++++++++++++++++---------- open-color.js | 172 +++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 276 insertions(+), 43 deletions(-) create mode 100644 open-color.js diff --git a/bower.json b/bower.json index 50789cc..50e5cfb 100644 --- a/bower.json +++ b/bower.json @@ -5,7 +5,8 @@ "open-color.scss", "open-color.styl", "open-color.less", - "open-color.css" + "open-color.css", + "open-color.js" ], "authors": [ "Jeong Heeyeun " @@ -18,6 +19,7 @@ "SCSS", "Less", "Stylus", + "Tailwind", "CSS" ], "homepage": "https://github.com/yeun/open-color", @@ -34,4 +36,4 @@ "**/.*", "*.js" ] -} +} \ No newline at end of file diff --git a/build_release b/build_release index d49d787..f1f5d78 100755 --- a/build_release +++ b/build_release @@ -6,7 +6,7 @@ project_root="$(pwd)"; release_base_dir="$project_root/release"; mkdir -p "$release_base_dir"; -zip release/open-color.zip open-color.css open-color.less open-color.scss open-color.styl +zip release/open-color.zip open-color.css open-color.js open-color.less open-color.scss open-color.styl echo "Release $release_tag"; echo "${TRAVIS_REPO_SLUG:-"origin"}/${TRAVIS_BRANCH:-"master"}"; diff --git a/compile-templates.js b/compile-templates.js index 94c4eb3..8532074 100644 --- a/compile-templates.js +++ b/compile-templates.js @@ -1,58 +1,117 @@ -const path = require('path'); -const pkg = require('./package.json'); +const path = require("path"); +const pkg = require("./package.json"); -const TemplatedBuilder = require('./builder/templated'); -const AseBuilder = require('./builder/ase'); -const CraftLibraryBuilder = require('./builder/craft-library'); -const GVSwatchBuilder = require('./builder/gvswatch'); +const TemplatedBuilder = require("./builder/templated"); +const AseBuilder = require("./builder/ase"); +const CraftLibraryBuilder = require("./builder/craft-library"); +const GVSwatchBuilder = require("./builder/gvswatch"); -const COLORS_FILE = path.join(__dirname, 'open-color.json'); +const COLORS_FILE = path.join(__dirname, "open-color.json"); const colors = require(COLORS_FILE); const templatedBuilder = new TemplatedBuilder(colors, pkg.version); const aseBuilder = new AseBuilder(colors, pkg.version); -const craftLibraryBuilder = new CraftLibraryBuilder(colors, pkg.version); +const craftLibraryBuilder = new CraftLibraryBuilder( + colors, + pkg.version +); const gvswatchBuilder = new GVSwatchBuilder(colors, pkg.version); -templatedBuilder.build('_config.yml', - [path.join(__dirname, 'docs', '_config.yml')]); -templatedBuilder.build('open-color.scss', - [path.join(__dirname, 'open-color.scss'), path.join(__dirname, 'docs', '_sass', '_open-color.scss')]); -templatedBuilder.build('open-color.css', - [path.join(__dirname, 'open-color.css')]); -templatedBuilder.build('open-color.less', - [path.join(__dirname, 'open-color.less')]); -templatedBuilder.build('open-color.styl', - [path.join(__dirname, 'open-color.styl')]); -templatedBuilder.build('open-color.svg', - [path.join(__dirname, 'docs', 'asset', 'images', 'open-color.svg')]); -templatedBuilder.build('open-color.tex', - [path.join(__dirname, 'open-color.tex')]); +templatedBuilder.build("_config.yml", [ + path.join(__dirname, "docs", "_config.yml"), +]); +templatedBuilder.build("open-color.scss", [ + path.join(__dirname, "open-color.scss"), + path.join(__dirname, "docs", "_sass", "_open-color.scss"), +]); +templatedBuilder.build("open-color.css", [ + path.join(__dirname, "open-color.css"), +]); +templatedBuilder.build("open-color.js", [ + path.join(__dirname, "open-color.js"), +]); +templatedBuilder.build("open-color.less", [ + path.join(__dirname, "open-color.less"), +]); +templatedBuilder.build("open-color.styl", [ + path.join(__dirname, "open-color.styl"), +]); +templatedBuilder.build("open-color.svg", [ + path.join(__dirname, "docs", "asset", "images", "open-color.svg"), +]); +templatedBuilder.build("open-color.tex", [ + path.join(__dirname, "open-color.tex"), +]); -templatedBuilder.build('open-color.sketchpalette', - [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.sketchpalette`)]); +templatedBuilder.build("open-color.sketchpalette", [ + path.join( + __dirname, + "docs", + "asset", + "download", + `open-color_${pkg.version}.sketchpalette` + ), +]); -templatedBuilder.build('open-color.inkscape', - [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.gpl`)]); +templatedBuilder.build("open-color.inkscape", [ + path.join( + __dirname, + "docs", + "asset", + "download", + `open-color_${pkg.version}.gpl` + ), +]); -templatedBuilder.build('open-color.code-snippets', - [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.code-snippets`)]); +templatedBuilder.build("open-color.code-snippets", [ + path.join( + __dirname, + "docs", + "asset", + "download", + `open-color_${pkg.version}.code-snippets` + ), +]); -aseBuilder.build('ase', - [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.ase`)]); +aseBuilder.build("ase", [ + path.join( + __dirname, + "docs", + "asset", + "download", + `open-color_${pkg.version}.ase` + ), +]); -craftLibraryBuilder.build( - [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.library`)]); +craftLibraryBuilder.build([ + path.join( + __dirname, + "docs", + "asset", + "download", + `open-color_${pkg.version}.library` + ), +]); -gvswatchBuilder.build( - [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.gvswatch`)]) +gvswatchBuilder.build([ + path.join( + __dirname, + "docs", + "asset", + "download", + `open-color_${pkg.version}.gvswatch` + ), +]); -templatedBuilder.build('open-color.oco', - [path.join(__dirname, 'open-color.oco')]); +templatedBuilder.build("open-color.oco", [ + path.join(__dirname, "open-color.oco"), +]); -templatedBuilder.build('open-color.rcpx', - [path.join(__dirname, 'open-color.rcpx')]); +templatedBuilder.build("open-color.rcpx", [ + path.join(__dirname, "open-color.rcpx"), +]); -templatedBuilder.build('open-color.d.ts', - [path.join(__dirname, 'open-color.d.ts')]); +templatedBuilder.build("open-color.d.ts", [ + path.join(__dirname, "open-color.d.ts"), +]); diff --git a/open-color.js b/open-color.js new file mode 100644 index 0000000..1845ab0 --- /dev/null +++ b/open-color.js @@ -0,0 +1,172 @@ +/* + * + * 𝗖 𝗢 𝗟 𝗢 𝗥 + * v 1.8.0 + * + * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ + +module.exports = { + theme: { + colors: { + white: "#ffffff", + black: "#000000", + gray: { + 50: "#f8f9fa", + 100: "#f1f3f5", + 200: "#e9ecef", + 300: "#dee2e6", + 400: "#ced4da", + 500: "#adb5bd", + 600: "#868e96", + 700: "#495057", + 800: "#343a40", + 900: "#212529", + }, + red: { + 50: "#fff5f5", + 100: "#ffe3e3", + 200: "#ffc9c9", + 300: "#ffa8a8", + 400: "#ff8787", + 500: "#ff6b6b", + 600: "#fa5252", + 700: "#f03e3e", + 800: "#e03131", + 900: "#c92a2a", + }, + pink: { + 50: "#fff0f6", + 100: "#ffdeeb", + 200: "#fcc2d7", + 300: "#faa2c1", + 400: "#f783ac", + 500: "#f06595", + 600: "#e64980", + 700: "#d6336c", + 800: "#c2255c", + 900: "#a61e4d", + }, + grape: { + 50: "#f8f0fc", + 100: "#f3d9fa", + 200: "#eebefa", + 300: "#e599f7", + 400: "#da77f2", + 500: "#cc5de8", + 600: "#be4bdb", + 700: "#ae3ec9", + 800: "#9c36b5", + 900: "#862e9c", + }, + violet: { + 50: "#f3f0ff", + 100: "#e5dbff", + 200: "#d0bfff", + 300: "#b197fc", + 400: "#9775fa", + 500: "#845ef7", + 600: "#7950f2", + 700: "#7048e8", + 800: "#6741d9", + 900: "#5f3dc4", + }, + indigo: { + 50: "#edf2ff", + 100: "#dbe4ff", + 200: "#bac8ff", + 300: "#91a7ff", + 400: "#748ffc", + 500: "#5c7cfa", + 600: "#4c6ef5", + 700: "#4263eb", + 800: "#3b5bdb", + 900: "#364fc7", + }, + blue: { + 50: "#e7f5ff", + 100: "#d0ebff", + 200: "#a5d8ff", + 300: "#74c0fc", + 400: "#4dabf7", + 500: "#339af0", + 600: "#228be6", + 700: "#1c7ed6", + 800: "#1971c2", + 900: "#1864ab", + }, + cyan: { + 50: "#e3fafc", + 100: "#c5f6fa", + 200: "#99e9f2", + 300: "#66d9e8", + 400: "#3bc9db", + 500: "#22b8cf", + 600: "#15aabf", + 700: "#1098ad", + 800: "#0c8599", + 900: "#0b7285", + }, + teal: { + 50: "#e6fcf5", + 100: "#c3fae8", + 200: "#96f2d7", + 300: "#63e6be", + 400: "#38d9a9", + 500: "#20c997", + 600: "#12b886", + 700: "#0ca678", + 800: "#099268", + 900: "#087f5b", + }, + green: { + 50: "#ebfbee", + 100: "#d3f9d8", + 200: "#b2f2bb", + 300: "#8ce99a", + 400: "#69db7c", + 500: "#51cf66", + 600: "#40c057", + 700: "#37b24d", + 800: "#2f9e44", + 900: "#2b8a3e", + }, + lime: { + 50: "#f4fce3", + 100: "#e9fac8", + 200: "#d8f5a2", + 300: "#c0eb75", + 400: "#a9e34b", + 500: "#94d82d", + 600: "#82c91e", + 700: "#74b816", + 800: "#66a80f", + 900: "#5c940d", + }, + yellow: { + 50: "#fff9db", + 100: "#fff3bf", + 200: "#ffec99", + 300: "#ffe066", + 400: "#ffd43b", + 500: "#fcc419", + 600: "#fab005", + 700: "#f59f00", + 800: "#f08c00", + 900: "#e67700", + }, + orange: { + 50: "#fff4e6", + 100: "#ffe8cc", + 200: "#ffd8a8", + 300: "#ffc078", + 400: "#ffa94d", + 500: "#ff922b", + 600: "#fd7e14", + 700: "#f76707", + 800: "#e8590c", + 900: "#d9480f", + }, + }, + }, + plugins: [], +}; From d412d030b23ea93f15a3720e0d52cd02606f834f Mon Sep 17 00:00:00 2001 From: Surjith S M Date: Sun, 27 Jun 2021 02:04:49 -0700 Subject: [PATCH 2/5] Docs: Added Instructions for tailwindcss in readme --- README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/README.md b/README.md index e355494..071ea06 100644 --- a/README.md +++ b/README.md @@ -86,6 +86,25 @@ a { } ``` +**Example for Tailwind CSS** + +```js +module.exports = { + presets: [require("./open-color.js")], + purge: [], + mode: "jit", + darkMode: false, + theme: { + extend: {}, + }, + variants: { + extend: {}, + }, + plugins: [], +}; + +``` + **Example for Less** ```less From d904981cf31fb17420964de74ee97ee3e43fb025 Mon Sep 17 00:00:00 2001 From: Surjith S M Date: Sun, 27 Jun 2021 02:08:20 -0700 Subject: [PATCH 3/5] Docs: Added Tailwind CSS example in docs --- docs/documents.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/docs/documents.html b/docs/documents.html index 53b914e..b65abb2 100644 --- a/docs/documents.html +++ b/docs/documents.html @@ -68,6 +68,25 @@

Example for Sass, SCSS

color: $oc-indigo-7; } }{% endhighlight %} + +

Example for Tailwind CSS

+{% highlight js %} +// tailwind.config.js +module.exports = { + presets: [require("./open-color.js")], + purge: [], + mode: "jit", + darkMode: false, + theme: { + extend: {}, + }, + variants: { + extend: {}, + }, + plugins: [], +}; +{% endhighlight %} +

Example for Less

{% highlight scss %} From c6e4f6d02383e849e9dadb72279b5f7090525b7f Mon Sep 17 00:00:00 2001 From: Surjith S M Date: Tue, 17 Aug 2021 16:54:08 +0530 Subject: [PATCH 4/5] revert double quotes --- compile-templates.js | 106 +++++++++++++++++++++---------------------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/compile-templates.js b/compile-templates.js index 8532074..e1eca3e 100644 --- a/compile-templates.js +++ b/compile-templates.js @@ -1,12 +1,12 @@ -const path = require("path"); -const pkg = require("./package.json"); +const path = require('path'); +const pkg = require('./package.json'); -const TemplatedBuilder = require("./builder/templated"); -const AseBuilder = require("./builder/ase"); -const CraftLibraryBuilder = require("./builder/craft-library"); -const GVSwatchBuilder = require("./builder/gvswatch"); +const TemplatedBuilder = require('./builder/templated'); +const AseBuilder = require('./builder/ase'); +const CraftLibraryBuilder = require('./builder/craft-library'); +const GVSwatchBuilder = require('./builder/gvswatch'); -const COLORS_FILE = path.join(__dirname, "open-color.json"); +const COLORS_FILE = path.join(__dirname, 'open-color.json'); const colors = require(COLORS_FILE); @@ -18,68 +18,68 @@ const craftLibraryBuilder = new CraftLibraryBuilder( ); const gvswatchBuilder = new GVSwatchBuilder(colors, pkg.version); -templatedBuilder.build("_config.yml", [ - path.join(__dirname, "docs", "_config.yml"), +templatedBuilder.build('_config.yml', [ + path.join(__dirname, 'docs', '_config.yml'), ]); -templatedBuilder.build("open-color.scss", [ - path.join(__dirname, "open-color.scss"), - path.join(__dirname, "docs", "_sass", "_open-color.scss"), +templatedBuilder.build('open-color.scss', [ + path.join(__dirname, 'open-color.scss'), + path.join(__dirname, 'docs', '_sass', '_open-color.scss'), ]); -templatedBuilder.build("open-color.css", [ - path.join(__dirname, "open-color.css"), +templatedBuilder.build('open-color.css', [ + path.join(__dirname, 'open-color.css'), ]); -templatedBuilder.build("open-color.js", [ - path.join(__dirname, "open-color.js"), +templatedBuilder.build('open-color.js', [ + path.join(__dirname, 'open-color.js'), ]); -templatedBuilder.build("open-color.less", [ - path.join(__dirname, "open-color.less"), +templatedBuilder.build('open-color.less', [ + path.join(__dirname, 'open-color.less'), ]); -templatedBuilder.build("open-color.styl", [ - path.join(__dirname, "open-color.styl"), +templatedBuilder.build('open-color.styl', [ + path.join(__dirname, 'open-color.styl'), ]); -templatedBuilder.build("open-color.svg", [ - path.join(__dirname, "docs", "asset", "images", "open-color.svg"), +templatedBuilder.build('open-color.svg', [ + path.join(__dirname, 'docs', 'asset', 'images', 'open-color.svg'), ]); -templatedBuilder.build("open-color.tex", [ - path.join(__dirname, "open-color.tex"), +templatedBuilder.build('open-color.tex', [ + path.join(__dirname, 'open-color.tex'), ]); -templatedBuilder.build("open-color.sketchpalette", [ +templatedBuilder.build('open-color.sketchpalette', [ path.join( __dirname, - "docs", - "asset", - "download", + 'docs', + 'asset', + 'download', `open-color_${pkg.version}.sketchpalette` ), ]); -templatedBuilder.build("open-color.inkscape", [ +templatedBuilder.build('open-color.inkscape', [ path.join( __dirname, - "docs", - "asset", - "download", + 'docs', + 'asset', + 'download', `open-color_${pkg.version}.gpl` ), ]); -templatedBuilder.build("open-color.code-snippets", [ +templatedBuilder.build('open-color.code-snippets', [ path.join( __dirname, - "docs", - "asset", - "download", + 'docs', + 'asset', + 'download', `open-color_${pkg.version}.code-snippets` ), ]); -aseBuilder.build("ase", [ +aseBuilder.build('ase', [ path.join( __dirname, - "docs", - "asset", - "download", + 'docs', + 'asset', + 'download', `open-color_${pkg.version}.ase` ), ]); @@ -87,9 +87,9 @@ aseBuilder.build("ase", [ craftLibraryBuilder.build([ path.join( __dirname, - "docs", - "asset", - "download", + 'docs', + 'asset', + 'download', `open-color_${pkg.version}.library` ), ]); @@ -97,21 +97,21 @@ craftLibraryBuilder.build([ gvswatchBuilder.build([ path.join( __dirname, - "docs", - "asset", - "download", + 'docs', + 'asset', + 'download', `open-color_${pkg.version}.gvswatch` ), ]); -templatedBuilder.build("open-color.oco", [ - path.join(__dirname, "open-color.oco"), +templatedBuilder.build('open-color.oco', [ + path.join(__dirname, 'open-color.oco'), ]); -templatedBuilder.build("open-color.rcpx", [ - path.join(__dirname, "open-color.rcpx"), +templatedBuilder.build('open-color.rcpx', [ + path.join(__dirname, 'open-color.rcpx'), ]); -templatedBuilder.build("open-color.d.ts", [ - path.join(__dirname, "open-color.d.ts"), -]); +templatedBuilder.build('open-color.d.ts', [ + path.join(__dirname, 'open-color.d.ts'), +]); \ No newline at end of file From c1986061391584cf7337d1b6791ffd696ccedd47 Mon Sep 17 00:00:00 2001 From: Surjith S M Date: Tue, 17 Aug 2021 16:58:59 +0530 Subject: [PATCH 5/5] revert formatting --- compile-templates.js | 146 +++++++++++++------------------------------ 1 file changed, 45 insertions(+), 101 deletions(-) diff --git a/compile-templates.js b/compile-templates.js index e1eca3e..12e8fad 100644 --- a/compile-templates.js +++ b/compile-templates.js @@ -1,3 +1,4 @@ + const path = require('path'); const pkg = require('./package.json'); @@ -12,106 +13,49 @@ const colors = require(COLORS_FILE); const templatedBuilder = new TemplatedBuilder(colors, pkg.version); const aseBuilder = new AseBuilder(colors, pkg.version); -const craftLibraryBuilder = new CraftLibraryBuilder( - colors, - pkg.version -); +const craftLibraryBuilder = new CraftLibraryBuilder(colors, pkg.version); const gvswatchBuilder = new GVSwatchBuilder(colors, pkg.version); -templatedBuilder.build('_config.yml', [ - path.join(__dirname, 'docs', '_config.yml'), -]); -templatedBuilder.build('open-color.scss', [ - path.join(__dirname, 'open-color.scss'), - path.join(__dirname, 'docs', '_sass', '_open-color.scss'), -]); -templatedBuilder.build('open-color.css', [ - path.join(__dirname, 'open-color.css'), -]); -templatedBuilder.build('open-color.js', [ - path.join(__dirname, 'open-color.js'), -]); -templatedBuilder.build('open-color.less', [ - path.join(__dirname, 'open-color.less'), -]); -templatedBuilder.build('open-color.styl', [ - path.join(__dirname, 'open-color.styl'), -]); -templatedBuilder.build('open-color.svg', [ - path.join(__dirname, 'docs', 'asset', 'images', 'open-color.svg'), -]); -templatedBuilder.build('open-color.tex', [ - path.join(__dirname, 'open-color.tex'), -]); - -templatedBuilder.build('open-color.sketchpalette', [ - path.join( - __dirname, - 'docs', - 'asset', - 'download', - `open-color_${pkg.version}.sketchpalette` - ), -]); - -templatedBuilder.build('open-color.inkscape', [ - path.join( - __dirname, - 'docs', - 'asset', - 'download', - `open-color_${pkg.version}.gpl` - ), -]); - -templatedBuilder.build('open-color.code-snippets', [ - path.join( - __dirname, - 'docs', - 'asset', - 'download', - `open-color_${pkg.version}.code-snippets` - ), -]); - -aseBuilder.build('ase', [ - path.join( - __dirname, - 'docs', - 'asset', - 'download', - `open-color_${pkg.version}.ase` - ), -]); - -craftLibraryBuilder.build([ - path.join( - __dirname, - 'docs', - 'asset', - 'download', - `open-color_${pkg.version}.library` - ), -]); - -gvswatchBuilder.build([ - path.join( - __dirname, - 'docs', - 'asset', - 'download', - `open-color_${pkg.version}.gvswatch` - ), -]); - -templatedBuilder.build('open-color.oco', [ - path.join(__dirname, 'open-color.oco'), -]); - -templatedBuilder.build('open-color.rcpx', [ - path.join(__dirname, 'open-color.rcpx'), -]); - -templatedBuilder.build('open-color.d.ts', [ - path.join(__dirname, 'open-color.d.ts'), -]); \ No newline at end of file +templatedBuilder.build('_config.yml', + [path.join(__dirname, 'docs', '_config.yml')]); +templatedBuilder.build('open-color.scss', + [path.join(__dirname, 'open-color.scss'), path.join(__dirname, 'docs', '_sass', '_open-color.scss')]); +templatedBuilder.build('open-color.css', + [path.join(__dirname, 'open-color.css')]); +templatedBuilder.build('open-color.js', + [path.join(__dirname, 'open-color.js')]); +templatedBuilder.build('open-color.less', + [path.join(__dirname, 'open-color.less')]); +templatedBuilder.build('open-color.styl', + [path.join(__dirname, 'open-color.styl')]); +templatedBuilder.build('open-color.svg', + [path.join(__dirname, 'docs', 'asset', 'images', 'open-color.svg')]); +templatedBuilder.build('open-color.tex', + [path.join(__dirname, 'open-color.tex')]); + +templatedBuilder.build('open-color.sketchpalette', + [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.sketchpalette`)]); + +templatedBuilder.build('open-color.inkscape', + [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.gpl`)]); + +templatedBuilder.build('open-color.code-snippets', + [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.code-snippets`)]); + +aseBuilder.build('ase', + [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.ase`)]); + +craftLibraryBuilder.build( + [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.library`)]); + +gvswatchBuilder.build( + [path.join(__dirname, 'docs', 'asset', 'download', `open-color_${pkg.version}.gvswatch`)]) + +templatedBuilder.build('open-color.oco', + [path.join(__dirname, 'open-color.oco')]); + +templatedBuilder.build('open-color.rcpx', + [path.join(__dirname, 'open-color.rcpx')]); + +templatedBuilder.build('open-color.d.ts', + [path.join(__dirname, 'open-color.d.ts')]); \ No newline at end of file