ryanml
3 years ago
commit
dfd52700a0
@ -0,0 +1,9 @@ |
||||
module.exports = { |
||||
parser: '@babel/eslint-parser', |
||||
plugins: ['@babel'], |
||||
rules: { |
||||
'@babel/no-invalid-this': 'error', |
||||
// Prettier handles this
|
||||
'@babel/semi': 'off', |
||||
}, |
||||
}; |
||||
@ -0,0 +1,67 @@ |
||||
const path = require('path'); |
||||
|
||||
module.exports = { |
||||
extends: [ |
||||
'@metamask/eslint-config', |
||||
path.resolve(__dirname, '.eslintrc.jsdoc.js'), |
||||
], |
||||
|
||||
globals: { |
||||
document: 'readonly', |
||||
window: 'readonly', |
||||
}, |
||||
|
||||
rules: { |
||||
'default-param-last': 'off', |
||||
'prefer-object-spread': 'error', |
||||
'require-atomic-updates': 'off', |
||||
|
||||
// This is the same as our default config, but for the noted exceptions
|
||||
'spaced-comment': [ |
||||
'error', |
||||
'always', |
||||
{ |
||||
markers: [ |
||||
'global', |
||||
'globals', |
||||
'eslint', |
||||
'eslint-disable', |
||||
'*package', |
||||
'!', |
||||
',', |
||||
// Local additions
|
||||
'/:', // This is for our code fences
|
||||
], |
||||
exceptions: ['=', '-'], |
||||
}, |
||||
], |
||||
|
||||
'no-invalid-this': 'off', |
||||
|
||||
// TODO: remove this override
|
||||
'padding-line-between-statements': [ |
||||
'error', |
||||
{ |
||||
blankLine: 'always', |
||||
prev: 'directive', |
||||
next: '*', |
||||
}, |
||||
{ |
||||
blankLine: 'any', |
||||
prev: 'directive', |
||||
next: 'directive', |
||||
}, |
||||
// Disabled temporarily to reduce conflicts while PR queue is large
|
||||
// {
|
||||
// blankLine: 'always',
|
||||
// prev: ['multiline-block-like', 'multiline-expression'],
|
||||
// next: ['multiline-block-like', 'multiline-expression'],
|
||||
// },
|
||||
], |
||||
|
||||
// It is common to import modules without assigning them to variables in
|
||||
// a browser context. For instance, we may import polyfills which change
|
||||
// global variables, or we may import stylesheets.
|
||||
'import/no-unassigned-import': 'off', |
||||
}, |
||||
}; |
||||
@ -0,0 +1,23 @@ |
||||
module.exports = { |
||||
// Note that jsdoc is already in the `plugins` array thanks to
|
||||
// @metamask/eslint-config — this just extends the config there
|
||||
rules: { |
||||
// Allow tag `jest-environment` to work around Jest bug
|
||||
// See: https://github.com/facebook/jest/issues/7780
|
||||
'jsdoc/check-tag-names': ['error', { definedTags: ['jest-environment'] }], |
||||
'jsdoc/match-description': 'off', |
||||
'jsdoc/require-description': 'off', |
||||
'jsdoc/require-jsdoc': 'off', |
||||
'jsdoc/require-param-description': 'off', |
||||
'jsdoc/require-param-type': 'off', |
||||
'jsdoc/require-returns-description': 'off', |
||||
'jsdoc/require-returns-type': 'off', |
||||
'jsdoc/require-returns': 'off', |
||||
'jsdoc/valid-types': 'off', |
||||
}, |
||||
settings: { |
||||
jsdoc: { |
||||
mode: 'typescript', |
||||
}, |
||||
}, |
||||
}; |
||||
@ -0,0 +1,10 @@ |
||||
module.exports = { |
||||
extends: ['@metamask/eslint-config-nodejs'], |
||||
rules: { |
||||
'node/no-process-env': 'off', |
||||
// TODO: re-enable these rules
|
||||
'node/no-sync': 'off', |
||||
'node/no-unpublished-import': 'off', |
||||
'node/no-unpublished-require': 'off', |
||||
}, |
||||
}; |
||||
@ -0,0 +1,201 @@ |
||||
import { Meta } from '@storybook/addon-docs'; |
||||
import ActionaleMessage from '../ui/components/ui/actionable-message'; |
||||
import designTokenDiagramImage from './images/design.token.graphic.svg'; |
||||
|
||||
<Meta title="Design Tokens / Color" /> |
||||
|
||||
# Color |
||||
|
||||
Color is used to express style and communicate meaning. |
||||
|
||||
<ActionaleMessage |
||||
type="warning" |
||||
message="We are in the process of consolidating all of our colors, making them accessible and enabling theming. Many of the colors used throughout the codebase are deprecated please follow the guide below to ensure you are using the correct colors when building MetaMask UI" |
||||
/> |
||||
|
||||
<br /> |
||||
|
||||
## Design tokens |
||||
|
||||
We are importing design tokens as CSS variables from [@metamask/design-tokens](https://github.com/MetaMask/design-tokens) repo to help consolidate colors and enable theming across all MetaMask products. |
||||
|
||||
### Token tiers |
||||
|
||||
We follow a 3 tiered system for color design tokens and css variables. |
||||
|
||||
<div |
||||
style={{ |
||||
textAlign: 'center', |
||||
backgroundColor: 'var(--color-background-alternative)', |
||||
padding: 32, |
||||
}} |
||||
> |
||||
<img width="80%" src={designTokenDiagramImage} /> |
||||
</div> |
||||
|
||||
<br /> |
||||
<br /> |
||||
|
||||
### **Brand colors** (tier 1) |
||||
|
||||
These colors **SHOULD NOT** be used in your styles directly. They are used as a reference for the [theme colors](#theme-colors-tier-2). Brand colors should just keep track of every color used in our app. |
||||
|
||||
#### Example of brand color css variables |
||||
|
||||
```css |
||||
/** !!!DO NOT USE BRAND COLORS DIRECTLY IN YOUR CODE!!! */ |
||||
var(--brand-colors-white-white000) |
||||
var(--brand-colors-white-white010) |
||||
var(--brand-colors-grey-grey030) |
||||
``` |
||||
|
||||
### **Theme colors** (tier 2) |
||||
|
||||
Theme colors are color agnostic, semantically neutral and theme compatible design tokens that you can use in your code and styles. Please refer to the description of each token for it's intended purpose in [@metamask/design-tokens](https://github.com/MetaMask/design-tokens/blob/main/src/figma/tokens.json#L329-L554). |
||||
|
||||
#### Example of theme color css variables |
||||
|
||||
```css |
||||
/** Backgrounds */ |
||||
var(--color-background-default) |
||||
var(--color-background-alternative) |
||||
|
||||
/** Text */ |
||||
var(--color-text-default) |
||||
var(--color-text-alternative) |
||||
var(--color-text-muted) |
||||
|
||||
/** Icons */ |
||||
var(--color-icon-default) |
||||
var(--color-icon-muted) |
||||
|
||||
/** Borders */ |
||||
var(--color-border-default) |
||||
var(--color-border-muted) |
||||
|
||||
/** Overlays */ |
||||
var(--color-overlay-default) |
||||
var(--color-overlay-inverse) |
||||
|
||||
/** User Actions */ |
||||
var(--color-primary-default) |
||||
var(--color-primary-alternative) |
||||
var(--color-primary-muted) |
||||
var(--color-primary-inverse) |
||||
var(--color-primary-disabled) |
||||
|
||||
var(--color-secondary-default) |
||||
var(--color-secondary-alternative) |
||||
var(--color-secondary-muted) |
||||
var(--color-secondary-inverse) |
||||
var(--color-secondary-disabled) |
||||
|
||||
/** States */ |
||||
/** Error */ |
||||
var(--color-error-default) |
||||
var(--color-error-alternative) |
||||
var(--color-error-muted) |
||||
var(--color-error-inverse) |
||||
var(--color-error-disabled) |
||||
|
||||
/** Warning */ |
||||
var(--color-warning-default) |
||||
var(--color-warning-alternative) |
||||
var(--color-warning-muted) |
||||
var(--color-warning-inverse) |
||||
var(--color-warning-disabled) |
||||
|
||||
/** Success */ |
||||
var(--color-success-default) |
||||
var(--color-success-alternative) |
||||
var(--color-success-muted) |
||||
var(--color-success-inverse) |
||||
var(--color-success-disabled) |
||||
|
||||
/** Info */ |
||||
var(--color-info-default) |
||||
var(--color-info-alternative) |
||||
var(--color-info-muted) |
||||
var(--color-info-inverse) |
||||
var(--color-info-disabled) |
||||
``` |
||||
|
||||
### **Component colors** (tier 3) |
||||
|
||||
Another level of abstraction is component tier colors that you can define at the top of your styles and use at the component specific level. |
||||
|
||||
```scss |
||||
.button { |
||||
--color-background-primary: var(--color-primary-default); |
||||
--color-text-primary: var(--color-primary-inverse); |
||||
--color-border-primary: var(--color-primary-default); |
||||
|
||||
--color-background-primary-hover: var(--color-primary-alternative); |
||||
--color-border-primary-hover: var(--color-primary-alternative); |
||||
|
||||
.btn-primary { |
||||
background-color: var(--color-background-primary); |
||||
color: var(--color-text-primary); |
||||
border: 1px solid var(--color-border-primary); |
||||
|
||||
&:hover { |
||||
background-color: var(--color-background-primary-hover); |
||||
border: 1px solid var(--color-border-primary-hover); |
||||
} |
||||
|
||||
/** btn-primary css continued... */ |
||||
} |
||||
} |
||||
``` |
||||
|
||||
## Takeaways |
||||
|
||||
- Do not use static HEX values in your code. Use the [theme colors](#theme-colors-tier-2). If one does not exist for your use case ask the designer or [create an issue](https://github.com/MetaMask/metamask-extension/issues/new) and tag it with a `design-system` label. |
||||
- Make sure the design token you are using is for it's intended purpose. Please refer to the description of each token in [@metamask/design-tokens](https://github.com/MetaMask/design-tokens/blob/main/src/figma/tokens.json#L329-L554). |
||||
|
||||
### ❌ Don't do this |
||||
|
||||
Don't use static hex values or brand color tokens in your code. |
||||
|
||||
```css |
||||
/** |
||||
* Don't do this |
||||
* Static hex values create inconsistency and will break UI when using dark mode |
||||
**/ |
||||
.card { |
||||
background-color: #ffffff; |
||||
color: #24272a; |
||||
} |
||||
|
||||
/** |
||||
* Don't do this |
||||
* Not theme compatible and will break UI when using dark theme |
||||
**/ |
||||
.card { |
||||
background-color: var(--brand-colors-white-white000); |
||||
color: var(--brand-colors-grey-grey800); |
||||
} |
||||
``` |
||||
|
||||
### ✅ Do this |
||||
|
||||
Do use component tiered and [theme colors](#theme-colors-tier-2) in your styles and code |
||||
|
||||
```css |
||||
.card { |
||||
--color-background: var(--color-background-default); |
||||
--color-text: var(--color-text-default); |
||||
|
||||
background-color: var(--color-background); |
||||
color: var(--color-text); |
||||
} |
||||
``` |
||||
|
||||
<br /> |
||||
|
||||
## References |
||||
|
||||
- [@metamask/design-tokens](https://github.com/MetaMask/design-tokens) |
||||
- [Figma brand colors library](https://www.figma.com/file/cBAUPFMnbv6tHR1J8KvBI2/Brand-Colors?node-id=0%3A1) (internal use only) |
||||
- [Figma theme colors library](https://www.figma.com/file/kdFzEC7xzSNw7cXteqgzDW/Light-Theme-Colors?node-id=0%3A1) (internal use only) |
||||
- [Figma dark theme colors library](https://www.figma.com/file/rLKsoqpjyoKauYnFDcBIbO/Dark-Theme-Colors?node-id=0%3A1) (internal use only) |
||||
|
After Width: | Height: | Size: 19 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 916 B |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 871 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 996 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
@ -0,0 +1,34 @@ |
||||
import { |
||||
restrictedMethodPermissionBuilders, |
||||
selectHooks, |
||||
} from '@metamask/rpc-methods'; |
||||
import { endowmentPermissionBuilders } from '@metamask/snap-controllers'; |
||||
|
||||
/** |
||||
* @returns {Record<string, Record<string, unknown>>} All endowment permission |
||||
* specifications. |
||||
*/ |
||||
export const buildSnapEndowmentSpecifications = () => |
||||
Object.values(endowmentPermissionBuilders).reduce( |
||||
(allSpecifications, { targetKey, specificationBuilder }) => { |
||||
allSpecifications[targetKey] = specificationBuilder(); |
||||
return allSpecifications; |
||||
}, |
||||
{}, |
||||
); |
||||
|
||||
/** |
||||
* @param {Record<string, Function>} hooks - The hooks for the Snap |
||||
* restricted method implementations. |
||||
*/ |
||||
export function buildSnapRestrictedMethodSpecifications(hooks) { |
||||
return Object.values(restrictedMethodPermissionBuilders).reduce( |
||||
(specifications, { targetKey, specificationBuilder, methodHooks }) => { |
||||
specifications[targetKey] = specificationBuilder({ |
||||
methodHooks: selectHooks(hooks, methodHooks), |
||||
}); |
||||
return specifications; |
||||
}, |
||||
{}, |
||||
); |
||||
} |
||||
@ -0,0 +1,46 @@ |
||||
import { |
||||
EndowmentPermissions, |
||||
RestrictedMethods, |
||||
} from '../../../../../shared/constants/permissions'; |
||||
import { |
||||
buildSnapEndowmentSpecifications, |
||||
buildSnapRestrictedMethodSpecifications, |
||||
} from './snap-permissions'; |
||||
|
||||
describe('buildSnapRestrictedMethodSpecifications', () => { |
||||
it('creates valid permission specification objects', () => { |
||||
const hooks = { |
||||
addSnap: () => undefined, |
||||
clearSnapState: () => undefined, |
||||
getMnemonic: () => undefined, |
||||
getSnap: () => undefined, |
||||
getSnapRpcHandler: () => undefined, |
||||
getSnapState: () => undefined, |
||||
showConfirmation: () => undefined, |
||||
updateSnapState: () => undefined, |
||||
}; |
||||
|
||||
const specifications = buildSnapRestrictedMethodSpecifications(hooks); |
||||
|
||||
const allRestrictedMethods = Object.keys(RestrictedMethods); |
||||
Object.keys(specifications).forEach((permissionKey) => |
||||
expect(allRestrictedMethods).toContain(permissionKey), |
||||
); |
||||
|
||||
Object.values(specifications).forEach((specification) => { |
||||
expect(specification).toMatchObject({ |
||||
targetKey: expect.stringMatching(/^(snap_|wallet_)/u), |
||||
methodImplementation: expect.any(Function), |
||||
allowedCaveats: null, |
||||
}); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
describe('buildSnapEndowmentSpecifications', () => { |
||||
it('creates valid permission specification objects', () => { |
||||
expect( |
||||
Object.keys(buildSnapEndowmentSpecifications()).sort(), |
||||
).toStrictEqual(Object.keys(EndowmentPermissions).sort()); |
||||
}); |
||||
}); |
||||
@ -1 +1 @@ |
||||
export { default } from './createMethodMiddleware'; |
||||
export * from './createMethodMiddleware'; |
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue