{"id":18367683,"url":"https://github.com/jwplayer/jw-design-library","last_synced_at":"2025-07-31T00:04:08.339Z","repository":{"id":33865035,"uuid":"151297066","full_name":"jwplayer/jw-design-library","owner":"jwplayer","description":"A library of product design patterns comprised of code, usage and guidelines.","archived":false,"fork":false,"pushed_at":"2023-05-11T17:28:47.000Z","size":5710,"stargazers_count":19,"open_issues_count":1,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-29T00:08:15.508Z","etag":null,"topics":["design-patterns","design-system","interface-design","product-design"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jwplayer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-02T17:42:42.000Z","updated_at":"2023-08-16T11:14:11.000Z","dependencies_parsed_at":"2024-11-05T23:26:23.831Z","dependency_job_id":"2222cbbb-fbab-433b-9881-d491ed8c0fae","html_url":"https://github.com/jwplayer/jw-design-library","commit_stats":null,"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"purl":"pkg:github/jwplayer/jw-design-library","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwplayer%2Fjw-design-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwplayer%2Fjw-design-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwplayer%2Fjw-design-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwplayer%2Fjw-design-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jwplayer","download_url":"https://codeload.github.com/jwplayer/jw-design-library/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jwplayer%2Fjw-design-library/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267962023,"owners_count":24172550,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design-patterns","design-system","interface-design","product-design"],"created_at":"2024-11-05T23:22:55.933Z","updated_at":"2025-07-31T00:04:08.308Z","avatar_url":"https://github.com/jwplayer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JW Design Library (Hook)\n\n![Owners](https://img.shields.io/badge/Owners-Design_\u0026_CX_Team-brightgreen.svg)\n\n\u003e Design library for colors, icons \u0026 styles used in JW Player products. Built with\n[Amazon Style Dictionary](https://github.com/amzn/style-dictionary/).\n\n#### For visual docs, check out [:sparkles:  Neverland Design System](https://design.jwplayer.com/docs/#/)\n\n## Development\n\nEnsure you're using **Node v16** and run:\n\n```bash\nnpm install\n```\n\n### Adding Icons\n\n1. Create a feature branch from `master`\n2. Pull in any new SVG files into the `dictionary/assets` folder\n3. In `/dictionary/properties`, locate the `yaml` config of choice and add new names/values in accordance with file structure\n4. Run `npm run build`. If the build succeeds, you should see your changes in the `/dist` folder.\n5. Bump the version # accordingly to align with [semantic versioning](https://semver.org/)\n6. Open a PR against `master`\n\n### Releasing\n\nTo release Hook, we need to publish it to NPM.\n\n1. Set your local npm config to the [internal registry](https://npm-registry.longtailvideo.com/-/web/detail/@design/jw-design-library)\n2. Checkout master and pull in the latest: `git checkout master \u0026\u0026 git pull`\n3. Ensure that your local `/dist` folder and version # are correct\n4. Run `npm publish`\n5. `@design/jw-design-library` will reflect the new version [here](https://npm-registry.longtailvideo.com/-/web/detail/@design/jw-design-library)\n6. [Draft a release](https://github.com/jwplayer/jw-design-library/releases) with a changelog of updates and :boom: breaking changes\n\n## Usage\n\nEverything you'll need exists in Hook's `/dist` folder. Style variables are available in pure CSS, SCSS, and Less.\n\n## Install in your project\n\nSet your npm config to the [JW Player NPM registry](https://npm-registry.longtailvideo.com/-/web/detail/@design/jw-design-library) and run:\n\n```bash\nnpm install @design/jw-design-library\n```\n\n### Colors\n\nImport the color variables and apply them in your stylesheet like this:\n\n```scss\n@import (reference) \"@design/jw-design-library/dist/scss/brand-colors.scss\";\n\np {\n    color: $ds-color-brand-midnight;\n}\n```\n\n### Fonts\n\nTo use our fonts, reference the CDN route in your HTML document `\u003chead\u003e`:\n\n```html\n\u003clink href=\"https://hook.jwplayer.com/jw-design-library/5.3.0/css/fonts.css\" rel=\"stylesheet\" /\u003e\n```\n\nThen import the variables and apply the `font-family` and `font-weight` as needed:\n\n```scss\n@import '@design/jw-design-library/dist/scss/fonts.scss';\n\np {\n    font-family: $ds-global-font-family-custom;\n    font-weight: $ds-global-font-weight-custom-semibold;\n}\n\ncode, pre {\n    font-family: $ds-global-font-family-code;\n}\n```\n\n### Icons\n\nWe recommend using our [WUI components](https://stg-wui.jwplayer.com/component/icon) if possible, but you can also import the SVGs individually.\n\nIn a `create-react-app` project, for example:\n\n```jsx\nimport React from 'react';\nimport { ReactComponent as DownloadIcon } from '@design/jw-design-library/dist/icon/dashboard/download.svg';\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cDownloadIcon /\u003e\n    \u003c/div\u003e\n  );\n}\nexport default App;\n```\n\nIf you prefer working with a sprite, you can import the sprite from `/dist/sprites` or download it directly from the Neverland docs.\n\n```html\n\u003csvg\u003e\n  \u003cuse href=\"/path_to_hook/icons/sprite_name.svg#icon_name\"\u003e\u003c/use\u003e\n\u003c/svg\u003e\n```\n\n## Under the Hood\n\nThe file `build.js` imports various modules from `scripts/` to build the full style-dictionary config. Here's a really quick rundown:\n\n* `formatters/svg-sprite` runs each matched icon through SVGO, then converts the\n  SVG into a `\u003csymbol\u003e`. After all icons in the group are optimized, a wrapper is\n  added and the SVG file is output.\n* `formatters/font-face` uses the structure found in `font-face.yaml` to\noutput `@font-face` declarations in CSS. All font files referenced in the\ndictionary are copied to `dist/fonts`. If you use `fonts.css` then you must copy\nor resolve the paths for the font files, or things won't work!\n* `transformers/content-array-to-list`: Converts property values into\n  comma-separated lists. This is used to output data colors for Less.\n\n  ```yaml\n  prop:\n    value:\n    - '#000000'\n    - '#CCCCCC'\n    - '#FFFFFF'\n  ```\n\n  The example above has this final output:\n\n  ```less\n  @prop: #000000, #cccccc, #ffffff;\n  ```\n\n* `transformers/content-list-to-js-array`: Converts property values into\n  bracketed arrays. This, combined with `content-array-to-list`, is used to\n  output data colors for JS. The example above has this final output:\n\n  ```js\n  export const prop = [\"#000000\",\"#cccccc\",\"#ffffff\"];\n  ```\n\n* `transform-groups/less-transform-group`: Overrides the built-in `less`\n  transformGroup, to add `content/arrayList` and switch to `color/css` for rgba\n  output.\n* `transform-groups/js-transform-group`: Overrides the built-in `js`\n  transformGroup, to add `content/arrayToList` and `content/listToJsArray`.\n* `utils/mock-require`: Rather than rewrite the `combineJSON` function present\n  in `style-dictionary`, we intercept the `require` call itself to render YAML\n  with `js-yaml` when necessary. This may change if `combineJSON` ever changes.\n* `utils/svgo`: Since SVGO is asynchronous by design, we use a wrapper module\n  with [sync-rpc](https://www.npmjs.com/package/sync-rpc) to treat it as if it's\n  synchronous. You may notice the dots when `icons` are being built - each dot\n  represents a sprite that has been \"synchronously\" optimized by SVGO.\n\n## Related Links\n\n* #### [Hook CDN Link](https://hook.jwplayer.com/)\n\n* #### [Hook CDN Repo](https://github.com/jwplayer/hook)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjwplayer%2Fjw-design-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjwplayer%2Fjw-design-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjwplayer%2Fjw-design-library/lists"}