mongodb · bruugey · Oct 10, 2019 · Oct 8, 2019 · Oct 8, 2019 · Oct 8, 2019
diff --git a/.changeset/chilly-buttons-wash/changes.json b/.changeset/chilly-buttons-wash/changes.json
@@ -0,0 +1,4 @@
+{
+  "releases": [{ "name": "@leafygreen-ui/palette", "type": "minor" }],
+  "dependents": []
+}
diff --git a/.changeset/chilly-buttons-wash/changes.md b/.changeset/chilly-buttons-wash/changes.md
@@ -0,0 +1 @@
+Add ui-colors.less file
diff --git a/jest.config.js b/jest.config.js
@@ -22,11 +22,12 @@ module.exports = {
     'woff2',
     'ttf',
     'eot',
+    'less',
   ],
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    '.(png|jpg|jpeg|gif|woff|woff2|ttf|eot)$':
+    '.(png|jpg|jpeg|gif|woff|woff2|ttf|less|eot)$':
       '<rootDir>/__mocks__/fileMock.js',
   },
 

diff --git a/package.json b/package.json
@@ -93,6 +93,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "7.11.1",
     "eslint-plugin-react-hooks": "^1.6.1",
+    "file-loader": "^4.2.0",
     "gh-pages": "^2.0.1",
     "husky": "^2.2.0",
     "jest": "23.6.0",

diff --git a/packages/palette/README.md b/packages/palette/README.md
@@ -67,3 +67,7 @@ const example = () => (
   <span style={{ color: uiColors.gray.dark1 }}>Hello World</span>
 );
 ```
+
+```less
+@import '<path to node_modules>/@leafygreen-ui/palette/dist/ui-colors.less';
+```
diff --git a/packages/palette/src/index.ts b/packages/palette/src/index.ts
@@ -1,3 +1,4 @@
 import * as uiColors from './uiColors';
+import './ui-colors.less';
 
 export { uiColors };
diff --git a/packages/palette/src/ui-colors.less b/packages/palette/src/ui-colors.less
@@ -0,0 +1,34 @@
+@leafygreen__green--dark-3: #0B3B35;
+@leafygreen__green--dark-2: #116149;
+@leafygreen__green--base: #13AA52;
+@leafygreen__green--light-2: #C3E7CA;
+@leafygreen__green--light-3: #E4F4E4;
+
+@leafygreen__gray--dark-3: #21313C;
+@leafygreen__gray--dark-2: #3D4F58;
+@leafygreen__gray--dark-1: #5D6C74;
+@leafygreen__gray--base: #89989B;
+@leafygreen__gray--light-1: #B8C4C2;
+@leafygreen__gray--light-2: #E7EEEC;
+@leafygreen__gray--light-3: #F9FBFA;
+
+@leafygreen__blue--dark-3: #0D324F; 
+@leafygreen__blue--dark-2: #1A567E; 
+@leafygreen__blue--base: #007CAD; 
+@leafygreen__blue--light-2: #C5E4F2; 
+@leafygreen__blue--light-3: #E1F2F6; 
+
+@leafygreen__yellow--dark-3: #543E07; 
+@leafygreen__yellow--dark-2: #86681D; 
+@leafygreen__yellow--base: #FFDD49; 
+@leafygreen__yellow--light-2: #FEF2C8; 
+@leafygreen__yellow--light-3: #FEF7E3; 
+
+@leafygreen__red--dark-3: #570B08; 
+@leafygreen__red--dark-2: #8F221B; 
+@leafygreen__red--base: #CF4A22; 
+@leafygreen__red--light-2: #F9D3C5; 
+@leafygreen__red--light-3: #FCEBE2; 
+
+@leafygreen__white: #FFFFFF; 
+@leafygreen__black: #061621;
diff --git a/webpack.config.js b/webpack.config.js
@@ -91,6 +91,13 @@ module.exports = function(env = 'production') {
             limit: 50000,
           },
         },
+        {
+          test: /\.less(\?v=\d+\.\d+\.\d+)?$/,
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]',
+          },
+        },
       ],
     },
 

diff --git a/yarn.lock b/yarn.lock
@@ -3369,7 +3369,7 @@ ajv-errors@^1.0.0:
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
   integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
 
-ajv-keywords@^3.1.0:
+ajv-keywords@^3.1.0, ajv-keywords@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
   integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
@@ -6668,6 +6668,14 @@ file-loader@^3.0.1:
     loader-utils "^1.0.2"
     schema-utils "^1.0.0"
 
+file-loader@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-4.2.0.tgz#5fb124d2369d7075d70a9a5abecd12e60a95215e"
+  integrity sha512-+xZnaK5R8kBJrHK0/6HRlrKNamvVS5rjyuju+rnyxRGuwUJwpAMsVzUl5dz6rK8brkzjV6JpcFNjp6NqV0g1OQ==
+  dependencies:
+    loader-utils "^1.2.3"
+    schema-utils "^2.0.0"
+
 file-system-cache@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-1.0.5.tgz#84259b36a2bbb8d3d6eb1021d3132ffe64cfff4f"
@@ -12103,6 +12111,14 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
+schema-utils@^2.0.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.4.1.tgz#e89ade5d056dc8bcaca377574bb4a9c4e1b8be56"
+  integrity sha512-RqYLpkPZX5Oc3fw/kHHHyP56fg5Y+XBpIpV8nCg0znIALfq3OH+Ea9Hfeac9BAMwG5IICltiZ0vxFvJQONfA5w==
+  dependencies:
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+
 select@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
-Original file line number
+Diff line change
@@ Expand Up / @@ -67,3 +67,7 @@ const example = () => ( @@
       <span style={{ color: uiColors.gray.dark1 }}>Hello World</span>
     );
     ```
+    ```less
+    @import '<path to node_modules>/@leafygreen-ui/palette/dist/ui-colors.less';
+    ```