Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@hig/theme-data-poc
Advanced tools
HIG theme data is a representation of the HIG visual design language in the form of data.
yarn add @hig/theme-data-poc
import lightGrayTheme from '@hig/theme-data-poc/build/lightGrayTheme.json';
console.log(lightGrayTheme);
// {
// "BASICS.BORDER_RADII.NONE": "0",
// "BASICS.BORDER_RADII.S": "0"
// "BASICS.BORDER_RADII.M": "2px"
// ...
// }
import { lightGrayTheme } from '@hig/theme-data-poc';
console.log(lightGrayTheme.data);
// {
// "BASICS.BORDER_RADII.NONE": "0",
// "BASICS.BORDER_RADII.S": "0"
// "BASICS.BORDER_RADII.M": "2px"
// ...
// }
import { extendTheme, resolveTheme, lightGrayTheme } from '@hig/theme-data-poc';
const redAccentedThemeConfig = extendTheme(lightGrayTheme.config, {
"COLOR_SCHEME.ACCENT_COLOR_500": "#F00",
});
const redAccentedTheme = resolveTheme(redAccentedThemeConfig);
console.log(redAccentedTheme);
// {
// ...
// "COLOR_SCHEME.ACCENT_COLOR_500": "#F00",
// "INPUT.FOCUS.BORDER_BOTTOM_COLOR": "#F00"
// ...
// }
Named values (colors, spacings, typographic specifications, etc.) from which most (all?) other values in a theme are derived
A property of a component provided by a theme. E.g. Divider is a component. '1px' is a border width. DIVIDER.BORDER_WIDTH
is a role mapping a width to the border width property of the divider component.
A set of roles and types which define the properties of the design language
Data defining a primitive value (e.g. “#0696D7” or “16px”) for each role in the theme schema.
Data defining a primitive value or reference for each role in the theme schema.
References in a theme configuration may point to a basic value or another role. References may point to roles defined with another reference. For example, TEXT_AREA.FOCUS.COLOR
may refer to INPUT.FOCUS.COLOR
, which refers to ACCENT_COLOR
, which refers to BASICS.COLORS.AUTODESK_BLUE_600
.
Theme generator
The theme generator is javascript code that overrides values in a theme, adds new roles and values to a theme, and replaces references with primitive values.
We have chosen to model theme data more simply than the domain.
In terms of domain, at the highest level, values in a theme fall into three categories—basics, system-level, and component-specific. Examples of system-level values are accent colors, default text properties, and colors of background surfaces. Component-level values fit into a hierarchy beginning with category (e.g. form fields), below that falls component (e.g. select element), then sub-component (e.g. option element). Category, component, and subcomponent are arbitrarily deep, and not all components fall within a category. Within a component values vary according to state. Component states are better represented by a node-map than a tree. Finally, for a given state, a value maps to a property (e.g. background color).
Theme
- Basics
- System-level values
- Component values
- Category - optional
- Component
- Subcomponent - arbitrarily deep
- State* - more of a node map than a tree
- Property: value
In data we model the theme as a flat map of key-value pairs. We represent the hierarchy in the key, but only as much as is needed to disambiguate one key from another. e.g. a role in the theme may have a key such as TEXT_AREA_DISABLED.TEXT_COLOR
. The key uses component name, state name, and property name but does not describe a category.
FAQs
HIG Theme Data
The npm package @hig/theme-data-poc receives a total of 1 weekly downloads. As such, @hig/theme-data-poc popularity was classified as not popular.
We found that @hig/theme-data-poc demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.