⚠ This page is served via a proxy. Original site: https://github.com
This service does not collect credentials or authentication data.
Skip to content

Directly use photon-colors #5821

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
arai-a wants to merge 1 commit into
base: main
Choose a base branch
from
+27 −72
Open

Directly use photon-colors #5821

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/components/js-tracer/Canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import { GREY_20 } from 'photon-colors';
import { GREY_20, BLUE_40 } from 'photon-colors';
import * as React from 'react';
import classNames from 'classnames';
import {
Expand All @@ -16,7 +16,6 @@ import { ChartCanvas } from 'firefox-profiler/components/shared/chart/Canvas';
import TextMeasurement from 'firefox-profiler/utils/text-measurement';
import { FastFillStyle } from 'firefox-profiler/utils';
import type { updatePreviewSelection } from 'firefox-profiler/actions/profile-view';
import { BLUE_40 } from 'firefox-profiler/utils/colors';

import type {
Milliseconds,
Expand Down
96 changes: 26 additions & 70 deletions src/utils/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,76 +4,32 @@

import { lightDark, maybeLightDark } from './dark-mode';

/**
* These are the colors from Photon. They are inlined to provide easy access. If updating
* please change the CSS variables as well.
*
* Firefox Colors v1.0.3
* https://github.com/FirefoxUX/photon-colors/blob/master/photon-colors.js
*/

export const MAGENTA_50 = '#ff1ad9';
export const MAGENTA_60 = '#ed00b5';
export const MAGENTA_70 = '#b5007f';
export const MAGENTA_80 = '#7d004f';
export const MAGENTA_90 = '#440027';

export const PURPLE_50 = '#9400ff';
export const PURPLE_60 = '#8000d7';
export const PURPLE_70 = '#6200a4';
export const PURPLE_80 = '#440071';
export const PURPLE_90 = '#25003e';

export const BLUE_40 = '#45a1ff';
export const BLUE_50 = '#0a84ff';
export const BLUE_60 = '#0060df';
export const BLUE_70 = '#003eaa';
export const BLUE_80 = '#002275';
export const BLUE_90 = '#000f40';

export const TEAL_50 = '#00feff';
export const TEAL_60 = '#00c8d7';
export const TEAL_70 = '#008ea4';
export const TEAL_80 = '#005a71';
export const TEAL_90 = '#002d3e';

export const GREEN_50 = '#30e60b';
export const GREEN_60 = '#12bc00';
export const GREEN_70 = '#058b00';
export const GREEN_80 = '#006504';
export const GREEN_90 = '#003706';

export const YELLOW_50 = '#ffe900';
export const YELLOW_60 = '#d7b600';
export const YELLOW_70 = '#a47f00';
export const YELLOW_80 = '#715100';
export const YELLOW_90 = '#3e2800';

export const RED_50 = '#ff0039';
export const RED_60 = '#d70022';
export const RED_70 = '#a4000f';
export const RED_80 = '#5a0002';
export const RED_90 = '#3e0200';

export const ORANGE_50 = '#ff9400';
export const ORANGE_60 = '#d76e00';
export const ORANGE_70 = '#a44900';
export const ORANGE_80 = '#712b00';
export const ORANGE_90 = '#3e1300';

export const GREY_10 = '#f9f9fa';
export const GREY_20 = '#ededf0';
export const GREY_30 = '#d7d7db';
export const GREY_40 = '#b1b1b3';
export const GREY_50 = '#737373';
export const GREY_60 = '#4a4a4f';
export const GREY_70 = '#38383d';
export const GREY_80 = '#2a2a2e';
export const GREY_90 = '#0c0c0d';

export const INK_70 = '#363959';
export const INK_80 = '#202340';
export const INK_90 = '#0f1126';
import {
BLUE_40,
BLUE_60,
GREEN_50,
GREEN_60,
GREEN_70,
GREEN_80,
GREY_20,
GREY_30,
GREY_40,
GREY_50,
GREY_60,
GREY_70,
MAGENTA_60,
MAGENTA_70,
ORANGE_50,
ORANGE_60,
ORANGE_70,
PURPLE_60,
PURPLE_70,
RED_60,
RED_70,
YELLOW_50,
YELLOW_60,
YELLOW_70,
} from 'photon-colors';

type ColorStyles = {
readonly _selectedFillStyle: string | [string, string];
Expand Down