firefoxux / photon-colors

The design tokens for the Photon color scheme

Photon Colors

The standard set of colours for projects that want to harmonize with Firefox’s new Photon design language.

Use

Develop

The Photon Colors can be installed via npm.

$ npm install photon-colors

CSS

@import url('photon-colors.css');

.class_name {
  color: var(--blue-60);
}

Sass

@import "photon-colors.scss";

.class_name {
  color: $blue-60;
}

Less

@import (reference) "photon-colors.less";

.class_name {
  color: @blue-60;
}

JavaScript

import photon from 'photon-colors.js';

document.getElementById(id).style.color = photon.BLUE_60;

XML

Download and paste photon-colors.android.xml to your Android project. Then:

<item android:color="@color/blue_60" />

Swift

Download and paste photon-colors.android.swift to your Swift project. Then:

UIColor.Photon.Blue60

Apps

Sketch

1. Install Sketch Palettes plugin
2. Download photon-colors.sketchpalette
3. From Sketch.app Menu Bar Menus select
4. Plugins > Sketch Palettes > Load Palette
5. Select photon-colors.sketchpalette
6. Select load method to Document Presets or Global Presents

GIMP

1. Download photon-colors.gpl
2. From GIMP Menu Bar Menus select
3. Windows > Dockable Dialogs > Palettes
4. From Tab Menu select
5. Palettes Menu > Import Palette... > Select Source > Palette file
6. Select photon-colors.gpl

LibreOffice

1. Download photon-colors.soc
2. From LibreOffice Menu Bar Menus select
3. Format > Page... > Area > Color > Load Color List
4. Select photon-colors.soc

Contribute

Open an issue or submit a pull request.

Get started

$ git clone [email protected]:FirefoxUX/photon-colors.git
$ cd photon-colors
$ npm install

Add or change color

1. Edit ./photon-colors.json
2. In the terminal, run npm run build

Add file type

1. Edit ./build.js
2. In the terminal, run npm run build

photon-colors's Issues

Ship photon-colors.css with Firefox

Originally created by vanillajonathan on Oct 25, 2017

Ship the photon-colors.css style sheet with Firefox, reachable through the chrome:// URI.

This allows Firefox to internally make use of the design tokens.
It also allows third-party WebExtension developers to reference the style sheet directly without redundantly bundling the style sheet with every WebExtension.

[Proposal] Remove transparent color variables

How variables could be defined:

:root {
  --blue-50: 210, 100%, 51%;
}

How variables could be used:

.button:focus {
    box-shadow: 0 0 0 2px hsl(var(--blue-50), .3);
}

Update CHANGELOG.md

Include latest changes and additions

Look into using Theo for the design-tokens.

Add taskcluster.yml for opening PR against android icon components

This is the repo: https://github.com/mozilla-mobile/android-components

This is the collection of colors https://github.com/mozilla-mobile/android-components/blob/master/components/ui/colors/src/main/res/values/photon_colors.xml

The name on our repository should match the name on the mozac repository. The name should be unique, something like photon_magenta_50

Devtools color: "Blue 30" #75baff

Heads up: we added --blue-30: #75baff; to the DevTools color palette.
(Looks like I'm the one who came up with this shade. I think I tried to extrapolate from existing values.)

It's used in the dark theme for:

• "Checked" or "active" icons
• Some link text

And in the light theme for:

• A border in Console shown when navigating between pages (with "Persist Logs" checked).

We can tweak the value in DevTools if you want to make an "official" Blue 30 value.

Lighter ink shade color

From FirefoxUX/photon#296 by @ericawright

I'm also in need of something like: #7878a5, I can get a similar result if I use Purple60 with 30 alpha, but our purples are too red to replace it.

almost like a light shade of the ink palette?

Add CONTRIBUTING.md