Skip to content
This repository has been archived by the owner on Jul 23, 2024. It is now read-only.

FirefoxUX/photon-colors

Repository files navigation

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