firefoxux / design-tokens Goto Github PK
View Code? Open in Web Editor NEWA place we used to store decisions we make. Check https://github.com/firefoxux/photon-colors for up-to-date stuff.
License: Mozilla Public License 2.0
A place we used to store decisions we make. Check https://github.com/firefoxux/photon-colors for up-to-date stuff.
License: Mozilla Public License 2.0
Things that come to my mind:
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.
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>
/colors
to /photon-colors
/components
to /photon-components
/colors/colors.json
to /photon-colors/photon-colors.json
/photon-colors/package.json
This will also enhance the link between the module/package name and the source/repository name.
Anythings else to take into consideration @bwinton?
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!
(As described here.)
All we need to do is one of the following:
which seem simple enough, and not a terrible idea. ๐
From the dark theme toolbar buttons: https://design.firefox.com/photon/visuals/iconography.html#color ๐
Are icons in message bars optional or required?
The documentation doesn't say.
We can close this repo as we have specific repositories for the specific tokens. Any blocker?
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?
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 @import
s, but that seems less than stellar.
We're using SASS vars already in mozilla/addons-frontend it would be handy to have SASS output as well as CSS vars.
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.
Property | Value |
---|---|
Height | 32px |
Padding | 8px |
Size | 13px |
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'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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.