{"id":13343904,"url":"https://github.com/johankasperi/zem-rn-styled-components","last_synced_at":"2026-04-26T14:31:10.098Z","repository":{"id":80931661,"uuid":"141489375","full_name":"johankasperi/zem-rn-styled-components","owner":"johankasperi","description":"Zeplin extension that generates glamorous type styled components.","archived":false,"fork":false,"pushed_at":"2018-11-14T20:10:48.000Z","size":204,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-12T08:17:17.235Z","etag":null,"topics":["glamorous-native","javascript","react-native","zeplin","zeplin-extension"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johankasperi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-07-18T20:56:34.000Z","updated_at":"2018-12-19T09:07:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"7350224e-4ca9-4d35-bba8-da83422ebd6b","html_url":"https://github.com/johankasperi/zem-rn-styled-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/johankasperi/zem-rn-styled-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johankasperi%2Fzem-rn-styled-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johankasperi%2Fzem-rn-styled-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johankasperi%2Fzem-rn-styled-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johankasperi%2Fzem-rn-styled-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johankasperi","download_url":"https://codeload.github.com/johankasperi/zem-rn-styled-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johankasperi%2Fzem-rn-styled-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28003950,"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-12-24T02:00:07.193Z","response_time":83,"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":["glamorous-native","javascript","react-native","zeplin","zeplin-extension"],"created_at":"2024-07-29T19:32:05.225Z","updated_at":"2025-12-24T15:09:44.876Z","avatar_url":"https://github.com/johankasperi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zeplin React Native Styled Components Extension\n\nGenerates React Native [Glamorous](https://github.com/robinpowered/glamorous-native) type Styled Components and Themes from colors, text styles and layers. ⚛️📱\n\n#### 🎨 Sample colors output:\n\n```js\nconst base = {\n  red: \"#ff0000\",\n  green: \"#00ff00\",\n  blue: \"#0000ff\",\n  yellow: \"#ffff00\",\n  black: \"#000000\",\n  black50: \"rgba(0, 0, 0, 0.5)\",\n  white: \"#ffffff\"\n};\n```\n\n#### 🔤 Sample text components output:\n\n```js\nconst SampleTextStyle = glamorous.text((props, theme) =\u003e ({\n  fontFamily: theme.font.arial,\n  fontSize: 20,\n  textAlign: \"left\",\n  color: theme.color.black\n}));\n\nconst SampleTextStyleWithColor = glamorous.text((props, theme) =\u003e ({\n  fontFamily: theme.font.arial,\n  fontSize: 20,\n  textAlign: \"left\",\n  color: theme.color.red\n}));\n```\n\n#### 🍰 Sample layer output:\n\n```js\nimport { SampleTextStyle } from 'StyledComponents/Typography'\n\nexport const Component = glamorous(SampleTextStyle){((props, theme) =\u003e ({\n  height: 24,\n  width: 220,\n})\n```\n\n## ⚙️ Options\n\n#### Color format\n\nSupports HEX, RGB or HSL. Sample colors output as HSL:\n\n```js\nconst colors = {\n  red: \"hsl(0, 100%, 50%)\",\n  black50: \"hsla(0, 0%, 0%, 0.5)\"\n};\n```\n\n#### Add font scale property to texts\n\nAdds support for a `fontScale` property to all Text components. Default output:\n\n```js\nconst SampleTextStyle = glamorous.text((props, theme) =\u003e ({\n  fontSize: 20,\n  lineHeight: 22\n}));\n```\n\n`fontScale` enabled:\n\n```js\nconst SampleTextStyle = glamorous.text((props, theme) =\u003e ({\n  fontSize: 20 * (props.fontScale || 1),\n  lineHeight: 22 * (props.fontScale || 1)\n}));\n```\n\n#### Add color property to texts\n\nAdds support for a `color` property to all Text components. Default output:\n\n```js\nconst SampleTextStyle = glamorous.text((props, theme) =\u003e ({\n  color: \"red\"\n}));\n```\n\n`color` enabled:\n\n```js\nconst SampleTextStyle = glamorous.text((props, theme) =\u003e ({\n  color: props.color || \"red\"\n}));\n```\n\n#### Text base component\n\nSet the base component for all texts. Default output:\n\n```js\nconst SampleTextStyle = glamorous.text((props, theme) =\u003e ({\n  fontSize: 20\n}));\n```\n\nWith base component `Base`:\n\n```js\nconst SampleTextStyle = glamorous(Base)((props, theme) =\u003e ({\n  fontSize: 20\n}));\n```\n\n#### Theme namespace for colors in styled components\n\nNamespace for all color type vars in styled components. Use this option if you have a certain namespace in your theme for your colors. Default output:\n\n```js\nconst RedView = glamorous.view((props, theme) =\u003e ({\n  backgroundColor: theme.color.red\n}));\n```\n\nWith namespace `V2.Color`:\n\n```js\nconst RedView = glamorous.view((props, theme) =\u003e ({\n  backgroundColor: theme.V2.Color.red\n}));\n```\n\n#### Theme namespace for texts in styled components\n\nNamespace for all font type vars in styled components. Use this option if you have a certain namespace in your theme for your fonts. Default output:\n\n```js\nconst ArialText = glamorous.text((props, theme) =\u003e ({\n  fontFamily: theme.font.arial\n}));\n```\n\nWith namespace `V2.Font`:\n\n```js\nconst ArialText = glamorous.text((props, theme) =\u003e ({\n  fontFamily: theme.V2.Font.arial\n}));\n```\n\n#### Path to typography components\n\nWhen generating text layers the extension automatically imports text components created in the Zeplin `Styleguide`. This option should be the path to these components in your RN project. Default output:\n\n```js\nimport { ArialText } from \"StyledComponents/Typography\";\n```\n\nWith path `Style/Text`:\n\n```js\nimport { ArialText } from \"Style/Text\";\n```\n\n#### Path to BlurView component\n\nWhen generating layers with a blur effect the extension automatically generates a blur view by importing [`react-native-blur`](https://github.com/react-native-community/react-native-blur). However, you might already have a blur view in your RN project, you can set the path to this view with this option. Default output:\n\n```js\nimport { BlurView as RNBlurView } from 'react-native-blur'\n\nconst StyledContainer = glamorous.view((props, theme) =\u003e ({\n  height: 100,\n  width: 100,\n  backgroundColor: '#00ffff'\n})\n\nconst BlurView = glamorous(RNBlurView)({\n  position: 'absolute',\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0\n})\n\nexport const Component = props =\u003e {\n  const { children } = props\n  return \u003cStyledContainer {...props}\u003e\n    \u003cBlurView blurType=\"dark\" /\u003e // \"xlight\", \"light\" or \"dark\"\n    {children}\n  \u003c/StyledContainer\u003e\n}\n```\n\nWith path `StyledComponents/BlurView`:\n\n```js\nimport { BlurView } from 'StyledComponents/BlurView`'\n\nconst StyledContainer = glamorous.view((props, theme) =\u003e ({\n  height: 100,\n  width: 100,\n  backgroundColor: '#00ffff'\n})\n\nexport const Component = props =\u003e {\n  const { children } = props\n  return \u003cStyledContainer {...props}\u003e\n    \u003cBlurView blurType=\"dark\" /\u003e // \"xlight\", \"light\" or \"dark\"\n    {children}\n  \u003c/StyledContainer\u003e\n}\n```\n\n## 📝 Roadmap\n\n- Implement usage of a `Spacing` component that handles position/margins.\n- Use flexbox to position components.\n\n## 🏗 Development\n\nThis extension is developed using [zem](https://github.com/zeplin/zem), Zeplin Extension Manager. zem is a command line tool that lets you quickly create and test extensions.\n\nThis extension is open source, you can find it on Github:\n[https://github.com/johankasperi/zem-rn-styled-components](https://github.com/johankasperi/zem-rn-styled-components)\n\n## License\n\nMIT License\n\nCopyright (c) 2018 Johan Kasperi\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohankasperi%2Fzem-rn-styled-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohankasperi%2Fzem-rn-styled-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohankasperi%2Fzem-rn-styled-components/lists"}