3.3.2 • Published 5 years ago
photon-colors v3.3.2
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