From 700b22ba198789d67d92e29d2c8cec7a145b0a5e Mon Sep 17 00:00:00 2001 From: Michael Flanakin Date: Fri, 31 Jan 2025 01:45:38 -0800 Subject: [PATCH 1/2] Add Fluent 9 theme --- src/web/FinOpsToolkitTheme.ts | 29 +++ src/web/ftk-dark.json | 438 ++++++++++++++++++++++++++++++++++ src/web/ftk-light.json | 438 ++++++++++++++++++++++++++++++++++ 3 files changed, 905 insertions(+) create mode 100644 src/web/FinOpsToolkitTheme.ts create mode 100644 src/web/ftk-dark.json create mode 100644 src/web/ftk-light.json diff --git a/src/web/FinOpsToolkitTheme.ts b/src/web/FinOpsToolkitTheme.ts new file mode 100644 index 000000000..d18304346 --- /dev/null +++ b/src/web/FinOpsToolkitTheme.ts @@ -0,0 +1,29 @@ +const ftk: BrandVariants = { + 10: '#030205', + 20: '#1A1423', + 30: '#2A1E3E', + 40: '#382755', + 50: '#46316D', + 60: '#553A86', + 70: '#6444A0', + 80: '#734FB4', + 90: '#815FBC', + 100: '#8F6FC3', + 110: '#9C7ECA', + 120: '#A98FD1', + 130: '#B69FD8', + 140: '#C3AFDF', + 150: '#D0C0E6', + 160: '#DDD1ED', +}; + +const lightTheme: Theme = { + ...createLightTheme(ftk), +}; + +const darkTheme: Theme = { + ...createDarkTheme(ftk), +}; + +darkTheme.colorBrandForeground1 = ftk[110]; +darkTheme.colorBrandForeground2 = ftk[120]; diff --git a/src/web/ftk-dark.json b/src/web/ftk-dark.json new file mode 100644 index 000000000..c9594c420 --- /dev/null +++ b/src/web/ftk-dark.json @@ -0,0 +1,438 @@ +{ + "borderRadiusNone": "0", + "borderRadiusSmall": "2px", + "borderRadiusMedium": "4px", + "borderRadiusLarge": "6px", + "borderRadiusXLarge": "8px", + "borderRadiusCircular": "10000px", + "fontSizeBase100": "10px", + "fontSizeBase200": "12px", + "fontSizeBase300": "14px", + "fontSizeBase400": "16px", + "fontSizeBase500": "20px", + "fontSizeBase600": "24px", + "fontSizeHero700": "28px", + "fontSizeHero800": "32px", + "fontSizeHero900": "40px", + "fontSizeHero1000": "68px", + "lineHeightBase100": "14px", + "lineHeightBase200": "16px", + "lineHeightBase300": "20px", + "lineHeightBase400": "22px", + "lineHeightBase500": "28px", + "lineHeightBase600": "32px", + "lineHeightHero700": "36px", + "lineHeightHero800": "40px", + "lineHeightHero900": "52px", + "lineHeightHero1000": "92px", + "fontFamilyBase": "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif", + "fontFamilyMonospace": "Consolas, 'Courier New', Courier, monospace", + "fontFamilyNumeric": "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif", + "fontWeightRegular": 400, + "fontWeightMedium": 500, + "fontWeightSemibold": 600, + "fontWeightBold": 700, + "strokeWidthThin": "1px", + "strokeWidthThick": "2px", + "strokeWidthThicker": "3px", + "strokeWidthThickest": "4px", + "spacingHorizontalNone": "0", + "spacingHorizontalXXS": "2px", + "spacingHorizontalXS": "4px", + "spacingHorizontalSNudge": "6px", + "spacingHorizontalS": "8px", + "spacingHorizontalMNudge": "10px", + "spacingHorizontalM": "12px", + "spacingHorizontalL": "16px", + "spacingHorizontalXL": "20px", + "spacingHorizontalXXL": "24px", + "spacingHorizontalXXXL": "32px", + "spacingVerticalNone": "0", + "spacingVerticalXXS": "2px", + "spacingVerticalXS": "4px", + "spacingVerticalSNudge": "6px", + "spacingVerticalS": "8px", + "spacingVerticalMNudge": "10px", + "spacingVerticalM": "12px", + "spacingVerticalL": "16px", + "spacingVerticalXL": "20px", + "spacingVerticalXXL": "24px", + "spacingVerticalXXXL": "32px", + "durationUltraFast": "50ms", + "durationFaster": "100ms", + "durationFast": "150ms", + "durationNormal": "200ms", + "durationGentle": "250ms", + "durationSlow": "300ms", + "durationSlower": "400ms", + "durationUltraSlow": "500ms", + "curveAccelerateMax": "cubic-bezier(0.9,0.1,1,0.2)", + "curveAccelerateMid": "cubic-bezier(1,0,1,1)", + "curveAccelerateMin": "cubic-bezier(0.8,0,0.78,1)", + "curveDecelerateMax": "cubic-bezier(0.1,0.9,0.2,1)", + "curveDecelerateMid": "cubic-bezier(0,0,0,1)", + "curveDecelerateMin": "cubic-bezier(0.33,0,0.1,1)", + "curveEasyEaseMax": "cubic-bezier(0.8,0,0.2,1)", + "curveEasyEase": "cubic-bezier(0.33,0,0.67,1)", + "curveLinear": "cubic-bezier(0,0,1,1)", + "colorNeutralForeground1": "#ffffff", + "colorNeutralForeground1Hover": "#ffffff", + "colorNeutralForeground1Pressed": "#ffffff", + "colorNeutralForeground1Selected": "#ffffff", + "colorNeutralForeground2": "#d6d6d6", + "colorNeutralForeground2Hover": "#ffffff", + "colorNeutralForeground2Pressed": "#ffffff", + "colorNeutralForeground2Selected": "#ffffff", + "colorNeutralForeground2BrandHover": "#8f6fc3", + "colorNeutralForeground2BrandPressed": "#815fbc", + "colorNeutralForeground2BrandSelected": "#8f6fc3", + "colorNeutralForeground3": "#adadad", + "colorNeutralForeground3Hover": "#d6d6d6", + "colorNeutralForeground3Pressed": "#d6d6d6", + "colorNeutralForeground3Selected": "#d6d6d6", + "colorNeutralForeground3BrandHover": "#8f6fc3", + "colorNeutralForeground3BrandPressed": "#815fbc", + "colorNeutralForeground3BrandSelected": "#8f6fc3", + "colorNeutralForeground4": "#999999", + "colorNeutralForegroundDisabled": "#5c5c5c", + "colorNeutralForegroundInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorBrandForegroundLink": "#8f6fc3", + "colorBrandForegroundLinkHover": "#9c7eca", + "colorBrandForegroundLinkPressed": "#815fbc", + "colorBrandForegroundLinkSelected": "#8f6fc3", + "colorNeutralForeground2Link": "#d6d6d6", + "colorNeutralForeground2LinkHover": "#ffffff", + "colorNeutralForeground2LinkPressed": "#ffffff", + "colorNeutralForeground2LinkSelected": "#ffffff", + "colorCompoundBrandForeground1": "#8f6fc3", + "colorCompoundBrandForeground1Hover": "#9c7eca", + "colorCompoundBrandForeground1Pressed": "#815fbc", + "colorBrandForeground1": "#9c7eca", + "colorBrandForeground2": "#a98fd1", + "colorBrandForeground2Hover": "#b69fd8", + "colorBrandForeground2Pressed": "#ddd1ed", + "colorNeutralForeground1Static": "#242424", + "colorNeutralForegroundStaticInverted": "#ffffff", + "colorNeutralForegroundInverted": "#242424", + "colorNeutralForegroundInvertedHover": "#242424", + "colorNeutralForegroundInvertedPressed": "#242424", + "colorNeutralForegroundInvertedSelected": "#242424", + "colorNeutralForegroundInverted2": "#242424", + "colorNeutralForegroundOnBrand": "#ffffff", + "colorNeutralForegroundInvertedLink": "#ffffff", + "colorNeutralForegroundInvertedLinkHover": "#ffffff", + "colorNeutralForegroundInvertedLinkPressed": "#ffffff", + "colorNeutralForegroundInvertedLinkSelected": "#ffffff", + "colorBrandForegroundInverted": "#734fb4", + "colorBrandForegroundInvertedHover": "#6444a0", + "colorBrandForegroundInvertedPressed": "#553a86", + "colorBrandForegroundOnLight": "#734fb4", + "colorBrandForegroundOnLightHover": "#6444a0", + "colorBrandForegroundOnLightPressed": "#46316d", + "colorBrandForegroundOnLightSelected": "#553a86", + "colorNeutralBackground1": "#292929", + "colorNeutralBackground1Hover": "#3d3d3d", + "colorNeutralBackground1Pressed": "#1f1f1f", + "colorNeutralBackground1Selected": "#383838", + "colorNeutralBackground2": "#1f1f1f", + "colorNeutralBackground2Hover": "#333333", + "colorNeutralBackground2Pressed": "#141414", + "colorNeutralBackground2Selected": "#2e2e2e", + "colorNeutralBackground3": "#141414", + "colorNeutralBackground3Hover": "#292929", + "colorNeutralBackground3Pressed": "#0a0a0a", + "colorNeutralBackground3Selected": "#242424", + "colorNeutralBackground4": "#0a0a0a", + "colorNeutralBackground4Hover": "#1f1f1f", + "colorNeutralBackground4Pressed": "#000000", + "colorNeutralBackground4Selected": "#1a1a1a", + "colorNeutralBackground5": "#000000", + "colorNeutralBackground5Hover": "#141414", + "colorNeutralBackground5Pressed": "#050505", + "colorNeutralBackground5Selected": "#0f0f0f", + "colorNeutralBackground6": "#333333", + "colorNeutralBackgroundInverted": "#ffffff", + "colorNeutralBackgroundStatic": "#3d3d3d", + "colorNeutralBackgroundAlpha": "rgba(26, 26, 26, 0.5)", + "colorNeutralBackgroundAlpha2": "rgba(31, 31, 31, 0.7)", + "colorSubtleBackground": "transparent", + "colorSubtleBackgroundHover": "#383838", + "colorSubtleBackgroundPressed": "#2e2e2e", + "colorSubtleBackgroundSelected": "#333333", + "colorSubtleBackgroundLightAlphaHover": "rgba(36, 36, 36, 0.8)", + "colorSubtleBackgroundLightAlphaPressed": "rgba(36, 36, 36, 0.5)", + "colorSubtleBackgroundLightAlphaSelected": "transparent", + "colorSubtleBackgroundInverted": "transparent", + "colorSubtleBackgroundInvertedHover": "rgba(0, 0, 0, 0.1)", + "colorSubtleBackgroundInvertedPressed": "rgba(0, 0, 0, 0.3)", + "colorSubtleBackgroundInvertedSelected": "rgba(0, 0, 0, 0.2)", + "colorTransparentBackground": "transparent", + "colorTransparentBackgroundHover": "transparent", + "colorTransparentBackgroundPressed": "transparent", + "colorTransparentBackgroundSelected": "transparent", + "colorNeutralBackgroundDisabled": "#141414", + "colorNeutralBackgroundInvertedDisabled": "rgba(255, 255, 255, 0.1)", + "colorNeutralStencil1": "#575757", + "colorNeutralStencil2": "#333333", + "colorNeutralStencil1Alpha": "rgba(255, 255, 255, 0.1)", + "colorNeutralStencil2Alpha": "rgba(255, 255, 255, 0.05)", + "colorBackgroundOverlay": "rgba(0, 0, 0, 0.5)", + "colorScrollbarOverlay": "rgba(255, 255, 255, 0.6)", + "colorBrandBackground": "#6444a0", + "colorBrandBackgroundHover": "#734fb4", + "colorBrandBackgroundPressed": "#382755", + "colorBrandBackgroundSelected": "#553a86", + "colorCompoundBrandBackground": "#8f6fc3", + "colorCompoundBrandBackgroundHover": "#9c7eca", + "colorCompoundBrandBackgroundPressed": "#815fbc", + "colorBrandBackgroundStatic": "#734fb4", + "colorBrandBackground2": "#1a1423", + "colorBrandBackground2Hover": "#382755", + "colorBrandBackground2Pressed": "#030205", + "colorBrandBackground3Static": "#553a86", + "colorBrandBackground4Static": "#382755", + "colorBrandBackgroundInverted": "#ffffff", + "colorBrandBackgroundInvertedHover": "#ddd1ed", + "colorBrandBackgroundInvertedPressed": "#c3afdf", + "colorBrandBackgroundInvertedSelected": "#d0c0e6", + "colorNeutralCardBackground": "#333333", + "colorNeutralCardBackgroundHover": "#3d3d3d", + "colorNeutralCardBackgroundPressed": "#2e2e2e", + "colorNeutralCardBackgroundSelected": "#383838", + "colorNeutralCardBackgroundDisabled": "#141414", + "colorNeutralStrokeAccessible": "#adadad", + "colorNeutralStrokeAccessibleHover": "#bdbdbd", + "colorNeutralStrokeAccessiblePressed": "#b3b3b3", + "colorNeutralStrokeAccessibleSelected": "#8f6fc3", + "colorNeutralStroke1": "#666666", + "colorNeutralStroke1Hover": "#757575", + "colorNeutralStroke1Pressed": "#6b6b6b", + "colorNeutralStroke1Selected": "#707070", + "colorNeutralStroke2": "#525252", + "colorNeutralStroke3": "#3d3d3d", + "colorNeutralStrokeSubtle": "#0a0a0a", + "colorNeutralStrokeOnBrand": "#292929", + "colorNeutralStrokeOnBrand2": "#ffffff", + "colorNeutralStrokeOnBrand2Hover": "#ffffff", + "colorNeutralStrokeOnBrand2Pressed": "#ffffff", + "colorNeutralStrokeOnBrand2Selected": "#ffffff", + "colorBrandStroke1": "#8f6fc3", + "colorBrandStroke2": "#46316d", + "colorBrandStroke2Hover": "#46316d", + "colorBrandStroke2Pressed": "#2a1e3e", + "colorBrandStroke2Contrast": "#46316d", + "colorCompoundBrandStroke": "#8f6fc3", + "colorCompoundBrandStrokeHover": "#9c7eca", + "colorCompoundBrandStrokePressed": "#815fbc", + "colorNeutralStrokeDisabled": "#424242", + "colorNeutralStrokeInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorTransparentStroke": "transparent", + "colorTransparentStrokeInteractive": "transparent", + "colorTransparentStrokeDisabled": "transparent", + "colorNeutralStrokeAlpha": "rgba(255, 255, 255, 0.1)", + "colorNeutralStrokeAlpha2": "rgba(255, 255, 255, 0.2)", + "colorStrokeFocus1": "#000000", + "colorStrokeFocus2": "#ffffff", + "colorNeutralShadowAmbient": "rgba(0,0,0,0.24)", + "colorNeutralShadowKey": "rgba(0,0,0,0.28)", + "colorNeutralShadowAmbientLighter": "rgba(0,0,0,0.12)", + "colorNeutralShadowKeyLighter": "rgba(0,0,0,0.14)", + "colorNeutralShadowAmbientDarker": "rgba(0,0,0,0.40)", + "colorNeutralShadowKeyDarker": "rgba(0,0,0,0.48)", + "colorBrandShadowAmbient": "rgba(0,0,0,0.30)", + "colorBrandShadowKey": "rgba(0,0,0,0.25)", + "colorPaletteRedBackground1": "#3f1011", + "colorPaletteRedBackground2": "#751d1f", + "colorPaletteRedBackground3": "#d13438", + "colorPaletteRedForeground1": "#e37d80", + "colorPaletteRedForeground2": "#f1bbbc", + "colorPaletteRedForeground3": "#e37d80", + "colorPaletteRedBorderActive": "#e37d80", + "colorPaletteRedBorder1": "#d13438", + "colorPaletteRedBorder2": "#e37d80", + "colorPaletteGreenBackground1": "#052505", + "colorPaletteGreenBackground2": "#094509", + "colorPaletteGreenBackground3": "#107c10", + "colorPaletteGreenForeground1": "#54b054", + "colorPaletteGreenForeground2": "#9fd89f", + "colorPaletteGreenForeground3": "#9fd89f", + "colorPaletteGreenBorderActive": "#54b054", + "colorPaletteGreenBorder1": "#107c10", + "colorPaletteGreenBorder2": "#9fd89f", + "colorPaletteDarkOrangeBackground1": "#411200", + "colorPaletteDarkOrangeBackground2": "#7a2101", + "colorPaletteDarkOrangeBackground3": "#da3b01", + "colorPaletteDarkOrangeForeground1": "#e9835e", + "colorPaletteDarkOrangeForeground2": "#f4bfab", + "colorPaletteDarkOrangeForeground3": "#e9835e", + "colorPaletteDarkOrangeBorderActive": "#e9835e", + "colorPaletteDarkOrangeBorder1": "#da3b01", + "colorPaletteDarkOrangeBorder2": "#e9835e", + "colorPaletteYellowBackground1": "#4c4400", + "colorPaletteYellowBackground2": "#817400", + "colorPaletteYellowBackground3": "#fde300", + "colorPaletteYellowForeground1": "#feee66", + "colorPaletteYellowForeground2": "#fef7b2", + "colorPaletteYellowForeground3": "#fdea3d", + "colorPaletteYellowBorderActive": "#feee66", + "colorPaletteYellowBorder1": "#fde300", + "colorPaletteYellowBorder2": "#fdea3d", + "colorPaletteBerryBackground1": "#3a1136", + "colorPaletteBerryBackground2": "#6d2064", + "colorPaletteBerryBackground3": "#c239b3", + "colorPaletteBerryForeground1": "#da7ed0", + "colorPaletteBerryForeground2": "#edbbe7", + "colorPaletteBerryForeground3": "#d161c4", + "colorPaletteBerryBorderActive": "#da7ed0", + "colorPaletteBerryBorder1": "#c239b3", + "colorPaletteBerryBorder2": "#d161c4", + "colorPaletteLightGreenBackground1": "#063004", + "colorPaletteLightGreenBackground2": "#0b5a08", + "colorPaletteLightGreenBackground3": "#13a10e", + "colorPaletteLightGreenForeground1": "#5ec75a", + "colorPaletteLightGreenForeground2": "#a7e3a5", + "colorPaletteLightGreenForeground3": "#3db838", + "colorPaletteLightGreenBorderActive": "#5ec75a", + "colorPaletteLightGreenBorder1": "#13a10e", + "colorPaletteLightGreenBorder2": "#3db838", + "colorPaletteMarigoldBackground1": "#463100", + "colorPaletteMarigoldBackground2": "#835b00", + "colorPaletteMarigoldBackground3": "#eaa300", + "colorPaletteMarigoldForeground1": "#f2c661", + "colorPaletteMarigoldForeground2": "#f9e2ae", + "colorPaletteMarigoldForeground3": "#efb839", + "colorPaletteMarigoldBorderActive": "#f2c661", + "colorPaletteMarigoldBorder1": "#eaa300", + "colorPaletteMarigoldBorder2": "#efb839", + "colorPaletteRedForegroundInverted": "#d13438", + "colorPaletteGreenForegroundInverted": "#107c10", + "colorPaletteYellowForegroundInverted": "#817400", + "colorPaletteDarkRedBackground2": "#590815", + "colorPaletteDarkRedForeground2": "#d69ca5", + "colorPaletteDarkRedBorderActive": "#ac4f5e", + "colorPaletteCranberryBackground2": "#6e0811", + "colorPaletteCranberryForeground2": "#eeacb2", + "colorPaletteCranberryBorderActive": "#dc626d", + "colorPalettePumpkinBackground2": "#712d09", + "colorPalettePumpkinForeground2": "#efc4ad", + "colorPalettePumpkinBorderActive": "#df8e64", + "colorPalettePeachBackground2": "#8f4e00", + "colorPalettePeachForeground2": "#ffddb3", + "colorPalettePeachBorderActive": "#ffba66", + "colorPaletteGoldBackground2": "#6c5700", + "colorPaletteGoldForeground2": "#ecdfa5", + "colorPaletteGoldBorderActive": "#dac157", + "colorPaletteBrassBackground2": "#553e06", + "colorPaletteBrassForeground2": "#e0cea2", + "colorPaletteBrassBorderActive": "#c1a256", + "colorPaletteBrownBackground2": "#50301a", + "colorPaletteBrownForeground2": "#ddc3b0", + "colorPaletteBrownBorderActive": "#bb8f6f", + "colorPaletteForestBackground2": "#294903", + "colorPaletteForestForeground2": "#bdd99b", + "colorPaletteForestBorderActive": "#85b44c", + "colorPaletteSeafoamBackground2": "#00723b", + "colorPaletteSeafoamForeground2": "#a8f0cd", + "colorPaletteSeafoamBorderActive": "#5ae0a0", + "colorPaletteDarkGreenBackground2": "#063b06", + "colorPaletteDarkGreenForeground2": "#9ad29a", + "colorPaletteDarkGreenBorderActive": "#4da64d", + "colorPaletteLightTealBackground2": "#00666d", + "colorPaletteLightTealForeground2": "#a6e9ed", + "colorPaletteLightTealBorderActive": "#58d3db", + "colorPaletteTealBackground2": "#02494c", + "colorPaletteTealForeground2": "#9bd9db", + "colorPaletteTealBorderActive": "#4cb4b7", + "colorPaletteSteelBackground2": "#00333f", + "colorPaletteSteelForeground2": "#94c8d4", + "colorPaletteSteelBorderActive": "#4496a9", + "colorPaletteBlueBackground2": "#004377", + "colorPaletteBlueForeground2": "#a9d3f2", + "colorPaletteBlueBorderActive": "#5caae5", + "colorPaletteRoyalBlueBackground2": "#002c4e", + "colorPaletteRoyalBlueForeground2": "#9abfdc", + "colorPaletteRoyalBlueBorderActive": "#4a89ba", + "colorPaletteCornflowerBackground2": "#2c3c85", + "colorPaletteCornflowerForeground2": "#c8d1fa", + "colorPaletteCornflowerBorderActive": "#93a4f4", + "colorPaletteNavyBackground2": "#001665", + "colorPaletteNavyForeground2": "#a3b2e8", + "colorPaletteNavyBorderActive": "#546fd2", + "colorPaletteLavenderBackground2": "#3f3682", + "colorPaletteLavenderForeground2": "#d2ccf8", + "colorPaletteLavenderBorderActive": "#a79cf1", + "colorPalettePurpleBackground2": "#341a51", + "colorPalettePurpleForeground2": "#c6b1de", + "colorPalettePurpleBorderActive": "#9470bd", + "colorPaletteGrapeBackground2": "#4c0d55", + "colorPaletteGrapeForeground2": "#d9a7e0", + "colorPaletteGrapeBorderActive": "#b55fc1", + "colorPaletteLilacBackground2": "#63276d", + "colorPaletteLilacForeground2": "#e6bfed", + "colorPaletteLilacBorderActive": "#cf87da", + "colorPalettePinkBackground2": "#80215d", + "colorPalettePinkForeground2": "#f7c0e3", + "colorPalettePinkBorderActive": "#ef85c8", + "colorPaletteMagentaBackground2": "#6b0043", + "colorPaletteMagentaForeground2": "#eca5d1", + "colorPaletteMagentaBorderActive": "#d957a8", + "colorPalettePlumBackground2": "#5a003b", + "colorPalettePlumForeground2": "#d696c0", + "colorPalettePlumBorderActive": "#ad4589", + "colorPaletteBeigeBackground2": "#444241", + "colorPaletteBeigeForeground2": "#d7d4d4", + "colorPaletteBeigeBorderActive": "#afabaa", + "colorPaletteMinkBackground2": "#343231", + "colorPaletteMinkForeground2": "#cecccb", + "colorPaletteMinkBorderActive": "#9e9b99", + "colorPalettePlatinumBackground2": "#3b4447", + "colorPalettePlatinumForeground2": "#cdd6d8", + "colorPalettePlatinumBorderActive": "#a0adb2", + "colorPaletteAnchorBackground2": "#202427", + "colorPaletteAnchorForeground2": "#bcc3c7", + "colorPaletteAnchorBorderActive": "#808a90", + "colorStatusSuccessBackground1": "#052505", + "colorStatusSuccessBackground2": "#094509", + "colorStatusSuccessBackground3": "#107c10", + "colorStatusSuccessForeground1": "#54b054", + "colorStatusSuccessForeground2": "#9fd89f", + "colorStatusSuccessForeground3": "#9fd89f", + "colorStatusSuccessBorderActive": "#54b054", + "colorStatusSuccessForegroundInverted": "#0e700e", + "colorStatusSuccessBorder1": "#107c10", + "colorStatusSuccessBorder2": "#9fd89f", + "colorStatusWarningBackground1": "#4a1e04", + "colorStatusWarningBackground2": "#8a3707", + "colorStatusWarningBackground3": "#f7630c", + "colorStatusWarningForeground1": "#faa06b", + "colorStatusWarningForeground2": "#fdcfb4", + "colorStatusWarningForeground3": "#f98845", + "colorStatusWarningBorderActive": "#faa06b", + "colorStatusWarningForegroundInverted": "#bc4b09", + "colorStatusWarningBorder1": "#f7630c", + "colorStatusWarningBorder2": "#f98845", + "colorStatusDangerBackground1": "#3b0509", + "colorStatusDangerBackground2": "#6e0811", + "colorStatusDangerBackground3": "#c50f1f", + "colorStatusDangerForeground1": "#dc626d", + "colorStatusDangerForeground2": "#eeacb2", + "colorStatusDangerForeground3": "#eeacb2", + "colorStatusDangerBorderActive": "#dc626d", + "colorStatusDangerForegroundInverted": "#b10e1c", + "colorStatusDangerBorder1": "#c50f1f", + "colorStatusDangerBorder2": "#dc626d", + "colorStatusDangerBackground3Hover": "#b10e1c", + "colorStatusDangerBackground3Pressed": "#960b18", + "shadow2": "0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28)", + "shadow4": "0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28)", + "shadow8": "0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28)", + "shadow16": "0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28)", + "shadow28": "0 0 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28)", + "shadow64": "0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28)", + "shadow2Brand": "0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25)", + "shadow4Brand": "0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25)", + "shadow8Brand": "0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25)", + "shadow16Brand": "0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25)", + "shadow28Brand": "0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25)", + "shadow64Brand": "0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25)" +} diff --git a/src/web/ftk-light.json b/src/web/ftk-light.json new file mode 100644 index 000000000..ce0de7ec2 --- /dev/null +++ b/src/web/ftk-light.json @@ -0,0 +1,438 @@ +{ + "borderRadiusNone": "0", + "borderRadiusSmall": "2px", + "borderRadiusMedium": "4px", + "borderRadiusLarge": "6px", + "borderRadiusXLarge": "8px", + "borderRadiusCircular": "10000px", + "fontSizeBase100": "10px", + "fontSizeBase200": "12px", + "fontSizeBase300": "14px", + "fontSizeBase400": "16px", + "fontSizeBase500": "20px", + "fontSizeBase600": "24px", + "fontSizeHero700": "28px", + "fontSizeHero800": "32px", + "fontSizeHero900": "40px", + "fontSizeHero1000": "68px", + "lineHeightBase100": "14px", + "lineHeightBase200": "16px", + "lineHeightBase300": "20px", + "lineHeightBase400": "22px", + "lineHeightBase500": "28px", + "lineHeightBase600": "32px", + "lineHeightHero700": "36px", + "lineHeightHero800": "40px", + "lineHeightHero900": "52px", + "lineHeightHero1000": "92px", + "fontFamilyBase": "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif", + "fontFamilyMonospace": "Consolas, 'Courier New', Courier, monospace", + "fontFamilyNumeric": "Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif", + "fontWeightRegular": 400, + "fontWeightMedium": 500, + "fontWeightSemibold": 600, + "fontWeightBold": 700, + "strokeWidthThin": "1px", + "strokeWidthThick": "2px", + "strokeWidthThicker": "3px", + "strokeWidthThickest": "4px", + "spacingHorizontalNone": "0", + "spacingHorizontalXXS": "2px", + "spacingHorizontalXS": "4px", + "spacingHorizontalSNudge": "6px", + "spacingHorizontalS": "8px", + "spacingHorizontalMNudge": "10px", + "spacingHorizontalM": "12px", + "spacingHorizontalL": "16px", + "spacingHorizontalXL": "20px", + "spacingHorizontalXXL": "24px", + "spacingHorizontalXXXL": "32px", + "spacingVerticalNone": "0", + "spacingVerticalXXS": "2px", + "spacingVerticalXS": "4px", + "spacingVerticalSNudge": "6px", + "spacingVerticalS": "8px", + "spacingVerticalMNudge": "10px", + "spacingVerticalM": "12px", + "spacingVerticalL": "16px", + "spacingVerticalXL": "20px", + "spacingVerticalXXL": "24px", + "spacingVerticalXXXL": "32px", + "durationUltraFast": "50ms", + "durationFaster": "100ms", + "durationFast": "150ms", + "durationNormal": "200ms", + "durationGentle": "250ms", + "durationSlow": "300ms", + "durationSlower": "400ms", + "durationUltraSlow": "500ms", + "curveAccelerateMax": "cubic-bezier(0.9,0.1,1,0.2)", + "curveAccelerateMid": "cubic-bezier(1,0,1,1)", + "curveAccelerateMin": "cubic-bezier(0.8,0,0.78,1)", + "curveDecelerateMax": "cubic-bezier(0.1,0.9,0.2,1)", + "curveDecelerateMid": "cubic-bezier(0,0,0,1)", + "curveDecelerateMin": "cubic-bezier(0.33,0,0.1,1)", + "curveEasyEaseMax": "cubic-bezier(0.8,0,0.2,1)", + "curveEasyEase": "cubic-bezier(0.33,0,0.67,1)", + "curveLinear": "cubic-bezier(0,0,1,1)", + "colorNeutralForeground1": "#242424", + "colorNeutralForeground1Hover": "#242424", + "colorNeutralForeground1Pressed": "#242424", + "colorNeutralForeground1Selected": "#242424", + "colorNeutralForeground2": "#424242", + "colorNeutralForeground2Hover": "#242424", + "colorNeutralForeground2Pressed": "#242424", + "colorNeutralForeground2Selected": "#242424", + "colorNeutralForeground2BrandHover": "#734fb4", + "colorNeutralForeground2BrandPressed": "#6444a0", + "colorNeutralForeground2BrandSelected": "#734fb4", + "colorNeutralForeground3": "#616161", + "colorNeutralForeground3Hover": "#424242", + "colorNeutralForeground3Pressed": "#424242", + "colorNeutralForeground3Selected": "#424242", + "colorNeutralForeground3BrandHover": "#734fb4", + "colorNeutralForeground3BrandPressed": "#6444a0", + "colorNeutralForeground3BrandSelected": "#734fb4", + "colorNeutralForeground4": "#707070", + "colorNeutralForegroundDisabled": "#bdbdbd", + "colorNeutralForegroundInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorBrandForegroundLink": "#6444a0", + "colorBrandForegroundLinkHover": "#553a86", + "colorBrandForegroundLinkPressed": "#382755", + "colorBrandForegroundLinkSelected": "#6444a0", + "colorNeutralForeground2Link": "#424242", + "colorNeutralForeground2LinkHover": "#242424", + "colorNeutralForeground2LinkPressed": "#242424", + "colorNeutralForeground2LinkSelected": "#242424", + "colorCompoundBrandForeground1": "#734fb4", + "colorCompoundBrandForeground1Hover": "#6444a0", + "colorCompoundBrandForeground1Pressed": "#553a86", + "colorBrandForeground1": "#734fb4", + "colorBrandForeground2": "#6444a0", + "colorBrandForeground2Hover": "#553a86", + "colorBrandForeground2Pressed": "#2a1e3e", + "colorNeutralForeground1Static": "#242424", + "colorNeutralForegroundStaticInverted": "#ffffff", + "colorNeutralForegroundInverted": "#ffffff", + "colorNeutralForegroundInvertedHover": "#ffffff", + "colorNeutralForegroundInvertedPressed": "#ffffff", + "colorNeutralForegroundInvertedSelected": "#ffffff", + "colorNeutralForegroundInverted2": "#ffffff", + "colorNeutralForegroundOnBrand": "#ffffff", + "colorNeutralForegroundInvertedLink": "#ffffff", + "colorNeutralForegroundInvertedLinkHover": "#ffffff", + "colorNeutralForegroundInvertedLinkPressed": "#ffffff", + "colorNeutralForegroundInvertedLinkSelected": "#ffffff", + "colorBrandForegroundInverted": "#8f6fc3", + "colorBrandForegroundInvertedHover": "#9c7eca", + "colorBrandForegroundInvertedPressed": "#8f6fc3", + "colorBrandForegroundOnLight": "#734fb4", + "colorBrandForegroundOnLightHover": "#6444a0", + "colorBrandForegroundOnLightPressed": "#46316d", + "colorBrandForegroundOnLightSelected": "#553a86", + "colorNeutralBackground1": "#ffffff", + "colorNeutralBackground1Hover": "#f5f5f5", + "colorNeutralBackground1Pressed": "#e0e0e0", + "colorNeutralBackground1Selected": "#ebebeb", + "colorNeutralBackground2": "#fafafa", + "colorNeutralBackground2Hover": "#f0f0f0", + "colorNeutralBackground2Pressed": "#dbdbdb", + "colorNeutralBackground2Selected": "#e6e6e6", + "colorNeutralBackground3": "#f5f5f5", + "colorNeutralBackground3Hover": "#ebebeb", + "colorNeutralBackground3Pressed": "#d6d6d6", + "colorNeutralBackground3Selected": "#e0e0e0", + "colorNeutralBackground4": "#f0f0f0", + "colorNeutralBackground4Hover": "#fafafa", + "colorNeutralBackground4Pressed": "#f5f5f5", + "colorNeutralBackground4Selected": "#ffffff", + "colorNeutralBackground5": "#ebebeb", + "colorNeutralBackground5Hover": "#f5f5f5", + "colorNeutralBackground5Pressed": "#f0f0f0", + "colorNeutralBackground5Selected": "#fafafa", + "colorNeutralBackground6": "#e6e6e6", + "colorNeutralBackgroundInverted": "#292929", + "colorNeutralBackgroundStatic": "#333333", + "colorNeutralBackgroundAlpha": "rgba(255, 255, 255, 0.5)", + "colorNeutralBackgroundAlpha2": "rgba(255, 255, 255, 0.8)", + "colorSubtleBackground": "transparent", + "colorSubtleBackgroundHover": "#f5f5f5", + "colorSubtleBackgroundPressed": "#e0e0e0", + "colorSubtleBackgroundSelected": "#ebebeb", + "colorSubtleBackgroundLightAlphaHover": "rgba(255, 255, 255, 0.7)", + "colorSubtleBackgroundLightAlphaPressed": "rgba(255, 255, 255, 0.5)", + "colorSubtleBackgroundLightAlphaSelected": "transparent", + "colorSubtleBackgroundInverted": "transparent", + "colorSubtleBackgroundInvertedHover": "rgba(0, 0, 0, 0.1)", + "colorSubtleBackgroundInvertedPressed": "rgba(0, 0, 0, 0.3)", + "colorSubtleBackgroundInvertedSelected": "rgba(0, 0, 0, 0.2)", + "colorTransparentBackground": "transparent", + "colorTransparentBackgroundHover": "transparent", + "colorTransparentBackgroundPressed": "transparent", + "colorTransparentBackgroundSelected": "transparent", + "colorNeutralBackgroundDisabled": "#f0f0f0", + "colorNeutralBackgroundInvertedDisabled": "rgba(255, 255, 255, 0.1)", + "colorNeutralStencil1": "#e6e6e6", + "colorNeutralStencil2": "#fafafa", + "colorNeutralStencil1Alpha": "rgba(0, 0, 0, 0.1)", + "colorNeutralStencil2Alpha": "rgba(0, 0, 0, 0.05)", + "colorBackgroundOverlay": "rgba(0, 0, 0, 0.4)", + "colorScrollbarOverlay": "rgba(0, 0, 0, 0.5)", + "colorBrandBackground": "#734fb4", + "colorBrandBackgroundHover": "#6444a0", + "colorBrandBackgroundPressed": "#382755", + "colorBrandBackgroundSelected": "#553a86", + "colorCompoundBrandBackground": "#734fb4", + "colorCompoundBrandBackgroundHover": "#6444a0", + "colorCompoundBrandBackgroundPressed": "#553a86", + "colorBrandBackgroundStatic": "#734fb4", + "colorBrandBackground2": "#ddd1ed", + "colorBrandBackground2Hover": "#d0c0e6", + "colorBrandBackground2Pressed": "#b69fd8", + "colorBrandBackground3Static": "#553a86", + "colorBrandBackground4Static": "#382755", + "colorBrandBackgroundInverted": "#ffffff", + "colorBrandBackgroundInvertedHover": "#ddd1ed", + "colorBrandBackgroundInvertedPressed": "#c3afdf", + "colorBrandBackgroundInvertedSelected": "#d0c0e6", + "colorNeutralCardBackground": "#fafafa", + "colorNeutralCardBackgroundHover": "#ffffff", + "colorNeutralCardBackgroundPressed": "#f5f5f5", + "colorNeutralCardBackgroundSelected": "#ebebeb", + "colorNeutralCardBackgroundDisabled": "#f0f0f0", + "colorNeutralStrokeAccessible": "#616161", + "colorNeutralStrokeAccessibleHover": "#575757", + "colorNeutralStrokeAccessiblePressed": "#4d4d4d", + "colorNeutralStrokeAccessibleSelected": "#734fb4", + "colorNeutralStroke1": "#d1d1d1", + "colorNeutralStroke1Hover": "#c7c7c7", + "colorNeutralStroke1Pressed": "#b3b3b3", + "colorNeutralStroke1Selected": "#bdbdbd", + "colorNeutralStroke2": "#e0e0e0", + "colorNeutralStroke3": "#f0f0f0", + "colorNeutralStrokeSubtle": "#e0e0e0", + "colorNeutralStrokeOnBrand": "#ffffff", + "colorNeutralStrokeOnBrand2": "#ffffff", + "colorNeutralStrokeOnBrand2Hover": "#ffffff", + "colorNeutralStrokeOnBrand2Pressed": "#ffffff", + "colorNeutralStrokeOnBrand2Selected": "#ffffff", + "colorBrandStroke1": "#734fb4", + "colorBrandStroke2": "#c3afdf", + "colorBrandStroke2Hover": "#a98fd1", + "colorBrandStroke2Pressed": "#734fb4", + "colorBrandStroke2Contrast": "#c3afdf", + "colorCompoundBrandStroke": "#734fb4", + "colorCompoundBrandStrokeHover": "#6444a0", + "colorCompoundBrandStrokePressed": "#553a86", + "colorNeutralStrokeDisabled": "#e0e0e0", + "colorNeutralStrokeInvertedDisabled": "rgba(255, 255, 255, 0.4)", + "colorTransparentStroke": "transparent", + "colorTransparentStrokeInteractive": "transparent", + "colorTransparentStrokeDisabled": "transparent", + "colorNeutralStrokeAlpha": "rgba(0, 0, 0, 0.05)", + "colorNeutralStrokeAlpha2": "rgba(255, 255, 255, 0.2)", + "colorStrokeFocus1": "#ffffff", + "colorStrokeFocus2": "#000000", + "colorNeutralShadowAmbient": "rgba(0,0,0,0.12)", + "colorNeutralShadowKey": "rgba(0,0,0,0.14)", + "colorNeutralShadowAmbientLighter": "rgba(0,0,0,0.06)", + "colorNeutralShadowKeyLighter": "rgba(0,0,0,0.07)", + "colorNeutralShadowAmbientDarker": "rgba(0,0,0,0.20)", + "colorNeutralShadowKeyDarker": "rgba(0,0,0,0.24)", + "colorBrandShadowAmbient": "rgba(0,0,0,0.30)", + "colorBrandShadowKey": "rgba(0,0,0,0.25)", + "colorPaletteRedBackground1": "#fdf6f6", + "colorPaletteRedBackground2": "#f1bbbc", + "colorPaletteRedBackground3": "#d13438", + "colorPaletteRedForeground1": "#bc2f32", + "colorPaletteRedForeground2": "#751d1f", + "colorPaletteRedForeground3": "#d13438", + "colorPaletteRedBorderActive": "#d13438", + "colorPaletteRedBorder1": "#f1bbbc", + "colorPaletteRedBorder2": "#d13438", + "colorPaletteGreenBackground1": "#f1faf1", + "colorPaletteGreenBackground2": "#9fd89f", + "colorPaletteGreenBackground3": "#107c10", + "colorPaletteGreenForeground1": "#0e700e", + "colorPaletteGreenForeground2": "#094509", + "colorPaletteGreenForeground3": "#107c10", + "colorPaletteGreenBorderActive": "#107c10", + "colorPaletteGreenBorder1": "#9fd89f", + "colorPaletteGreenBorder2": "#107c10", + "colorPaletteDarkOrangeBackground1": "#fdf6f3", + "colorPaletteDarkOrangeBackground2": "#f4bfab", + "colorPaletteDarkOrangeBackground3": "#da3b01", + "colorPaletteDarkOrangeForeground1": "#c43501", + "colorPaletteDarkOrangeForeground2": "#7a2101", + "colorPaletteDarkOrangeForeground3": "#da3b01", + "colorPaletteDarkOrangeBorderActive": "#da3b01", + "colorPaletteDarkOrangeBorder1": "#f4bfab", + "colorPaletteDarkOrangeBorder2": "#da3b01", + "colorPaletteYellowBackground1": "#fffef5", + "colorPaletteYellowBackground2": "#fef7b2", + "colorPaletteYellowBackground3": "#fde300", + "colorPaletteYellowForeground1": "#817400", + "colorPaletteYellowForeground2": "#817400", + "colorPaletteYellowForeground3": "#fde300", + "colorPaletteYellowBorderActive": "#fde300", + "colorPaletteYellowBorder1": "#fef7b2", + "colorPaletteYellowBorder2": "#fde300", + "colorPaletteBerryBackground1": "#fdf5fc", + "colorPaletteBerryBackground2": "#edbbe7", + "colorPaletteBerryBackground3": "#c239b3", + "colorPaletteBerryForeground1": "#af33a1", + "colorPaletteBerryForeground2": "#6d2064", + "colorPaletteBerryForeground3": "#c239b3", + "colorPaletteBerryBorderActive": "#c239b3", + "colorPaletteBerryBorder1": "#edbbe7", + "colorPaletteBerryBorder2": "#c239b3", + "colorPaletteLightGreenBackground1": "#f2fbf2", + "colorPaletteLightGreenBackground2": "#a7e3a5", + "colorPaletteLightGreenBackground3": "#13a10e", + "colorPaletteLightGreenForeground1": "#11910d", + "colorPaletteLightGreenForeground2": "#0b5a08", + "colorPaletteLightGreenForeground3": "#13a10e", + "colorPaletteLightGreenBorderActive": "#13a10e", + "colorPaletteLightGreenBorder1": "#a7e3a5", + "colorPaletteLightGreenBorder2": "#13a10e", + "colorPaletteMarigoldBackground1": "#fefbf4", + "colorPaletteMarigoldBackground2": "#f9e2ae", + "colorPaletteMarigoldBackground3": "#eaa300", + "colorPaletteMarigoldForeground1": "#d39300", + "colorPaletteMarigoldForeground2": "#835b00", + "colorPaletteMarigoldForeground3": "#eaa300", + "colorPaletteMarigoldBorderActive": "#eaa300", + "colorPaletteMarigoldBorder1": "#f9e2ae", + "colorPaletteMarigoldBorder2": "#eaa300", + "colorPaletteRedForegroundInverted": "#dc5e62", + "colorPaletteGreenForegroundInverted": "#359b35", + "colorPaletteYellowForegroundInverted": "#fef7b2", + "colorPaletteDarkRedBackground2": "#d69ca5", + "colorPaletteDarkRedForeground2": "#420610", + "colorPaletteDarkRedBorderActive": "#750b1c", + "colorPaletteCranberryBackground2": "#eeacb2", + "colorPaletteCranberryForeground2": "#6e0811", + "colorPaletteCranberryBorderActive": "#c50f1f", + "colorPalettePumpkinBackground2": "#efc4ad", + "colorPalettePumpkinForeground2": "#712d09", + "colorPalettePumpkinBorderActive": "#ca5010", + "colorPalettePeachBackground2": "#ffddb3", + "colorPalettePeachForeground2": "#8f4e00", + "colorPalettePeachBorderActive": "#ff8c00", + "colorPaletteGoldBackground2": "#ecdfa5", + "colorPaletteGoldForeground2": "#6c5700", + "colorPaletteGoldBorderActive": "#c19c00", + "colorPaletteBrassBackground2": "#e0cea2", + "colorPaletteBrassForeground2": "#553e06", + "colorPaletteBrassBorderActive": "#986f0b", + "colorPaletteBrownBackground2": "#ddc3b0", + "colorPaletteBrownForeground2": "#50301a", + "colorPaletteBrownBorderActive": "#8e562e", + "colorPaletteForestBackground2": "#bdd99b", + "colorPaletteForestForeground2": "#294903", + "colorPaletteForestBorderActive": "#498205", + "colorPaletteSeafoamBackground2": "#a8f0cd", + "colorPaletteSeafoamForeground2": "#00723b", + "colorPaletteSeafoamBorderActive": "#00cc6a", + "colorPaletteDarkGreenBackground2": "#9ad29a", + "colorPaletteDarkGreenForeground2": "#063b06", + "colorPaletteDarkGreenBorderActive": "#0b6a0b", + "colorPaletteLightTealBackground2": "#a6e9ed", + "colorPaletteLightTealForeground2": "#00666d", + "colorPaletteLightTealBorderActive": "#00b7c3", + "colorPaletteTealBackground2": "#9bd9db", + "colorPaletteTealForeground2": "#02494c", + "colorPaletteTealBorderActive": "#038387", + "colorPaletteSteelBackground2": "#94c8d4", + "colorPaletteSteelForeground2": "#00333f", + "colorPaletteSteelBorderActive": "#005b70", + "colorPaletteBlueBackground2": "#a9d3f2", + "colorPaletteBlueForeground2": "#004377", + "colorPaletteBlueBorderActive": "#0078d4", + "colorPaletteRoyalBlueBackground2": "#9abfdc", + "colorPaletteRoyalBlueForeground2": "#002c4e", + "colorPaletteRoyalBlueBorderActive": "#004e8c", + "colorPaletteCornflowerBackground2": "#c8d1fa", + "colorPaletteCornflowerForeground2": "#2c3c85", + "colorPaletteCornflowerBorderActive": "#4f6bed", + "colorPaletteNavyBackground2": "#a3b2e8", + "colorPaletteNavyForeground2": "#001665", + "colorPaletteNavyBorderActive": "#0027b4", + "colorPaletteLavenderBackground2": "#d2ccf8", + "colorPaletteLavenderForeground2": "#3f3682", + "colorPaletteLavenderBorderActive": "#7160e8", + "colorPalettePurpleBackground2": "#c6b1de", + "colorPalettePurpleForeground2": "#341a51", + "colorPalettePurpleBorderActive": "#5c2e91", + "colorPaletteGrapeBackground2": "#d9a7e0", + "colorPaletteGrapeForeground2": "#4c0d55", + "colorPaletteGrapeBorderActive": "#881798", + "colorPaletteLilacBackground2": "#e6bfed", + "colorPaletteLilacForeground2": "#63276d", + "colorPaletteLilacBorderActive": "#b146c2", + "colorPalettePinkBackground2": "#f7c0e3", + "colorPalettePinkForeground2": "#80215d", + "colorPalettePinkBorderActive": "#e43ba6", + "colorPaletteMagentaBackground2": "#eca5d1", + "colorPaletteMagentaForeground2": "#6b0043", + "colorPaletteMagentaBorderActive": "#bf0077", + "colorPalettePlumBackground2": "#d696c0", + "colorPalettePlumForeground2": "#43002b", + "colorPalettePlumBorderActive": "#77004d", + "colorPaletteBeigeBackground2": "#d7d4d4", + "colorPaletteBeigeForeground2": "#444241", + "colorPaletteBeigeBorderActive": "#7a7574", + "colorPaletteMinkBackground2": "#cecccb", + "colorPaletteMinkForeground2": "#343231", + "colorPaletteMinkBorderActive": "#5d5a58", + "colorPalettePlatinumBackground2": "#cdd6d8", + "colorPalettePlatinumForeground2": "#3b4447", + "colorPalettePlatinumBorderActive": "#69797e", + "colorPaletteAnchorBackground2": "#bcc3c7", + "colorPaletteAnchorForeground2": "#202427", + "colorPaletteAnchorBorderActive": "#394146", + "colorStatusSuccessBackground1": "#f1faf1", + "colorStatusSuccessBackground2": "#9fd89f", + "colorStatusSuccessBackground3": "#107c10", + "colorStatusSuccessForeground1": "#0e700e", + "colorStatusSuccessForeground2": "#094509", + "colorStatusSuccessForeground3": "#107c10", + "colorStatusSuccessForegroundInverted": "#54b054", + "colorStatusSuccessBorderActive": "#107c10", + "colorStatusSuccessBorder1": "#9fd89f", + "colorStatusSuccessBorder2": "#107c10", + "colorStatusWarningBackground1": "#fff9f5", + "colorStatusWarningBackground2": "#fdcfb4", + "colorStatusWarningBackground3": "#f7630c", + "colorStatusWarningForeground1": "#bc4b09", + "colorStatusWarningForeground2": "#8a3707", + "colorStatusWarningForeground3": "#bc4b09", + "colorStatusWarningForegroundInverted": "#faa06b", + "colorStatusWarningBorderActive": "#f7630c", + "colorStatusWarningBorder1": "#fdcfb4", + "colorStatusWarningBorder2": "#bc4b09", + "colorStatusDangerBackground1": "#fdf3f4", + "colorStatusDangerBackground2": "#eeacb2", + "colorStatusDangerBackground3": "#c50f1f", + "colorStatusDangerForeground1": "#b10e1c", + "colorStatusDangerForeground2": "#6e0811", + "colorStatusDangerForeground3": "#c50f1f", + "colorStatusDangerForegroundInverted": "#dc626d", + "colorStatusDangerBorderActive": "#c50f1f", + "colorStatusDangerBorder1": "#eeacb2", + "colorStatusDangerBorder2": "#c50f1f", + "colorStatusDangerBackground3Hover": "#b10e1c", + "colorStatusDangerBackground3Pressed": "#960b18", + "shadow2": "0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14)", + "shadow4": "0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14)", + "shadow8": "0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14)", + "shadow16": "0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14)", + "shadow28": "0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14)", + "shadow64": "0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14)", + "shadow2Brand": "0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25)", + "shadow4Brand": "0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25)", + "shadow8Brand": "0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25)", + "shadow16Brand": "0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25)", + "shadow28Brand": "0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25)", + "shadow64Brand": "0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25)" +} From 669133d19745e024c4f068fda686dbf2c10c1fe3 Mon Sep 17 00:00:00 2001 From: Michael Flanakin Date: Fri, 31 Jan 2025 22:10:21 -0800 Subject: [PATCH 2/2] Format Power BI theme file --- src/power-bi/FinOpsToolkitLight.json | 65 +++++++++++++++++++++++++++- 1 file changed, 64 insertions(+), 1 deletion(-) diff --git a/src/power-bi/FinOpsToolkitLight.json b/src/power-bi/FinOpsToolkitLight.json index e0a0d80df..c0e14c65d 100644 --- a/src/power-bi/FinOpsToolkitLight.json +++ b/src/power-bi/FinOpsToolkitLight.json @@ -1 +1,64 @@ -{"name":"Microsoft FinOps light theme","dataColors":["#6F4BB2","#0078D4","#EF6950","#3449AA","#00A2AD","#733569","#E3008C","#335C50","#3599B8","#DFBFBF","#4AC5BB","#5F6B6D","#FB8281","#F4D25A","#7F898A","#A4DDEE","#FDAB89","#B687AC","#28738A","#A78F8F","#168980","#293537","#BB4A4A","#B59525","#475052","#6A9FB0","#BD7150","#7B4F71","#1B4D5C","#706060","#0F5C55","#1C2325"],"visualStyles":{"*":{"*":{"visualTooltip":[{"titleFontColor":{"solid":{"color":"#FFFFFF"}},"valueFontColor":{"solid":{"color":"#FFFFFF"}}}],"outspacePane":[{"checkboxAndApplyColor":{"solid":{"color":"#6F4BB2"}}}]}}},"bad":"#E00B1C","neutral":"#DB7500","good":"#57A300","minimum":"#EFEDF8","center":"#FFCA8A","maximum":"#8970C3","textClasses":{"callout":{"fontFace":"'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif"},"title":{"fontFace":"'Segoe UI Semibold', wf_segoe-ui_semibold, helvetica, arial, sans-serif"}}} \ No newline at end of file +{ + "name": "Microsoft FinOps light theme", + "dataColors": [ + "#6f4bb2", + "#0078d4", + "#ef6950", + "#3449aa", + "#00a2ad", + "#733569", + "#e3008c", + "#335c50", + "#3599b8", + "#dfbfbf", + "#4ac5bb", + "#5f6b6d", + "#fb8281", + "#f4d25a", + "#7f898a", + "#a4ddee", + "#fdab89", + "#b687ac", + "#28738a", + "#a78f8f", + "#168980", + "#293537", + "#bb4a4a", + "#b59525", + "#475052", + "#6a9fb0", + "#bd7150", + "#7b4f71", + "#1b4d5c", + "#706060", + "#0f5c55", + "#1c2325" + ], + "visualStyles": { + "*": { + "*": { + "visualTooltip": [ + { + "titleFontColor": { "solid": { "color": "#ffffff" } }, + "valueFontColor": { "solid": { "color": "#ffffff" } } + } + ], + "outspacePane": [ + { + "checkboxAndApplyColor": { "solid": { "color": "#6f4bb2" } } + } + ] + } + } + }, + "bad": "#e00b1c", + "neutral": "#db7500", + "good": "#57a300", + "minimum": "#efedf8", + "center": "#ffca8a", + "maximum": "#8970c3", + "textClasses": { + "callout": { "fontFace": "'Segoe UI', wf_segoe-ui_normal, helvetica, arial, sans-serif" }, + "title": { "fontFace": "'Segoe UI Semibold', wf_segoe-ui_semibold, helvetica, arial, sans-serif" } + } +}