firefoxux / design-tokens Goto Github PK

• usage in development and apps
• naming and organisation
• contribution guideline

• Rename /colors to /photon-colors
• Rename /components to /photon-components
• Rename/colors/colors.json to /photon-colors/photon-colors.json
• Build new colors files
• Update /photon-colors/package.json
• Publish new npm package version

This will also enhance the link between the module/package name and the source/repository name.

Anythings else to take into consideration @bwinton?

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.

This is an issue for opening a conversation around how to implement opaque colors in the color tokens. Will follow up with a couple of proposals tomorrow!

Are icons in message bars optional or required?

The documentation doesn't say.

We've got npm packages for web, but what should we do for Firefox Desktop, Android, and iOS?
A gh-pages site with zip files for download maybe? Should we also offer this for web?

(As described here.)

All we need to do is one of the following:

1. Set a SCSS/Sass/CSS file on the "main" field of their package.json/bower.json
2. Set a SCSS/Sass/CSS file on the "style" field of their package.json/bower.json
3. Have a index.css file on the root of their module

which seem simple enough, and not a terrible idea. 🙂

According to mozilla/Fira#210 (comment), the Fira font used for Photon has been relocated to carrois/Fira. This repo has all the proper webfont files, but does not offer an NPM package to import Fira from.

Should the Fira webfont files exist in the design-tokens repo? On the one hand, it makes sense to house all of the necessary files here, but an argument could be made to submit a PR to carrois/Fira. Ideally we would have some sort of photon-fonts package, and I suspect that would be easier to manage if we wrapped all the files into design-tokens.

Currently, we can simply rely on the CDN's fira.css through @imports, but that seems less than stellar.

What exactly does the "size" property refer to in the context of buttons?
Is it font-size?
It is rather ambiguous as to what it means.

If size refers to font-size and padding is 8 pixel on the top and 8 pixel on the bottom then that would be 8 + 13 + 8 which equals 29 which does not add up to the declared height of 32 pixels.

This leaves me confused.

We're using SASS vars already in mozilla/addons-frontend it would be handy to have SASS output as well as CSS vars.

• give a design token definition
• contribution guidelines
• add section about Photon themes

Things that come to my mind:

• transitions: the bezier curve, the possible durations
• shadows

Following what is specified here https://dxr.mozilla.org/mozilla-central/source/mobile/android/app/src/photon/res/values/colors.xml we could convert the color tokens to xml as well. The format could be as it follows:

<color name="blue_50_a30">#0A84ff4C</color>

We can close this repo as we have specific repositories for the specific tokens. Any blocker?

From the dark theme toolbar buttons: https://design.firefox.com/photon/visuals/iconography.html#color 🙂

well, there's an info icon, but that's it

Hey @vanillajonathan I was testing the Gimp Palette on both macOS and Ubuntu and when imported the palette name is set to "colors.gpl". Do you know if it's possible to set it to "Photon Colors"? (I am also in the process of changing the other generated files to photon-colors.ext)

When using the tokens in applications I would like to suggest if possible to name them "Magenta 50" instead "magenta-50". Can you help on that?