{"id":17973979,"url":"https://github.com/lightspeed/flame","last_synced_at":"2025-04-12T20:47:23.484Z","repository":{"id":35121713,"uuid":"207668831","full_name":"lightspeed/flame","owner":"lightspeed","description":"Component library for building Lightspeed products","archived":false,"fork":false,"pushed_at":"2025-02-17T19:32:04.000Z","size":6661,"stargazers_count":78,"open_issues_count":45,"forks_count":13,"subscribers_count":22,"default_branch":"next","last_synced_at":"2025-04-12T20:47:09.465Z","etag":null,"topics":["css-in-js","design-system","emotion","react","styled-system","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lightspeed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-10T21:45:57.000Z","updated_at":"2025-01-30T05:05:45.000Z","dependencies_parsed_at":"2023-02-14T19:35:43.317Z","dependency_job_id":"778a1a13-2b0f-4de9-ac4d-f31521370fac","html_url":"https://github.com/lightspeed/flame","commit_stats":{"total_commits":143,"total_committers":21,"mean_commits":6.809523809523809,"dds":0.6013986013986015,"last_synced_commit":"5e0a3a57bdec42d058f8528ee6360472952d5140"},"previous_names":[],"tags_count":62,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lightspeed%2Fflame","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lightspeed%2Fflame/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lightspeed%2Fflame/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lightspeed%2Fflame/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lightspeed","download_url":"https://codeload.github.com/lightspeed/flame/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631718,"owners_count":21136559,"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","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":["css-in-js","design-system","emotion","react","styled-system","typescript"],"created_at":"2024-10-29T17:05:21.973Z","updated_at":"2025-04-12T20:47:23.463Z","avatar_url":"https://github.com/lightspeed.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Lightspeed Flame\" width=\"204px\" src=\"https://user-images.githubusercontent.com/24464151/67687230-648a1300-f96e-11e9-9de0-7735ea1682c0.png\" /\u003e\n\u003c/p\u003e\n\u003ch3 align=\"center\"\u003eComponent library for building Lightspeed products.\u003c/h3\u003e\n\n---\n\n[![npm version](https://badge.fury.io/js/%40lightspeed%2Fflame.svg)](https://badge.fury.io/js/%40lightspeed%2Fflame) [![GitHub Actions workflow status badge](https://github.com/lightspeed/flame/workflows/Test/badge.svg)](https://github.com/lightspeed/flame/actions) [![codecov](https://codecov.io/gh/lightspeed/flame/branch/next/graph/badge.svg)](https://codecov.io/gh/lightspeed/flame)\n\n### Storybook\n\nFor the deployed version of our development environment visit https://lightspeed-flame.netlify.com.\n\n### Playground\n\nFork this CodeSandbox and start playing around with components:\n\n[![Edit Flame Sandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/lightspeed-flame-components-g6u5n)\n\n## Installing\n\nInstall the package:\n\n```sh\nyarn add @lightspeed/flame\n```\n\nAnd its required peer dependencies:\n\n```sh\nyarn add react@^16 react-dom@^16 @emotion/core@^10 @emotion/styled@^10 emotion-theming@^10\n```\n\n## Getting Started\n\nBefore being able to implement Flame in your application, there are a few steps to bootstrap the components properly. We also assume that your React application is using a bundler such as webpack.\n\n**Steps required:**\n\n- Link fonts\n- Hook the theme provider\n- Load global styles\n- Import components via their namespace\n\n### Link fonts\n\nThere are two ways to load the proper fonts:\n\nAdd this `\u003clink\u003e` tag to your `\u003chead\u003e` to load the required fonts:\n\n```html\n\u003clink\n  href=\"https://fonts.googleapis.com/css?family=Lato:400,700\u0026subset=latin-ext\"\n  rel=\"stylesheet\"\n/\u003e\n```\n\n### Hook the theme provider, load global styles, and import components\n\nIn order to have the proper styling, it is necessary to load the theme object into the application.\n\nTo do so, wrap the `\u003cFlameTheme\u003e` provider on your app and add `FlameGlobalStyles`:\n\n```jsx\nimport React from 'react';\nimport { FlameTheme, FlameGlobalStyles } from '@lightspeed/flame/Core';\n// Access components via their namespace\nimport { Button } from '@lightspeed/flame/Button';\nimport { Heading1, Text } from '@lightspeed/flame/Text';\n\n// Within your root app component\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cFlameTheme\u003e\n        {/* Wrapping `\u003cdiv\u003e` is necessary since `\u003cFlameTheme\u003e` is a Provider */}\n        \u003cdiv\u003e\n          {/* We set some global styles, like fonts and minimal resets */}\n          \u003cFlameGlobalStyles /\u003e\n\n          {/* A Flame styled h1, paragraph, and button 🎉 */}\n          \u003cHeading1\u003eMy heading\u003c/Heading1\u003e\n          \u003cText as=\"p\"\u003eWelcome to Flame\u003c/Text\u003e\n          \u003cButton variant=\"primary\" fill={true}\u003e\n            It's happening!\n          \u003c/Button\u003e\n        \u003c/div\u003e\n      \u003c/FlameTheme\u003e\n    );\n  }\n}\n```\n\n**Please note**\n\nIf you have Emotion already installed and you would like to use the theme values provided from Flame, you will still need to wrap your application with an Emotion `\u003cThemeProvider /\u003e` and pass in the theme object.\n\n```jsx\nimport React from 'react';\nimport { FlameTheme, lightTheme } from '@lightspeed/flame/Core';\nimport { ThemeProvider } from 'emotion-theming';\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cThemeProvider theme={lightTheme}\u003e\n        \u003cFlameTheme\u003e\n          \u003cdiv\u003e{/* ... */}\u003c/div\u003e\n        \u003c/FlameTheme\u003e\n      \u003c/ThemeProvider\u003e\n    );\n  }\n}\n```\n\nThis is intentional since we do not want changes on `FlameTheme` to potentially affect your underlying components, as you might already have custom theme values being added.\n\n## Testing your app with Flame components\n\nIt's important to wrap your tests with the appropriate theme provider. This is because some flame components requires theme values to be passed in order to compute new color values.\n\nBefore rendering your component inside of your tests, ensure you wrap it up with `FlameTheme`.\n\nFor example:\n\n```jsx\ndescribe('Some component', () =\u003e {\n  it('renders', () =\u003e {\n    const component = someTestRenderFunction(\n      \u003cFlameTheme\u003e\n        \u003cButton /\u003e\n      \u003c/FlameTheme\u003e,\n    );\n  });\n});\n```\n\n## Getting started with server-side rendering (SSR)\n\nFlame supports SSR out of the box without any additional configuration needed.\n\nSince Flame uses the latest `@emotion` package, when loading components on the server, components will automatically have their styles extracted without any required setup.\n\n## Styled System props\n\nMany of flame components have been augmented with [Styled System](https://github.com/jxnblk/styled-system) props.\n\n```jsx\n\u003cAlert mb={3}\u003e\n  This Alert will now have a margin bottom (mb) of 1.125rem. That value corresponds to the 3rd\n  spacing value of the design system.\n\u003c/Alert\u003e\n```\n\nThese props are essentially a way to quickly customize various css properties of a component without the need of writing a custom css class or component. These props are automatically attached to the values of the design system, so long as the application was properly wrapped with the `\u003cFlameTheme\u003e` component.\n\n_Please consult the packages READMEs for a list of all activated props:_\n\n- [Flame](https://github.com/lightspeed/flame/tree/master/packages/flame/README.md)\n\n## Contributing\n\nSee the [contributing guidelines](.github/CONTRIBUTING.md).\n\n## Licenses\n\nThe source code is licensed with a [custom license](https://github.com/lightspeed/flame/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flightspeed%2Fflame","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flightspeed%2Fflame","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flightspeed%2Fflame/lists"}