From 9249c18e76f18842e7d519d60d3d6c67980cb9ef Mon Sep 17 00:00:00 2001 From: Maxime Beauchemin Date: Fri, 20 Dec 2024 13:06:19 -0800 Subject: [PATCH] Templating less --- superset-frontend/.prettierignore | 2 + superset-frontend/package-lock.json | 693 +++++++++++++- superset-frontend/package.json | 3 + .../superset-ui-core/src/style/index.tsx | 60 +- superset-frontend/scripts/compileLess.ts | 68 ++ .../src/assets/stylesheets/antd/index.less | 22 +- .../assets/stylesheets/antd/index.less.hbs | 39 + .../stylesheets/less/cosmo/bootswatch.less | 63 ++ .../less/cosmo/bootswatch.less.hbs | 509 +++++++++++ .../stylesheets/less/cosmo/variables.less | 6 +- .../stylesheets/less/cosmo/variables.less.hbs | 851 ++++++++++++++++++ .../assets/stylesheets/less/fonts.less.hbs | 33 + .../assets/stylesheets/less/index.less.hbs | 47 + .../assets/stylesheets/less/variables.less | 215 ++--- .../stylesheets/less/variables.less.hbs | 159 ++++ .../stylesheets/reactable-pagination.less | 2 + .../stylesheets/reactable-pagination.less.hbs | 61 ++ .../src/assets/stylesheets/superset.less | 13 +- .../src/assets/stylesheets/superset.less.hbs | 551 ++++++++++++ 19 files changed, 3225 insertions(+), 172 deletions(-) create mode 100644 superset-frontend/scripts/compileLess.ts create mode 100644 superset-frontend/src/assets/stylesheets/antd/index.less.hbs create mode 100644 superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less.hbs create mode 100644 superset-frontend/src/assets/stylesheets/less/cosmo/variables.less.hbs create mode 100644 superset-frontend/src/assets/stylesheets/less/fonts.less.hbs create mode 100644 superset-frontend/src/assets/stylesheets/less/index.less.hbs create mode 100644 superset-frontend/src/assets/stylesheets/less/variables.less.hbs create mode 100644 superset-frontend/src/assets/stylesheets/reactable-pagination.less.hbs create mode 100644 superset-frontend/src/assets/stylesheets/superset.less.hbs diff --git a/superset-frontend/.prettierignore b/superset-frontend/.prettierignore index 790231eb298..4fe6cf6c11c 100644 --- a/superset-frontend/.prettierignore +++ b/superset-frontend/.prettierignore @@ -26,5 +26,7 @@ CHANGELOG/ *-topo.json storybook-static/ *.snap +**/*.less +**/*.less.hbs /.nx/workspace-data diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json index 58f5935fd6f..a62cac31fd2 100644 --- a/superset-frontend/package-lock.json +++ b/superset-frontend/package-lock.json @@ -252,6 +252,7 @@ "exports-loader": "^5.0.0", "fetch-mock": "^7.7.3", "fork-ts-checker-webpack-plugin": "^9.0.2", + "handlebars": "^4.7.8", "history": "^5.3.0", "ignore-styles": "^5.0.1", "imports-loader": "^5.0.0", @@ -285,6 +286,7 @@ "style-loader": "^4.0.0", "thread-loader": "^4.0.4", "ts-loader": "^9.5.1", + "tsx": "^4.19.2", "typescript": "^4.8.4", "vm-browserify": "^1.1.2", "webpack": "^5.94.0", @@ -5263,6 +5265,23 @@ "node": ">=12" } }, + "node_modules/@esbuild/openbsd-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz", + "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, "node_modules/@esbuild/openbsd-x64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz", @@ -26626,8 +26645,11 @@ "license": "ISC" }, "node_modules/fsevents": { - "version": "2.3.2", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", "dev": true, + "hasInstallScript": true, "license": "MIT", "optional": true, "os": [ @@ -27546,6 +27568,7 @@ "version": "4.7.8", "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz", "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==", + "license": "MIT", "dependencies": { "minimist": "^1.2.5", "neo-async": "^2.6.2", @@ -51473,6 +51496,457 @@ "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" } }, + "node_modules/tsx": { + "version": "4.19.2", + "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.2.tgz", + "integrity": "sha512-pOUl6Vo2LUq/bSa8S5q7b91cgNSjctn9ugq/+Mvow99qW6x/UZYwzxy/3NmqoT66eHYfCVvFvACC58UBPFf28g==", + "dev": true, + "license": "MIT", + "dependencies": { + "esbuild": "~0.23.0", + "get-tsconfig": "^4.7.5" + }, + "bin": { + "tsx": "dist/cli.mjs" + }, + "engines": { + "node": ">=18.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + } + }, + "node_modules/tsx/node_modules/@esbuild/aix-ppc64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz", + "integrity": "sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/android-arm": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.23.1.tgz", + "integrity": "sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/android-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.23.1.tgz", + "integrity": "sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/android-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.23.1.tgz", + "integrity": "sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/darwin-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.23.1.tgz", + "integrity": "sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/darwin-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.23.1.tgz", + "integrity": "sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/freebsd-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.1.tgz", + "integrity": "sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/freebsd-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.23.1.tgz", + "integrity": "sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-arm": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.23.1.tgz", + "integrity": "sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.23.1.tgz", + "integrity": "sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-ia32": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.23.1.tgz", + "integrity": "sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-loong64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.23.1.tgz", + "integrity": "sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-mips64el": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.23.1.tgz", + "integrity": "sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==", + "cpu": [ + "mips64el" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-ppc64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.23.1.tgz", + "integrity": "sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-riscv64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.23.1.tgz", + "integrity": "sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-s390x": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.23.1.tgz", + "integrity": "sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.23.1.tgz", + "integrity": "sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/netbsd-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.23.1.tgz", + "integrity": "sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/openbsd-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.23.1.tgz", + "integrity": "sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/sunos-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.23.1.tgz", + "integrity": "sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/win32-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.23.1.tgz", + "integrity": "sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/win32-ia32": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.23.1.tgz", + "integrity": "sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/win32-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.23.1.tgz", + "integrity": "sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/esbuild": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz", + "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.23.1", + "@esbuild/android-arm": "0.23.1", + "@esbuild/android-arm64": "0.23.1", + "@esbuild/android-x64": "0.23.1", + "@esbuild/darwin-arm64": "0.23.1", + "@esbuild/darwin-x64": "0.23.1", + "@esbuild/freebsd-arm64": "0.23.1", + "@esbuild/freebsd-x64": "0.23.1", + "@esbuild/linux-arm": "0.23.1", + "@esbuild/linux-arm64": "0.23.1", + "@esbuild/linux-ia32": "0.23.1", + "@esbuild/linux-loong64": "0.23.1", + "@esbuild/linux-mips64el": "0.23.1", + "@esbuild/linux-ppc64": "0.23.1", + "@esbuild/linux-riscv64": "0.23.1", + "@esbuild/linux-s390x": "0.23.1", + "@esbuild/linux-x64": "0.23.1", + "@esbuild/netbsd-x64": "0.23.1", + "@esbuild/openbsd-arm64": "0.23.1", + "@esbuild/openbsd-x64": "0.23.1", + "@esbuild/sunos-x64": "0.23.1", + "@esbuild/win32-arm64": "0.23.1", + "@esbuild/win32-ia32": "0.23.1", + "@esbuild/win32-x64": "0.23.1" + } + }, "node_modules/tuf-js": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tuf-js/-/tuf-js-2.2.1.tgz", @@ -61426,6 +61900,13 @@ "dev": true, "optional": true }, + "@esbuild/openbsd-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz", + "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==", + "dev": true, + "optional": true + }, "@esbuild/openbsd-x64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz", @@ -78114,7 +78595,9 @@ "version": "1.0.0" }, "fsevents": { - "version": "2.3.2", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", "dev": true, "optional": true }, @@ -93602,6 +94085,212 @@ "tslib": "^1.8.1" } }, + "tsx": { + "version": "4.19.2", + "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.2.tgz", + "integrity": "sha512-pOUl6Vo2LUq/bSa8S5q7b91cgNSjctn9ugq/+Mvow99qW6x/UZYwzxy/3NmqoT66eHYfCVvFvACC58UBPFf28g==", + "dev": true, + "requires": { + "esbuild": "~0.23.0", + "fsevents": "~2.3.3", + "get-tsconfig": "^4.7.5" + }, + "dependencies": { + "@esbuild/aix-ppc64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz", + "integrity": "sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==", + "dev": true, + "optional": true + }, + "@esbuild/android-arm": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.23.1.tgz", + "integrity": "sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==", + "dev": true, + "optional": true + }, + "@esbuild/android-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.23.1.tgz", + "integrity": "sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==", + "dev": true, + "optional": true + }, + "@esbuild/android-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.23.1.tgz", + "integrity": "sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==", + "dev": true, + "optional": true + }, + "@esbuild/darwin-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.23.1.tgz", + "integrity": "sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==", + "dev": true, + "optional": true + }, + "@esbuild/darwin-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.23.1.tgz", + "integrity": "sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==", + "dev": true, + "optional": true + }, + "@esbuild/freebsd-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.1.tgz", + "integrity": "sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==", + "dev": true, + "optional": true + }, + "@esbuild/freebsd-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.23.1.tgz", + "integrity": "sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==", + "dev": true, + "optional": true + }, + "@esbuild/linux-arm": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.23.1.tgz", + "integrity": "sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==", + "dev": true, + "optional": true + }, + "@esbuild/linux-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.23.1.tgz", + "integrity": "sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==", + "dev": true, + "optional": true + }, + "@esbuild/linux-ia32": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.23.1.tgz", + "integrity": "sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==", + "dev": true, + "optional": true + }, + "@esbuild/linux-loong64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.23.1.tgz", + "integrity": "sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==", + "dev": true, + "optional": true + }, + "@esbuild/linux-mips64el": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.23.1.tgz", + "integrity": "sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==", + "dev": true, + "optional": true + }, + "@esbuild/linux-ppc64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.23.1.tgz", + "integrity": "sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==", + "dev": true, + "optional": true + }, + "@esbuild/linux-riscv64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.23.1.tgz", + "integrity": "sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==", + "dev": true, + "optional": true + }, + "@esbuild/linux-s390x": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.23.1.tgz", + "integrity": "sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==", + "dev": true, + "optional": true + }, + "@esbuild/linux-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.23.1.tgz", + "integrity": "sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==", + "dev": true, + "optional": true + }, + "@esbuild/netbsd-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.23.1.tgz", + "integrity": "sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==", + "dev": true, + "optional": true + }, + "@esbuild/openbsd-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.23.1.tgz", + "integrity": "sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==", + "dev": true, + "optional": true + }, + "@esbuild/sunos-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.23.1.tgz", + "integrity": "sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==", + "dev": true, + "optional": true + }, + "@esbuild/win32-arm64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.23.1.tgz", + "integrity": "sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==", + "dev": true, + "optional": true + }, + "@esbuild/win32-ia32": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.23.1.tgz", + "integrity": "sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==", + "dev": true, + "optional": true + }, + "@esbuild/win32-x64": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.23.1.tgz", + "integrity": "sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==", + "dev": true, + "optional": true + }, + "esbuild": { + "version": "0.23.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz", + "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==", + "dev": true, + "requires": { + "@esbuild/aix-ppc64": "0.23.1", + "@esbuild/android-arm": "0.23.1", + "@esbuild/android-arm64": "0.23.1", + "@esbuild/android-x64": "0.23.1", + "@esbuild/darwin-arm64": "0.23.1", + "@esbuild/darwin-x64": "0.23.1", + "@esbuild/freebsd-arm64": "0.23.1", + "@esbuild/freebsd-x64": "0.23.1", + "@esbuild/linux-arm": "0.23.1", + "@esbuild/linux-arm64": "0.23.1", + "@esbuild/linux-ia32": "0.23.1", + "@esbuild/linux-loong64": "0.23.1", + "@esbuild/linux-mips64el": "0.23.1", + "@esbuild/linux-ppc64": "0.23.1", + "@esbuild/linux-riscv64": "0.23.1", + "@esbuild/linux-s390x": "0.23.1", + "@esbuild/linux-x64": "0.23.1", + "@esbuild/netbsd-x64": "0.23.1", + "@esbuild/openbsd-arm64": "0.23.1", + "@esbuild/openbsd-x64": "0.23.1", + "@esbuild/sunos-x64": "0.23.1", + "@esbuild/win32-arm64": "0.23.1", + "@esbuild/win32-ia32": "0.23.1", + "@esbuild/win32-x64": "0.23.1" + } + } + } + }, "tuf-js": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tuf-js/-/tuf-js-2.2.1.tgz", diff --git a/superset-frontend/package.json b/superset-frontend/package.json index 9e87c6c5d2a..4a42e3c2348 100644 --- a/superset-frontend/package.json +++ b/superset-frontend/package.json @@ -44,6 +44,7 @@ "build-storybook": "storybook build", "build-translation": "scripts/po2json.sh", "bundle-stats": "cross-env BUNDLE_ANALYZER=true npm run build && npx open-cli ../superset/static/stats/statistics.html", + "compile-less": "tsx ./scripts/compileLess.ts", "core:cover": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=4096\" jest --coverage --coverageThreshold='{\"global\":{\"statements\":100,\"branches\":100,\"functions\":100,\"lines\":100}}' --collectCoverageFrom='[\"packages/**/src/**/*.{js,ts}\", \"!packages/superset-ui-demo/**/*\"]' packages", "cover": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max-old-space-size=4096\" jest --coverage", "dev": "webpack --mode=development --color --watch", @@ -319,6 +320,7 @@ "exports-loader": "^5.0.0", "fetch-mock": "^7.7.3", "fork-ts-checker-webpack-plugin": "^9.0.2", + "handlebars": "^4.7.8", "history": "^5.3.0", "ignore-styles": "^5.0.1", "imports-loader": "^5.0.0", @@ -352,6 +354,7 @@ "style-loader": "^4.0.0", "thread-loader": "^4.0.4", "ts-loader": "^9.5.1", + "tsx": "^4.19.2", "typescript": "^4.8.4", "vm-browserify": "^1.1.2", "webpack": "^5.94.0", diff --git a/superset-frontend/packages/superset-ui-core/src/style/index.tsx b/superset-frontend/packages/superset-ui-core/src/style/index.tsx index f88d4a87f41..1122d74fbd4 100644 --- a/superset-frontend/packages/superset-ui-core/src/style/index.tsx +++ b/superset-frontend/packages/superset-ui-core/src/style/index.tsx @@ -52,13 +52,17 @@ export const emotionCache = createCache({ export const styled = emotionStyled; - import tinycolor from 'tinycolor2'; -function adjustColor(color, percentage, target = 'white') { +function adjustColor( + color: string, + percentage: number, + target: string = 'white', +): string { const hex = tinycolor.mix(color, target, percentage).toHexString(); return hex; } + const generateColorVariations = (color: string) => { return { base: color, @@ -73,26 +77,37 @@ const generateColorVariations = (color: string) => { dark4: adjustColor(color, 60, 'black'), dark5: adjustColor(color, 75, 'black'), }; -} -const makeThemeDark = (theme) => { +}; + +const makeThemeDark = (theme: typeof defaultTheme): typeof defaultTheme => { const darkTheme = { ...theme }; darkTheme.colors = { ...theme.colors }; - for (const [key, colorSet] of Object.entries(darkTheme.colors)) { - darkTheme.colors[key].dark1 = theme.colors[key].light1; - darkTheme.colors[key].dark2 = theme.colors[key].light2; - darkTheme.colors[key].dark3 = theme.colors[key].light3; - darkTheme.colors[key].dark4 = theme.colors[key].light4; - darkTheme.colors[key].dark5 = theme.colors[key].light5; - darkTheme.colors[key].light1 = theme.colors[key].dark1; - darkTheme.colors[key].light2 = theme.colors[key].dark2; - darkTheme.colors[key].light3 = theme.colors[key].dark3; - darkTheme.colors[key].light4 = theme.colors[key].dark4; - darkTheme.colors[key].light5 = theme.colors[key].dark5; + + for (const [key] of Object.entries(darkTheme.colors)) { + if (key !== 'text') { + darkTheme.colors[key].dark1 = theme.colors[key].light1; + darkTheme.colors[key].dark2 = theme.colors[key].light2; + darkTheme.colors[key].dark3 = theme.colors[key].light3; + darkTheme.colors[key].dark4 = theme.colors[key].light4; + darkTheme.colors[key].dark5 = theme.colors[key].light5; + darkTheme.colors[key].light1 = theme.colors[key].dark1; + darkTheme.colors[key].light2 = theme.colors[key].dark2; + darkTheme.colors[key].light3 = theme.colors[key].dark3; + darkTheme.colors[key].light4 = theme.colors[key].dark4; + darkTheme.colors[key].light5 = theme.colors[key].dark5; + } } - darkTheme.colors.label = "#D3D3D3"; - darkTheme.colors.help = "#D3D3D3"; + + // Update the text-specific colors + darkTheme.colors.text = { + ...darkTheme.colors.text, + label: '#D3D3D3', + help: '#D3D3D3', + }; + return darkTheme; -} +}; + const baseColors = { primary: '#20A7C9', secondary: '#444E7C', @@ -109,11 +124,11 @@ const generateColors = (baseColors: Record) => { colors[key] = generateColorVariations(value); } return colors; -} +}; const colors = generateColors(baseColors); console.log(colors); -const defaultTheme = { +let defaultTheme = { borderRadius: 4, body: { background: '#000', @@ -173,12 +188,11 @@ const defaultTheme = { gridUnit: 4, brandIconMaxWidth: 37, }; -console.log(defaultTheme); -export type SupersetTheme = typeof makeThemeDark(defaultTheme); +export type SupersetTheme = ReturnType; export interface SupersetThemeProps { theme: SupersetTheme; } - +defaultTheme = makeThemeDark(defaultTheme); export const supersetTheme = defaultTheme; diff --git a/superset-frontend/scripts/compileLess.ts b/superset-frontend/scripts/compileLess.ts new file mode 100644 index 00000000000..1c989fc2bfa --- /dev/null +++ b/superset-frontend/scripts/compileLess.ts @@ -0,0 +1,68 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import * as fs from 'fs'; +import * as path from 'path'; +import Handlebars from 'handlebars'; +import { supersetTheme } from '../packages/superset-ui-core/src/style/index'; // Adjust the path as needed + +Handlebars.escapeExpression = (value: string) => value; + +// Function to apply a template and generate the output +function applyTemplate(filePath: string): void { + try { + // Read the .less.hbs template + const templateContent = fs.readFileSync(filePath, 'utf-8'); + + // Compile the template + const template = Handlebars.compile(templateContent, { noEscape: true }); + + // Generate the final .less file + const result = template({ theme: supersetTheme }); + + // Write the output to a .less file + const outputFilePath = filePath.replace('.hbs', ''); // Remove .hbs for output + fs.writeFileSync(outputFilePath, result, 'utf-8'); + + console.log(`Themed .less file generated: ${outputFilePath}`); + } catch (error) { + console.error(`Failed to process template: ${filePath}`, error); + } +} + +function findHbsFiles(dir: string): string[] { + const files = fs.readdirSync(dir); + return files + .map((file: string) => { + const fullPath = path.join(dir, file); + if (fs.statSync(fullPath).isDirectory()) { + return findHbsFiles(fullPath); + } else if (fullPath.endsWith('.less.hbs')) { + return fullPath; + } + return null; + }) + .flat() + .filter((filePath: string | null): filePath is string => filePath !== null); +} + +// Find all `.less.hbs` files in the directory +const hbsFiles = findHbsFiles('src/assets/stylesheets/'); + +// Apply templates to all `.less.hbs` files found +hbsFiles.forEach((filePath: string) => applyTemplate(filePath)); diff --git a/superset-frontend/src/assets/stylesheets/antd/index.less b/superset-frontend/src/assets/stylesheets/antd/index.less index cf51b165eb9..5658cec3131 100644 --- a/superset-frontend/src/assets/stylesheets/antd/index.less +++ b/superset-frontend/src/assets/stylesheets/antd/index.less @@ -10,11 +10,11 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. + * distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS + * OF ANY KIND, either express or implied. See the License + * for the specific language governing permissions and + * limitations under the License. */ @import '~antd/lib/style/themes/index'; @@ -28,12 +28,12 @@ /* Theme variables here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less */ -@primary-color: #20a7c9; -@info-color: #66bcfe; -@success-color: #59c189; -@processing-color: #66bcfe; -@error-color: #e04355; -@highlight-color: #e04355; +@primary-color: #20A7C9; +@info-color: #66BCFE; +@success-color: #5AC189; +@processing-color: #66BCFE; +@error-color: #E04355; +@highlight-color: #E04355; @normal-color: #d9d9d9; @white: #fff; @black: #000; diff --git a/superset-frontend/src/assets/stylesheets/antd/index.less.hbs b/superset-frontend/src/assets/stylesheets/antd/index.less.hbs new file mode 100644 index 00000000000..952d047a5ad --- /dev/null +++ b/superset-frontend/src/assets/stylesheets/antd/index.less.hbs @@ -0,0 +1,39 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS + * OF ANY KIND, either express or implied. See the License + * for the specific language governing permissions and + * limitations under the License. + */ + +@import '~antd/lib/style/themes/index'; +@import '~antd/lib/style/mixins/index'; +@import '~antd/lib/style/core/base'; + +@import '~antd/lib/style/core/iconfont'; +@import '~antd/lib/style/core/motion'; +@import '~antd/lib/style/components.less'; + +/* + Theme variables here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less +*/ +@primary-color: {{theme.colors.primary.base}}; +@info-color: {{theme.colors.info.base}}; +@success-color: {{theme.colors.success.base}}; +@processing-color: {{theme.colors.info.base}}; +@error-color: {{theme.colors.error.base}}; +@highlight-color: {{theme.colors.error.base}}; +@normal-color: {{theme.colors.grayscale.light3}}; +@white: {{theme.body.color}}; +@black: {{theme.body.background}}; diff --git a/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less b/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less index 390f92f58f3..c9ece15bb66 100644 --- a/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less +++ b/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less @@ -29,6 +29,13 @@ outline: 0; } + &-inverse { + .badge { + background-color: @lightest; + color: @brand-primary; + } + } + .caret { display: inline-block; padding: 0 5px 18px 5px; @@ -41,6 +48,10 @@ .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, +.navbar-inverse .navbar-nav > .active > a:focus { + background: transparent; +} + .navbar-nav > li > a { padding-top: 18px; } @@ -60,6 +71,7 @@ &:active, &:focus { border-color: transparent; + background-color: transparent; box-shadow: none; } } @@ -218,6 +230,7 @@ table, .dropdown-menu { & > li > a:hover, & > li > a:focus { + background-image: none; text-decoration: none; } } @@ -265,6 +278,18 @@ table, font-weight: @font-weight-normal; font-size: @font-size-s; } +.label-default:hover { + background-color: darken(@label-default-bg, 5%); +} +.label-warning:hover { + background-color: darken(@label-warning-bg, 5%); +} +.label-danger:hover { + background-color: darken(@label-danger-bg, 5%); +} +.label-primary:hover { + background-color: darken(@label-primary-bg, 5%); +} label { font-weight: @font-weight-normal; @@ -298,6 +323,7 @@ label { &-default { .panel-heading { padding: 15px 15px 0 15px; + background-color: transparent; } .panel-title { @@ -324,6 +350,7 @@ label { &-primary { .panel-heading { padding: 15px 15px 0 15px; + background-color: transparent; } .panel-title { @@ -378,6 +405,41 @@ label { padding-bottom: 5px; } +a.list-group-item { + &-success { + &.active { + background-color: @state-success-bg; + } + + &.active:hover, + &.active:focus { + background-color: darken(@state-success-bg, 5%); + } + } + + &-warning { + &.active { + background-color: @state-warning-bg; + } + + &.active:hover, + &.active:focus { + background-color: darken(@state-warning-bg, 5%); + } + } + + &-danger { + &.active { + background-color: @state-danger-bg; + } + + &.active:hover, + &.active:focus { + background-color: darken(@state-danger-bg, 5%); + } + } +} + .modal { .close { color: @text-color; @@ -398,6 +460,7 @@ label { .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { + background-color: @lightest; font-weight: @font-weight-bold; border-top: 3px solid @brand-primary; } diff --git a/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less.hbs b/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less.hbs new file mode 100644 index 00000000000..c9ece15bb66 --- /dev/null +++ b/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less.hbs @@ -0,0 +1,509 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +// Forked Cosmo 3.3.7 +// Bootswatch +// ----------------------------------------------------- + +// Navbar ===================================================================== + +.navbar { + border: none; + + li > a:focus { + outline: 0; + } + + &-inverse { + .badge { + background-color: @lightest; + color: @brand-primary; + } + } + + .caret { + display: inline-block; + padding: 0 5px 18px 5px; + } +} + +.navbar-inverse { + border: none; +} + +.navbar-inverse .navbar-nav > .active > a, +.navbar-inverse .navbar-nav > .active > a:hover, +.navbar-inverse .navbar-nav > .active > a:focus { + background: transparent; +} + +.navbar-nav > li > a { + padding-top: 18px; +} + +// Buttons ==================================================================== + +.btn:focus, +.btn:active:focus { + outline: none; +} + +.nav-tabs { + .dropdown-toggle.btn, + .btn-group.open .dropdown-toggle.btn { + &, + &:hover, + &:active, + &:focus { + border-color: transparent; + background-color: transparent; + box-shadow: none; + } + } +} + +.caret { + border: none; + color: @gray; + + &:hover { + color: @gray-darker; + } + + &:before { + font-family: 'FontAwesome'; + font-size: @font-size-xs; + content: '\f078'; + } +} + +// Typography ================================================================= + +body { + -webkit-font-smoothing: antialiased; +} + +.text-primary, +.text-primary:hover { + color: @brand-primary; +} + +.text-success, +.text-success:hover { + color: @success; +} + +.text-danger, +.text-danger:hover { + color: @brand-danger; +} + +.text-warning, +.text-warning:hover { + color: @brand-warning; +} + +.text-info, +.text-info:hover { + color: @brand-info; +} + +// Tables ===================================================================== + +table, +.table { + .dropdown-menu a { + text-decoration: none; + } + + .success, + .warning, + .danger, + .info { + color: @lightest; + + a { + color: @lightest; + } + + .btn-default { + color: @gray; + } + } +} + +// Forms ====================================================================== + +.form-control { + box-shadow: none; +} + +.has-warning { + .help-block, + .control-label, + .radio, + .checkbox, + .radio-inline, + .checkbox-inline, + &.radio label, + &.checkbox label, + &.radio-inline label, + &.checkbox-inline label, + .form-control-feedback { + color: @brand-warning; + } + + .form-control, + .form-control:focus, + .input-group-addon { + border: 1px solid @brand-warning; + } +} + +.has-error { + .help-block, + .control-label, + .radio, + .checkbox, + .radio-inline, + .checkbox-inline, + &.radio label, + &.checkbox label, + &.radio-inline label, + &.checkbox-inline label, + .form-control-feedback { + color: @brand-danger; + } + + .form-control, + .form-control:focus, + .input-group-addon { + border: 1px solid @brand-danger; + } +} + +.has-success { + .help-block, + .control-label, + .radio, + .checkbox, + .radio-inline, + .checkbox-inline, + &.radio label, + &.checkbox label, + &.radio-inline label, + &.checkbox-inline label, + .form-control-feedback { + color: @brand-success; + } + + .form-control, + .form-control:focus, + .input-group-addon { + border: 1px solid @brand-success; + } +} + +// Navs ======================================================================= + +.nav-pills { + & > li > a { + border-radius: @border-radius-normal; + } +} + +.dropdown-menu { + & > li > a:hover, + & > li > a:focus { + background-image: none; + text-decoration: none; + } +} + +// Indicators ================================================================= + +.close { + text-decoration: none; + text-shadow: none; + opacity: 0.4; + + &:hover, + &:focus { + opacity: 1; + } +} + +.alert { + border: none; +} + +.alert-link { + text-decoration: underline; +} + +.alert-info .alert-link { + color: @alert-info-text; +} + +.alert-danger .alert-link { + color: @alert-danger-text; +} + +.alert-warning .alert-link { + color: @alert-warning-text; +} + +.alert-success .alert-link { + color: @alert-success-text; +} + +.label { + border-radius: 21px; + padding: 0.35em 0.8em 0.35em; + font-weight: @font-weight-normal; + font-size: @font-size-s; +} +.label-default:hover { + background-color: darken(@label-default-bg, 5%); +} +.label-warning:hover { + background-color: darken(@label-warning-bg, 5%); +} +.label-danger:hover { + background-color: darken(@label-danger-bg, 5%); +} +.label-primary:hover { + background-color: darken(@label-primary-bg, 5%); +} + +label { + font-weight: @font-weight-normal; + font-size: @font-size-s; +} + +// Progress bars ============================================================== + +.progress { + height: 14px; + .box-shadow(none); + + .progress-bar { + font-size: @font-size-s; + line-height: @line-height-tight; + padding-top: 2px; + } +} + +// Containers ================================================================= + +.panel { + border: none; + + &-heading, + &-footer { + border-top-right-radius: 0; + border-top-left-radius: 0; + } + + &-default { + .panel-heading { + padding: 15px 15px 0 15px; + background-color: transparent; + } + + .panel-title { + color: @text-color; + padding-bottom: 5px; + border-bottom: 1px solid @gray-light; + + h1, + h2, + h3, + h4, + h5, + h6 { + margin: 10px 0 0 0; + font-weight: @font-weight-bold; + } + } + + .close { + color: @text-color; + } + } + + &-primary { + .panel-heading { + padding: 15px 15px 0 15px; + background-color: transparent; + } + + .panel-title { + color: @text-color; + padding-bottom: 5px; + border-bottom: 1px solid @gray-light; + + h1, + h2, + h3, + h4, + h5, + h6 { + margin: 10px 0 0 0; + font-weight: @font-weight-bold; + } + } + + .close { + color: @text-color; + } + } + + .accordion-toggle { + display: flex; + align-items: center; + text-decoration: none; + + &:hover { + text-decoration: none; + } + + .caret { + display: flex; + width: auto; + height: auto; + margin-left: 5px; + + &:hover { + color: @gray; + } + } + } +} + +.panel-title-large { + font-size: 24px; +} + +.list-group-item { + padding-top: 5px; + padding-bottom: 5px; +} + +a.list-group-item { + &-success { + &.active { + background-color: @state-success-bg; + } + + &.active:hover, + &.active:focus { + background-color: darken(@state-success-bg, 5%); + } + } + + &-warning { + &.active { + background-color: @state-warning-bg; + } + + &.active:hover, + &.active:focus { + background-color: darken(@state-warning-bg, 5%); + } + } + + &-danger { + &.active { + background-color: @state-danger-bg; + } + + &.active:hover, + &.active:focus { + background-color: darken(@state-danger-bg, 5%); + } + } +} + +.modal { + .close { + color: @text-color; + } +} + +.popover { + color: @text-color; +} + +// Tabs ============================================================== + +.nav-tabs > li > a { + border-top: 3px solid transparent; + color: @text-color; +} + +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + background-color: @lightest; + font-weight: @font-weight-bold; + border-top: 3px solid @brand-primary; +} + +// Tables ============================================================== + +.table { + .info { + color: @state-info-text; + } + + .danger { + color: @state-danger-text; + } + + .warning { + color: @state-warning-text; + } + + .success { + color: @state-success-text; + } +} + +// Utils ============================================================== +hr { + margin: 10px 0; +} + +// generate space-n classes for vertical spacing +.space-loop(@counter) when (@counter > 0) { + .space-loop((@counter - 1)); // next iteration + .space-@{counter} { + margin-bottom: (10px * @counter); // code for each iteration + } +} +.space-loop(6); + +a { + cursor: pointer; +} + +.control-label { + color: @gray; + font-size: @font-size-s; +} diff --git a/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less b/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less index 4a09151d028..fccb6671fa8 100644 --- a/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less +++ b/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less @@ -41,6 +41,8 @@ // // ## Settings for some of the most global styles. +// ** Background color for ``. +@body-bg: @gray-bg; // superset-var // ** Global text color on ``. @text-color: @gray-dark; @@ -148,7 +150,9 @@ @btn-primary-bg: @brand-primary; @btn-primary-border: @brand-primary; +@btn-default-color: @bs-gray; @btn-default-bg: @lightest; +@btn-default-border: @gray-light; @btn-success-color: @btn-primary-color; @btn-success-bg: @brand-success; @@ -808,7 +812,7 @@ // // ## -@code-color: darken(@info, @colorstop-one); +@code-color: darken(@info, 10%); @code-bg: @gray-bg; // superset-var @kbd-color: @lightest; // superset-var diff --git a/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less.hbs b/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less.hbs new file mode 100644 index 00000000000..fccb6671fa8 --- /dev/null +++ b/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less.hbs @@ -0,0 +1,851 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +// Forked Cosmo 3.3.7 +// Variables +// -------------------------------------------------- + +// == Colors +// +// ## Gray and brand colors for use across Bootstrap. + +@gray-base: @darkest; // superset-var +@gray-darker: lighten(@gray-base, 13.5%); +@gray-dark: lighten(@gray-base, 20%); +@bs-gray: lighten(@gray-base, 33.5%); +@bs-gray-light: lighten(@gray-base, 60%); +@gray-lighter: lighten(@gray-base, 95%); + +@brand-primary: @primary-color; // superset-var +@brand-success: @success; // superset-var +@brand-info: @info; // superset-var +@brand-warning: @warning; // superset-var +@brand-danger: @danger; // superset-var + +// == Scaffolding +// +// ## Settings for some of the most global styles. + +// ** Background color for ``. +@body-bg: @gray-bg; // superset-var +// ** Global text color on ``. +@text-color: @gray-dark; + +// ** Global textual link color. +@link-color: @link; +// ** Link hover color set via `darken()` function. +@link-hover-color: @link-hover; +// ** Link hover decoration. +@link-hover-decoration: underline; + +// == Typography +// +// ## Font, line-height, and color for body text, headings, and more. + +@font-size-large: ceil((@font-size-base * 1.25)); // ~18px +@font-size-small: ceil((@font-size-base * 0.85)); // ~12px + +@font-size-h1: floor((@font-size-base * 2.6)); // ~36px +@font-size-h2: floor((@font-size-base * 2.15)); // ~30px +@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px +@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px +@font-size-h5: @font-size-base; +@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px + +// ** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. +@line-height-computed: floor((@font-size-base * @line-height-base)); + +// ** By default, this inherits from the ``. +@headings-font-family: @font-family-base; +@headings-font-weight: @font-weight-normal; // superset-var +@headings-line-height: @line-height-tight; +@headings-color: inherit; + +// == Iconography +// +// ## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower. + +// ** Load fonts from this directory. +@icon-font-path: '../fonts/'; +// ** File name for all font files. +@icon-font-name: 'glyphicons-halflings-regular'; +// ** Element ID within SVG icon file. +@icon-font-svg-id: 'glyphicons_halflingsregular'; + +// == Components +// +// ## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). + +@padding-base-vertical: 6.5px; +@padding-base-horizontal: 18px; + +@padding-large-vertical: 18px; +@padding-large-horizontal: 30px; + +@padding-small-vertical: 5px; +@padding-small-horizontal: 10px; + +@padding-xs-vertical: 1px; +@padding-xs-horizontal: 5px; + +@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome +@line-height-small: 1.5; + +@border-radius-base: @border-radius-normal; +@border-radius-large: 4px; +@border-radius-small: 4px; + +// ** Global color for active items (e.g., navs or dropdowns). +@component-active-color: @lightest; // superset-var +// ** Global background color for active items (e.g., navs or dropdowns). +@component-active-bg: @brand-primary; + +// ** Width of the `border` for generating carets that indicate dropdowns. +@caret-width-base: 4px; +// ** Carets increase slightly in size for larger components. +@caret-width-large: 5px; + +// == Tables +// +// ## Customizes the `.table` component with basic values, each used across all table variations. + +// ** Padding for ``s and ``s. +@table-cell-padding: 8px; +// ** Padding for cells in `.table-condensed`. +@table-condensed-cell-padding: 5px; + +// ** Default background color used for all tables. +@table-bg: transparent; +// ** Background color used for `.table-striped`. +@table-bg-accent: fade(@gray-bg, @opacity-medium-light); // superset-var +// ** Background color used for `.table-hover`. +@table-bg-hover: @gray-bg; // superset-var +@table-bg-active: @table-bg-hover; + +// ** Border color for table and cell borders. +@table-border-color: @gray-light; // superset-var + +// == Buttons +// +// ## For each of Bootstrap's buttons, define text, background and border color. + +@btn-font-weight: normal; + +@btn-primary-color: @lightest; +@btn-primary-bg: @brand-primary; +@btn-primary-border: @brand-primary; + +@btn-default-color: @bs-gray; +@btn-default-bg: @lightest; +@btn-default-border: @gray-light; + +@btn-success-color: @btn-primary-color; +@btn-success-bg: @brand-success; +@btn-success-border: @btn-success-bg; + +@btn-info-color: @btn-primary-color; +@btn-info-bg: @brand-info; +@btn-info-border: @btn-info-bg; + +@btn-warning-color: @btn-primary-color; +@btn-warning-bg: @brand-warning; +@btn-warning-border: @btn-warning-bg; + +@btn-danger-color: @btn-primary-color; +@btn-danger-bg: @brand-danger; +@btn-danger-border: @btn-danger-bg; + +@btn-link-disabled-color: @bs-gray-light; + +// Allows for customizing button radius independently from global border radius +@btn-border-radius-base: @border-radius-base; +@btn-border-radius-large: @border-radius-large; +@btn-border-radius-small: @border-radius-small; + +// == Forms +// +// ## + +// ** `` background color +@input-bg: @lightest; // superset-var +// ** `` background color +@input-bg-disabled: @gray-lighter; + +// ** Text color for ``s +@input-color: @text-color; +// ** `` border color +@input-border: @gray-light; // superset-var + +// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4 +// ** Default `.form-control` border radius +// This has no effect on ``s in CSS. +@input-border-radius: @border-radius-base; +// ** Large `.form-control` border radius +@input-border-radius-large: @border-radius-large; +// ** Small `.form-control` border radius +@input-border-radius-small: @border-radius-small; + +// ** Border color for inputs on focus +@input-border-focus: @indicator-color; // superset-var + +// ** Placeholder text color +@input-color-placeholder: @bs-gray-light; + +// ** Default `.form-control` height +@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); +// ** Large `.form-control` height +@input-height-large: ( + ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + + 2 +); +// ** Small `.form-control` height +@input-height-small: ( + floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + + 2 +); + +// ** `.form-group` margin +@form-group-margin-bottom: 16px; + +@legend-color: @text-color; +@legend-border-color: @gray-bg; + +// ** Background color for textual input addons +@input-group-addon-bg: @gray-lighter; +// ** Border color for textual input addons +@input-group-addon-border-color: @input-border; + +// ** Disabled cursor for form controls and buttons. +@cursor-disabled: not-allowed; + +// == Dropdowns +// +// ## Dropdown menu container and contents. + +// ** Background for the dropdown menu. +@dropdown-bg: @lightest; // superset-var +// ** Dropdown menu `border-color`. +@dropdown-border: fade(@darkest, @opacity-light); // superset-var +// ** Dropdown menu `border-color` **for IE8**. +@dropdown-fallback-border: @gray-light; // superset-var +// ** Divider color for between dropdown items. +@dropdown-divider-bg: @gray-bg; // superset-var + +// ** Dropdown link text color. +@dropdown-link-color: @gray-dark; +// ** Hover color for dropdown links. +@dropdown-link-hover-color: @lightest; // superset-var +// ** Hover background for dropdown links. +@dropdown-link-hover-bg: @component-active-bg; + +// ** Active dropdown menu item text color. +@dropdown-link-active-color: @lightest; // superset-var +// ** Active dropdown menu item background color. +@dropdown-link-active-bg: @component-active-bg; + +// ** Disabled dropdown menu item background color. +@dropdown-link-disabled-color: @bs-gray-light; + +// ** Text color for headers within dropdown menus. +@dropdown-header-color: @bs-gray-light; + +// ** Deprecated `@dropdown-caret-color` as of v3.1.0 +@dropdown-caret-color: @darkest; // superset-var + +//-- Z-index master list +// +// Warning: Avoid customizing these values. They're used for a bird's eye view +// of components dependent on the z-axis and are designed to all work together. +// +// Note: These variables are not generated into the Customizer. + +@zindex-navbar: 1000; +@zindex-dropdown: 1000; +@zindex-popover: 1060; +@zindex-tooltip: 1070; +@zindex-navbar-fixed: 1030; +@zindex-modal-background: 1040; +@zindex-modal: 1050; + +// == Media queries breakpoints +// +// ## Define the breakpoints at which your layout will change, adapting to different screen sizes. + +// Extra small screen / phone +// ** Deprecated `@screen-xs` as of v3.0.1 +@screen-xs: 480px; +// ** Deprecated `@screen-xs-min` as of v3.2.0 +@screen-xs-min: @screen-xs; +// ** Deprecated `@screen-phone` as of v3.0.1 +@screen-phone: @screen-xs-min; + +// Small screen / tablet +// ** Deprecated `@screen-sm` as of v3.0.1 +@screen-sm: 768px; +@screen-sm-min: @screen-sm; +// ** Deprecated `@screen-tablet` as of v3.0.1 +@screen-tablet: @screen-sm-min; + +// Medium screen / desktop +// ** Deprecated `@screen-md` as of v3.0.1 +@screen-md: 992px; +@screen-md-min: @screen-md; +// ** Deprecated `@screen-desktop` as of v3.0.1 +@screen-desktop: @screen-md-min; + +// Large screen / wide desktop +// ** Deprecated `@screen-lg` as of v3.0.1 +@screen-lg: 1200px; +@screen-lg-min: @screen-lg; +// ** Deprecated `@screen-lg-desktop` as of v3.0.1 +@screen-lg-desktop: @screen-lg-min; + +// So media queries don't overlap when required, provide a maximum +@screen-xs-max: (@screen-sm-min - 1); +@screen-sm-max: (@screen-md-min - 1); +@screen-md-max: (@screen-lg-min - 1); + +// == Grid system +// +// ## Define your custom responsive grid. + +// ** Number of columns in the grid. +@grid-columns: 12; +// ** Padding between columns. Gets divided in half for the left and right. +@grid-gutter-width: 20px; +// Navbar collapse +// ** Point at which the navbar becomes uncollapsed. +@grid-float-breakpoint: @screen-sm-min; +// ** Point at which the navbar begins collapsing. +@grid-float-breakpoint-max: (@grid-float-breakpoint - 1); + +// == Container sizes +// +// ## Define the maximum width of `.container` for different screen sizes. + +// Small screen / tablet +@container-tablet: (720px + @grid-gutter-width); +// ** For `@screen-sm-min` and up. +@container-sm: @container-tablet; + +// Medium screen / desktop +@container-desktop: (940px + @grid-gutter-width); +// ** For `@screen-md-min` and up. +@container-md: @container-desktop; + +// Large screen / wide desktop +@container-large-desktop: (1140px + @grid-gutter-width); +// ** For `@screen-lg-min` and up. +@container-lg: @container-large-desktop; + +// == Navbar +// +// ## + +// Basics of a navbar +@navbar-height: 50px; +@navbar-margin-bottom: @line-height-computed; +@navbar-border-radius: @border-radius-base; +@navbar-padding-horizontal: floor((@grid-gutter-width / 2)); +@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); +@navbar-collapse-max-height: 340px; + +@navbar-default-color: @lightest; // superset-var +@navbar-default-bg: @gray-darker; +@navbar-default-border: darken(@navbar-default-bg, 6.5%); + +// Navbar links +@navbar-default-link-color: @lightest; // superset-var +@navbar-default-link-hover-color: @lightest; // superset-var +@navbar-default-link-hover-bg: darken(@navbar-default-bg, 10%); +@navbar-default-link-active-color: @navbar-default-link-hover-color; +@navbar-default-link-active-bg: @navbar-default-link-hover-bg; +@navbar-default-link-disabled-color: @gray-light; // superset-var +@navbar-default-link-disabled-bg: transparent; + +// Navbar brand label +@navbar-default-brand-color: @navbar-default-link-color; +@navbar-default-brand-hover-color: @lightest; // superset-var +@navbar-default-brand-hover-bg: none; + +// Navbar toggle +@navbar-default-toggle-hover-bg: @navbar-default-link-hover-bg; +@navbar-default-toggle-icon-bar-bg: @lightest; // superset-var +@navbar-default-toggle-border-color: transparent; + +// === Inverted navbar +// Reset inverted navbar basics +@navbar-inverse-color: @gray-dark; +@navbar-inverse-bg: @lightest; // superset-var +@navbar-inverse-border: transparent; + +// Inverted navbar links +@navbar-inverse-link-color: @gray-dark; +@navbar-inverse-link-hover-color: @gray-dark; +@navbar-inverse-link-hover-bg: darken(@navbar-inverse-bg, 10%); +@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; +@navbar-inverse-link-active-bg: @navbar-inverse-link-hover-bg; +@navbar-inverse-link-disabled-color: @gray-lighter; +@navbar-inverse-link-disabled-bg: transparent; + +// Inverted navbar brand label +@navbar-inverse-brand-color: @navbar-inverse-link-color; +@navbar-inverse-brand-hover-color: @gray-darker; +@navbar-inverse-brand-hover-bg: none; + +// Inverted navbar toggle +@navbar-inverse-toggle-hover-bg: @navbar-inverse-link-hover-bg; +@navbar-inverse-toggle-icon-bar-bg: @lightest; // superset-var +@navbar-inverse-toggle-border-color: transparent; + +// == Navs +// +// ## + +// === Shared nav styles +@nav-link-padding: 10px 15px; +@nav-link-hover-bg: @gray-lighter; + +@nav-disabled-link-color: @bs-gray-light; +@nav-disabled-link-hover-color: @bs-gray-light; + +// == Tabs +@nav-tabs-border-color: @gray-light; // superset-var + +@nav-tabs-link-hover-border-color: @gray-lighter; + +@nav-tabs-active-link-hover-bg: @body-bg; +@nav-tabs-active-link-hover-color: @bs-gray; +@nav-tabs-active-link-hover-border-color: @gray-light; // superset-var + +@nav-tabs-justified-link-border-color: @gray-light; // superset-var +@nav-tabs-justified-active-link-border-color: @body-bg; + +// == Pills +@nav-pills-border-radius: @border-radius-base; +@nav-pills-active-link-hover-bg: @component-active-bg; +@nav-pills-active-link-hover-color: @component-active-color; + +// == Pagination +// +// ## + +@pagination-color: @link-color; +@pagination-bg: @lightest; // superset-var +@pagination-border: @gray-light; // superset-var + +@pagination-hover-color: @link-hover-color; +@pagination-hover-bg: @gray-lighter; +@pagination-hover-border: @gray-light; // superset-var + +@pagination-active-color: @bs-gray-light; +@pagination-active-bg: @gray-bg; // superset-var +@pagination-active-border: @gray-light; // superset-var + +@pagination-disabled-color: @bs-gray-light; +@pagination-disabled-bg: @lightest; // superset-var +@pagination-disabled-border: @gray-light; // superset-var + +// == Pager +// +// ## + +@pager-bg: @pagination-bg; +@pager-border: @pagination-border; +@pager-border-radius: @border-radius-base; + +@pager-hover-bg: @pagination-hover-bg; + +@pager-active-bg: @pagination-active-bg; +@pager-active-color: @pagination-active-color; + +@pager-disabled-color: @bs-gray-light; + +// == Jumbotron +// +// ## + +@jumbotron-padding: 30px; +@jumbotron-color: inherit; +@jumbotron-bg: @gray-lighter; +@jumbotron-heading-color: inherit; +@jumbotron-font-size: ceil((@font-size-base * 1.5)); +@jumbotron-heading-font-size: ceil((@font-size-base * 4.5)); + +// == Form states and alerts +// +// ## Define colors for form feedback states and, by default, alerts. + +@state-success-text: @success-dark2; +@state-success-bg: @success-light2; +@state-success-border: @success-light2; + +@state-info-text: @info-dark2; +@state-info-bg: @info-light2; +@state-info-border: @info-light2; + +@state-warning-text: @warning-dark2; +@state-warning-bg: @warning-light2; +@state-warning-border: @warning-light2; + +@state-danger-text: @danger-dark2; +@state-danger-bg: @danger-light2; +@state-danger-border: @danger-light2; + +// == Tooltips +// +// ## + +// ** Tooltip max width +@tooltip-max-width: 200px; +// ** Tooltip text color +@tooltip-color: @lightest; // superset-var +// ** Tooltip background color +@tooltip-bg: @darkest; // superset-var +@tooltip-opacity: 0.9; + +// ** Tooltip arrow width +@tooltip-arrow-width: 5px; +// ** Tooltip arrow color +@tooltip-arrow-color: @tooltip-bg; + +// == Popovers +// +// ## + +// ** Popover body background color +@popover-bg: @lightest; // superset-var +// ** Popover maximum width +@popover-max-width: 276px; +// ** Popover border color +@popover-border-color: fade(@darkest, @opacity-light); // superset-var +// ** Popover fallback border color +@popover-fallback-border-color: @gray-light; // superset-var + +// ** Popover title background color +@popover-title-bg: darken(@popover-bg, 3%); + +// ** Popover arrow width +@popover-arrow-width: 10px; +// ** Popover arrow color +@popover-arrow-color: @popover-bg; + +// ** Popover outer arrow width +@popover-arrow-outer-width: (@popover-arrow-width + 1); +// ** Popover outer arrow color +@popover-arrow-outer-color: fadein(@popover-border-color, 5%); +// ** Popover outer arrow fallback color +@popover-arrow-outer-fallback-color: darken( + @popover-fallback-border-color, + 20% +); + +// == Labels +// +// ## + +// ** Default label background color +@label-default-bg: @bs-gray-light; +// ** Primary label background color +@label-primary-bg: @brand-primary; +// ** Success label background color +@label-success-bg: @brand-success; +// ** Info label background color +@label-info-bg: @brand-info; +// ** Warning label background color +@label-warning-bg: darken(@brand-warning, 6%); +// ** Danger label background color +@label-danger-bg: @brand-danger; + +// ** Default label text color +@label-color: @lightest; // superset-var +// ** Default text color of a linked label +@label-link-hover-color: @lightest; // superset-var + +// == Modals +// +// ## + +// ** Padding applied to the modal body +@modal-inner-padding: 20px; + +// ** Padding applied to the modal title +@modal-title-padding: 15px; +// ** Modal title line-height +@modal-title-line-height: @line-height-base; + +// ** Background color of modal content area +@modal-content-bg: @lightest; // superset-var +// ** Modal content border color +@modal-content-border-color: transparent; +// ** Modal content border color **for IE8** +@modal-content-fallback-border-color: @gray; // superset-var + +// ** Modal backdrop background color +@modal-backdrop-bg: @darkest; // superset-var +// ** Modal backdrop opacity +@modal-backdrop-opacity: 0.5; +// ** Modal header border color +@modal-header-border-color: @gray-bg; // superset-var +// ** Modal footer border color +@modal-footer-border-color: @modal-header-border-color; + +@modal-lg: 900px; +@modal-md: 600px; +@modal-sm: 300px; + +// == Alerts +// +// ## Define alert colors, border radius, and padding. + +@alert-padding: 15px; +@alert-border-radius: @border-radius-base; +@alert-link-font-weight: @font-weight-bold; + +@alert-success-bg: @state-success-bg; +@alert-success-text: @state-success-text; +@alert-success-border: @state-success-border; + +@alert-info-bg: @state-info-bg; +@alert-info-text: @state-info-text; +@alert-info-border: @state-info-border; + +@alert-warning-bg: @state-warning-bg; +@alert-warning-text: @state-warning-text; +@alert-warning-border: @state-warning-border; + +@alert-danger-bg: @state-danger-bg; +@alert-danger-text: @state-danger-text; +@alert-danger-border: @state-danger-border; + +// == Progress bars +// +// ## + +// ** Background color of the whole progress component +@progress-bg: @gray-light; // superset-var +// ** Progress bar text color +@progress-bar-color: @lightest; // superset-var +// ** Variable for setting rounded corners on progress bar. +@progress-border-radius: @border-radius-base; + +// ** Default progress bar color +@progress-bar-bg: @brand-primary; +// ** Success progress bar color +@progress-bar-success-bg: @brand-success; +// ** Warning progress bar color +@progress-bar-warning-bg: @brand-warning; +// ** Danger progress bar color +@progress-bar-danger-bg: @brand-danger; +// ** Info progress bar color +@progress-bar-info-bg: @brand-info; + +// == List group +// +// ## + +// ** Background color on `.list-group-item` +@list-group-bg: @lightest; // superset-var +// ** `.list-group-item` border color +@list-group-border: @gray-light; // superset-var +// ** List group border radius +@list-group-border-radius: @border-radius-base; + +// ** Background color of single list items on hover +@list-group-hover-bg: @gray-bg; // superset-var +// ** Text color of active list items +@list-group-active-color: @component-active-color; +// ** Background color of active list items +@list-group-active-bg: @component-active-bg; +// ** Border color of active list elements +@list-group-active-border: @list-group-border; +// ** Text color for content within active list items +@list-group-active-text-color: lighten(@list-group-active-bg, 40%); + +// ** Text color of disabled list items +@list-group-disabled-color: @bs-gray-light; +// ** Background color of disabled list items +@list-group-disabled-bg: @gray-lighter; +// ** Text color for content within disabled list items +@list-group-disabled-text-color: @list-group-disabled-color; + +@list-group-link-color: #555; +@list-group-link-hover-color: @list-group-link-color; +@list-group-link-heading-color: @almost-black; // superset-var + +// == Panels +// +// ## + +@panel-bg: @lightest; // superset-var +@panel-body-padding: 15px; +@panel-heading-padding: 10px 15px; +@panel-footer-padding: @panel-heading-padding; +@panel-border-radius: @border-radius-base; + +// ** Border color for elements within panels +@panel-inner-border: @gray-light; // superset-var +@panel-footer-bg: @gray-bg; // superset-var + +@panel-default-text: @gray-dark; +@panel-default-border: transparent; +@panel-default-heading-bg: @lightest; // superset-var + +@panel-primary-text: @lightest; // superset-var +@panel-primary-border: transparent; +@panel-primary-heading-bg: @brand-primary; + +@panel-success-text: @state-success-text; +@panel-success-border: transparent; +@panel-success-heading-bg: @state-success-bg; + +@panel-info-text: @state-info-text; +@panel-info-border: transparent; +@panel-info-heading-bg: @state-info-bg; + +@panel-warning-text: @state-warning-text; +@panel-warning-border: transparent; +@panel-warning-heading-bg: @state-warning-bg; + +@panel-danger-text: @state-danger-text; +@panel-danger-border: transparent; +@panel-danger-heading-bg: @state-danger-bg; + +// == Thumbnails +// +// ## + +// ** Padding around the thumbnail image +@thumbnail-padding: 4px; +// ** Thumbnail background color +@thumbnail-bg: @body-bg; +// ** Thumbnail border color +@thumbnail-border: @gray-light; // superset-var +// ** Thumbnail border radius +@thumbnail-border-radius: @border-radius-base; + +// ** Custom text color for thumbnail captions +@thumbnail-caption-color: @text-color; +// ** Padding around the thumbnail caption +@thumbnail-caption-padding: 9px; + +// == Wells +// +// ## + +@well-bg: @gray-bg; // superset-var +@well-border: darken(@well-bg, 7%); + +// == Badges +// +// ## + +@badge-color: @lightest; // superset-var +// ** Linked badge text color on hover +@badge-link-hover-color: @lightest; // superset-var +@badge-bg: @brand-primary; + +// ** Badge text color in active nav link +@badge-active-color: @link-color; +// ** Badge background color in active nav link +@badge-active-bg: @lightest; // superset-var + +@badge-font-weight: @font-weight-bold; +@badge-line-height: 1; +@badge-border-radius: 10px; + +// == Breadcrumbs +// +// ## + +@breadcrumb-padding-vertical: 8px; +@breadcrumb-padding-horizontal: 15px; +// ** Breadcrumb background color +@breadcrumb-bg: @gray-bg; // superset-var +// ** Breadcrumb text color +@breadcrumb-color: @gray-light; // superset-var +// ** Text color of current page in the breadcrumb +@breadcrumb-active-color: @bs-gray-light; +// ** Textual separator for between breadcrumb elements +@breadcrumb-separator: '/'; + +// == Carousel +// +// ## + +@carousel-text-shadow: 0 1px 2px fade(@darkest, @opacity-light); // superset-var + +@carousel-control-color: @lightest; // superset-var +@carousel-control-width: 15%; +@carousel-control-opacity: 0.5; +@carousel-control-font-size: 20px; + +@carousel-indicator-active-bg: @lightest; // superset-var +@carousel-indicator-border-color: @lightest; // superset-var + +@carousel-caption-color: @lightest; // superset-var + +// == Close +// +// ## + +@close-font-weight: @font-weight-bold; +@close-color: @lightest; // superset-var +@close-text-shadow: 0 1px 0 @lightest; // superset-var + +// == Code +// +// ## + +@code-color: darken(@info, 10%); +@code-bg: @gray-bg; // superset-var + +@kbd-color: @lightest; // superset-var +@kbd-bg: @almost-black; // superset-var + +@pre-bg: @gray-bg; // superset-var +@pre-color: @gray-dark; +@pre-border-color: @gray-light; // superset-var +@pre-scrollable-max-height: 340px; + +// == Type +// +// ## + +// ** Horizontal offset for forms and lists. +@component-offset-horizontal: 180px; +// ** Text muted color +@text-muted: @bs-gray-light; +// ** Abbreviations and acronyms border color +@abbr-border-color: @bs-gray-light; +// ** Headings small color +@headings-small-color: @bs-gray-light; +// ** Blockquote small color +@blockquote-small-color: @bs-gray-light; +// ** Blockquote font size +@blockquote-font-size: (@font-size-base * 1.25); +// ** Blockquote border color +@blockquote-border-color: @gray-lighter; +// ** Page header border color +@page-header-border-color: @gray-lighter; +// ** Width of horizontal description list titles +@dl-horizontal-offset: @component-offset-horizontal; +// ** Point at which .dl-horizontal becomes horizontal +@dl-horizontal-breakpoint: @grid-float-breakpoint; +// ** Horizontal line color. +@hr-border: @gray-lighter; diff --git a/superset-frontend/src/assets/stylesheets/less/fonts.less.hbs b/superset-frontend/src/assets/stylesheets/less/fonts.less.hbs new file mode 100644 index 00000000000..5fb41d832ae --- /dev/null +++ b/superset-frontend/src/assets/stylesheets/less/fonts.less.hbs @@ -0,0 +1,33 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +/*************************************************************************/ +/* USAGE NOTES : Add font all licenses to LICENSE.text */ +/*************************************************************************/ + +/******************************* Inter UI ********************************/ +@import '~@fontsource/inter/200.css'; +@import '~@fontsource/inter/400.css'; +@import '~@fontsource/inter/500.css'; +@import '~@fontsource/inter/600.css'; + +/******************************* Fira Code ********************************/ +@import '~@fontsource/fira-code/400.css'; +@import '~@fontsource/fira-code/500.css'; +@import '~@fontsource/fira-code/600.css'; diff --git a/superset-frontend/src/assets/stylesheets/less/index.less.hbs b/superset-frontend/src/assets/stylesheets/less/index.less.hbs new file mode 100644 index 00000000000..fc91c477dbe --- /dev/null +++ b/superset-frontend/src/assets/stylesheets/less/index.less.hbs @@ -0,0 +1,47 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +// Index .less, any imports here will be included in the final css build + +@import '~bootstrap/less/bootstrap.less'; +@import './fonts.less'; +@import './variables.less'; +@import './cosmo/bootswatch.less'; + +html, +body { + font-size: @font-size-base; + line-height: @line-height-base; +} + +body { + min-height: 100vh; + display: flex; + flex-direction: column; +} + +header { + flex: 0 1 auto; +} + +#app { + flex: 1 1 auto; + position: relative; + display: flex; + flex-direction: column; +} diff --git a/superset-frontend/src/assets/stylesheets/less/variables.less b/superset-frontend/src/assets/stylesheets/less/variables.less index fe9b8987fd0..c304d77b993 100644 --- a/superset-frontend/src/assets/stylesheets/less/variables.less +++ b/superset-frontend/src/assets/stylesheets/less/variables.less @@ -17,196 +17,143 @@ * under the License. */ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + /************************************************************************/ /* COLORS */ -/* Please attempt to use and standardize on these colors, */ -/* rather than including specific color values in */ -/* component styles. This will allow us to more easily adjust theming */ /************************************************************************/ -@primary-color: #20a7c9; +@primary-color: #20A7C9; @indicator-color: @primary-color; -@brand-primary-dark1: #1a85a0; -@brand-primary-dark2: #156378; -@brand-primary-light1: #79cade; -@brand-primary-light2: #a5dae9; -@brand-primary-light3: #d2edf4; -@brand-primary-light4: #e9f6f9; -@brand-primary-light5: #f3f8fa; +@brand-primary-dark1: #1b8eab; +@brand-primary-dark2: #16758d; +@brand-primary-light1: #58bdd7; +@brand-primary-light2: #90d3e4; +@brand-primary-light3: #c7e9f2; +@brand-primary-light4: #def2f7; +@brand-primary-light5: #f4fbfc; -@brand-secondary: #444e7c; -@brand-secondary-dark1: #363e63; -@brand-secondary-dark2: #282e4a; -@brand-secondary-dark3: #1b1f31; -@brand-secondary-light1: #8e94b0; -@brand-secondary-light2: #b4b8ca; -@brand-secondary-light3: #d9dbe4; -@brand-secondary-light4: #eceef2; -@brand-secondary-light5: #f5f5f8; +@brand-secondary: #444E7C; +@brand-secondary-dark1: #3a4269; +@brand-secondary-dark2: #303757; +@brand-secondary-dark3: #252b44; +@brand-secondary-light1: #737a9d; +@brand-secondary-light2: #a2a7be; +@brand-secondary-light3: #d0d3de; +@brand-secondary-light4: #e3e4eb; +@brand-secondary-light5: #f6f6f8; -@almost-black: #263238; -@gray-dark: #484848; -@gray-light: #e0e0e0; +@almost-black: #1a1a1a; +@gray-dark: #383838; +@gray-light: #d9d9d9; @gray-light5: #666666; @gray: #879399; -@gray-bg: #f7f7f7; -@gray-heading: #a3a3a3; -@menu-hover: #f2f3f5; -@lightest: #ffffff; -@darkest: #000000; +@gray-bg: #000; +@gray-heading: #737373; +@menu-hover: #f7f7f7; +@lightest: #fff; +@darkest: #000; /**************************** text-specific *****************************/ -@link: #1985a0; -@link-hover: darken(@link, @colorstop-one); +@link: #66BCFE; +@link-hover: #57a0d8; /***************************** status colors ****************************/ -@info: #66bcfe; -@info-dark1: #4d8cbe; -@info-dark2: #315e7e; -@info-light1: #b3defe; -@info-light2: #eff8fe; +@info: #66BCFE; +@info-dark1: #57a0d8; +@info-dark2: #4784b2; +@info-light1: #8ccdfe; +@info-light2: #b3deff; -@danger: #e04355; -@danger-dark1: #a7323f; -@danger-dark2: #6f212a; -@danger-light1: #efa1aa; -@danger-light2: #faedee; +@danger: #E04355; +@danger-dark1: #be3948; +@danger-dark2: #9d2f3c; +@danger-light1: #e87280; +@danger-light2: #f0a1aa; -@success: #5ac189; -@success-dark1: #439066; -@success-dark2: #2b6144; -@success-light1: #ace1c4; -@success-light2: #eef8f3; +@success: #5AC189; +@success-dark1: #4da474; +@success-dark2: #3f8760; +@success-light1: #83d1a7; +@success-light2: #ade0c4; -@warning: #fcc700; -@warning-dark1: #bc9501; -@warning-dark2: #7d6300; -@warning-light1: #fde380; -@warning-light2: #fef9e6; - -/* general component effects */ -@shadow-highlight: @primary-color; +@warning: #FF7F44; +@warning-dark1: #d96c3a; +@warning-dark2: #b35930; +@warning-light1: #ff9f73; +@warning-light2: #ffbfa2; /************************************************************************/ /* OPACITIES */ -/* Used in LESS filters, e.g. fade(@someColorVar, @someOpacityBelow) */ /************************************************************************/ @opacity-light: 10%; @opacity-medium-light: 35%; @opacity-medium-heavy: 60%; @opacity-heavy: 80%; -/************************************************************************/ -/* SHADES & TINTS */ -/* Used in LESS filters for shadint/tinting, */ -/* e.g. shade(@someColorVar, @colorstop-one) to darken */ -/* or tint(@someColorVar, @colorstop-one) to lighten */ -/************************************************************************/ -@colorstop-one: 20%; -@colorstop-two: 40%; -@colorstop-three: 60%; -@colorstop-four: 80%; - -/************************************************************************/ -/* LAYOUT */ -/* Widths and heights of things, that might be referred to often */ -/************************************************************************/ - -/* builder component pane */ -@builder-pane-width: 374px; - -/************************************************************************/ -/* Z-INDEX */ -/* Think of the site as "layers" rather than an arms race of numbers */ -/* Keep these to a minimum */ -/* Label semantic "layers" and add comments for usage notes */ -/* Use double dash modifiers to step up/down from a base layer */ -/* e.g. z-whatever--modifier */ -/************************************************************************/ - -/************************ toast messages, popovers **********************/ -@z-index-max: 3000; - -/***** filters, dashboard editor widgets, Explore reloading overlay *****/ -@z-index-dropdown: @z-index-above-dashboard-charts + 1; -@z-index-above-dashboard-charts: 10; - -/******************************** charts ********************************/ -@z-index-chart--dragging: @z-index-chart + 1; -@z-index-chart: 1; - /************************************************************************/ /* TYPOGRAPHY */ -/* Commonly used font weights, line heights, etc. These should be the */ -/* core values used to build more complex styles for headers, etc. */ /************************************************************************/ - -// *************************** Weights ********************************** @font-weight-light: 200; @font-weight-normal: 400; @font-weight-bold: 600; -// ***************************** Font Sizes ***************************** -@font-size-base: 14px; // Base `rem` units on this, as needed. - @font-size-xxs: 9px; @font-size-xs: 10px; @font-size-s: 12px; -@font-size-m: @font-size-base; +@font-size-m: 14px; @font-size-l: 16px; @font-size-xl: 21px; @font-size-xxl: 28px; -// **************************** Line Heights **************************** -@line-height-base: 1.4; -// Ranged Sizes -@line-height-tight: 1; -@line-height-normal: @line-height-base; -@line-height-loose: 2; - -// ****************************** Features ******************************* -@use-ligatures: false; - -// setting up OTF settings based on @use-ligatures: -.set-otf-options(@use-ligatures); - -.set-otf-options(true) { - @font-feature-settings: - 'liga' on, - 'calt' on; -} - -.set-otf-options(false) { - @font-feature-settings: - 'liga' off, - 'calt' off; -} - -// ****************************** Families ****************************** @font-family-sans-serif: 'Inter', Helvetica, Arial; @font-family-serif: Georgia, 'Times New Roman', Times, serif; @font-family-monospace: 'Fira Code', 'Courier New', monospace; @font-family-base: @font-family-sans-serif; +@line-height-tight: 1; /************************************************************************/ /* TRANSITIONS */ -/* Timing and easings presets used in CSS transitions */ /************************************************************************/ @timing-normal: 0.3s; /************************************************************************/ /* BORDER RADII */ -/* Standard border-radius settings */ /************************************************************************/ @border-radius-normal: 4px; -@border-radius-large: (@border-radius-normal * 2); +@border-radius-large: (4 * 2)px; /************************************************************************/ -/* BOOTSTRAP/BOOTSWATCH/COSMO */ -/* These are the legacy Cosmo theme overrides to Bootswatch's */ -/* overrides to Bootstrap. We should consolidate/deprecate these */ -/* in favor of custom/reusable CSS wherever possible */ +/* GRID UNITS */ /************************************************************************/ +@grid-unit: 4px; +/************************************************************************/ +/* Z-INDEX */ +/************************************************************************/ +@z-index-max: 3000; +@z-index-dropdown: 11; +@z-index-above-dashboard-charts: 10; + +/************************************************************************/ +/* LEGACY IMPORTS */ +/************************************************************************/ @import '../less/cosmo/variables.less'; diff --git a/superset-frontend/src/assets/stylesheets/less/variables.less.hbs b/superset-frontend/src/assets/stylesheets/less/variables.less.hbs new file mode 100644 index 00000000000..b0c26fa868b --- /dev/null +++ b/superset-frontend/src/assets/stylesheets/less/variables.less.hbs @@ -0,0 +1,159 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +/************************************************************************/ +/* COLORS */ +/************************************************************************/ + +@primary-color: {{theme.colors.primary.base}}; +@indicator-color: @primary-color; + +@brand-primary-dark1: {{theme.colors.primary.dark1}}; +@brand-primary-dark2: {{theme.colors.primary.dark2}}; +@brand-primary-light1: {{theme.colors.primary.light1}}; +@brand-primary-light2: {{theme.colors.primary.light2}}; +@brand-primary-light3: {{theme.colors.primary.light3}}; +@brand-primary-light4: {{theme.colors.primary.light4}}; +@brand-primary-light5: {{theme.colors.primary.light5}}; + +@brand-secondary: {{theme.colors.secondary.base}}; +@brand-secondary-dark1: {{theme.colors.secondary.dark1}}; +@brand-secondary-dark2: {{theme.colors.secondary.dark2}}; +@brand-secondary-dark3: {{theme.colors.secondary.dark3}}; +@brand-secondary-light1: {{theme.colors.secondary.light1}}; +@brand-secondary-light2: {{theme.colors.secondary.light2}}; +@brand-secondary-light3: {{theme.colors.secondary.light3}}; +@brand-secondary-light4: {{theme.colors.secondary.light4}}; +@brand-secondary-light5: {{theme.colors.secondary.light5}}; + +@almost-black: {{theme.colors.grayscale.dark5}}; +@gray-dark: {{theme.colors.grayscale.dark3}}; +@gray-light: {{theme.colors.grayscale.light3}}; +@gray-light5: {{theme.colors.grayscale.base}}; +@gray: {{theme.colors.text.label}}; +@gray-bg: {{theme.body.background}}; +@gray-heading: {{theme.colors.text.help}}; +@menu-hover: {{theme.colors.grayscale.light5}}; +@lightest: {{theme.body.color}}; +@darkest: {{theme.body.background}}; + +/**************************** text-specific *****************************/ +@link: {{theme.colors.info.base}}; +@link-hover: {{theme.colors.info.dark1}}; + +/***************************** status colors ****************************/ +@info: {{theme.colors.info.base}}; +@info-dark1: {{theme.colors.info.dark1}}; +@info-dark2: {{theme.colors.info.dark2}}; +@info-light1: {{theme.colors.info.light1}}; +@info-light2: {{theme.colors.info.light2}}; + +@danger: {{theme.colors.error.base}}; +@danger-dark1: {{theme.colors.error.dark1}}; +@danger-dark2: {{theme.colors.error.dark2}}; +@danger-light1: {{theme.colors.error.light1}}; +@danger-light2: {{theme.colors.error.light2}}; + +@success: {{theme.colors.success.base}}; +@success-dark1: {{theme.colors.success.dark1}}; +@success-dark2: {{theme.colors.success.dark2}}; +@success-light1: {{theme.colors.success.light1}}; +@success-light2: {{theme.colors.success.light2}}; + +@warning: {{theme.colors.warning.base}}; +@warning-dark1: {{theme.colors.warning.dark1}}; +@warning-dark2: {{theme.colors.warning.dark2}}; +@warning-light1: {{theme.colors.warning.light1}}; +@warning-light2: {{theme.colors.warning.light2}}; + +/************************************************************************/ +/* OPACITIES */ +/************************************************************************/ +@opacity-light: {{theme.opacity.light}}; +@opacity-medium-light: {{theme.opacity.mediumLight}}; +@opacity-medium-heavy: {{theme.opacity.mediumHeavy}}; +@opacity-heavy: {{theme.opacity.heavy}}; + +/************************************************************************/ +/* TYPOGRAPHY */ +/************************************************************************/ +@font-weight-light: {{theme.typography.weights.light}}; +@font-weight-normal: {{theme.typography.weights.normal}}; +@font-weight-bold: {{theme.typography.weights.bold}}; + +@font-size-xxs: {{theme.typography.sizes.xxs}}px; +@font-size-xs: {{theme.typography.sizes.xs}}px; +@font-size-s: {{theme.typography.sizes.s}}px; +@font-size-m: {{theme.typography.sizes.m}}px; +@font-size-l: {{theme.typography.sizes.l}}px; +@font-size-xl: {{theme.typography.sizes.xl}}px; +@font-size-xxl: {{theme.typography.sizes.xxl}}px; + +@font-family-sans-serif: {{theme.typography.families.sansSerif}}; +@font-family-serif: {{theme.typography.families.serif}}; +@font-family-monospace: {{theme.typography.families.monospace}}; +@font-family-base: @font-family-sans-serif; +@line-height-tight: 1; + +/************************************************************************/ +/* TRANSITIONS */ +/************************************************************************/ +@timing-normal: {{theme.transitionTiming}}s; + +/************************************************************************/ +/* BORDER RADII */ +/************************************************************************/ +@border-radius-normal: {{theme.borderRadius}}px; +@border-radius-large: ({{theme.borderRadius}} * 2)px; + +/************************************************************************/ +/* GRID UNITS */ +/************************************************************************/ +@grid-unit: {{theme.gridUnit}}px; + +/************************************************************************/ +/* Z-INDEX */ +/************************************************************************/ +@z-index-max: {{theme.zIndex.max}}; +@z-index-dropdown: {{theme.zIndex.dropdown}}; +@z-index-above-dashboard-charts: {{theme.zIndex.aboveDashboardCharts}}; + +/************************************************************************/ +/* LEGACY IMPORTS */ +/************************************************************************/ +@import '../less/cosmo/variables.less'; diff --git a/superset-frontend/src/assets/stylesheets/reactable-pagination.less b/superset-frontend/src/assets/stylesheets/reactable-pagination.less index 652f711bfa4..9b48d2143ab 100644 --- a/superset-frontend/src/assets/stylesheets/reactable-pagination.less +++ b/superset-frontend/src/assets/stylesheets/reactable-pagination.less @@ -31,6 +31,7 @@ .reactable-page-button, .reactable-next-page, .reactable-previous-page { + background: @lightest; border-radius: @border-radius-normal; border: 1px solid @gray-light; color: @gray-dark; @@ -44,6 +45,7 @@ white-space: nowrap; &:hover { + background-color: @gray-bg; border-color: @gray; color: @gray-dark; text-decoration: none; diff --git a/superset-frontend/src/assets/stylesheets/reactable-pagination.less.hbs b/superset-frontend/src/assets/stylesheets/reactable-pagination.less.hbs new file mode 100644 index 00000000000..9b48d2143ab --- /dev/null +++ b/superset-frontend/src/assets/stylesheets/reactable-pagination.less.hbs @@ -0,0 +1,61 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +@import './less/variables.less'; + +.reactable-pagination td { + padding: 15px 0 0 0 !important; +} + +.reactable-pagination a:focus { + text-decoration: none; + color: @gray-dark; + outline: 1; +} + +.reactable-page-button, +.reactable-next-page, +.reactable-previous-page { + background: @lightest; + border-radius: @border-radius-normal; + border: 1px solid @gray-light; + color: @gray-dark; + display: inline-block; + font-size: @font-size-s; + margin-right: 5px; + padding: 5px 10px; + text-align: center; + text-decoration: none; + vertical-align: middle; + white-space: nowrap; + + &:hover { + background-color: @gray-bg; + border-color: @gray; + color: @gray-dark; + text-decoration: none; + } +} + +.reactable-current-page { + border: 1px solid @gray-light; + color: @gray-dark; + font-weight: @font-weight-bold; + pointer-events: none; + opacity: 0.65; +} diff --git a/superset-frontend/src/assets/stylesheets/superset.less b/superset-frontend/src/assets/stylesheets/superset.less index 170cea9843f..80ea4472962 100644 --- a/superset-frontend/src/assets/stylesheets/superset.less +++ b/superset-frontend/src/assets/stylesheets/superset.less @@ -38,6 +38,10 @@ i { white-space: nowrap; } +input.form-control { + background-color: @lightest; +} + .disabledButton { pointer-events: none; } @@ -56,6 +60,7 @@ i { padding: 8px; margin: 5px 0; border: 1px solid @gray-light; + background-color: @gray-bg; border-radius: @border-radius-large; font-size: @font-size-s; } @@ -106,6 +111,7 @@ hr { } span.title-block { + background-color: @gray-bg; border-radius: @border-radius-large; padding: 6px 12px; margin: 0px 10px; @@ -206,7 +212,6 @@ table.table-no-hover tr:hover { } .editable-title.datasource-sql-expression { - font-feature-settings: @font-feature-settings; font-family: @font-family-monospace; display: inline-block; min-width: @datasource-sql-expression-width; @@ -490,6 +495,10 @@ tr.reactable-column-header th.reactable-header-sortable { text-align: right; } +td.filtered { + background-color: lighten(desaturate(@brand-primary, 50%), 50%); +} + .table-name { font-size: @font-size-l; } @@ -513,6 +522,7 @@ input[type='radio']:after { top: -2px; left: -1px; position: relative; + background-color: #fff; content: ''; display: inline-block; visibility: visible; @@ -526,6 +536,7 @@ input[type='radio']:checked:after { top: -2px; left: -1px; position: relative; + background-color: #fff; content: ''; display: inline-block; visibility: visible; diff --git a/superset-frontend/src/assets/stylesheets/superset.less.hbs b/superset-frontend/src/assets/stylesheets/superset.less.hbs new file mode 100644 index 00000000000..80ea4472962 --- /dev/null +++ b/superset-frontend/src/assets/stylesheets/superset.less.hbs @@ -0,0 +1,551 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +@import './less/index.less'; +@import './less/variables.less'; +@import './less/index.less'; + +@datasource-sql-expression-width: 315px; + +span, +div, +i { + &:focus { + outline: none; + } +} + +.alert.alert-danger > .debugger { + color: @danger; +} + +.no-wrap { + white-space: nowrap; +} + +input.form-control { + background-color: @lightest; +} + +.disabledButton { + pointer-events: none; +} + +.col-left-fixed { + width: 350px; + position: absolute; + float: left; +} + +.col-offset { + margin-left: 365px; +} + +.slice_description { + padding: 8px; + margin: 5px 0; + border: 1px solid @gray-light; + background-color: @gray-bg; + border-radius: @border-radius-large; + font-size: @font-size-s; +} + +.slice_info { + cursor: pointer; +} + +.padded { + padding: 10px; +} + +.intable-longtext { + max-height: 200px; + overflow: auto; +} + +.container-fluid { + text-align: left; + padding-left: 16px; + padding-right: 16px; +} + +input[type='checkbox'] { + display: inline-block; + width: 16px; + height: 16px; +} + +.widget-is-cached { + display: none; +} + +.header span.label { + margin-left: 5px; + margin-right: 5px; +} + +.notbtn { + cursor: default; + box-shadow: none; + border: 1px solid @gray; +} + +hr { + margin-top: 15px; + margin-bottom: 15px; +} + +span.title-block { + background-color: @gray-bg; + border-radius: @border-radius-large; + padding: 6px 12px; + margin: 0px 10px; + font-size: @font-size-xl; +} + +.nvtooltip { + table td { + font-size: @font-size-s !important; + } +} + +div.navbar { + .dropdown-menu .fineprint { + line-height: 1.5rem; + padding: 10px 20px 5px 20px; + color: @gray-light; + font-size: @font-size-m; + + div { + white-space: nowrap; + } + } +} + +.datasource { + form { + div.form-control, + input.form-control { + margin-bottom: 5px !important; + } + } + + .tooltip-inner { + max-width: 350px; + } +} + +img.viz-thumb-option { + width: 100px; + border: 1px solid @gray; + margin-right: 5px; + border-radius: @border-radius-large; +} + +.select2-drop.bigdrop .select2-results { + max-height: 700px; +} + +#is_cached { + display: none; +} + +.slice_container.faded { + opacity: 0.2; +} + +.navbar .alert { + padding: 5px 10px; + margin-top: 8px; + margin-bottom: 0; +} + +.table-condensed { + font-size: @font-size-s; +} + +.table-condensed input[type='checkbox'] { + float: left; +} + +table.table-no-hover tr:hover { + background-color: initial; +} + +.editable-title input { + outline: none; + background: transparent; + border: none; + box-shadow: none; + padding: 0; + cursor: initial; +} + +.editable-title textarea { + outline: none; + background: transparent; + box-shadow: none; + cursor: initial; + border: 1px solid @gray; + border-radius: @border-radius-normal; +} + +.editable-title input[type='text'] { + border: 1px solid @gray; + border-radius: @border-radius-normal; + padding: 2px; +} + +.editable-title.datasource-sql-expression { + font-family: @font-family-monospace; + display: inline-block; + min-width: @datasource-sql-expression-width; + width: 100%; +} + +.editable-title.datasource-sql-expression input { + width: 95%; + padding-bottom: 5px; +} + +.editable-title.datasource-sql-expression textarea { + min-height: 100px; + width: 95%; +} + +.editable-title input[type='button'] { + border-color: transparent; + background: transparent; + font-size: inherit; + white-space: normal; + text-align: left; + cursor: initial; +} + +.editable-title.editable-title--editable input[type='button'] { + cursor: pointer; +} + +.editable-title.editable-title--editing input[type='button'] { + cursor: text; +} + +.anchor-link-container { + position: absolute; + + .btn.btn-sm, + .btn.btn-sm:active { + border: none; + padding-top: 0; + padding-bottom: 0; + background: none; + box-shadow: none; + } + + .fa.fa-link { + position: relative; + top: 2px; + right: 0; + visibility: hidden; + font-size: @font-size-s; + text-align: center; + vertical-align: middle; + } +} + +.dashboard-component.dashboard-component-header .anchor-link-container { + .fa.fa-link { + font-size: @font-size-l; + } +} + +.dashboard-component.dashboard-component-header:hover { + .anchor-link-container { + cursor: pointer; + + .fa.fa-link { + visibility: visible; + } + } +} + +.m-r-5 { + margin-right: 5px; +} + +.m-r-3 { + margin-right: 3px; +} + +.m-t-4 { + margin-top: 4px; +} + +.m-t-5 { + margin-top: 5px; +} + +.m-t-10 { + margin-top: 10px; +} + +.m-t-20 { + margin-top: 20px; +} + +.m-b-10 { + margin-bottom: 10px; +} + +.m-l-2 { + margin-left: 2px; +} + +.m-l-4 { + margin-left: 4px; +} + +.m-l-5 { + margin-left: 5px; +} + +.m-l-10 { + margin-left: 10px; +} + +.m-l-25 { + margin-left: 25px; +} + +.p-l-0 { + padding-left: 0; +} + +.p-t-8 { + padding-top: 8; +} + +.p-r-2 { + padding-right: 2; +} + +.list-container { + position: relative; +} + +.list-search-container { + position: relative; +} + +.list-search-container .dropdown-toggle { + position: absolute; + top: -43px; + right: 25px; + border: 0; + padding: 0 18px; +} + +.list-search-container .fa-filter { + position: relative; + left: -8px; +} + +.list-search-container .dropdown-menu { + top: -19px; + right: 0; + left: auto; + float: none; +} + +.list-container .pagination-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding-bottom: 20px; +} + +.list-container .pagination-container .pagination { + margin: 0 15px; +} + +.list-container .pagination-container strong { + margin-right: 5px; +} + +.list-container .list-add-action { + position: absolute; + top: -30px; + right: 15px; +} + +.list-container .form-actions-container { + padding: 0 0 20px 10px; + display: inline; +} + +.form-actions-container button { + display: flex; + + .caret { + margin: 0 8px; + } +} + +.list-container .filter-action { + margin: 10px 10px 0 10px; + padding-bottom: 15px; +} + +.list-add-action .btn.btn-sm { + padding: 6px 6px; + font-size: @font-size-xs; + line-height: 2px; + border-radius: 50%; + box-shadow: 2px 2px 4px -1px fade(@darkest, @opacity-light); + i { + width: 10px; + } +} + +iframe { + border: none; + width: 100%; +} + +.text-transparent { + color: transparent; +} + +.pointer { + cursor: pointer; +} + +.popover { + max-width: 500px; +} + +.float-left { + float: left; +} + +.float-right { + float: right; +} + +g.annotation-container { + line { + stroke: @brand-primary; + } + + rect.annotation { + stroke: @brand-primary; + fill-opacity: 0.1; + stroke-width: 1; + } +} + +.stroke-primary { + stroke: @brand-primary; +} + +.reactable-header-sortable { + position: relative; + padding-right: 40px; + + &::after { + font: normal normal normal 14px/1 FontAwesome; + content: '\f0dc'; + margin-left: 10px; + color: @brand-primary; + } +} + +.reactable-header-sort-asc::after { + content: '\f0de'; + color: @brand-primary; +} + +.reactable-header-sort-desc::after { + content: '\f0dd'; + color: @brand-primary; +} + +tr.reactable-column-header th.reactable-header-sortable { + padding-right: 17px; +} + +.align-right { + text-align: right; +} + +td.filtered { + background-color: lighten(desaturate(@brand-primary, 50%), 50%); +} + +.table-name { + font-size: @font-size-l; +} +.select2-container-multi { + width: 100% !important; +} + +/* +Hides the logo while loading the page. +Emotion styles will take care of the correct styling +*/ +.navbar-brand { + display: none; +} + +// Making native radio buttons use brand color +input[type='radio']:after { + width: 15px; + height: 15px; + border-radius: 15px; + top: -2px; + left: -1px; + position: relative; + background-color: #fff; + content: ''; + display: inline-block; + visibility: visible; + border: 2px solid @gray; +} + +input[type='radio']:checked:after { + width: 15px; + height: 15px; + border-radius: 15px; + top: -2px; + left: -1px; + position: relative; + background-color: #fff; + content: ''; + display: inline-block; + visibility: visible; + border: 5px solid @brand-primary; +} +hr { + border-top: 1px solid @gray-light; +} +.ace_gutter-cell.ace_error { + background-image: url('../images/icons/error_solid_small_red.svg') !important; + background-position: -2px center !important; +}