{"id":13433210,"url":"https://github.com/diez/diez","last_synced_at":"2025-05-15T01:04:54.329Z","repository":{"id":36152941,"uuid":"221605417","full_name":"diez/diez","owner":"diez","description":"The Design Token Framework — Adopt a unified design language across platforms, codebases, and teams","archived":false,"fork":false,"pushed_at":"2022-12-10T12:47:19.000Z","size":70840,"stargazers_count":1236,"open_issues_count":58,"forks_count":63,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-04-06T19:04:02.313Z","etag":null,"topics":["android-style","compiler","cross-platform","design-language","design-systems","design-tokens","ios-style","style","web-styles"],"latest_commit_sha":null,"homepage":"https://diez.org","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/diez.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"diez","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-11-14T03:40:58.000Z","updated_at":"2025-04-05T19:37:24.000Z","dependencies_parsed_at":"2023-01-16T23:45:43.985Z","dependency_job_id":null,"html_url":"https://github.com/diez/diez","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diez%2Fdiez","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diez%2Fdiez/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diez%2Fdiez/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diez%2Fdiez/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/diez","download_url":"https://codeload.github.com/diez/diez/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248785481,"owners_count":21161297,"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":["android-style","compiler","cross-platform","design-language","design-systems","design-tokens","ios-style","style","web-styles"],"created_at":"2024-07-31T02:01:22.519Z","updated_at":"2025-04-13T21:29:55.494Z","avatar_url":"https://github.com/diez.png","language":"TypeScript","funding_links":["https://github.com/sponsors/diez"],"categories":["TypeScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# Diez \u0026middot; [![Build Status](https://travis-ci.com/diez/diez.svg?token=YuETDnVqzQjQytETzD8J\u0026branch=master)](https://travis-ci.com/diez/diez) [![codecov](https://codecov.io/gh/diez/diez/branch/master/graph/badge.svg?token=pgB9U8YLUU)](https://codecov.io/gh/diez/diez)\n\n## The Design Token Framework\n\nDiez is an open-source developer toolkit for building \u0026 maintaining [design tokens](https://diez.org/glossary/#tokens) at scale.\n\nWrite \u0026 maintain styles in one place, then compile \u0026 consume them everywhere:  Diez supports any UI component library or codebase written in Swift, Objective-C, Kotlin, Java, TypeScript, JavaScript/JSON, CSS, or SCSS.\n\nDiez reduces the cost of delivering a consistent visual identity across your company's apps \u0026 websites.\n\n\n## What's in the box?\n\nDiez's toolkit comes in four parts:\n\n - **[Compiler](https://github.com/diez/diez/tree/master/src/compiler)** — Diez includes a novel open-source compiler that converts (transpiles) TypeScript tokens into native packages for iOS, Android, and Web.\n\n   \u003cimg src=\"https://static.haiku.ai/diez/readme/compiler.gif\" /\u003e\n\n - **[Framework](https://github.com/diez/diez/tree/master/src/framework)** — Diez's framework is a library of common design token patterns, including pre-written _prefabs_ for Typography, Colors, Images, Drop Shadows, Dimensions, [and more](https://github.com/diez/diez/tree/master/src/framework/prefabs/src).  Prefabs can be configured, nested, and reused to express any style, brand, or theme you can imagine.\n\n   \u003cimg src=\"https://static.haiku.ai/diez/readme/framework.png\" /\u003e\n\n   You can also write your own custom prefabs. [Open-source contributions welcome!](https://github.com/diez/diez/blob/master/CONTRIBUTING.md)\n\n\n - **[Extractors](https://github.com/diez/diez/tree/master/src/extractors)** — Diez's extractors automate the retrieval of design tokens from Figma, Sketch, Adobe XD, and InVision DSM.  These command-line utilities are powerful tools for customizing your own design/developer hand-offs and are a great fit for CI servers.\n\n   \u003cimg src=\"https://static.haiku.ai/diez/readme/extractors.jpg\" /\u003e\n\n- **[Documentation Generator](https://github.com/diez/diez/blob/master/src/compiler/targets/src/targets/docs.compiler.ts)** — Diez DocsGen builds customizable static HTML docs from any Diez project, complete with markdown-rendered code comments.  Technically implemented as an additional compiler target, Diez DocsGen helps keep your styleguide and documentation perfectly up-to-date with your design token source of truth.\n  \n  **See an [example Diez project](https://github.com/HaikuTeam/shibui) and its [DocsGen output](https://shibui.haikuforteams.com/).**\n\n\n   \u003cimg src=\"https://static.haiku.ai/diez/readme/docsgen.gif\" /\u003e\n\n\n## Getting Started \u0026 Installation\n\nGenerate a new Diez project with:\n```\nyarn create diez\n```\nor\n```\nnpx diez create\n```\n\n**Check out [diez.org/getting-started](https://diez.org/getting-started)** for more thorough installation instructions and a robust set of guides.\n\n## Examples\n\n### Basic example\n\n```TypeScript\nconst tokens = {\n  // Use for all primary type and monochromatic assets.\n  foregroundColor: Color.hex('#AE0000'),\n  // Use this sparingly, as it's very strong.\n  foregroundAccent: Color.hex('#FF0000'),\n  // This is our \"canvas\" color and default background.\n  backgroundColor: Color.hex('#231020'),\n}\n```\n\nThe above TypeScript definition will compile to native packages on iOS and Android, where you can access your tokens like:\n\n```Kotlin\ntokens.foregroundColor\n```\n\nFrom the above definition, Diez will also generate SCSS variables that can be used like:\n\n```SCSS\n#some-element {\n  background-color: $tokens-background-color;\n}\n```\n\nThe inline comments and static values will also be built into the native SDKs, where developers can read the comments from autocomplete prompts.\n\n\u003cimg src=\"https://static.haiku.ai/diez/readme/autocomplete-examples.jpg\" /\u003e\n\n\n### Semantic tokens example\nDiez robustly supports the \"semantic tokens\" pattern, of separating the _value_ of design tokens from their _semantic purpose,_ for example maintaining a separate set of \"raw colors\" vs. a semantic mapping of their intended use.\n\nThis example also shows one of Diez's several built-in helpers, `[Color].lighten` — these helpers make it easy to avoid duplicating \"sources of truth\" in your tokens.\n\n```TypeScript\n//colors.ts\nimport {Color} from '@diez/prefabs';\n\nexport const rawColors = {\n  tiger: Color.rgba(241, 93, 74, 1),\n  marigold: Color.rgba(255, 172, 57, 1),\n  clover: Color.rgba(163, 206, 50, 1),\n  cyan: Color.rgba(4, 182, 203, 1),\n};\n\nexport const semanticColors = {\n  foreground: rawColors.tiger,\n  foreground50: rawColors.tiger.lighten(.5),\n  background: rawColors.clover,\n  background50: rawColors.clover.lighten(.5),\n}\n```\n\n### Nesting \u0026 reuse example\n\nThis slightly more complex example shows how multiple prefabs (in this case `Typograph`, `Color`, and the primitive type `number`) naturally compose to express complex hierarchies of data — without needing to maintain multiple declarations of the same data.\n\nThis example also shows how tokens can be separated into multiple files and easily imported/reused.\n\n```TypeScript\n//typography.ts\nimport {Typograph} from '@diez/prefabs';\nimport {sizes} from './sizes';\nimport {semanticColors} from './colors'; //from example above\n\nexport const typography = {\n  heading1: new Typograph({\n    color: semanticColors.foreground,\n    font: fonts.PoppinsExtraBold.Regular,\n    fontSize: sizes.xxl\n  }),\n  heading2: new Typograph({\n    color: semanticColors.foreground50,\n    font: fonts.PoppinsExtraBold.Regular,\n    fontSize: sizes.xl\n  }),\n  body: new Typograph({\n    color: semanticColors.foreground,\n    font: shibuiFonts.Poppins.Regular,\n    fontSize: sizes.sm\n  }),\n}\n```\n\n```TypeScript\n//sizes.ts\nexport const sizes = {\n  xxl: 66,\n  xl: 41,\n  l: 35,\n  md: 24,\n  sm: 18,\n  xs: 12,\n}\n```\n\n### Design file Extractor example\n\nFrom this [example Figma File](https://www.figma.com/file/183VSUg4pC2ZDwk7PK5dLP/FromFigma?node-id=0%3A1):\n\n\u003cimg src=\"https://static.haiku.ai/diez/readme/figma-screenshot.png\" /\u003e\n\nDiez's Extractor generates design token code that looks like:\n```TypeScript\n/**\n * GENERATED CODE\n * This file is generated by a Diez Extractor and is not intended to be edited by hand.\n * This file may be overwritten.\n *\n * FromFigma.ts\n *\n */\nimport { Color, DropShadow, File, Font, GradientStop, Image, LinearGradient, Point2D, Typograph } from \"@diez/prefabs\";\n\nconst fromFigmaColors = {\n    teal50: Color.rgba(77, 197, 208, 1),\n    teal40: Color.rgba(119, 221, 231, 1),\n    // abbreviated for terseness\n};\n\nconst fromFigmaGradients = {\n    grad1: new LinearGradient({ stops: [GradientStop.make(0, Color.rgba(141, 245, 255, 1)), GradientStop.make(1, Color.rgba(183, 162, 255, 1))], start: Point2D.make(0.865941961194631, 0.131944384027248), end: Point2D.make(0.105072476657214, 0.937499990588448) })\n};\n\nconst fromFigmaShadows = {\n    shad20: new DropShadow({ offset: Point2D.make(0, 1), radius: 4, color: Color.rgba(0, 0, 0, 0.25) }),\n    // abbreviated for terseness\n};\n\nexport const fromFigmaFonts = {\n    Poppins: {\n        Bold: Font.fromFile(\"assets/FromFigma.figma.contents/fonts/Poppins-Bold.otf\"),\n        Regular: Font.fromFile(\"assets/FromFigma.figma.contents/fonts/Poppins-Regular.otf\")\n    }\n};\n\nconst fromFigmaTypography = {\n    heading1: new Typograph({ color: Color.rgba(0, 0, 0, 1), font: fromFigmaFonts.Poppins.Bold, fontSize: 18 }),\n    body: new Typograph({ color: Color.rgba(0, 0, 0, 1), font: fromFigmaFonts.Poppins.Regular, fontSize: 12 })\n};\n\nexport const fromFigmaImagesFiles = {\n    iconFastFoodHotDog: new File({ src: \"assets/FromFigma.figma.contents/images/IconFastFoodHotDog.png\" }),\n    iconFastFoodHotDog2x: new File({ src: \"assets/FromFigma.figma.contents/images/IconFastFoodHotDog@2x.png\" }),\n    iconFastFoodHotDog3x: new File({ src: \"assets/FromFigma.figma.contents/images/IconFastFoodHotDog@3x.png\" }),\n    iconFastFoodHotDog4x: new File({ src: \"assets/FromFigma.figma.contents/images/IconFastFoodHotDog@4x.png\" }),\n    // abbreviated for terseness\n};\n\nexport const fromFigmaImages = {\n    iconFastFoodHotDog: Image.responsive(\"assets/FromFigma.figma.contents/images/IconFastFoodHotDog.png\", 24, 24),\n    iconBinocular: Image.responsive(\"assets/FromFigma.figma.contents/images/IconBinocular.png\", 24, 24),\n    // abbreviated for terseness\n};\n\nexport const fromFigmaTokens = {\n    colors: fromFigmaColors,\n    gradients: fromFigmaGradients,\n    shadows: fromFigmaShadows,\n    typography: fromFigmaTypography\n};\n\n```\n\nExtracted tokens are intended to be _imported_ and _referenced_ by other files in your project — then updated through design tools, and extracted again.  As another application of \"semantic tokens,\" this separation of concerns allows you to treat design files as versionable code assets.\n\nFor example:\n\n```TypeScript\n//colors.ts, pulling data right out of Figma\nimport {fromFigmaColors} from './designs/FromFigma';\n\nconst semanticColors = {\n  foreground: fromFigmaColors.teal50,\n  background: fromFigmaColors.purp60,\n}\n```\n\n\n### More Examples\n\nSee complete, compilable examples [here](https://github.com/diez/diez/tree/master/examples), or at the Haiku Team's Diez-powered design language, [Shibui.](https://github.com/HaikuTeam/shibui)\n\nWhen you run `yarn create diez` or `npx diez create`, you will also be given an option to generate a starter project that includes several functional examples.\n\n## FAQ\n\n**What are design tokens?**\n\nThink of design tokens as \"design data\": concepts like colors, typography definitions, spacings, sizings, and drop shadows — agnostic of any particular design tool or programming language. Design tokens are the basic building blocks that allow you to express any design language as pure data.\n\nThe magic of design tokens is they sit right at the gap between design and code — they're design concepts, but since they have no opinions about rendering or technologies, they're adaptable into any codebase with the right tooling (like Diez's cross-platform native compiler).\n\nDesign tokens are a community movement and the creators of Diez are actively contributing to the emerging [W3C Design Tokens Community Group and specification.](https://www.w3.org/community/design-tokens/)\n\n\n**What does the name Diez mean?**\n\n_Diez_ is the Spanish number 10.  This project is called Diez for two reasons:\n - In Spanish, Diez is pronounced roughly like saying the English letters \"D S\" — like _design system._\n - El Diez is the magic jersey number in soccer/football, reserved for the star player on the team.  We hope Diez is such a time-saver and collaboration-aid for your team that it earns its place as El Diez!\n\nWe came up with the \"codename Diez\" during a [Haiku team summit in Patagonia](https://www.haikuforteams.com/blog/remote-team-summit).  Then we decided to make the \"codename\" the \"real name.\"  And here we are.\n\n**Why TypeScript?**\n\nWhile design tokens are often expressed in JSON or YAML, TypeScript solves several problems faced when wrangling real-world design tokens:\n\n   - **Complexity:** As codebases grow and change, YAML and JSON get complex and hard to reason about.  With limited or no affordances for multiple files, references, or comments, YAML and JSON quickly snowball into complexity or \"no one touch this or it will break everything!\"\n\n   - **Modularity \u0026 reuse:** Maintainers of design tokens often find a need to reuse certain chunks of tokens across files.  A common example: a color palette may need to be referenced both in a typography definition and in a panel style — or in both a dark-mode and a light-mode theme.  In these cases, YAML and JSON leave authors holding the bag — either contrive a module system for JSON, or copy, paste, and pray no one needs to update this again.\n\n   - **Expressions \u0026 permutations:** Wouldn't it be nice to store your _core_ color palette once, and to express variations — for example shades and tints, or theme variations — as a function of that core palette?  TypeScript handles all of this out-of-the-box, and Diez offers helpers for variants like `.lighten` and `.darken`.  [See an example here](https://github.com/HaikuTeam/shibui/blob/master/src/Palette.ts#L56)\n\n   - **Hierarchy, branding, and theming:** Real-world design systems often encompass multiple products, brands, and themes.  In the ideal world, your team could maintain a core set of shared values, then extend and override them hierarchically for different layers of your \"brand tree.\"  Thanks to imports, exports, and native code reuse in TypeScript, this is completely doable. *Our team is also hard at work on a [first-class Theming solution within Diez,](https://github.com/diez/diez/issues/30) which makes this set of functionality quicker \u0026 easier to manage.*\n\n   - **Stability \u0026 scale:** TypeScript was designed for exactly this.  Design tokens are especially fragile because of how they touch multiple codebases and platforms.  Thanks to static typing, typedefs \u0026 comments that transpile all the way to iOS and Android, and developer-delighting features like autocomplete popovers — your team can evolve tokens reliably \u0026 confidently.\n\n**Find more FAQ [at diez.org/faq](https://diez.org/faq/)**\n\n## Who's behind Diez?\n\nDiez is built by a growing community of contributors and is maintained by [Haiku](https://www.haikuforteams.com) as part of our continuing mission: _to unlock creativity in software by unifying design \u0026 code._ 🖖\n\nRead more about Diez at https://diez.org and about Haiku at https://www.haikuforteams.com\n\n\n## Join the community\n\nJoin Diez's [Slack Community](https://join.slack.com/t/dieznative/shared_invite/enQtNzEzNzM2OTg4NDA1LTA4NWZiMTNlZTgzNTY3Yzg2ODdjY2Y1MzBjMjdlY2FlNjljMmI3ZTgzMmQ4ODk1MDdlMTcyMTUzMjNmZWI4YjU) and [Spectrum Community](https://spectrum.chat/diez) to stay in the loop, get support, or share ideas. Feel free also to file a GitHub Issue if you encounter any bugs or would like to share ideas or feature-requests.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiez%2Fdiez","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiez%2Fdiez","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiez%2Fdiez/lists"}