theo - Theo is a an abstraction for transforming and formatting Design Tokens

  •        15

Theo is an abstraction for transforming and formatting Design Tokens. As of Theo v6, the gulp plugin is distributed as a separate package: gulp-theo.

https://github.com/salesforce-ux/theo

Dependencies:

core.lambda : 1.0.0
data.either : 1.5.1
fs-extra : 5.0.0
glob : 7.1.2
handlebars : 4.0.11
handlebars-helpers : 0.10.0
immutable : 3.8.2
immutable-ext : 1.1.2
js-yaml : 3.10.0
json5 : 0.5.1
lodash : 4.17.10
no-case : 2.3.2
resolve-from : 4.0.0
tinycolor2 : 1.4.1
xml : 1.0.1

Tags
Implementation
License
Platform

   




Related Projects

style-dictionary - A build system for creating cross-platform styles.

  •    Javascript

Style once, use everywhere. A Style Dictionary is a system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality.

design-system-react - Salesforce Lightning Design System in React

  •    Javascript

Welcome to the project! 👋 This library is the React implementation of the Salesforce Lightning Design System. This library has a peer dependency on @salesforce-ux/design-system, react, and react-dom. It is tested with React 16 and has a stable API despite its version number. Please polyfill this library in order to meet your target environment needs. Please view Create React App Setup for more information on using this library with Create React App.

design-system - Salesforce Lightning Design System

  •    Javascript

Welcome to the Salesforce Lightning Design System brought to you by Salesforce UX. Having trouble getting these steps to work on your machine? Follow the troubleshooting guide below.

vue-design-system - An open source tool for building UI Design Systems with Vue.js

  •    Javascript

Vue Design System is an open source tool for building UI Design Systems with Vue.js. It provides you and your team a set of organized tools, patterns & practices that work as the foundation for your application development. The tool is built on top of Vue.js, Vue Styleguidist, Webpack, and Theo and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript.

design-system-starter-kit - Rapid prototyping environment using the Salesforce Lightning Design System

  •    HTML

Rapid prototyping environment using the Salesforce Lightning Design System, HTML, and Sass. From the prototyper to the large application developer… the Design System Starter Kit is a helpful tool to get started and run prototypes of all sizes in the browser.


modularscale-sass - Modular scale calculator built into your Sass

  •    CSS

A modular scale is a list of values that share the same relationship. These values are often used to size type and create a sense of harmony in a design. Proportions within modular scales are all around us from the spacing of the joints on our fingers to branches on trees. These natural proportions have been used since the time of the ancient Greeks in architecture and design and can be a tremendously helpful tool to leverage for web designers. Ems work especially well with modular scales as their recursive properties mimic modular scales making them more predictable and easier to manage. Pixels and other units work just fine and breakpoints in responsive web design can naturally fall on your scale to create better relevance to your text as all the values in your layout harmonize with each other.

carbon-components - The component library behind Carbon Design System

  •    Javascript

The Carbon Design System is a series of individual styles and components, that when combined make beautiful, intuitive designs. These designs are systemic and logical, as they all follow the same universal principles. The component library gives developers a collection of re-usable HTML and SCSS partials for building their products.

uikit - 🛠 Component code and tests for the design system

  •    HTML

The UI-Kit for the Australian Government Design System. The GOV.AU UI-Kit is distributed through the npm ecosystem and can only be installed through the npm command. Npm requires node.js and the UI-Kit needs a node.js 5 or higher.

argon-design-system - Argon - Design System for Bootstrap 4 by Creative Tim

  •    CSS

Start your development with a Design System for Bootstrap 4. It is open source, free and it features many components that can help you create amazing websites. Argon Design System is built with over 100 individual components, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using SASS files.

material-components-ios - Modular and customizable Material Design UI components for iOS

  •    Objective-C

Material Components for iOS (MDC-iOS) helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional iOS apps. Learn more about how Material Components for iOS supports design and usability best practices across platforms in the Material Design Platform Adaptation guidelines.Material Components for iOS are written in Objective-C and support Swift and Interface Builder.

ant-ux - :guitar: A sitemap template for ux design

  •    Javascript

This is a materials library which assists designers to define, refine and finalise the inter-page logic of their products. At the early stage of the product design process, you can use it to draw the logic diagram between pages. Throughout this process, it can help you visualise and understand product architectures and business processes more easily. OmniGraffle is a software which can help you create precise and beautiful graphics ranging from website wireframes, flow charts, organization structure to illustrations. There are unlimited usage scenarios. For example, you can use it to facilitate thinking process, to visualise brain storm ideas, to draw mind map, to create prototypes of website and PDF files, or use it as a style manager. OmniGraffle provides extensive options for objects, canvases, templates, inspectors, and stencils, fully representing its nature of WYSIWYG. You can also customise your own "Stencils", a group of pre-defined drag-able elements.

primer - The design system that powers GitHub

  •    CSS

Primer is the design system that powers GitHub. Primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project. The Primer repo is managed as a monorepo that is composed of many npm packages.

open-color - Color scheme for UI design.

  •    CSS

Open color is an open-source color scheme optimized for UI like font, background, border, etc. Import the file to your project and use the variables.

bootstrap-material-design - Material design theme for Bootstrap 3 and 4

  •    CSS

Material Design for Bootstrap is the best way to use Material Design guidelines by Google in your Bootstrap 4 based application. Since this is a fully customizable version of Bootstrap, just include Material Design for Bootstrap CSS instead of Bootstrap CSS, and include the JavaScript at the end of your document (just before the </body> tag), and everything will be converted to Material Design.The things to do are a lot and the time is little, if you are a passionate developer with experience with Bootstrap and Material Design for Bootstrap and you have some spare time, please consider becoming a contributor of this project! If you are interested contact @FezVrasta or just adopt one of our issues.

atom-pigments - An Atom package to display colors in project and files.

  •    CoffeeScript

Pigments will scan source files in your project directories looking for colors and will build a palette with all of them. Then for each opened file, it will use the palette to evaluate the value of a given color. The legible source paths can be defined through various settings either at the global or per project level. By default colors in every file will be highlighted, to limit the display of colors to the desired filetype only please see the Defining Where Pigments Applies below. Pigments supports out of the box most of the color transformations functions and expressions of the three biggest CSS pre-processors out there, namely LESS, Sass and Stylus. However, it doesn't mean pigments is able to parse and understand all of these languages constructs. For the moment, Pigments' aim is to support the widest range of usage, even if it implies reducing its ability to parse certain complex constructs. You can refer to the parser specs for an exhaustive list of the supported expressions.

teutonic-css - A modern CSS framework — versatile, well documented.

  •    CSS

Teutonic CSS is a modern web design system to develop responsive, accessible websites and web applications. It's based on CSS Variables for easy customization and extension. It features cool tech like CSS Grid. The source is a collection of SCSS modules, but you can use the minified version, as it can be modified using CSS Vars. This repo only contains the pure SCSS files to build the CSS from, also check out the Teutonic Docs.

material-components-web - Modular and customizable Material Design UI components for the web

  •    Javascript

Material Components for the web (MDC-Web) helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.MDC-Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.

material-components-android - Modular and customizable Material Design UI components for Android

  •    Java

Material Components for Android (MDC-Android) help developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android apps.Material Components for Android are based on Android’s Design support library (DesignLib) which will continue to be released as part of Android’s SDK.

ng-lightning - Native Angular 2 components & directives for Lightning Design System

  •    Typescript

This library contains native Angular components and directives written from scratch in TypeScript using the Lightning Design System CSS framework.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.