diff --git a/.betterer.results b/.betterer.results index 8ab19e8522ffa..ee0a82a1a69fd 100644 --- a/.betterer.results +++ b/.betterer.results @@ -1579,24 +1579,8 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], "public/app/core/services/backend_srv.ts:5381": [ - [0, 0, 0, "Unexpected any. Specify a different type.", "0"], - [0, 0, 0, "Unexpected any. Specify a different type.", "1"], - [0, 0, 0, "Do not use any type assertions.", "2"], - [0, 0, 0, "Unexpected any. Specify a different type.", "3"], - [0, 0, 0, "Unexpected any. Specify a different type.", "4"], - [0, 0, 0, "Unexpected any. Specify a different type.", "5"], - [0, 0, 0, "Unexpected any. Specify a different type.", "6"], - [0, 0, 0, "Unexpected any. Specify a different type.", "7"], - [0, 0, 0, "Unexpected any. Specify a different type.", "8"], - [0, 0, 0, "Unexpected any. Specify a different type.", "9"], - [0, 0, 0, "Unexpected any. Specify a different type.", "10"], - [0, 0, 0, "Unexpected any. Specify a different type.", "11"], - [0, 0, 0, "Unexpected any. Specify a different type.", "12"], - [0, 0, 0, "Unexpected any. Specify a different type.", "13"], - [0, 0, 0, "Unexpected any. Specify a different type.", "14"], - [0, 0, 0, "Unexpected any. Specify a different type.", "15"], - [0, 0, 0, "Unexpected any. Specify a different type.", "16"], - [0, 0, 0, "Unexpected any. Specify a different type.", "17"] + [0, 0, 0, "Do not use any type assertions.", "0"], + [0, 0, 0, "Do not use any type assertions.", "1"] ], "public/app/core/services/context_srv.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], 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/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 661d433abcd43..6a7f9a5175653 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, @@ -220,9 +220,9 @@ class LightColors implements ThemeColorsBase> { }; background = { - canvas: '#F6F5F3', - primary: '#FDFDFC', - secondary: '#FDFDFC', + primary: '#FAFAFA', + canvas: '#FFFFFF', + secondary: '#FAFAFA', }; action = { diff --git a/packages/grafana-data/src/themes/createTypography.ts b/packages/grafana-data/src/themes/createTypography.ts index 36d02b204e73a..9180955b9deee 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 { @@ -62,13 +62,13 @@ 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, + 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 = 14, + htmlFontSize = 16, } = typographyInput; if (process.env.NODE_ENV !== 'production') { 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/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..8801811c979c6 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 + > )} - + ( - <> - - Time range zoom out
CTRL+Z - - + + Time range zoom out
CTRL+Z + ); export const TimePickerTooltip = ({ timeRange, timeZone }: { timeRange: TimeRange; timeZone?: TimeZone }) => { 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/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/forms.ts b/packages/grafana-ui/src/themes/GlobalStyles/forms.ts index c3a87d89adf8e..a590d4eaf6ac4 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/forms.ts +++ b/packages/grafana-ui/src/themes/GlobalStyles/forms.ts @@ -10,14 +10,12 @@ export function getFormElementStyles(theme: GrafanaTheme2) { 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', }, 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/core/services/backend_srv.ts b/public/app/core/services/backend_srv.ts index 623195acd1048..af16dfba58329 100644 --- a/public/app/core/services/backend_srv.ts +++ b/public/app/core/services/backend_srv.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import { from, lastValueFrom, MonoTypeOperatorFunction, Observable, Subject, Subscription, throwError } from 'rxjs'; import { fromFetch } from 'rxjs/fetch'; import { @@ -170,6 +171,18 @@ export class BackendSrv implements BackendService { return lastValueFrom(this.fetch(options)); } + private getCodeRabbitOrg(): { id: string } | null { + const selectedOrgStorage = sessionStorage.getItem('selected_org'); + + try { + return selectedOrgStorage ? (JSON.parse(selectedOrgStorage) as { id: string }) : null; + } catch (e) { + console.error('Failed to parse selected_org', selectedOrgStorage, 'error:', e); + sessionStorage.removeItem('selected_org'); + return null; + } + } + private parseRequestOptions(options: BackendSrvRequest): BackendSrvRequest { const orgId = this.dependencies.contextSrv.user?.orgId; @@ -182,10 +195,22 @@ export class BackendSrv implements BackendService { options.headers['X-Grafana-Org-Id'] = orgId; } + const codeRabbitOrg = this.getCodeRabbitOrg(); + if (codeRabbitOrg) { + options.headers = options.headers ?? {}; + options.headers['x-coderabbit-organization'] = codeRabbitOrg.id; + } + if (options.url.startsWith('/')) { options.url = options.url.substring(1); } + const codeRabbitToken = sessionStorage.getItem('accessToken'); + if (codeRabbitToken) { + options.headers = options.headers ?? {}; + options.headers['x-coderabbit-token'] = `Bearer ${codeRabbitToken}`; + } + if (options.headers?.Authorization) { options.headers['X-DS-Authorization'] = options.headers.Authorization; delete options.headers.Authorization; 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/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/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-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/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 5399547433ddd..43f6195041da3 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 db1ac2a5e3649..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 @@ -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; @@ -114,15 +114,15 @@ $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: 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; @@ -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 552a95785eb54..ca5a3930e6516 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; @@ -57,9 +57,9 @@ $gray-7: #fbfbfb; $white: #ffffff; -$layer0: #F6F5F3; -$layer1: #FDFDFC; -$layer2: #FDFDFC; +$layer0: #FFFFFF; +$layer1: #FAFAFA; +$layer2: #FAFAFA; $divider: rgba(45, 51, 62, 0.12); $border0: rgba(45, 51, 62, 0.12); @@ -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; @@ -93,17 +93,17 @@ $critical: #CF0E5B; // Scaffolding // ------------------------- -$body-bg: #F6F5F3; -$page-bg: #F6F5F3; -$dashboard-bg: #F6F5F3; +$body-bg: #FFFFFF; +$page-bg: #FFFFFF; +$dashboard-bg: #FFFFFF; -$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; @@ -128,30 +128,30 @@ $hr-border-color: $gray-4 !default; // Panel // ------------------------- -$panel-bg: #FDFDFC; +$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: #F6F5F3; +$page-header-bg: #FFFFFF; $page-header-shadow: inset 0px -3px 10px $gray-6; -$page-header-border-color: #F6F5F3; +$page-header-border-color: #FFFFFF; $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: #FAFAFA; $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(245, 245, 245); +$table-bg-hover: rgb(237, 237, 237); // Buttons // ------------------------- @@ -207,16 +207,16 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6); // Forms // ------------------------- -$input-bg: #FDFDFC; +$input-bg: #FAFAFA; $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; $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: #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: #FDFDFC; +$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); @@ -283,16 +283,16 @@ $alert-warning-bg: #F3D086; $alert-info-bg: #F3D086; // Tooltips and popovers -$tooltipBackground: #FDFDFC; -$tooltipColor: #2D333E; -$tooltipArrowColor: #FDFDFC; +$tooltipBackground: #FAFAFA; +$tooltipColor: #101828; +$tooltipArrowColor: #FAFAFA; $tooltipBackgroundError: #E0226E; $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2); -$popover-bg: #FDFDFC; -$popover-color: #2D333E; +$popover-bg: #FAFAFA; +$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: #FAFAFA; $popover-code-boxshadow: 0 0 5px $gray60; // images @@ -338,10 +338,10 @@ $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-fg: #2D333E; +$diff-json-bg: #FAFAFA; +$diff-json-fg: #101828; $diff-json-added: $blue-shade; $diff-json-deleted: $red-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..716020df9af66 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 { %> - + <% } %> <% } %>