+
+
+
+
+ Welcome trading 👋
+
+
+
-
-
- Learn more
-
+
+
+
+
+
+
+
Next steps
+
Here are some things you can do with Nx:
+
+
+
+
+
+ Add UI library
+
+
+ # Generate UI lib
+ nx g @nrwl/angular:lib ui
+ # Add a component
+ nx g @nrwl/angular:component button --project ui
+
+
+
+
+
+
+
+ View interactive project graph
+
+ nx graph
+
+
+
+
+
+
+ Run affected commands
+
+
+ # see what's been affected by changes
+ nx affected:graph
+ # run tests for current changes
+ nx affected:test
+ # run e2e tests for current changes
+ nx affected:e2e
+
+
+
+
+
+ Carefully crafted with
+
+
+
+
);
}
+
+export default Index;
diff --git a/apps/trading/postcss.config.js b/apps/trading/postcss.config.js
index 3971d7bbf..cbdd9c22c 100644
--- a/apps/trading/postcss.config.js
+++ b/apps/trading/postcss.config.js
@@ -1,4 +1,3 @@
-// apps/site/postcss.config.js
const { join } = require('path');
module.exports = {
diff --git a/apps/trading/tailwind.config.js b/apps/trading/tailwind.config.js
index 99c2d902a..5852af786 100644
--- a/apps/trading/tailwind.config.js
+++ b/apps/trading/tailwind.config.js
@@ -1,12 +1,13 @@
const { join } = require('path');
+const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
+const theme = require('../../libs/tailwindcss-config/src/theme');
module.exports = {
content: [
- join(__dirname, './pages/**/*.{js,ts,jsx,tsx}'),
- join(__dirname, './components/**/*.{js,ts,jsx,tsx}'),
+ join(__dirname, 'pages/**/*.{js,ts,jsx,tsx}'),
+ ...createGlobPatternsForDependencies(__dirname),
],
- theme: {
- extend: {},
- },
+ darkMode: 'class',
+ theme,
plugins: [],
};
diff --git a/libs/tailwindcss-config/.eslintrc.json b/libs/tailwindcss-config/.eslintrc.json
new file mode 100644
index 000000000..9d9c0db55
--- /dev/null
+++ b/libs/tailwindcss-config/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+ "extends": ["../../.eslintrc.json"],
+ "ignorePatterns": ["!**/*"],
+ "overrides": [
+ {
+ "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+ "rules": {}
+ },
+ {
+ "files": ["*.ts", "*.tsx"],
+ "rules": {}
+ },
+ {
+ "files": ["*.js", "*.jsx"],
+ "rules": {}
+ }
+ ]
+}
diff --git a/libs/tailwindcss-config/README.md b/libs/tailwindcss-config/README.md
new file mode 100644
index 000000000..f329e2102
--- /dev/null
+++ b/libs/tailwindcss-config/README.md
@@ -0,0 +1,11 @@
+# tailwindcss-config
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build tailwindcss-config` to build the library.
+
+## Running unit tests
+
+Run `nx test tailwindcss-config` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/tailwindcss-config/jest.config.js b/libs/tailwindcss-config/jest.config.js
new file mode 100644
index 000000000..7ca6dcddc
--- /dev/null
+++ b/libs/tailwindcss-config/jest.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+ displayName: 'tailwindcss-config',
+ preset: '../../jest.preset.js',
+ globals: {
+ 'ts-jest': {
+ tsconfig: '
/tsconfig.spec.json',
+ },
+ },
+ transform: {
+ '^.+\\.[tj]s$': 'ts-jest',
+ },
+ moduleFileExtensions: ['ts', 'js', 'html'],
+ coverageDirectory: '../../coverage/libs/tailwindcss-config',
+};
diff --git a/libs/tailwindcss-config/package.json b/libs/tailwindcss-config/package.json
new file mode 100644
index 000000000..726ea8a84
--- /dev/null
+++ b/libs/tailwindcss-config/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "@vegaprotocol/tailwindcss-config",
+ "version": "0.0.1",
+ "type": "commonjs"
+}
diff --git a/libs/tailwindcss-config/project.json b/libs/tailwindcss-config/project.json
new file mode 100644
index 000000000..80ed67346
--- /dev/null
+++ b/libs/tailwindcss-config/project.json
@@ -0,0 +1,33 @@
+{
+ "root": "libs/tailwindcss-config",
+ "sourceRoot": "libs/tailwindcss-config/src",
+ "projectType": "library",
+ "targets": {
+ "build": {
+ "executor": "@nrwl/js:tsc",
+ "outputs": ["{options.outputPath}"],
+ "options": {
+ "outputPath": "dist/libs/tailwindcss-config",
+ "main": "libs/tailwindcss-config/src/index.js",
+ "tsConfig": "libs/tailwindcss-config/tsconfig.lib.json",
+ "assets": ["libs/tailwindcss-config/*.md"]
+ }
+ },
+ "lint": {
+ "executor": "@nrwl/linter:eslint",
+ "outputs": ["{options.outputFile}"],
+ "options": {
+ "lintFilePatterns": ["libs/tailwindcss-config/**/*.js"]
+ }
+ },
+ "test": {
+ "executor": "@nrwl/jest:jest",
+ "outputs": ["coverage/libs/tailwindcss-config"],
+ "options": {
+ "jestConfig": "libs/tailwindcss-config/jest.config.js",
+ "passWithNoTests": true
+ }
+ }
+ },
+ "tags": []
+}
diff --git a/libs/tailwindcss-config/src/index.js b/libs/tailwindcss-config/src/index.js
new file mode 100644
index 000000000..da88950a9
--- /dev/null
+++ b/libs/tailwindcss-config/src/index.js
@@ -0,0 +1,4 @@
+const theme = require('./theme');
+module.exports = {
+ theme,
+};
diff --git a/libs/tailwindcss-config/src/theme.js b/libs/tailwindcss-config/src/theme.js
new file mode 100644
index 000000000..ee750194c
--- /dev/null
+++ b/libs/tailwindcss-config/src/theme.js
@@ -0,0 +1,151 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+module.exports = {
+ screens: {
+ sm: '500px',
+ lg: '960px',
+ },
+ colors: {
+ transparent: 'transparent',
+ current: 'currentColor',
+ black: '#000',
+ white: '#FFF',
+
+ neutral: {
+ // 250 - 23 = 227; (900-50) / 227 = 850 / 227 = 3.74449339207
+ 50: '#fafafa', // FA = 250
+ 100: '#ebebeb',
+ 150: '#dcdcdc',
+ 200: '#cdcdcd',
+ 250: '#bebebe',
+ 300: '#afafaf',
+ 350: '#a1a1a1',
+ 400: '#939393',
+ 450: '#858585',
+ 500: '#787878',
+ 550: '#6a6a6a',
+ 593: '#696969', // dark muted
+ 600: '#5d5d5d',
+ 650: '#515151',
+ 700: '#444444',
+ 753: '#3E3E3E', // dark -> 3F is muted
+ 750: '#383838',
+ 800: '#2d2d2d', // breakdown-background was 2C
+ 850: '#222222',
+ 900: '#171717', // 17 = 23
+ },
+
+ 'light-gray-50': '#F5F8FA', //off-white - https://blueprintjs.com/docs/#core/colors
+ 'gray-50': '#BFCCD6', // muted - https://blueprintjs.com/docs/#core/colors
+ coral: '#FF6057',
+ // below colors are not defined as atoms
+ vega: {
+ yellow: '#EDFF22',
+ pink: '#FF2D5E',
+ green: '#00F780',
+ },
+ intent: {
+ danger: '#FF261A',
+ warning: '#FF7A1A',
+ prompt: '#EDFF22',
+ progress: '#FFF',
+ success: '#26FF8A',
+ help: '#494949',
+ background: {
+ danger: '#9E0025', // for white text
+ },
+ } /*,
+ data: {
+ red: {
+ white: {
+ 50: '#FFFFFF',
+ 220: '#FF6057', // overlay FFF 80%
+ 390: '#FF6057', // overlay FFF 60%
+ 560: '#FF6057', // overlay FFF 40%
+ 730: '#FF6057', // overlay FFF 20%
+ 900: '#FF6057',
+ },
+ green: {
+ 50: '#30F68B',
+ 220: '#89DC50',
+ 475: '#F2BD09',
+ 730: '#FF8501',
+ 900: '#FF6057',
+ },
+ },
+ },*/,
+ },
+ spacing: {
+ 0: '0px',
+ 2: '0.125rem',
+ 4: '0.25rem',
+ 8: '0.5rem',
+ 12: '0.75rem',
+ 28: '1.75rem',
+ 44: '2.75rem',
+ },
+ backgroundColor: ({ theme }) => ({
+ transparent: 'transparent',
+ dark: theme('colors.dark'),
+ black: '#000',
+ white: theme('colors.white'),
+ danger: theme('colors.intent.background.danger'),
+ }),
+ borderWidth: {
+ DEFAULT: '1px',
+ 4: '4px',
+ },
+ fontFamily: {
+ mono: defaultTheme.fontFamily.mono,
+ serif: defaultTheme.fontFamily.serif,
+ sans: [
+ '"Helvetica Neue"',
+ '-apple-system',
+ 'BlinkMacSystemFont',
+ '"Segoe UI"',
+ 'Roboto',
+ 'Arial',
+ '"Noto Sans"',
+ 'sans-serif',
+ '"Apple Color Emoji"',
+ '"Segoe UI Emoji"',
+ '"Segoe UI Symbol"',
+ '"Noto Color Emoji"',
+ ],
+ alpha: [
+ 'AlphaLyrae-Medium',
+ '"Helvetica Neue"',
+ '-apple-system',
+ 'BlinkMacSystemFont',
+ '"Segoe UI"',
+ 'Roboto',
+ 'Arial',
+ '"Noto Sans"',
+ 'sans-serif',
+ '"Apple Color Emoji"',
+ '"Segoe UI Emoji"',
+ '"Segoe UI Symbol"',
+ '"Noto Color Emoji"',
+ ],
+ },
+ fontSize: {
+ h1: ['72px', { lineHeight: '92px', letterSpacing: '-1%' }],
+ h2: ['48px', { lineHeight: '64px', letterSpacing: '-1%' }],
+ h3: ['32px', { lineHeight: '40px', letterSpacing: '-1%' }],
+
+ h4: ['24px', { lineHeight: '36px', letterSpacing: '-1%' }],
+ h5: ['18px', { lineHeight: '28px', letterSpacing: '-1%' }],
+
+ 'body-large': ['16px', '24px'],
+ body: ['14px', '20px'],
+
+ ui: ['14px', '20px'],
+ 'ui-small': ['10px', '16px'],
+ },
+
+ extend: {
+ boxShadow: {
+ callout: '5px 5px 0 1px rgba(0, 0, 0, 0.05)',
+ },
+ },
+};
diff --git a/libs/tailwindcss-config/tsconfig.json b/libs/tailwindcss-config/tsconfig.json
new file mode 100644
index 000000000..aafbcbd30
--- /dev/null
+++ b/libs/tailwindcss-config/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "extends": "../../tsconfig.base.json",
+ "compilerOptions": {
+ "module": "CommonJS",
+ "allowJs": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "files": [],
+ "include": [],
+ "references": [
+ {
+ "path": "./tsconfig.lib.json"
+ },
+ {
+ "path": "./tsconfig.spec.json"
+ }
+ ]
+}
diff --git a/libs/tailwindcss-config/tsconfig.lib.json b/libs/tailwindcss-config/tsconfig.lib.json
new file mode 100644
index 000000000..9607e66b1
--- /dev/null
+++ b/libs/tailwindcss-config/tsconfig.lib.json
@@ -0,0 +1,10 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../dist/out-tsc",
+ "declaration": true,
+ "types": []
+ },
+ "include": ["**/*.ts", "**/*.js"],
+ "exclude": ["**/*.spec.ts", "**/*.spec.js"]
+}
diff --git a/libs/tailwindcss-config/tsconfig.spec.json b/libs/tailwindcss-config/tsconfig.spec.json
new file mode 100644
index 000000000..a18afb604
--- /dev/null
+++ b/libs/tailwindcss-config/tsconfig.spec.json
@@ -0,0 +1,9 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../dist/out-tsc",
+ "module": "commonjs",
+ "types": ["jest", "node"]
+ },
+ "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
+}
diff --git a/libs/ui-toolkit/project.json b/libs/ui-toolkit/project.json
index 2bb76699c..8c32676d4 100644
--- a/libs/ui-toolkit/project.json
+++ b/libs/ui-toolkit/project.json
@@ -1,6 +1,6 @@
{
- "root": "libs/ui-toolkit",
- "sourceRoot": "libs/ui-toolkit/src",
+ "root": "libs/ui-toolkit/src",
+ "sourceRoot": "libs/ui-toolkit",
"projectType": "library",
"tags": [],
"targets": {
diff --git a/libs/ui-toolkit/src/components/callout/callout.stories.tsx b/libs/ui-toolkit/src/components/callout/callout.stories.tsx
index 399100e2c..f8b3cc854 100644
--- a/libs/ui-toolkit/src/components/callout/callout.stories.tsx
+++ b/libs/ui-toolkit/src/components/callout/callout.stories.tsx
@@ -12,6 +12,8 @@ const Template: ComponentStory = (args) => (
Content
);
+export const Default = Template.bind({});
+
export const Danger = Template.bind({});
Danger.args = {
intent: 'danger',
diff --git a/libs/ui-toolkit/tailwind.config.js b/libs/ui-toolkit/tailwind.config.js
index 4686de3aa..104d4055c 100644
--- a/libs/ui-toolkit/tailwind.config.js
+++ b/libs/ui-toolkit/tailwind.config.js
@@ -1,6 +1,6 @@
-const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');
const { join } = require('path');
-// const defaultTheme = require('tailwindcss/defaultTheme')
+const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
+const theme = require('../tailwindcss-config/src/theme');
module.exports = {
content: [
@@ -9,132 +9,6 @@ module.exports = {
...createGlobPatternsForDependencies(__dirname),
],
darkMode: 'class',
- theme: {
- screens: {
- sm: '500px',
- lg: '960px',
- },
- colors: {
- transparent: 'transparent',
- current: 'currentColor',
- dark: '#3E3E3E',
- black: '#000',
- white: '#FFF',
- 'off-white': '#F5F8FA',
- muted: '#BFCCD6',
- warning: '#FF6057',
- // below colors are not defined as atoms
- 'input-background': '#3F3F3F',
- 'breakdown-background': '#2C2C2C',
- 'dark-muted': '#696969',
- vega: {
- yellow: '#EDFF22',
- pink: '#FF2D5E',
- green: '#00F780',
- },
- intent: {
- danger: '#FF261A',
- warning: '#FF7A1A',
- prompt: '#EDFF22',
- progress: '#FFF',
- success: '#26FF8A',
- help: '#494949',
- background: {
- danger: '#9E0025', // for white text
- },
- },
- data: {
- red: {
- white: {
- 50: '#FFFFFF',
- 220: '#FF6057', // overlay FFF 80%
- 390: '#FF6057', // overlay FFF 60%
- 560: '#FF6057', // overlay FFF 40%
- 730: '#FF6057', // overlay FFF 20%
- 900: '#FF6057',
- },
- green: {
- 50: '#30F68B',
- 220: '#89DC50',
- 475: '#F2BD09',
- 730: '#FF8501',
- 900: '#FF6057',
- },
- },
- },
- },
- spacing: {
- px: '1px',
- 0: '0px',
- 4: '0.25rem',
- 8: '0.5rem',
- 12: '0.75rem',
- 28: '1.75rem',
- 44: '2.75rem',
- },
- backgroundColor: (theme) => ({
- transparent: 'transparent',
- dark: theme('colors.dark'),
- black: '#000',
- white: theme('colors.white'),
- danger: theme('colors.intent.background.danger'),
- }),
- borderWidth: {
- DEFAULT: '1px',
- 4: '4px',
- },
- fontFamily: (theme) => ({
- ...theme.fontFamily,
- sans: [
- '"Helvetica Neue"',
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- 'Arial',
- '"Noto Sans"',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- '"Noto Color Emoji"',
- ],
- alpha: [
- 'AlphaLyrae-Medium',
- '"Helvetica Neue"',
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- 'Arial',
- '"Noto Sans"',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- '"Noto Color Emoji"',
- ],
- }),
- fontSize: {
- h1: ['72px', { lineHeight: '92px', letterSpacing: '-1%' }],
- h2: ['48px', { lineHeight: '64px', letterSpacing: '-1%' }],
- h3: ['32px', { lineHeight: '40px', letterSpacing: '-1%' }],
-
- h4: ['24px', { lineHeight: '36px', letterSpacing: '-1%' }],
- h5: ['18px', { lineHeight: '28px', letterSpacing: '-1%' }],
-
- 'body-large': ['16px', '24px'],
- body: ['14px', '20px'],
-
- ui: ['14px', '20px'],
- 'ui-small': ['10px', '16px'],
- },
-
- extend: {
- boxShadow: {
- callout: '5px 5px 0 1px rgba(0, 0, 0, 0.05)',
- },
- },
- },
+ theme,
plugins: [],
};
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 1a5f59912..7b50969ae 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -16,6 +16,9 @@
"baseUrl": ".",
"paths": {
"@vegaprotocol/react-helpers": ["libs/react-helpers/src/index.ts"],
+ "@vegaprotocol/tailwindcss-config": [
+ "libs/tailwindcss-config/src/index.js"
+ ],
"@vegaprotocol/ui-toolkit": ["libs/ui-toolkit/src/index.ts"]
}
},
diff --git a/workspace.json b/workspace.json
index a03038533..9cfe73a45 100644
--- a/workspace.json
+++ b/workspace.json
@@ -4,6 +4,7 @@
"explorer": "apps/explorer",
"explorer-e2e": "apps/explorer-e2e",
"react-helpers": "libs/react-helpers",
+ "tailwindcss-config": "libs/tailwindcss-config",
"trading": "apps/trading",
"trading-e2e": "apps/trading-e2e",
"ui-toolkit": "libs/ui-toolkit"