photon-colors

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

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

GIMP

• Download photon-colors.gpl
• From Gimp Menu Bar Menus select
• Windows > Dockable Dialogs > Palettes
• From Tab Menu select
• Palettes Menu > Import Palette... > Select Source > Palette file
• Select photon-colors.gpl

LibreOffice

• Download photon-colors.soc
• From Libre Office Menu Bar Menus select
• Format > Page... > Area > Color > Load Color List
• Select photon-colors.soc

Contribute

Open an issue or submit a pull request.

Get started

$ git clone [e-mail]:FirefoxUX/photon-colors.git
$ cd photon-colors
$ npm install

Add or change color

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

Add file type

• Edit ./build.js
• In the terminal, run npm run build