From 6e89970f98b7648f2b7f5b6259a2ac32df31dce9 Mon Sep 17 00:00:00 2001 From: Gurinder Singh Date: Mon, 8 Jul 2024 16:50:24 -0400 Subject: [PATCH 1/5] coderabbit theme --- .yarn/sdks/eslint/bin/eslint.js | 9 ++++++- .yarn/sdks/eslint/lib/api.js | 9 ++++++- .yarn/sdks/eslint/lib/unsupported-api.js | 27 +++++++++++++++++++ .yarn/sdks/eslint/package.json | 10 ++++++- .yarn/sdks/prettier/bin/prettier.cjs | 27 +++++++++++++++++++ .yarn/sdks/prettier/{index.js => index.cjs} | 9 ++++++- .yarn/sdks/prettier/package.json | 5 ++-- .yarn/sdks/typescript/bin/tsc | 9 ++++++- .yarn/sdks/typescript/bin/tsserver | 9 ++++++- .yarn/sdks/typescript/lib/tsc.js | 9 ++++++- .yarn/sdks/typescript/lib/tsserver.js | 26 +++++++++++++----- .yarn/sdks/typescript/lib/tsserverlibrary.js | 26 +++++++++++++----- .yarn/sdks/typescript/lib/typescript.js | 15 ++++++++--- .yarn/sdks/typescript/package.json | 6 ++++- .../grafana-data/src/themes/createColors.ts | 14 +++++----- .../src/themes/createTypography.ts | 8 +++--- .../DashboardLoading/CodeRabbitLogo.tsx | 20 ++++++++++++++ .../components/DashboardLoading/FnLoader.tsx | 8 +++--- .../components/DashboardLoading/fn-logo.svg | 9 ------- public/microfrontends/fn_dashboard/index.html | 4 +-- 20 files changed, 206 insertions(+), 53 deletions(-) create mode 100644 .yarn/sdks/eslint/lib/unsupported-api.js create mode 100755 .yarn/sdks/prettier/bin/prettier.cjs rename .yarn/sdks/prettier/{index.js => index.cjs} (61%) mode change 100755 => 100644 create mode 100644 public/app/features/dashboard/components/DashboardLoading/CodeRabbitLogo.tsx delete mode 100644 public/app/features/dashboard/components/DashboardLoading/fn-logo.svg diff --git a/.yarn/sdks/eslint/bin/eslint.js b/.yarn/sdks/eslint/bin/eslint.js index 9ef98e400b47b..42eab99331274 100755 --- a/.yarn/sdks/eslint/bin/eslint.js +++ b/.yarn/sdks/eslint/bin/eslint.js @@ -1,18 +1,25 @@ #!/usr/bin/env node const {existsSync} = require(`fs`); -const {createRequire} = require(`module`); +const {createRequire, register} = require(`module`); const {resolve} = require(`path`); +const {pathToFileURL} = require(`url`); const relPnpApiPath = "../../../../.pnp.cjs"; const absPnpApiPath = resolve(__dirname, relPnpApiPath); const absRequire = createRequire(absPnpApiPath); +const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`); +const isPnpLoaderEnabled = existsSync(absPnpLoaderPath); + if (existsSync(absPnpApiPath)) { if (!process.versions.pnp) { // Setup the environment to be able to require eslint/bin/eslint.js require(absPnpApiPath).setup(); + if (isPnpLoaderEnabled && register) { + register(pathToFileURL(absPnpLoaderPath)); + } } } diff --git a/.yarn/sdks/eslint/lib/api.js b/.yarn/sdks/eslint/lib/api.js index 653b22bae06f4..ea2b46a70be32 100644 --- a/.yarn/sdks/eslint/lib/api.js +++ b/.yarn/sdks/eslint/lib/api.js @@ -1,18 +1,25 @@ #!/usr/bin/env node const {existsSync} = require(`fs`); -const {createRequire} = require(`module`); +const {createRequire, register} = require(`module`); const {resolve} = require(`path`); +const {pathToFileURL} = require(`url`); const relPnpApiPath = "../../../../.pnp.cjs"; const absPnpApiPath = resolve(__dirname, relPnpApiPath); const absRequire = createRequire(absPnpApiPath); +const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`); +const isPnpLoaderEnabled = existsSync(absPnpLoaderPath); + if (existsSync(absPnpApiPath)) { if (!process.versions.pnp) { // Setup the environment to be able to require eslint require(absPnpApiPath).setup(); + if (isPnpLoaderEnabled && register) { + register(pathToFileURL(absPnpLoaderPath)); + } } } diff --git a/.yarn/sdks/eslint/lib/unsupported-api.js b/.yarn/sdks/eslint/lib/unsupported-api.js new file mode 100644 index 0000000000000..f5f8e24d0e3cc --- /dev/null +++ b/.yarn/sdks/eslint/lib/unsupported-api.js @@ -0,0 +1,27 @@ +#!/usr/bin/env node + +const {existsSync} = require(`fs`); +const {createRequire, register} = require(`module`); +const {resolve} = require(`path`); +const {pathToFileURL} = require(`url`); + +const relPnpApiPath = "../../../../.pnp.cjs"; + +const absPnpApiPath = resolve(__dirname, relPnpApiPath); +const absRequire = createRequire(absPnpApiPath); + +const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`); +const isPnpLoaderEnabled = existsSync(absPnpLoaderPath); + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require eslint/use-at-your-own-risk + require(absPnpApiPath).setup(); + if (isPnpLoaderEnabled && register) { + register(pathToFileURL(absPnpLoaderPath)); + } + } +} + +// Defer to the real eslint/use-at-your-own-risk your application uses +module.exports = absRequire(`eslint/use-at-your-own-risk`); diff --git a/.yarn/sdks/eslint/package.json b/.yarn/sdks/eslint/package.json index 06e74e37b48f7..bc7166925cdad 100644 --- a/.yarn/sdks/eslint/package.json +++ b/.yarn/sdks/eslint/package.json @@ -2,5 +2,13 @@ "name": "eslint", "version": "8.44.0-sdk", "main": "./lib/api.js", - "type": "commonjs" + "type": "commonjs", + "bin": { + "eslint": "./bin/eslint.js" + }, + "exports": { + "./package.json": "./package.json", + ".": "./lib/api.js", + "./use-at-your-own-risk": "./lib/unsupported-api.js" + } } diff --git a/.yarn/sdks/prettier/bin/prettier.cjs b/.yarn/sdks/prettier/bin/prettier.cjs new file mode 100755 index 0000000000000..00f1f7f745b47 --- /dev/null +++ b/.yarn/sdks/prettier/bin/prettier.cjs @@ -0,0 +1,27 @@ +#!/usr/bin/env node + +const {existsSync} = require(`fs`); +const {createRequire, register} = require(`module`); +const {resolve} = require(`path`); +const {pathToFileURL} = require(`url`); + +const relPnpApiPath = "../../../../.pnp.cjs"; + +const absPnpApiPath = resolve(__dirname, relPnpApiPath); +const absRequire = createRequire(absPnpApiPath); + +const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`); +const isPnpLoaderEnabled = existsSync(absPnpLoaderPath); + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require prettier/bin/prettier.cjs + require(absPnpApiPath).setup(); + if (isPnpLoaderEnabled && register) { + register(pathToFileURL(absPnpLoaderPath)); + } + } +} + +// Defer to the real prettier/bin/prettier.cjs your application uses +module.exports = absRequire(`prettier/bin/prettier.cjs`); diff --git a/.yarn/sdks/prettier/index.js b/.yarn/sdks/prettier/index.cjs old mode 100755 new mode 100644 similarity index 61% rename from .yarn/sdks/prettier/index.js rename to .yarn/sdks/prettier/index.cjs index 8758e367a725a..d546c6a7588a1 --- a/.yarn/sdks/prettier/index.js +++ b/.yarn/sdks/prettier/index.cjs @@ -1,18 +1,25 @@ #!/usr/bin/env node const {existsSync} = require(`fs`); -const {createRequire} = require(`module`); +const {createRequire, register} = require(`module`); const {resolve} = require(`path`); +const {pathToFileURL} = require(`url`); const relPnpApiPath = "../../../.pnp.cjs"; const absPnpApiPath = resolve(__dirname, relPnpApiPath); const absRequire = createRequire(absPnpApiPath); +const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`); +const isPnpLoaderEnabled = existsSync(absPnpLoaderPath); + if (existsSync(absPnpApiPath)) { if (!process.versions.pnp) { // Setup the environment to be able to require prettier require(absPnpApiPath).setup(); + if (isPnpLoaderEnabled && register) { + register(pathToFileURL(absPnpLoaderPath)); + } } } diff --git a/.yarn/sdks/prettier/package.json b/.yarn/sdks/prettier/package.json index 3c1bb0be150c6..4301e0948f114 100644 --- a/.yarn/sdks/prettier/package.json +++ b/.yarn/sdks/prettier/package.json @@ -1,6 +1,7 @@ { "name": "prettier", "version": "3.0.0-sdk", - "main": "./index.js", - "type": "commonjs" + "main": "./index.cjs", + "type": "commonjs", + "bin": "./bin/prettier.cjs" } diff --git a/.yarn/sdks/typescript/bin/tsc b/.yarn/sdks/typescript/bin/tsc index 454b950b7e8f1..a6bb0e2c16a14 100755 --- a/.yarn/sdks/typescript/bin/tsc +++ b/.yarn/sdks/typescript/bin/tsc @@ -1,18 +1,25 @@ #!/usr/bin/env node const {existsSync} = require(`fs`); -const {createRequire} = require(`module`); +const {createRequire, register} = require(`module`); const {resolve} = require(`path`); +const {pathToFileURL} = require(`url`); const relPnpApiPath = "../../../../.pnp.cjs"; const absPnpApiPath = resolve(__dirname, relPnpApiPath); const absRequire = createRequire(absPnpApiPath); +const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`); +const isPnpLoaderEnabled = existsSync(absPnpLoaderPath); + if (existsSync(absPnpApiPath)) { if (!process.versions.pnp) { // Setup the environment to be able to require typescript/bin/tsc require(absPnpApiPath).setup(); + if (isPnpLoaderEnabled && register) { + register(pathToFileURL(absPnpLoaderPath)); + } } } diff --git a/.yarn/sdks/typescript/bin/tsserver b/.yarn/sdks/typescript/bin/tsserver index d7a605684df95..957bed2001db8 100755 --- a/.yarn/sdks/typescript/bin/tsserver +++ b/.yarn/sdks/typescript/bin/tsserver @@ -1,18 +1,25 @@ #!/usr/bin/env node const {existsSync} = require(`fs`); -const {createRequire} = require(`module`); +const {createRequire, register} = require(`module`); const {resolve} = require(`path`); +const {pathToFileURL} = require(`url`); const relPnpApiPath = "../../../../.pnp.cjs"; const absPnpApiPath = resolve(__dirname, relPnpApiPath); const absRequire = createRequire(absPnpApiPath); +const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`); +const isPnpLoaderEnabled = existsSync(absPnpLoaderPath); + if (existsSync(absPnpApiPath)) { if (!process.versions.pnp) { // Setup the environment to be able to require typescript/bin/tsserver require(absPnpApiPath).setup(); + if (isPnpLoaderEnabled && register) { + register(pathToFileURL(absPnpLoaderPath)); + } } } diff --git a/.yarn/sdks/typescript/lib/tsc.js b/.yarn/sdks/typescript/lib/tsc.js index 2f62fc96c0a08..a262a77d0f8a9 100644 --- a/.yarn/sdks/typescript/lib/tsc.js +++ b/.yarn/sdks/typescript/lib/tsc.js @@ -1,18 +1,25 @@ #!/usr/bin/env node const {existsSync} = require(`fs`); -const {createRequire} = require(`module`); +const {createRequire, register} = require(`module`); const {resolve} = require(`path`); +const {pathToFileURL} = require(`url`); const relPnpApiPath = "../../../../.pnp.cjs"; const absPnpApiPath = resolve(__dirname, relPnpApiPath); const absRequire = createRequire(absPnpApiPath); +const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`); +const isPnpLoaderEnabled = existsSync(absPnpLoaderPath); + if (existsSync(absPnpApiPath)) { if (!process.versions.pnp) { // Setup the environment to be able to require typescript/lib/tsc.js require(absPnpApiPath).setup(); + if (isPnpLoaderEnabled && register) { + register(pathToFileURL(absPnpLoaderPath)); + } } } diff --git a/.yarn/sdks/typescript/lib/tsserver.js b/.yarn/sdks/typescript/lib/tsserver.js index bbb1e46501b52..1dae54c1abf4a 100644 --- a/.yarn/sdks/typescript/lib/tsserver.js +++ b/.yarn/sdks/typescript/lib/tsserver.js @@ -1,14 +1,28 @@ #!/usr/bin/env node const {existsSync} = require(`fs`); -const {createRequire} = require(`module`); +const {createRequire, register} = require(`module`); const {resolve} = require(`path`); +const {pathToFileURL} = require(`url`); const relPnpApiPath = "../../../../.pnp.cjs"; const absPnpApiPath = resolve(__dirname, relPnpApiPath); const absRequire = createRequire(absPnpApiPath); +const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`); +const isPnpLoaderEnabled = existsSync(absPnpLoaderPath); + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require typescript/lib/tsserver.js + require(absPnpApiPath).setup(); + if (isPnpLoaderEnabled && register) { + register(pathToFileURL(absPnpLoaderPath)); + } + } +} + const moduleWrapper = tsserver => { if (!process.versions.pnp) { return tsserver; @@ -214,11 +228,11 @@ const moduleWrapper = tsserver => { return tsserver; }; -if (existsSync(absPnpApiPath)) { - if (!process.versions.pnp) { - // Setup the environment to be able to require typescript/lib/tsserver.js - require(absPnpApiPath).setup(); - } +const [major, minor] = absRequire(`typescript/package.json`).version.split(`.`, 2).map(value => parseInt(value, 10)); +// In TypeScript@>=5.5 the tsserver uses the public TypeScript API so that needs to be patched as well. +// Ref https://github.com/microsoft/TypeScript/pull/55326 +if (major > 5 || (major === 5 && minor >= 5)) { + moduleWrapper(absRequire(`typescript`)); } // Defer to the real typescript/lib/tsserver.js your application uses diff --git a/.yarn/sdks/typescript/lib/tsserverlibrary.js b/.yarn/sdks/typescript/lib/tsserverlibrary.js index a68f028fe1971..7f9d7f964f517 100644 --- a/.yarn/sdks/typescript/lib/tsserverlibrary.js +++ b/.yarn/sdks/typescript/lib/tsserverlibrary.js @@ -1,14 +1,28 @@ #!/usr/bin/env node const {existsSync} = require(`fs`); -const {createRequire} = require(`module`); +const {createRequire, register} = require(`module`); const {resolve} = require(`path`); +const {pathToFileURL} = require(`url`); const relPnpApiPath = "../../../../.pnp.cjs"; const absPnpApiPath = resolve(__dirname, relPnpApiPath); const absRequire = createRequire(absPnpApiPath); +const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`); +const isPnpLoaderEnabled = existsSync(absPnpLoaderPath); + +if (existsSync(absPnpApiPath)) { + if (!process.versions.pnp) { + // Setup the environment to be able to require typescript/lib/tsserverlibrary.js + require(absPnpApiPath).setup(); + if (isPnpLoaderEnabled && register) { + register(pathToFileURL(absPnpLoaderPath)); + } + } +} + const moduleWrapper = tsserver => { if (!process.versions.pnp) { return tsserver; @@ -214,11 +228,11 @@ const moduleWrapper = tsserver => { return tsserver; }; -if (existsSync(absPnpApiPath)) { - if (!process.versions.pnp) { - // Setup the environment to be able to require typescript/lib/tsserverlibrary.js - require(absPnpApiPath).setup(); - } +const [major, minor] = absRequire(`typescript/package.json`).version.split(`.`, 2).map(value => parseInt(value, 10)); +// In TypeScript@>=5.5 the tsserver uses the public TypeScript API so that needs to be patched as well. +// Ref https://github.com/microsoft/TypeScript/pull/55326 +if (major > 5 || (major === 5 && minor >= 5)) { + moduleWrapper(absRequire(`typescript`)); } // Defer to the real typescript/lib/tsserverlibrary.js your application uses diff --git a/.yarn/sdks/typescript/lib/typescript.js b/.yarn/sdks/typescript/lib/typescript.js index e14fa87beaa40..317b60b4c035a 100644 --- a/.yarn/sdks/typescript/lib/typescript.js +++ b/.yarn/sdks/typescript/lib/typescript.js @@ -1,20 +1,27 @@ #!/usr/bin/env node const {existsSync} = require(`fs`); -const {createRequire} = require(`module`); +const {createRequire, register} = require(`module`); const {resolve} = require(`path`); +const {pathToFileURL} = require(`url`); const relPnpApiPath = "../../../../.pnp.cjs"; const absPnpApiPath = resolve(__dirname, relPnpApiPath); const absRequire = createRequire(absPnpApiPath); +const absPnpLoaderPath = resolve(absPnpApiPath, `../.pnp.loader.mjs`); +const isPnpLoaderEnabled = existsSync(absPnpLoaderPath); + if (existsSync(absPnpApiPath)) { if (!process.versions.pnp) { - // Setup the environment to be able to require typescript/lib/typescript.js + // Setup the environment to be able to require typescript require(absPnpApiPath).setup(); + if (isPnpLoaderEnabled && register) { + register(pathToFileURL(absPnpLoaderPath)); + } } } -// Defer to the real typescript/lib/typescript.js your application uses -module.exports = absRequire(`typescript/lib/typescript.js`); +// Defer to the real typescript your application uses +module.exports = absRequire(`typescript`); diff --git a/.yarn/sdks/typescript/package.json b/.yarn/sdks/typescript/package.json index 15466d2023ffc..417fa1369db25 100644 --- a/.yarn/sdks/typescript/package.json +++ b/.yarn/sdks/typescript/package.json @@ -2,5 +2,9 @@ "name": "typescript", "version": "4.8.4-sdk", "main": "./lib/typescript.js", - "type": "commonjs" + "type": "commonjs", + "bin": { + "tsc": "./bin/tsc", + "tsserver": "./bin/tsserver" + } } diff --git a/packages/grafana-data/src/themes/createColors.ts b/packages/grafana-data/src/themes/createColors.ts index 661d433abcd43..a3f165bff370c 100644 --- a/packages/grafana-data/src/themes/createColors.ts +++ b/packages/grafana-data/src/themes/createColors.ts @@ -171,16 +171,16 @@ class LightColors implements ThemeColorsBase> { blackBase = '45, 51, 62'; primary = { - main: '#8EC4AD', - border: palette.blueLightText, - text: '#F0E4B6', + main: '#FF4702', + border: '#E33E00', + text: '#101828', }; text = { - primary: '#2D333E', - secondary: '#2d333e', + primary: '#101828', + secondary: '#344054', disabled: '#9DA7B8', - link: this.primary.text, + link: '#FF4702', maxContrast: palette.black, }; @@ -191,7 +191,7 @@ class LightColors implements ThemeColorsBase> { }; secondary = { - main: '#FC9A69', + main: '#FF4702', shade: '#FC9A6990', contrastText: `rgba(${this.blackBase}, 1)`, text: this.text.primary, diff --git a/packages/grafana-data/src/themes/createTypography.ts b/packages/grafana-data/src/themes/createTypography.ts index 36d02b204e73a..8cae845b1802c 100644 --- a/packages/grafana-data/src/themes/createTypography.ts +++ b/packages/grafana-data/src/themes/createTypography.ts @@ -53,8 +53,8 @@ export interface ThemeTypographyInput { htmlFontSize?: number; } -const defaultFontFamily = '"Source Sans Pro", Nunito, Roboto, Arial'; //'"Roboto", "Helvetica", "Arial", sans-serif'; -const defaultFontFamilyMonospace = "'Nunito Mono', 'Roboto Mono', monospace"; // "'Roboto Mono', monospace"; +const defaultFontFamily = '"Poppins", Inter, Satoshi, sans-serif'; //'"Roboto", "Helvetica", "Arial", sans-serif'; +const defaultFontFamilyMonospace = '"SatoshiLight", "FigtreeLight", monospace'; // "'Roboto Mono', monospace"; export function createTypography(colors: ThemeColors, typographyInput: ThemeTypographyInput = {}): ThemeTypography { const { @@ -65,10 +65,10 @@ export function createTypography(colors: ThemeColors, typographyInput: ThemeTypo fontWeightLight = 300, fontWeightRegular = 400, fontWeightMedium = 500, - fontWeightBold = 500, + fontWeightBold = 600, // Tell Grafana-UI what's the font-size on the html element. // 16px is the default font-size used by browsers. - htmlFontSize = 14, + htmlFontSize = 16, } = typographyInput; if (process.env.NODE_ENV !== 'production') { diff --git a/public/app/features/dashboard/components/DashboardLoading/CodeRabbitLogo.tsx b/public/app/features/dashboard/components/DashboardLoading/CodeRabbitLogo.tsx new file mode 100644 index 0000000000000..2cadfda7b1f23 --- /dev/null +++ b/public/app/features/dashboard/components/DashboardLoading/CodeRabbitLogo.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +type LogoFullProps = React.SVGProps; + +export const CodeRabbitLogo: React.FC = (props) => { + return ( + + + + + ); +}; diff --git a/public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx b/public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx index e78b27c055e12..142aaa4b95dd4 100644 --- a/public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx +++ b/public/app/features/dashboard/components/DashboardLoading/FnLoader.tsx @@ -1,15 +1,14 @@ import { Box, CircularProgress, CircularProgressProps, Typography, type BoxProps } from '@mui/material'; -import React, { type ReactNode, type FC, type HTMLAttributes } from 'react'; +import React, { type ReactNode, type FC } from 'react'; import { useTheme2 } from '@grafana/ui'; -import logoUrl from './fn-logo.svg'; +import { CodeRabbitLogo } from './CodeRabbitLogo'; export type FnLoaderProps = { outerContainerProps?: Omit; innerContainerProps?: Omit; circularProgressProps?: CircularProgressProps; - imageProps?: HTMLAttributes; text?: ReactNode; }; @@ -17,7 +16,6 @@ export const FnLoader: FC = ({ outerContainerProps, innerContainerProps, circularProgressProps, - imageProps, text, }) => { const theme = useTheme2(); @@ -31,7 +29,7 @@ export const FnLoader: FC = ({ paddingTop="150px" {...outerContainerProps} > - {'FluxNinja + - - - - - - - - \ No newline at end of file diff --git a/public/microfrontends/fn_dashboard/index.html b/public/microfrontends/fn_dashboard/index.html index 5399547433ddd..05b384dd80f9c 100644 --- a/public/microfrontends/fn_dashboard/index.html +++ b/public/microfrontends/fn_dashboard/index.html @@ -21,13 +21,13 @@ From abbf5b15832424a209fbf1ab25918f425bf07280 Mon Sep 17 00:00:00 2001 From: Gurinder Singh Date: Tue, 9 Jul 2024 08:30:58 -0400 Subject: [PATCH 2/5] theme change --- public/sass/_variables.generated.scss | 16 +++++------ public/sass/_variables.light.generated.scss | 32 ++++++++++----------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss index db1ac2a5e3649..1aa387bbb5ca1 100644 --- a/public/sass/_variables.generated.scss +++ b/public/sass/_variables.generated.scss @@ -99,9 +99,9 @@ $height-lg: 48; // Typography // ------------------------- /* stylelint-disable-next-line string-quotes */ -$font-family-sans-serif: "Source Sans Pro", Nunito, Roboto, Arial; +$font-family-sans-serif: "Poppins", Inter, Satoshi, sans-serif; /* stylelint-disable-next-line string-quotes */ -$font-family-monospace: 'Nunito Mono', 'Roboto Mono', monospace; +$font-family-monospace: "SatoshiLight", "FigtreeLight", monospace; $font-file-path: '../fonts' !default; @@ -117,12 +117,12 @@ $line-height-base: 1.5714285714285714 !default; $font-weight-regular: 400 !default; $font-weight-semi-bold: 500 !default; -$font-size-h1: 2rem !default; -$font-size-h2: 1.7142857142857142rem !default; -$font-size-h3: 1.5714285714285714rem !default; -$font-size-h4: 1.2857142857142858rem !default; -$font-size-h5: 1.1428571428571428rem !default; -$font-size-h6: 1rem !default; +$font-size-h1: 1.75rem !default; +$font-size-h2: 1.5rem !default; +$font-size-h3: 1.375rem !default; +$font-size-h4: 1.125rem !default; +$font-size-h5: 1rem !default; +$font-size-h6: 0.875rem !default; $headings-line-height: 1.5 !default; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 552a95785eb54..e3e91eff5e1bf 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -19,9 +19,9 @@ $colors-action-selected: #F27A40; // New Colors // ------------------------- -$blue-light: #F0E4B6; -$blue-base: #8EC4AD; -$blue-shade: rgb(113, 156, 138); +$blue-light: #101828; +$blue-base: #FF4702; +$blue-shade: rgb(204, 56, 1); $red-base: #E0226E; $red-shade: rgb(179, 27, 88); $green-base: #83D39E; @@ -67,12 +67,12 @@ $border1: rgba(45, 51, 62, 0.30); // Accent colors // ------------------------- -$blue: #F0E4B6; +$blue: #101828; $red: $red-base; $yellow: #ecbb13; $orange: #eb7b18; $purple: #9933cc; -$variable: #F0E4B6; +$variable: #101828; $brand-primary: #eb7b18; $brand-success: #83D39E; @@ -97,13 +97,13 @@ $body-bg: #F6F5F3; $page-bg: #F6F5F3; $dashboard-bg: #F6F5F3; -$text-color: #2D333E; +$text-color: #101828; $text-color-strong: #000000; -$text-color-semi-weak: #2d333e; -$text-color-weak: #2d333e; +$text-color-semi-weak: #344054; +$text-color-weak: #344054; $text-color-faint: #9DA7B8; $text-color-emphasis: #000000; -$text-blue: #F0E4B6; +$text-blue: #101828; $text-shadow-faint: none; @@ -113,14 +113,14 @@ $brand-gradient-vertical: linear-gradient(0.01deg, #F53E4C -31.2%, #FF8833 113.0 // Links // ------------------------- -$link-color: #2D333E; +$link-color: #101828; $link-color-disabled: #9DA7B8; $link-hover-color: #000000; -$external-link-color: #F0E4B6; +$external-link-color: #FF4702; // Typography // ------------------------- -$headings-color: #2D333E; +$headings-color: #101828; $abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; @@ -210,7 +210,7 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6); $input-bg: #FDFDFC; $input-bg-disabled: rgba(45, 51, 62, 0.04); -$input-color: #2D333E; +$input-color: #101828; $input-border-color: rgba(45, 51, 62, 0.30); $input-box-shadow: none; $input-border-focus: #5794f2; @@ -284,13 +284,13 @@ $alert-info-bg: #F3D086; // Tooltips and popovers $tooltipBackground: #FDFDFC; -$tooltipColor: #2D333E; +$tooltipColor: #101828; $tooltipArrowColor: #FDFDFC; $tooltipBackgroundError: #E0226E; $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2); $popover-bg: #FDFDFC; -$popover-color: #2D333E; +$popover-color: #101828; $popover-border-color: rgba(45, 51, 62, 0.12); $popover-header-bg: #FDFDFC; $popover-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18); @@ -341,7 +341,7 @@ $diff-arrow-color: $dark-2; $diff-group-bg: #FDFDFC; $diff-json-bg: #FDFDFC; -$diff-json-fg: #2D333E; +$diff-json-fg: #101828; $diff-json-added: $blue-shade; $diff-json-deleted: $red-shade; From f97f210f52368968d3e7b420182a6082daf45b58 Mon Sep 17 00:00:00 2001 From: Gurinder Singh Date: Wed, 10 Jul 2024 22:37:36 -0400 Subject: [PATCH 3/5] checkpoint --- package.json | 3 + .../grafana-data/src/themes/breakpoints.ts | 2 +- .../grafana-data/src/themes/createColors.ts | 6 +- .../src/themes/createTypography.ts | 8 +- .../grafana-data/src/themes/fnCreateColors.ts | 240 ----------------- packages/grafana-data/src/themes/fnPalette.ts | 42 --- .../TimeRangePicker/TimePickerFooter.tsx | 2 +- .../src/themes/GlobalStyles/elements.ts | 242 +++++++++--------- .../src/themes/GlobalStyles/forms.ts | 41 ++- .../src/themes/_variables.scss.tmpl.ts | 8 +- packages/grafana-ui/src/themes/default.ts | 4 +- .../TimePicker/TimePickerWithHistory.tsx | 2 +- public/app/fn-app/create-mfe.ts | 4 +- public/app/fn_dashboard.ts | 15 +- public/microfrontends/fn_dashboard/index.html | 28 +- public/sass/_variables.generated.scss | 16 +- public/sass/_variables.light.generated.scss | 56 ++-- public/sass/components/_buttons.scss | 1 - public/sass/mixins/_buttons.scss | 12 - .../views/index-microfrontend-template.html | 20 +- yarn.lock | 64 +++++ 21 files changed, 290 insertions(+), 526 deletions(-) delete mode 100644 packages/grafana-data/src/themes/fnCreateColors.ts delete mode 100644 packages/grafana-data/src/themes/fnPalette.ts diff --git a/package.json b/package.json index 1df6c389fb190..9707bf9ee1d8f 100644 --- a/package.json +++ b/package.json @@ -146,6 +146,7 @@ "@types/ol-ext": "npm:@siedlerchr/types-ol-ext@3.2.0", "@types/papaparse": "5.3.7", "@types/pluralize": "^0.0.29", + "@types/postcss-prefix-selector": "^1", "@types/prismjs": "1.26.0", "@types/react": "18.2.28", "@types/react-beautiful-dnd": "13.1.3", @@ -372,6 +373,8 @@ "ol-ext": "4.0.6", "papaparse": "5.4.1", "pluralize": "^8.0.0", + "postcss-prefix-selector": "^1.16.1", + "postcss-prefixwrap": "^1.49.0", "prismjs": "1.29.0", "prop-types": "15.8.1", "pseudoizer": "^0.1.0", diff --git a/packages/grafana-data/src/themes/breakpoints.ts b/packages/grafana-data/src/themes/breakpoints.ts index 1ad0d7137810e..9edee52f8e12a 100644 --- a/packages/grafana-data/src/themes/breakpoints.ts +++ b/packages/grafana-data/src/themes/breakpoints.ts @@ -28,7 +28,7 @@ export function createBreakpoints(): ThemeBreakpoints { const values: ThemeBreakpointValues = { xs: 0, sm: 544, - md: 769, // 1 more than regular ipad in portrait + md: 768, // 1 more than regular ipad in portrait lg: 992, xl: 1200, xxl: 1440, diff --git a/packages/grafana-data/src/themes/createColors.ts b/packages/grafana-data/src/themes/createColors.ts index a3f165bff370c..2a45494a2a2bb 100644 --- a/packages/grafana-data/src/themes/createColors.ts +++ b/packages/grafana-data/src/themes/createColors.ts @@ -220,9 +220,9 @@ class LightColors implements ThemeColorsBase> { }; background = { - canvas: '#F6F5F3', - primary: '#FDFDFC', - secondary: '#FDFDFC', + canvas: '#FAFAFA', + primary: '#FFFFFF', + secondary: '#FAFAFA', }; action = { diff --git a/packages/grafana-data/src/themes/createTypography.ts b/packages/grafana-data/src/themes/createTypography.ts index 8cae845b1802c..9180955b9deee 100644 --- a/packages/grafana-data/src/themes/createTypography.ts +++ b/packages/grafana-data/src/themes/createTypography.ts @@ -62,10 +62,10 @@ export function createTypography(colors: ThemeColors, typographyInput: ThemeTypo fontFamilyMonospace = defaultFontFamilyMonospace, // The default font size of the Material Specification. fontSize = 14, // px - fontWeightLight = 300, - fontWeightRegular = 400, - fontWeightMedium = 500, - fontWeightBold = 600, + fontWeightLight = 200, + fontWeightRegular = 300, + fontWeightMedium = 400, + fontWeightBold = 500, // Tell Grafana-UI what's the font-size on the html element. // 16px is the default font-size used by browsers. htmlFontSize = 16, diff --git a/packages/grafana-data/src/themes/fnCreateColors.ts b/packages/grafana-data/src/themes/fnCreateColors.ts deleted file mode 100644 index f7705578cdf61..0000000000000 --- a/packages/grafana-data/src/themes/fnCreateColors.ts +++ /dev/null @@ -1,240 +0,0 @@ -import { merge } from 'lodash'; - -import { alpha, darken, emphasize, getContrastRatio, lighten } from './colorManipulator'; -import { ThemeColorsBase, ThemeColorsMode, ThemeColors, ThemeColorsInput } from './createColors'; -import { palette } from './fnPalette'; -import { ThemeRichColor } from './types'; - -interface GetRichColorProps { - color: Partial; - name: string; -} - -class FnDarkColors implements ThemeColorsBase> { - mode: ThemeColorsMode = 'dark'; - - // Used to get more white opacity colors - whiteBase = '219, 217, 215'; - - border = { - weak: `rgba(${this.whiteBase}, 0.07)`, - medium: `rgba(${this.whiteBase}, 0.15)`, - strong: `rgba(${this.whiteBase}, 0.25)`, - }; - - text = { - primary: '#DBD9D7', - secondary: '#F0E4B6', // yellow - disabled: '#9DA7B8', - link: '#F0E4B6', // yellow - maxContrast: '#F0E4B6', // yellow - }; - - primary = { - main: '#3F8367', - text: '#F0E4B6', // yellow - border: '#ffffff00', - }; - - secondary = { - main: '#F06929', - shade: '#F0692955', - text: this.text.primary, - contrastText: `rgb(${this.whiteBase})`, - border: this.border.strong, - }; - - info = this.primary; - - error = { - main: palette.redDarkMain, - text: palette.redDarkText, - }; - - success = { - main: '#4BBF73', - text: '#318B50', - }; - - warning = { - main: '#CF8E07', - text: this.text.primary, - }; - - background = { - canvas: '#312D2B', //palette.gray05, - primary: '#3B3835', //palette.gray10, - secondary: '#5E5855', //palette.gray15, - }; - - action = { - hover: `rgba(${this.whiteBase}, 0.16)`, - selected: `rgba(${this.whiteBase}, 0.12)`, - focus: `rgba(${this.whiteBase}, 0.16)`, - hoverOpacity: 0.08, - disabledText: this.text.disabled, - disabledBackground: `rgba(${this.whiteBase}, 0.04)`, - disabledOpacity: 0.38, - selectedBorder: palette.orangeDarkMain, - }; - - gradients = { - brandHorizontal: 'linear-gradient(270deg, #F55F3E 0%, #FF8833 100%)', - brandVertical: 'linear-gradient(0.01deg, #F55F3E 0.01%, #FF8833 99.99%)', - }; - - contrastThreshold = 3; - hoverFactor = 0.03; - tonalOffset = 0.15; -} - -class FnLightColors implements ThemeColorsBase> { - mode: ThemeColorsMode = 'light'; - - blackBase = '45, 51, 62'; - - primary = { - main: '#8EC4AD', - border: palette.blueLightText, - text: '#2d333e', // yellow - }; - - text = { - primary: '#2D333E', - secondary: '#2d333e', - disabled: '#9DA7B8', - link: this.primary.text, - maxContrast: palette.black, - }; - - border = { - weak: `rgba(${this.blackBase}, 0.12)`, - medium: `rgba(${this.blackBase}, 0.30)`, - strong: `rgba(${this.blackBase}, 0.40)`, - }; - - secondary = { - main: '#FC9A69', - shade: '#FC9A6990', - contrastText: `rgba(${this.blackBase}, 1)`, - text: this.text.primary, - border: this.border.strong, - }; - - info = { - main: '#64B6F7', - text: palette.blueLightText, - }; - - error = { - main: palette.redLightMain, - text: palette.redLightText, - border: palette.redLightText, - }; - - success = { - main: '#83D39E', - text: palette.greenLightText, - }; - - warning = { - main: '#EB7B18', // FN color - text: palette.orangeLightText, - }; - - background = { - canvas: '#F6F5F3', - primary: '#FDFDFC', - secondary: '#FDFDFC', - }; - - action = { - hover: `rgba(${this.blackBase}, 0.12)`, - selected: `#F27A40`, - hoverOpacity: 0.08, - focus: `rgba(${this.blackBase}, 0.12)`, - disabledBackground: `rgba(${this.blackBase}, 0.04)`, - disabledText: this.text.disabled, - disabledOpacity: 0.38, - selectedBorder: palette.orangeLightMain, - }; - - gradients = { - brandHorizontal: 'linear-gradient(90deg, #FF8833 0%, #F53E4C 100%)', - brandVertical: 'linear-gradient(0.01deg, #F53E4C -31.2%, #FF8833 113.07%)', - }; - - contrastThreshold = 3; - hoverFactor = 0.03; - tonalOffset = 0.2; -} - -// NOTE: createFnColors used in create-mfe to create grafana theme2 colors -export function createFnColors(colors: ThemeColorsInput): ThemeColors { - const dark = new FnDarkColors(); - const light = new FnLightColors(); - - const base = (colors.mode ?? 'dark') === 'dark' ? dark : light; - - const { - primary = base.primary, - secondary = base.secondary, - info = base.info, - warning = base.warning, - success = base.success, - error = base.error, - tonalOffset = base.tonalOffset, - hoverFactor = base.hoverFactor, - contrastThreshold = base.contrastThreshold, - ...other - } = colors; - - function getContrastText(background: string, threshold: number = contrastThreshold) { - const contrastText = - getContrastRatio(dark.text.maxContrast, background, base.background.primary) >= threshold - ? dark.text.maxContrast - : light.text.maxContrast; - // todo, need color framework - return contrastText; - } - - const getRichColor = ({ color, name }: GetRichColorProps): ThemeRichColor => { - color = { ...color, name }; - if (!color.main) { - throw new Error(`Missing main color for ${name}`); - } - if (!color.text) { - color.text = color.main; - } - if (!color.border) { - color.border = color.text; - } - if (!color.shade) { - color.shade = base.mode === 'light' ? darken(color.main, tonalOffset) : lighten(color.main, tonalOffset); - } - if (!color.transparent) { - color.transparent = base.mode === 'light' ? alpha(color.main, 0.08) : alpha(color.main, 0.15); - } - if (!color.contrastText) { - color.contrastText = getContrastText(color.main); - } - return color as ThemeRichColor; - }; - - return merge( - { - ...base, - primary: getRichColor({ color: primary, name: 'primary' }), - secondary: getRichColor({ color: secondary, name: 'secondary' }), - info: getRichColor({ color: info, name: 'info' }), - error: getRichColor({ color: error, name: 'error' }), - success: getRichColor({ color: success, name: 'success' }), - warning: getRichColor({ color: warning, name: 'warning' }), - getContrastText, - emphasize: (color: string, factor?: number) => { - return emphasize(color, factor ?? hoverFactor); - }, - }, - other - ); -} diff --git a/packages/grafana-data/src/themes/fnPalette.ts b/packages/grafana-data/src/themes/fnPalette.ts deleted file mode 100644 index 48fcd7751fa9f..0000000000000 --- a/packages/grafana-data/src/themes/fnPalette.ts +++ /dev/null @@ -1,42 +0,0 @@ -export const palette = { - white: '#FFFFFF', - black: '#000000', - - gray25: '#2c3235', - gray15: '#22252b', - gray10: '#181b1f', - gray05: '#111217', - - darkLayer0: '#18181A', - darkLayer1: '#212124', - darkLayer2: '#2a2a2f', - - darkBorder1: '#34343B', - darkBorder2: '#64646B', - - // Dashboard bg / layer 0 (light theme) - gray90: '#F4F5F5', - // Card bg / layer 1 - gray100: '#F4F5F5', - // divider line - gray80: '#D0D1D3', - lightBorder1: '#E4E7E7', - - blueDarkMain: '#3D71D9', - blueDarkText: '#6E9FFF', - redDarkMain: '#D9534F', // FN - same as in light, final color to be agreed - redDarkText: '#13161B', // FN - same as in light, final color to be agreed - greenDarkMain: '#1A7F4B', - greenDarkText: '#6CCF8E', - orangeDarkMain: '#F5B73D', - orangeDarkText: '#F8D06B', - - blueLightMain: '#3871DC', - blueLightText: '#1F62E0', - redLightMain: '#D9534F', // FN - redLightText: '#13161B', // FN - greenLightMain: '#1B855E', - greenLightText: '#0A764E', - orangeLightMain: '#FAD34A', - orangeLightText: '#8A6C00', -}; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx index 0a8c98b8f2196..b814bca8c494e 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx @@ -57,7 +57,7 @@ export const TimePickerFooter = (props: Props) => { return null; } - const fnColor = theme.isDark ? '#8EC4AD' : '#3A785E'; + const fnColor = theme.isDark ? '#8EC4AD' : '#344054'; return (
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts index 7dacd1b250324..69907e1d2e9e5 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts @@ -2,7 +2,7 @@ import { css, CSSObject } from '@emotion/react'; import { GrafanaTheme2, ThemeTypographyVariant } from '@grafana/data'; -import { getFocusStyles } from '../mixins'; +// import { getFocusStyles } from '../mixins'; export function getElementStyles(theme: GrafanaTheme2) { return css({ @@ -10,9 +10,9 @@ export function getElementStyles(theme: GrafanaTheme2) { MsOverflowStyle: 'scrollbar', WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)', height: '100%', - fontFamily: theme.typography.fontFamily, - lineHeight: theme.typography.body.lineHeight, - fontKerning: 'normal', + // fontFamily: theme.typography.fontFamily, + // lineHeight: theme.typography.body.lineHeight, + // fontKerning: 'normal', }, ':root': { @@ -28,129 +28,129 @@ export function getElementStyles(theme: GrafanaTheme2) { ...getVariantStyles(theme.typography.body), }, - 'h1, .h1': getVariantStyles(theme.typography.h1), - 'h2, .h2': getVariantStyles(theme.typography.h2), - 'h3, .h3': getVariantStyles(theme.typography.h3), - 'h4, .h4': getVariantStyles(theme.typography.h4), - 'h5, .h5': getVariantStyles(theme.typography.h5), - 'h6, .h6': getVariantStyles(theme.typography.h6), - - p: { - margin: theme.spacing(0, 0, 2), - }, - - button: { - letterSpacing: theme.typography.body.letterSpacing, - - '&:focus-visible': getFocusStyles(theme), - '&:focus': { - outline: 'none', - }, - }, - - // Ex: 14px base font * 85% = about 12px - small: { - fontSize: theme.typography.bodySmall.fontSize, - }, - - 'b, strong': { - fontWeight: theme.typography.fontWeightMedium, - }, - - em: { - fontStyle: 'italic', - color: theme.colors.text.primary, - }, - - cite: { - fontStyle: 'normal', - }, - - // Utility classes - '.muted': { - color: theme.colors.text.secondary, - }, - - 'a.muted:hover, a.muted:focus': { - color: theme.colors.text.primary, - }, - - '.text-warning': { - color: theme.colors.warning.text, - - '&:hover, &:focus': { - color: theme.colors.emphasize(theme.colors.warning.text, 0.15), - }, - }, - - '.text-error': { - color: theme.colors.error.text, - - '&:hover, &:focus': { - color: theme.colors.emphasize(theme.colors.error.text, 0.15), - }, - }, - - '.text-success': { - color: '$success-text-color', - - '&:hover, &:focus': { - color: theme.colors.emphasize(theme.colors.success.text, 0.15), - }, - }, - - a: { - cursor: 'pointer', - color: theme.colors.text.primary, - textDecoration: 'none', - - '&:focus': { - outline: 'none', - }, - - '&:focus-visible': getFocusStyles(theme), - - '&:[disabled]': { - cursor: 'default', - // Need type assertion here due to the use of !important - // see https://github.com/frenic/csstype/issues/114#issuecomment-697201978 - // eslint-disable-next-line @typescript-eslint/consistent-type-assertions - pointerEvents: 'none !important' as 'none', - }, - }, - - '.text-link': { - textDecoration: 'underline', - }, - - '.text-left': { - textAlign: 'left', - }, - - '.text-right': { - textAlign: 'right', - }, - - '.text-center': { - textAlign: 'center', - }, - - '.highlight-search-match': { - background: theme.components.textHighlight.background, - color: theme.components.textHighlight.text, - padding: 0, - }, + // 'h1, .h1': getVariantStyles(theme.typography.h1), + // 'h2, .h2': getVariantStyles(theme.typography.h2), + // 'h3, .h3': getVariantStyles(theme.typography.h3), + // 'h4, .h4': getVariantStyles(theme.typography.h4), + // 'h5, .h5': getVariantStyles(theme.typography.h5), + // 'h6, .h6': getVariantStyles(theme.typography.h6), + + // p: { + // margin: theme.spacing(0, 0, 2), + // }, + + // button: { + // letterSpacing: theme.typography.body.letterSpacing, + + // '&:focus-visible': getFocusStyles(theme), + // '&:focus': { + // outline: 'none', + // }, + // }, + + // // Ex: 14px base font * 85% = about 12px + // small: { + // fontSize: theme.typography.bodySmall.fontSize, + // }, + + // 'b, strong': { + // fontWeight: theme.typography.fontWeightMedium, + // }, + + // em: { + // fontStyle: 'italic', + // color: theme.colors.text.primary, + // }, + + // cite: { + // fontStyle: 'normal', + // }, + + // // Utility classes + // '.muted': { + // color: theme.colors.text.secondary, + // }, + + // 'a.muted:hover, a.muted:focus': { + // color: theme.colors.text.primary, + // }, + + // '.text-warning': { + // color: theme.colors.warning.text, + + // '&:hover, &:focus': { + // color: theme.colors.emphasize(theme.colors.warning.text, 0.15), + // }, + // }, + + // '.text-error': { + // color: theme.colors.error.text, + + // '&:hover, &:focus': { + // color: theme.colors.emphasize(theme.colors.error.text, 0.15), + // }, + // }, + + // '.text-success': { + // color: '$success-text-color', + + // '&:hover, &:focus': { + // color: theme.colors.emphasize(theme.colors.success.text, 0.15), + // }, + // }, + + // a: { + // cursor: 'pointer', + // color: theme.colors.text.primary, + // textDecoration: 'none', + + // '&:focus': { + // outline: 'none', + // }, + + // '&:focus-visible': getFocusStyles(theme), + + // '&:[disabled]': { + // cursor: 'default', + // // Need type assertion here due to the use of !important + // // see https://github.com/frenic/csstype/issues/114#issuecomment-697201978 + // // eslint-disable-next-line @typescript-eslint/consistent-type-assertions + // pointerEvents: 'none !important' as 'none', + // }, + // }, + + // '.text-link': { + // textDecoration: 'underline', + // }, + + // '.text-left': { + // textAlign: 'left', + // }, + + // '.text-right': { + // textAlign: 'right', + // }, + + // '.text-center': { + // textAlign: 'center', + // }, + + // '.highlight-search-match': { + // background: theme.components.textHighlight.background, + // color: theme.components.textHighlight.text, + // padding: 0, + // }, }); } export function getVariantStyles(variant: ThemeTypographyVariant): CSSObject { return { margin: 0, - fontSize: variant.fontSize, - lineHeight: variant.lineHeight, - fontWeight: variant.fontWeight, - letterSpacing: variant.letterSpacing, - fontFamily: variant.fontFamily, + // fontSize: variant.fontSize, + // lineHeight: variant.lineHeight, + // fontWeight: variant.fontWeight, + // letterSpacing: variant.letterSpacing, + // fontFamily: variant.fontFamily, marginBottom: '0.45em', }; } diff --git a/packages/grafana-ui/src/themes/GlobalStyles/forms.ts b/packages/grafana-ui/src/themes/GlobalStyles/forms.ts index c3a87d89adf8e..4cea02929cfa0 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/forms.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/forms.ts @@ -4,28 +4,25 @@ import { GrafanaTheme2 } from '@grafana/data'; export function getFormElementStyles(theme: GrafanaTheme2) { return css({ - 'input, button, select, textarea': { - fontFamily: theme.typography.body.fontFamily, - fontSize: theme.typography.body.fontSize, - fontWeight: theme.typography.body.fontWeight, - lineHeight: theme.typography.body.lineHeight, - }, - - 'input, select': { - backgroundColor: theme.components.input.background, - color: theme.components.input.text, - border: 'none', - boxShadow: 'none', - }, - - textarea: { - height: 'auto', - }, - + // 'input, button, select, textarea': { + // fontFamily: theme.typography.body.fontFamily, + // fontSize: theme.typography.body.fontSize, + // fontWeight: theme.typography.body.fontWeight, + // lineHeight: theme.typography.body.lineHeight, + // }, + // 'input, select': { + // backgroundColor: theme.components.input.background, + // color: theme.components.input.text, + // border: 'none', + // boxShadow: 'none', + // }, + // textarea: { + // height: 'auto', + // }, // Reset width of input images, buttons, radios, checkboxes - "input[type='file'], input[type='image'], input[type='submit'], input[type='reset'], input[type='button'], input[type='radio'], input[type='checkbox']": - { - width: 'auto', // Override of generic input selector - }, + // "input[type='file'], input[type='image'], input[type='submit'], input[type='reset'], input[type='button'], input[type='radio'], input[type='checkbox']": + // { + // width: 'auto', // Override of generic input selector + // }, }); } diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index dcb5dee1935e1..9bd69cd87e4c8 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -75,10 +75,10 @@ $grid-breakpoints: ( // Define the maximum width of \`.container\` for different screen sizes. $container-max-widths: ( - sm: 576px, - md: 720px, - lg: 940px, - xl: 1080px, + sm: 640px, + md: 768px, + lg: 1024px, + xl: 1536px, ) !default; // Grid columns diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index f5490b72c0bc7..78fb03350cacf 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -31,8 +31,8 @@ const theme: GrafanaThemeCommons = { name: 'Grafana Default', typography: { fontFamily: { - sansSerif: '"Inter", "Helvetica", "Arial", sans-serif', - monospace: "'Roboto Mono', monospace", + sansSerif: '"Poppins", Inter, Satoshi, sans-serif', + monospace: '"SatoshiLight", "FigtreeLight", monospace', }, size: { base: '14px', diff --git a/public/app/core/components/TimePicker/TimePickerWithHistory.tsx b/public/app/core/components/TimePicker/TimePickerWithHistory.tsx index e41773dae49c2..24734996ff325 100644 --- a/public/app/core/components/TimePicker/TimePickerWithHistory.tsx +++ b/public/app/core/components/TimePicker/TimePickerWithHistory.tsx @@ -29,7 +29,7 @@ const FnText: React.FC = () => { const FN_TEXT_STYLE: CSSProperties = { fontWeight: 700, fontSize: 14, marginLeft: 8 }; - return <>{FNDashboard ? UTC : ''}; + return <>{FNDashboard ? UTC : ''}; }; export const TimePickerWithHistory: FC = (props) => ( diff --git a/public/app/fn-app/create-mfe.ts b/public/app/fn-app/create-mfe.ts index 1741114d0fc64..68c666ad7db32 100644 --- a/public/app/fn-app/create-mfe.ts +++ b/public/app/fn-app/create-mfe.ts @@ -9,7 +9,7 @@ import React, { ComponentType } from 'react'; import ReactDOM from 'react-dom'; import { createTheme, GrafanaThemeType } from '@grafana/data'; -import { createFnColors } from '@grafana/data/src/themes/fnCreateColors'; +import { createColors } from '@grafana/data/src/themes/createColors'; import { GrafanaTheme2 } from '@grafana/data/src/themes/types'; import { ThemeChangedEvent } from '@grafana/runtime'; import { GrafanaBootConfig } from '@grafana/runtime/src/config'; @@ -113,7 +113,7 @@ class createMfe { }, }); - config.theme2.colors = createFnColors({ mode }); + config.theme2.colors = createColors({ mode }); config.theme2.v1 = getTheme(mode); diff --git a/public/app/fn_dashboard.ts b/public/app/fn_dashboard.ts index 3110e1b907f72..04a8957f10e18 100644 --- a/public/app/fn_dashboard.ts +++ b/public/app/fn_dashboard.ts @@ -6,10 +6,21 @@ config.featureToggles = { ...config.featureToggles, publicDashboards: true, }; +interface FnData { + themePaths: { + light: string; + dark: string; + }; +} + +declare global { + interface Window { + fnData: FnData; + } +} config.isPublicDashboardView = false; -// eslint-disable-next-line -config.bootData.themePaths = (window as any).fnData?.themePaths; +config.bootData.themePaths = window.fnData.themePaths; export const { bootstrap, mount, unmount, update, afterMount, afterUnmount, beforeLoad, beforeMount, beforeUnmount } = createMfe.create(FNDashboard); diff --git a/public/microfrontends/fn_dashboard/index.html b/public/microfrontends/fn_dashboard/index.html index 05b384dd80f9c..f3d371e5542eb 100644 --- a/public/microfrontends/fn_dashboard/index.html +++ b/public/microfrontends/fn_dashboard/index.html @@ -1,35 +1,25 @@ - + - - FluxNinja Microfrontend + + CodeRabbit Micro-frontend - - +
- - + - + diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss index 1aa387bbb5ca1..5edafebf856f9 100644 --- a/public/sass/_variables.generated.scss +++ b/public/sass/_variables.generated.scss @@ -67,7 +67,7 @@ $spacers: ( $grid-breakpoints: ( xs: 0px, sm: 544px, - md: 769px, + md: 768px, lg: 992px, xl: 1200px, ) !default; @@ -77,10 +77,10 @@ $grid-breakpoints: ( // Define the maximum width of `.container` for different screen sizes. $container-max-widths: ( - sm: 576px, - md: 720px, - lg: 940px, - xl: 1080px, + sm: 640px, + md: 768px, + lg: 1024px, + xl: 1536px, ) !default; // Grid columns @@ -114,8 +114,8 @@ $font-size-xs: 10px !default; $line-height-base: 1.5714285714285714 !default; -$font-weight-regular: 400 !default; -$font-weight-semi-bold: 500 !default; +$font-weight-regular: 300 !default; +$font-weight-semi-bold: 400 !default; $font-size-h1: 1.75rem !default; $font-size-h2: 1.5rem !default; @@ -177,7 +177,7 @@ $zindex-typeahead: 1030; $btn-padding-x: 14px !default; $btn-padding-y: 0 !default; $btn-line-height: $line-height-base; -$btn-font-weight: 500 !default; +$btn-font-weight: 400 !default; $btn-padding-x-sm: 7px !default; $btn-padding-y-sm: 4px !default; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index e3e91eff5e1bf..8142fbd48af74 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -57,9 +57,9 @@ $gray-7: #fbfbfb; $white: #ffffff; -$layer0: #F6F5F3; -$layer1: #FDFDFC; -$layer2: #FDFDFC; +$layer0: #FAFAFA; +$layer1: #FFFFFF; +$layer2: #FAFAFA; $divider: rgba(45, 51, 62, 0.12); $border0: rgba(45, 51, 62, 0.12); @@ -93,9 +93,9 @@ $critical: #CF0E5B; // Scaffolding // ------------------------- -$body-bg: #F6F5F3; -$page-bg: #F6F5F3; -$dashboard-bg: #F6F5F3; +$body-bg: #FAFAFA; +$page-bg: #FAFAFA; +$dashboard-bg: #FAFAFA; $text-color: #101828; $text-color-strong: #000000; @@ -128,30 +128,30 @@ $hr-border-color: $gray-4 !default; // Panel // ------------------------- -$panel-bg: #FDFDFC; +$panel-bg: #FFFFFF; $panel-border: 1px solid rgba(45, 51, 62, 0.12); $panel-header-hover-bg: rgba(45, 51, 62, 0.12); $panel-box-shadow: none; $panel-corner: $panel-bg; // Page header -$page-header-bg: #F6F5F3; +$page-header-bg: #FAFAFA; $page-header-shadow: inset 0px -3px 10px $gray-6; -$page-header-border-color: #F6F5F3; +$page-header-border-color: #FAFAFA; $divider-border-color: $gray-2; // Graphite Target Editor -$tight-form-func-bg: #FDFDFC; -$tight-form-func-highlight-bg: #f9f9f6; +$tight-form-func-bg: #FAFAFA; +$tight-form-func-highlight-bg: #f5f5f5; -$modal-backdrop-bg: #FDFDFC; +$modal-backdrop-bg: #FFFFFF; $code-tag-bg: $gray-6; $code-tag-border: $gray-4; // cards -$card-background: #FDFDFC; -$card-background-hover: #FDFDFC; +$card-background: #FAFAFA; +$card-background-hover: #FAFAFA; $card-shadow: none; // Lists @@ -168,10 +168,10 @@ $scrollbarBorder: $gray-7; // Tables // ------------------------- -$table-bg-accent: #FDFDFC; +$table-bg-accent: #FAFAFA; $table-border: rgba(45, 51, 62, 0.30); -$table-bg-odd: rgb(247, 247, 246); -$table-bg-hover: rgb(240, 240, 239); +$table-bg-odd: rgb(249, 249, 249); +$table-bg-hover: rgb(242, 242, 242); // Buttons // ------------------------- @@ -207,7 +207,7 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6); // Forms // ------------------------- -$input-bg: #FDFDFC; +$input-bg: #FFFFFF; $input-bg-disabled: rgba(45, 51, 62, 0.04); $input-color: #101828; @@ -216,7 +216,7 @@ $input-box-shadow: none; $input-border-focus: #5794f2; $input-box-shadow-focus: #5794f2; $input-color-placeholder: #9DA7B8; -$input-label-bg: #FDFDFC; +$input-label-bg: #FAFAFA; $input-color-select-arrow: #7b8087; // search @@ -229,7 +229,7 @@ $typeahead-selected-color: $yellow; // Dropdowns // ------------------------- -$dropdownBackground: #FDFDFC; +$dropdownBackground: #FFFFFF; $dropdownBorder: rgba(45, 51, 62, 0.12); $dropdownDividerTop: rgba(45, 51, 62, 0.12); $dropdownDividerBottom: rgba(45, 51, 62, 0.12); @@ -263,7 +263,7 @@ $side-menu-header-color: #e9edf2; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: #FDFDFC; +$menu-dropdown-bg: #FFFFFF; $menu-dropdown-hover-bg: rgba(45, 51, 62, 0.12); $menu-dropdown-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18); @@ -283,16 +283,16 @@ $alert-warning-bg: #F3D086; $alert-info-bg: #F3D086; // Tooltips and popovers -$tooltipBackground: #FDFDFC; +$tooltipBackground: #FAFAFA; $tooltipColor: #101828; -$tooltipArrowColor: #FDFDFC; +$tooltipArrowColor: #FAFAFA; $tooltipBackgroundError: #E0226E; $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2); -$popover-bg: #FDFDFC; +$popover-bg: #FFFFFF; $popover-color: #101828; $popover-border-color: rgba(45, 51, 62, 0.12); -$popover-header-bg: #FDFDFC; +$popover-header-bg: #FAFAFA; $popover-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18); $graph-tooltip-bg: $gray-5; @@ -305,7 +305,7 @@ $popover-error-bg: $btn-danger-bg; $popover-help-bg: $tooltipBackground; $popover-help-color: $tooltipColor; -$popover-code-bg: #FDFDFC; +$popover-code-bg: #FFFFFF; $popover-code-boxshadow: 0 0 5px $gray60; // images @@ -338,9 +338,9 @@ $diff-label-bg: rgba(45, 51, 62, 0.12); $diff-label-fg: $gray-2; $diff-arrow-color: $dark-2; -$diff-group-bg: #FDFDFC; +$diff-group-bg: #FAFAFA; -$diff-json-bg: #FDFDFC; +$diff-json-bg: #FAFAFA; $diff-json-fg: #101828; $diff-json-added: $blue-shade; diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index 16d7b94144945..b1ed0b9114360 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -153,7 +153,6 @@ &:focus { color: $gray-1; background-color: transparent; - border-color: $gray-1; } } diff --git a/public/sass/mixins/_buttons.scss b/public/sass/mixins/_buttons.scss index 7fec07c19ed73..275d2c0073b64 100644 --- a/public/sass/mixins/_buttons.scss +++ b/public/sass/mixins/_buttons.scss @@ -56,18 +56,6 @@ &.focus { color: $white; background-color: color.adjust($color, $lightness: -17%); - border-color: color.adjust($color, $lightness: -25%); - } - } - - &.disabled, - &:disabled { - &:focus, - &.focus { - border-color: color.adjust($color, $lightness: 20%); - } - @include hover { - border-color: color.adjust($color, $lightness: 20%); } } } diff --git a/public/views/index-microfrontend-template.html b/public/views/index-microfrontend-template.html index a6205f112bad9..2f4c75e9c0d2a 100644 --- a/public/views/index-microfrontend-template.html +++ b/public/views/index-microfrontend-template.html @@ -1,20 +1,18 @@ - + - - FluxNinja Microfrontend + + CodeRabbit Micro-frontend - - +
- @@ -27,11 +25,7 @@ crossorigin="<%= webpackConfig.output.crossOriginLoading %>" > <% } else { %> - + <% } %> <% } %> diff --git a/yarn.lock b/yarn.lock index 0bcb60e1505ed..d5f424bcaaf62 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11079,6 +11079,15 @@ __metadata: languageName: node linkType: hard +"@types/postcss-prefix-selector@npm:^1": + version: 1.16.3 + resolution: "@types/postcss-prefix-selector@npm:1.16.3" + dependencies: + postcss: ^8.4.27 + checksum: c0ece88bf7f5adfdcbf1f44436ce3e78d5fe0431fd84dce4040e53c03af2ca71fd3f1a36d127e1402c085c5507d5403fe461577670252c311556c102d7dc948d + languageName: node + linkType: hard + "@types/pretty-hrtime@npm:^1.0.0": version: 1.0.1 resolution: "@types/pretty-hrtime@npm:1.0.1" @@ -19832,6 +19841,7 @@ __metadata: "@types/ol-ext": "npm:@siedlerchr/types-ol-ext@3.2.0" "@types/papaparse": 5.3.7 "@types/pluralize": ^0.0.29 + "@types/postcss-prefix-selector": ^1 "@types/prismjs": 1.26.0 "@types/react": 18.2.28 "@types/react-beautiful-dnd": 13.1.3 @@ -19978,6 +19988,8 @@ __metadata: pluralize: ^8.0.0 postcss: 8.4.21 postcss-loader: 7.3.3 + postcss-prefix-selector: ^1.16.1 + postcss-prefixwrap: ^1.49.0 postcss-reporter: 7.0.5 postcss-scss: 4.0.6 prettier: 3.0.0 @@ -24543,6 +24555,15 @@ __metadata: languageName: node linkType: hard +"nanoid@npm:^3.3.7": + version: 3.3.7 + resolution: "nanoid@npm:3.3.7" + bin: + nanoid: bin/nanoid.cjs + checksum: d36c427e530713e4ac6567d488b489a36582ef89da1d6d4e3b87eded11eb10d7042a877958c6f104929809b2ab0bafa17652b076cdf84324aa75b30b722204f2 + languageName: node + linkType: hard + "natural-compare-lite@npm:^1.4.0": version: 1.4.0 resolution: "natural-compare-lite@npm:1.4.0" @@ -25885,6 +25906,13 @@ __metadata: languageName: node linkType: hard +"picocolors@npm:^1.0.1": + version: 1.0.1 + resolution: "picocolors@npm:1.0.1" + checksum: fa68166d1f56009fc02a34cdfd112b0dd3cf1ef57667ac57281f714065558c01828cdf4f18600ad6851cbe0093952ed0660b1e0156bddf2184b6aaf5817553a5 + languageName: node + linkType: hard + "picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" @@ -26343,6 +26371,24 @@ __metadata: languageName: node linkType: hard +"postcss-prefix-selector@npm:^1.16.1": + version: 1.16.1 + resolution: "postcss-prefix-selector@npm:1.16.1" + peerDependencies: + postcss: ">4 <9" + checksum: e8f436b6ce92393714fdf9e6f133cc6543308632f43a79bfd70e34a64f46056ddac98d45f686aace3772c039c5501796168de2e76c898e93d3d89e02f6e5f48d + languageName: node + linkType: hard + +"postcss-prefixwrap@npm:^1.49.0": + version: 1.49.0 + resolution: "postcss-prefixwrap@npm:1.49.0" + peerDependencies: + postcss: "*" + checksum: 29a0e5dfa28aee072a62737f9e7e9af0631ea9a2eb956c6c6bf1717969468c1267ccdac1614386af83c43773429c8830b942be979ab82c4099d7726ce9fc3a35 + languageName: node + linkType: hard + "postcss-reduce-initial@npm:^6.0.0": version: 6.0.0 resolution: "postcss-reduce-initial@npm:6.0.0" @@ -26474,6 +26520,17 @@ __metadata: languageName: node linkType: hard +"postcss@npm:^8.4.27": + version: 8.4.39 + resolution: "postcss@npm:8.4.39" + dependencies: + nanoid: ^3.3.7 + picocolors: ^1.0.1 + source-map-js: ^1.2.0 + checksum: 14b130c90f165961772bdaf99c67f907f3d16494adf0868e57ef68baa67e0d1f6762db9d41ab0f4d09bab6fb7888588dba3596afd1a235fd5c2d43fba7006ac6 + languageName: node + linkType: hard + "preceptor-core@npm:~0.10.0": version: 0.10.1 resolution: "preceptor-core@npm:0.10.1" @@ -29985,6 +30042,13 @@ __metadata: languageName: node linkType: hard +"source-map-js@npm:^1.2.0": + version: 1.2.0 + resolution: "source-map-js@npm:1.2.0" + checksum: 791a43306d9223792e84293b00458bf102a8946e7188f3db0e4e22d8d530b5f80a4ce468eb5ec0bf585443ad55ebbd630bf379c98db0b1f317fd902500217f97 + languageName: node + linkType: hard + "source-map-resolve@npm:^0.6.0": version: 0.6.0 resolution: "source-map-resolve@npm:0.6.0" From 8c75e4f40488dcb4eaca3c50662f62e082ca7e73 Mon Sep 17 00:00:00 2001 From: Gurinder Singh Date: Thu, 11 Jul 2024 21:26:55 -0400 Subject: [PATCH 4/5] fixes --- package.json | 3 - .../grafana-data/src/themes/createColors.ts | 4 +- .../CustomScrollbar/CustomScrollbar.tsx | 2 +- .../DateTimePickers/TimeRangePicker.tsx | 34 +-- .../src/components/Portal/Portal.tsx | 7 +- .../ToolbarButton/ToolbarButton.tsx | 2 +- .../src/themes/GlobalStyles/elements.ts | 242 +++++++++--------- .../src/themes/GlobalStyles/forms.ts | 39 +-- .../dashboard/containers/DashboardPage.tsx | 2 +- .../fn-app/fn-dashboard-page/fn-dashboard.tsx | 12 +- public/microfrontends/fn_dashboard/index.html | 6 +- public/sass/_variables.light.generated.scss | 32 +-- .../views/index-microfrontend-template.html | 2 +- yarn.lock | 64 ----- 14 files changed, 196 insertions(+), 255 deletions(-) diff --git a/package.json b/package.json index 9707bf9ee1d8f..1df6c389fb190 100644 --- a/package.json +++ b/package.json @@ -146,7 +146,6 @@ "@types/ol-ext": "npm:@siedlerchr/types-ol-ext@3.2.0", "@types/papaparse": "5.3.7", "@types/pluralize": "^0.0.29", - "@types/postcss-prefix-selector": "^1", "@types/prismjs": "1.26.0", "@types/react": "18.2.28", "@types/react-beautiful-dnd": "13.1.3", @@ -373,8 +372,6 @@ "ol-ext": "4.0.6", "papaparse": "5.4.1", "pluralize": "^8.0.0", - "postcss-prefix-selector": "^1.16.1", - "postcss-prefixwrap": "^1.49.0", "prismjs": "1.29.0", "prop-types": "15.8.1", "pseudoizer": "^0.1.0", diff --git a/packages/grafana-data/src/themes/createColors.ts b/packages/grafana-data/src/themes/createColors.ts index 2a45494a2a2bb..6a7f9a5175653 100644 --- a/packages/grafana-data/src/themes/createColors.ts +++ b/packages/grafana-data/src/themes/createColors.ts @@ -220,8 +220,8 @@ class LightColors implements ThemeColorsBase> { }; background = { - canvas: '#FAFAFA', - primary: '#FFFFFF', + primary: '#FAFAFA', + canvas: '#FFFFFF', secondary: '#FAFAFA', }; diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx index a11ca23fb94b9..c202558e856a7 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx +++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx @@ -116,7 +116,7 @@ export const CustomScrollbar = ({ passedProps.style['WebkitOverflowScrolling'] = 'auto'; } - return
; + return
; }, []); const onScrollStop = useCallback(() => { diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx index b3423c7115c52..cd876eb52345f 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx @@ -111,7 +111,11 @@ export function TimeRangePicker(props: TimeRangePickerProps) { /> )} - } placement="bottom" interactive> + } + placement="bottom-start" + interactive + > )} - - - + {/* */} + + {/* */} ); } TimeRangePicker.displayName = 'TimeRangePicker'; -const ZoomOutTooltip = () => ( - <> - - Time range zoom out
CTRL+Z - - -); +// const ZoomOutTooltip = () => ( +// +// Time range zoom out
CTRL+Z +// +// ); export const TimePickerTooltip = ({ timeRange, timeZone }: { timeRange: TimeRange; timeZone?: TimeZone }) => { const styles = useStyles2(getLabelStyles); diff --git a/packages/grafana-ui/src/components/Portal/Portal.tsx b/packages/grafana-ui/src/components/Portal/Portal.tsx index 0e00c7b202519..6e39941f21582 100644 --- a/packages/grafana-ui/src/components/Portal/Portal.tsx +++ b/packages/grafana-ui/src/components/Portal/Portal.tsx @@ -36,7 +36,12 @@ export function Portal(props: PropsWithChildren) { }; }, [portalRoot]); - return ReactDOM.createPortal(
{children}
, node.current); + return ReactDOM.createPortal( +
+ {children} +
, + node.current + ); } /** @internal */ diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx index 5e44c91e7bfd5..89ff1cc55cc70 100644 --- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx +++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx @@ -102,7 +102,7 @@ export const ToolbarButton = forwardRef( ); return tooltip ? ( - + {body} ) : ( diff --git a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts index 69907e1d2e9e5..7dacd1b250324 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts @@ -2,7 +2,7 @@ import { css, CSSObject } from '@emotion/react'; import { GrafanaTheme2, ThemeTypographyVariant } from '@grafana/data'; -// import { getFocusStyles } from '../mixins'; +import { getFocusStyles } from '../mixins'; export function getElementStyles(theme: GrafanaTheme2) { return css({ @@ -10,9 +10,9 @@ export function getElementStyles(theme: GrafanaTheme2) { MsOverflowStyle: 'scrollbar', WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)', height: '100%', - // fontFamily: theme.typography.fontFamily, - // lineHeight: theme.typography.body.lineHeight, - // fontKerning: 'normal', + fontFamily: theme.typography.fontFamily, + lineHeight: theme.typography.body.lineHeight, + fontKerning: 'normal', }, ':root': { @@ -28,129 +28,129 @@ export function getElementStyles(theme: GrafanaTheme2) { ...getVariantStyles(theme.typography.body), }, - // 'h1, .h1': getVariantStyles(theme.typography.h1), - // 'h2, .h2': getVariantStyles(theme.typography.h2), - // 'h3, .h3': getVariantStyles(theme.typography.h3), - // 'h4, .h4': getVariantStyles(theme.typography.h4), - // 'h5, .h5': getVariantStyles(theme.typography.h5), - // 'h6, .h6': getVariantStyles(theme.typography.h6), - - // p: { - // margin: theme.spacing(0, 0, 2), - // }, - - // button: { - // letterSpacing: theme.typography.body.letterSpacing, - - // '&:focus-visible': getFocusStyles(theme), - // '&:focus': { - // outline: 'none', - // }, - // }, - - // // Ex: 14px base font * 85% = about 12px - // small: { - // fontSize: theme.typography.bodySmall.fontSize, - // }, - - // 'b, strong': { - // fontWeight: theme.typography.fontWeightMedium, - // }, - - // em: { - // fontStyle: 'italic', - // color: theme.colors.text.primary, - // }, - - // cite: { - // fontStyle: 'normal', - // }, - - // // Utility classes - // '.muted': { - // color: theme.colors.text.secondary, - // }, - - // 'a.muted:hover, a.muted:focus': { - // color: theme.colors.text.primary, - // }, - - // '.text-warning': { - // color: theme.colors.warning.text, - - // '&:hover, &:focus': { - // color: theme.colors.emphasize(theme.colors.warning.text, 0.15), - // }, - // }, - - // '.text-error': { - // color: theme.colors.error.text, - - // '&:hover, &:focus': { - // color: theme.colors.emphasize(theme.colors.error.text, 0.15), - // }, - // }, - - // '.text-success': { - // color: '$success-text-color', - - // '&:hover, &:focus': { - // color: theme.colors.emphasize(theme.colors.success.text, 0.15), - // }, - // }, - - // a: { - // cursor: 'pointer', - // color: theme.colors.text.primary, - // textDecoration: 'none', - - // '&:focus': { - // outline: 'none', - // }, - - // '&:focus-visible': getFocusStyles(theme), - - // '&:[disabled]': { - // cursor: 'default', - // // Need type assertion here due to the use of !important - // // see https://github.com/frenic/csstype/issues/114#issuecomment-697201978 - // // eslint-disable-next-line @typescript-eslint/consistent-type-assertions - // pointerEvents: 'none !important' as 'none', - // }, - // }, - - // '.text-link': { - // textDecoration: 'underline', - // }, - - // '.text-left': { - // textAlign: 'left', - // }, - - // '.text-right': { - // textAlign: 'right', - // }, - - // '.text-center': { - // textAlign: 'center', - // }, - - // '.highlight-search-match': { - // background: theme.components.textHighlight.background, - // color: theme.components.textHighlight.text, - // padding: 0, - // }, + 'h1, .h1': getVariantStyles(theme.typography.h1), + 'h2, .h2': getVariantStyles(theme.typography.h2), + 'h3, .h3': getVariantStyles(theme.typography.h3), + 'h4, .h4': getVariantStyles(theme.typography.h4), + 'h5, .h5': getVariantStyles(theme.typography.h5), + 'h6, .h6': getVariantStyles(theme.typography.h6), + + p: { + margin: theme.spacing(0, 0, 2), + }, + + button: { + letterSpacing: theme.typography.body.letterSpacing, + + '&:focus-visible': getFocusStyles(theme), + '&:focus': { + outline: 'none', + }, + }, + + // Ex: 14px base font * 85% = about 12px + small: { + fontSize: theme.typography.bodySmall.fontSize, + }, + + 'b, strong': { + fontWeight: theme.typography.fontWeightMedium, + }, + + em: { + fontStyle: 'italic', + color: theme.colors.text.primary, + }, + + cite: { + fontStyle: 'normal', + }, + + // Utility classes + '.muted': { + color: theme.colors.text.secondary, + }, + + 'a.muted:hover, a.muted:focus': { + color: theme.colors.text.primary, + }, + + '.text-warning': { + color: theme.colors.warning.text, + + '&:hover, &:focus': { + color: theme.colors.emphasize(theme.colors.warning.text, 0.15), + }, + }, + + '.text-error': { + color: theme.colors.error.text, + + '&:hover, &:focus': { + color: theme.colors.emphasize(theme.colors.error.text, 0.15), + }, + }, + + '.text-success': { + color: '$success-text-color', + + '&:hover, &:focus': { + color: theme.colors.emphasize(theme.colors.success.text, 0.15), + }, + }, + + a: { + cursor: 'pointer', + color: theme.colors.text.primary, + textDecoration: 'none', + + '&:focus': { + outline: 'none', + }, + + '&:focus-visible': getFocusStyles(theme), + + '&:[disabled]': { + cursor: 'default', + // Need type assertion here due to the use of !important + // see https://github.com/frenic/csstype/issues/114#issuecomment-697201978 + // eslint-disable-next-line @typescript-eslint/consistent-type-assertions + pointerEvents: 'none !important' as 'none', + }, + }, + + '.text-link': { + textDecoration: 'underline', + }, + + '.text-left': { + textAlign: 'left', + }, + + '.text-right': { + textAlign: 'right', + }, + + '.text-center': { + textAlign: 'center', + }, + + '.highlight-search-match': { + background: theme.components.textHighlight.background, + color: theme.components.textHighlight.text, + padding: 0, + }, }); } export function getVariantStyles(variant: ThemeTypographyVariant): CSSObject { return { margin: 0, - // fontSize: variant.fontSize, - // lineHeight: variant.lineHeight, - // fontWeight: variant.fontWeight, - // letterSpacing: variant.letterSpacing, - // fontFamily: variant.fontFamily, + fontSize: variant.fontSize, + lineHeight: variant.lineHeight, + fontWeight: variant.fontWeight, + letterSpacing: variant.letterSpacing, + fontFamily: variant.fontFamily, marginBottom: '0.45em', }; } diff --git a/packages/grafana-ui/src/themes/GlobalStyles/forms.ts b/packages/grafana-ui/src/themes/GlobalStyles/forms.ts index 4cea02929cfa0..a590d4eaf6ac4 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/forms.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/forms.ts @@ -4,25 +4,26 @@ import { GrafanaTheme2 } from '@grafana/data'; export function getFormElementStyles(theme: GrafanaTheme2) { return css({ - // 'input, button, select, textarea': { - // fontFamily: theme.typography.body.fontFamily, - // fontSize: theme.typography.body.fontSize, - // fontWeight: theme.typography.body.fontWeight, - // lineHeight: theme.typography.body.lineHeight, - // }, - // 'input, select': { - // backgroundColor: theme.components.input.background, - // color: theme.components.input.text, - // border: 'none', - // boxShadow: 'none', - // }, - // textarea: { - // height: 'auto', - // }, + 'input, button, select, textarea': { + fontFamily: theme.typography.body.fontFamily, + fontSize: theme.typography.body.fontSize, + fontWeight: theme.typography.body.fontWeight, + lineHeight: theme.typography.body.lineHeight, + }, + 'input, select': { + backgroundColor: theme.components.input.background, + color: theme.components.input.text, + border: 'none', + boxShadow: 'none', + }, + textarea: { + height: 'auto', + }, + // Reset width of input images, buttons, radios, checkboxes - // "input[type='file'], input[type='image'], input[type='submit'], input[type='reset'], input[type='button'], input[type='radio'], input[type='checkbox']": - // { - // width: 'auto', // Override of generic input selector - // }, + "input[type='file'], input[type='image'], input[type='submit'], input[type='reset'], input[type='button'], input[type='radio'], input[type='checkbox']": + { + width: 'auto', // Override of generic input selector + }, }); } diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index 62bca32696825..3bb683e8cae91 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -425,7 +425,7 @@ export class UnthemedDashboardPage extends PureComponent { className={pageClassName} scrollRef={this.setScrollRef} scrollTop={updateScrollTop} - style={{ minHeight: 550 }} + style={{ minHeight: '550px' }} > {showToolbar && (
diff --git a/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx b/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx index bacc95e98ec5b..d7979b2873afb 100644 --- a/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx +++ b/public/app/fn-app/fn-dashboard-page/fn-dashboard.tsx @@ -4,7 +4,6 @@ import React, { FC, useMemo } from 'react'; import { FnPropMappedFromState, fnPropsMappedFromState } from 'app/core/reducers/fn-slice'; import { StoreState, useSelector } from 'app/types'; -import { AngularRoot } from '../../angular/AngularRoot'; import { FnAppProvider } from '../fn-app-provider'; import { FNDashboardProps } from '../types'; import { RenderPortal } from '../utils'; @@ -16,10 +15,7 @@ type FNDashboardComponentProps = Omit; export const FNDashboard: FC = (props) => { return ( -
- - -
+ ); }; @@ -61,5 +57,9 @@ export const DashboardPortal: FC = (p) => { ); }, [props]); - return {content}; + return ( + +
{content}
+ + ); }; diff --git a/public/microfrontends/fn_dashboard/index.html b/public/microfrontends/fn_dashboard/index.html index f3d371e5542eb..aad4a9712621d 100644 --- a/public/microfrontends/fn_dashboard/index.html +++ b/public/microfrontends/fn_dashboard/index.html @@ -5,12 +5,12 @@ - +
- + diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 8142fbd48af74..ca5a3930e6516 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -57,8 +57,8 @@ $gray-7: #fbfbfb; $white: #ffffff; -$layer0: #FAFAFA; -$layer1: #FFFFFF; +$layer0: #FFFFFF; +$layer1: #FAFAFA; $layer2: #FAFAFA; $divider: rgba(45, 51, 62, 0.12); @@ -93,9 +93,9 @@ $critical: #CF0E5B; // Scaffolding // ------------------------- -$body-bg: #FAFAFA; -$page-bg: #FAFAFA; -$dashboard-bg: #FAFAFA; +$body-bg: #FFFFFF; +$page-bg: #FFFFFF; +$dashboard-bg: #FFFFFF; $text-color: #101828; $text-color-strong: #000000; @@ -128,16 +128,16 @@ $hr-border-color: $gray-4 !default; // Panel // ------------------------- -$panel-bg: #FFFFFF; +$panel-bg: #FAFAFA; $panel-border: 1px solid rgba(45, 51, 62, 0.12); $panel-header-hover-bg: rgba(45, 51, 62, 0.12); $panel-box-shadow: none; $panel-corner: $panel-bg; // Page header -$page-header-bg: #FAFAFA; +$page-header-bg: #FFFFFF; $page-header-shadow: inset 0px -3px 10px $gray-6; -$page-header-border-color: #FAFAFA; +$page-header-border-color: #FFFFFF; $divider-border-color: $gray-2; @@ -145,7 +145,7 @@ $divider-border-color: $gray-2; $tight-form-func-bg: #FAFAFA; $tight-form-func-highlight-bg: #f5f5f5; -$modal-backdrop-bg: #FFFFFF; +$modal-backdrop-bg: #FAFAFA; $code-tag-bg: $gray-6; $code-tag-border: $gray-4; @@ -170,8 +170,8 @@ $scrollbarBorder: $gray-7; // ------------------------- $table-bg-accent: #FAFAFA; $table-border: rgba(45, 51, 62, 0.30); -$table-bg-odd: rgb(249, 249, 249); -$table-bg-hover: rgb(242, 242, 242); +$table-bg-odd: rgb(245, 245, 245); +$table-bg-hover: rgb(237, 237, 237); // Buttons // ------------------------- @@ -207,7 +207,7 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6); // Forms // ------------------------- -$input-bg: #FFFFFF; +$input-bg: #FAFAFA; $input-bg-disabled: rgba(45, 51, 62, 0.04); $input-color: #101828; @@ -229,7 +229,7 @@ $typeahead-selected-color: $yellow; // Dropdowns // ------------------------- -$dropdownBackground: #FFFFFF; +$dropdownBackground: #FAFAFA; $dropdownBorder: rgba(45, 51, 62, 0.12); $dropdownDividerTop: rgba(45, 51, 62, 0.12); $dropdownDividerBottom: rgba(45, 51, 62, 0.12); @@ -263,7 +263,7 @@ $side-menu-header-color: #e9edf2; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: #FFFFFF; +$menu-dropdown-bg: #FAFAFA; $menu-dropdown-hover-bg: rgba(45, 51, 62, 0.12); $menu-dropdown-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18); @@ -289,7 +289,7 @@ $tooltipArrowColor: #FAFAFA; $tooltipBackgroundError: #E0226E; $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2); -$popover-bg: #FFFFFF; +$popover-bg: #FAFAFA; $popover-color: #101828; $popover-border-color: rgba(45, 51, 62, 0.12); $popover-header-bg: #FAFAFA; @@ -305,7 +305,7 @@ $popover-error-bg: $btn-danger-bg; $popover-help-bg: $tooltipBackground; $popover-help-color: $tooltipColor; -$popover-code-bg: #FFFFFF; +$popover-code-bg: #FAFAFA; $popover-code-boxshadow: 0 0 5px $gray60; // images diff --git a/public/views/index-microfrontend-template.html b/public/views/index-microfrontend-template.html index 2f4c75e9c0d2a..716020df9af66 100644 --- a/public/views/index-microfrontend-template.html +++ b/public/views/index-microfrontend-template.html @@ -5,7 +5,7 @@ - +
- +