Package Exports

photon-colors

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (photon-colors) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 git@github.com: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