408 | Suggested color styles 409 |
410 |-
413 | {renderTokenSuggestions()}
414 |
├── .github └── workflows │ └── main.yml ├── .gitignore ├── .husky ├── .gitignore └── pre-commit ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── CODEOWNERS ├── README.md ├── data ├── dark-mode.json └── light-mode.json ├── dist ├── 0.js ├── code.js ├── ui.html └── ui.js ├── manifest.json ├── package.json ├── src ├── app │ ├── assets │ │ ├── dark-mode-thumbnail.svg │ │ ├── icon-chevron-down.svg │ │ ├── icon-chevron-left.svg │ │ ├── icon-chevron-right.svg │ │ ├── icon-dark-design-linter.svg │ │ ├── icon-dark-table-creator.svg │ │ ├── icon-dark-theme-switcher.svg │ │ ├── icon-design-linter.svg │ │ ├── icon-external-link.svg │ │ ├── icon-help.svg │ │ ├── icon-info.svg │ │ ├── icon-layer-boolean-operation.svg │ │ ├── icon-layer-ellipse.svg │ │ ├── icon-layer-line.svg │ │ ├── icon-layer-polygon.svg │ │ ├── icon-layer-rectangle.svg │ │ ├── icon-layer-text.svg │ │ ├── icon-more.svg │ │ ├── icon-table-creator.svg │ │ ├── icon-theme-switcher.svg │ │ ├── light-mode-thumbnail.svg │ │ ├── logo.svg │ │ └── one-core-team-photo.png │ ├── components │ │ ├── App.tsx │ │ ├── DesignLinter │ │ │ ├── ColorLinter.tsx │ │ │ ├── ColorTile.tsx │ │ │ ├── DesignLinter.tsx │ │ │ └── LanguageLinterPlugin.tsx │ │ ├── Home.tsx │ │ ├── PluginContext.ts │ │ ├── Resizer.tsx │ │ ├── TableCreator │ │ │ ├── ColumnConfiguration.tsx │ │ │ ├── DimensionsSelection.tsx │ │ │ └── TableCreator.tsx │ │ ├── ThemeSwitcher.tsx │ │ └── utils.ts │ ├── custom.d.ts │ ├── index.html │ ├── index.tsx │ └── styles │ │ └── ui.css └── plugin │ ├── color-linter │ └── colorLinter.ts │ ├── controller.ts │ ├── custom.d.ts │ ├── language-linter │ └── languageLinter.ts │ ├── oneCorePaintStyles.js │ ├── table-creator │ └── tableCreator.ts │ └── theme-switcher │ └── themeSwitcher.ts ├── tsconfig.json ├── webpack.config.js └── yarn.lock /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | # This is a basic workflow that is manually triggered 2 | 3 | name: Fetch Design Tokens 4 | 5 | # Controls when the action will run. Workflow runs when manually triggered using the UI 6 | # or API. 7 | on: 8 | workflow_dispatch: 9 | schedule: 10 | # * is a special character in YAML so you have to quote this string 11 | - cron: "* 12 * * *" 12 | 13 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 14 | jobs: 15 | # This workflow contains a single job 16 | fetchFigmaFileData: 17 | # The type of runner that the job will run on 18 | runs-on: ubuntu-latest 19 | 20 | # Steps represent a sequence of tasks that will be executed as part of the job 21 | steps: 22 | # Runs a single command using the runners shell 23 | - name: Checkout 🛎️ 24 | uses: actions/checkout@v3 25 | with: 26 | persist-credentials: false 27 | - name: Fetch light mode data 28 | # You may pin to the exact commit or the version. 29 | # uses: JamesIves/fetch-api-data-action@c38518c0358c6a522f0d4880212b65963e2d6574 30 | uses: JamesIves/fetch-api-data-action@v2 31 | with: 32 | # The URL of the endpoint you would like to retrieve data from. 33 | endpoint: https://api.figma.com/v1/files/RsXZaTPG4VeIZTSjQPSosc/styles 34 | # Any applicable configuration settings that should be set such as authentication tokens. You can reference secrets using the secrets syntax, or you can reference data returned from the `TOKEN_ENDPOINT` request using the triple bracket syntax. 35 | configuration: '{ "method": "GET", "headers": {"X-Figma-Token": "${{ secrets.FIGMA_API_KEY }}"} }' 36 | set-output: false 37 | save-name: light-mode 38 | - name: Fetch dark mode data 39 | # You may pin to the exact commit or the version. 40 | # uses: JamesIves/fetch-api-data-action@c38518c0358c6a522f0d4880212b65963e2d6574 41 | uses: JamesIves/fetch-api-data-action@v2 42 | with: 43 | # The URL of the endpoint you would like to retrieve data from. 44 | endpoint: https://api.figma.com/v1/files/r2A9XUUQxda5FmgXSsqPU2/styles 45 | # Any applicable configuration settings that should be set such as authentication tokens. You can reference secrets using the secrets syntax, or you can reference data returned from the `TOKEN_ENDPOINT` request using the triple bracket syntax. 46 | configuration: '{ "method": "GET", "headers": {"X-Figma-Token": "${{ secrets.FIGMA_API_KEY }}"} }' 47 | set-output: false 48 | save-name: dark-mode 49 | - name: Build and Deploy 🚀 50 | uses: JamesIves/github-pages-deploy-action@v4 51 | with: 52 | branch: main # Pushes the updates to the main branch. 53 | folder: fetch-api-data-action # The location of the data.json file saved by the Fetch API Data action. 54 | target-folder: data # Saves the data into the 'data' directory on the main branch. 55 | commit-message: "chore: fetch design tokens from Figma" 56 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | .vscode/ 3 | node_modules/ 4 | build 5 | .DS_Store 6 | *.tgz 7 | my-app* 8 | template/src/__tests__/__snapshots__/ 9 | lerna-debug.log 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | /.changelog 14 | .npm/ -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 18.14 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | .vscode/ 3 | node_modules/ 4 | build 5 | .DS_Store 6 | *.tgz 7 | my-app* 8 | template/src/__tests__/__snapshots__/ 9 | lerna-debug.log 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | /.changelog 14 | .npm/ 15 | dist/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false 4 | } 5 | -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @newrelic/nr-design-system 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |  4 | 5 |263 | To one of the greatest groups of folks I've ever worked with: Thank 264 | you ❤️ 265 |
266 | – Daniel 267 |{descriptionText}
72 | {!loadingColorData && ( 73 | 79 | )} 80 |92 | {colorsWithIssues.length - colorIssuesFixed > 0 ? ( 93 | <> 94 | To fix these issues, replace each of the colors listed below 95 | with a One Core color style.{` `} 96 | 100 | See color docs 101 | {" "} 102 | for more info. 103 | > 104 | ) : ( 105 | <> 106 | There are no color issues with the selected layers :). To check 107 | for issues in other layers select another layer(s) and click 108 | "Re-scan colors". 109 | > 110 | )} 111 |
112 |220 | {colorStyle.description} 221 |
222 |{descriptionText()}
274 | 280 | 281 | 286 | Try the browser version{" "} 287 | 302 | 303 |This may take a moment
315 |{description}
25 |52 | Report a bug, share a feature idea, or get support at{" "} 53 | #help-one-core. 54 |
55 |45 | 50 | 72 | | 73 | ); 74 | })} 75 |
137 | Enables a second line of content for cells 138 |
139 |95 | Select some layers, then chose a theme below. 96 |
97 | 149 |