# @salesforce-ux/c360-styling-hooks
> Global Styling hooks for C360 use CSS custom properties which make it easy to customize application-wide styling.
Latest version **0.3.0** (published 2022-03-22) · SEE LICENSE IN README.md license · 0 weekly downloads
## Install
```sh
npm install @salesforce-ux/c360-styling-hooks
pnpm add @salesforce-ux/c360-styling-hooks
yarn add @salesforce-ux/c360-styling-hooks
bun add @salesforce-ux/c360-styling-hooks
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.3.0 |
| Published | 2022-03-22 |
| First published | 2021-05-11 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN README.md |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Salesforce UX |
| Maintainers | salesforce-ux |
## Links
- npm: https://www.npmjs.com/package/@salesforce-ux/c360-styling-hooks
- npm.io page: https://npm.io/package/@salesforce-ux/c360-styling-hooks
## Dependencies (2)
- [@salesforce-ux/sds-styling-hooks](https://npm.io/package/@salesforce-ux/sds-styling-hooks.md) ^0.7.0
- [@salesforce-ux/sds-styling-aliases](https://npm.io/package/@salesforce-ux/sds-styling-aliases.md) ^0.2.0
## Recent versions
- 0.3.0 (latest) — 2022-03-22
- 0.2.2 — 2022-02-01
- 0.2.1 — 2022-01-05
- 0.2.0 — 2021-12-15
- 0.1.2 — 2021-09-29
- 0.1.1 — 2021-09-08
- 0.1.0 — 2021-08-19
- 0.0.3 — 2021-07-29
- 0.0.2 — 2021-05-18
- 0.0.1 — 2021-05-11
## README
# `@salesforce-ux/c360-styling-hooks`
[](https://www.npmjs.com/package/@salesforce-ux/c360-styling-hooks)
## About
Global Styling hooks for C360 use CSS custom properties which make it easy to customize application-wide styling.
## Getting Started
Let's start by installing `c360-styling-hooks` as a dependency of your project with [npm](https://www.npmjs.com/package/@salesforce-ux/c360-styling-hooks).
```
npm i @salesforce-ux/c360-styling-hooks
```
## Distributable
After installation, all the distributables for the C360 Styling Hooks are found under `@salesforce-ux/c360-styling-hooks/dist/` folder.
|File Name |Description |
|- |- |
|`hooks.custom-props` | The Compiled CSS file for `c360-styling-hooks` package|
|`font.custom-props`| The CSS file for only font specific c360 styling hooks|
## Integration
There are different ways to include `c360-styling-hooks` to a web application depending on the requirement.It can be used in both light DOM and shadow DOM Below are the styles to include the package -
### Add C360 Styling Hooks in HTML
You can use the HTML `` to link to C360 Styling Hooks as an external resource.
```html
```
### Add C360 Styling Hooks in CSS
You can use CSS `@imports` to pull in C360 Styling Hooks.
```css
:root {
@import "@salesforce-ux/c360-styling-hooks/dist/hooks.custom-props.css";
}
body {
/* Directly reference C360 Styling Hook */
background: var(--c360-g-color-neutral-base-1);
}
```
### Add C360 Styling Hooks in JS
You can use JS `import` to pull in C360 Styling Hooks directly in the JS file.
```js
import "@salesforce-ux/c360-styling-hooks/dist/hooks.custom-props.css";
```
## Interactive Demo
To see more examples with interactive demo, please visit `c360 Subsytem`'s [Storybook Environment](https://c360-subsystem-storybook.herokuapp.com/?path=/story/c360-subsystem-styling-hooks--font)
### File Formats
C360 Styling Hooks have 6 different file formats for consumption. All files are located in `/dist/`.
#### JSON (`*.json`)
```json
{
"PROP_NAME": "PROP_VALUE"
}
```
#### Raw JSON (`*.raw.json`)
```js
{
"props": {
"PROP_NAME": {
"value": "PROP_VALUE",
"type": "PROP_TYPE",
"category": "PROP_CATEGORY",
/* additional metadata */
}
}
}
```
#### Common JS (`*.js`)
```js
module.exports = {
propName: "PROP_VALUE"
};
```
#### ES Module (`*.js`)
```js
export const propName = "PROP_VALUE";
```
#### Custom Properties scoped to `:root` (`*.css`)
```css
:root {
--prop-name: PROP_VALUE;
}
```
#### Custom Property Registration using [CSS Properties and Values API](https://drafts.css-houdini.org/css-properties-values-api-1/) (`*.js`)
> **Experimental**
>
> This is an experimental technology
>
> Check the [Browser compatibility table](https://caniuse.com/mdn-api_css_registerproperty) carefully before using this in production.
For more information, see [CSS Properties and Values API Level 1](https://drafts.css-houdini.org/css-properties-values-api-1/).
```js
if (CSS.registerProperty) {
CSS.registerProperty({
name: "--prop-name",
syntax: "PROP_SYNTAX",
inherits: false,
initialValue: "PROP_VALUE",
});
}
```
## Usage Guidelines
### Color
The C360 Design System comes with a robust color system and relationships to ensure our UIs meet [WCAG 2.1 contrast ratios of 4.5:1](https://www.w3.org/TR/WCAG21/#contrast-minimum). The semantic relationships allow for easy theme switching to handle features such as dark mode or high contrast mode.
Additionally, we generate sets of vibrant color palettes to use as accents in your designs. These values are generated in the [HCL color space](https://www.boronine.com/2012/03/26/Color-Spaces-for-Human-Beings/), which are designed to accord with human perception of color.
#### Using Color Relationships for UIs
[View UI color relationships →](https://c360-subsystem-storybook.herokuapp.com/?path=/story/c360-subsystem-styling-hooks-global--ui-colors)
The C360 Design System offers a set of neutral and brand color relationships. These two sets are intended to be used on your UI elements to define properties such as backgrounds, borders and text.
Each set, neutral and brand, have two groupings called **base** and **inverse**. The base group defaults to "light" UI elements. The inverse color group are the opposite values of the base group, these default to "dark" UI elements.
**Neutral**
```css
--c360-g-color-neutral-base-1
--c360-g-color-neutral-base-2
--c360-g-color-neutral-base-3
--c360-g-color-neutral-base-4
--c360-g-color-neutral-base-contrast-1
--c360-g-color-neutral-base-contrast-2
--c360-g-color-neutral-base-contrast-3
--c360-g-color-neutral-base-contrast-4
```
**Brand**
```css
--c360-g-color-brand-base-1
--c360-g-color-brand-base-2
--c360-g-color-brand-base-3
--c360-g-color-brand-base-4
--c360-g-color-brand-base-contrast-1
--c360-g-color-brand-base-contrast-2
--c360-g-color-brand-base-contrast-3
--c360-g-color-brand-base-contrast-4
```
Each group contains 8 color values; 4 of which are the default color values for that group and 4 are the **contrast** variants. These hold the color relationships in the set.
**Golden Rule for Relationships**
Regardless of the set, neutral or brand, there is a golden rule to ensure the color relationships are retained;
1. When you use a base or inverse value as your background color, a contrast value in that group is required to be used on top of that background, i.e., if `base-2` is the background, then `base-contrast-2` is your text color. If `inverse-1` is the background, then `inverse-contrast-1` is your text color.
2. The second requirement is to use the correct number value. You can only use a contrast value where the number is equal to or greater than the background color number value, i.e. if `base-2` is the background, then `base-contrast-2`, `base-contrast-3`, `base-contrast-4` as your text will always ensure a 4.5:1 contrast ratio.
#### Generic Palettes
[View all color palettes →](https://c360-subsystem-storybook.herokuapp.com/?path=/story/c360-subsystem-styling-hooks-global--color-palettes)
The C360 Design System provide generic color palettes to use in your designs. These values are generated in the [HCL color space](https://www.boronine.com/2012/03/26/Color-Spaces-for-Human-Beings/), which are designed to accord with human perception of color.
> **Important usage note**
>
> If you use a color from these palettes on a UI element, you are responsible to ensure proper contrast ratio between the background and text. Additionally, the color cannot be programmatically alter if your application requires different themes such as dark mode or high contrast mode.
### Typography
#### Font Family
[View Font Families →](https://c360-subsystem-storybook.herokuapp.com/?path=/story/c360-subsystem-styling-hooks-global--font)
The C360 Design System uses different font-families based on the design context. We provide three styling hooks for font families.
**Font Family Styling hooks and Font Stack**
```css
--c360-g-font-family-display: 'ITC Avant Garde', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--c360-g-font-family-sans: 'Salesforce Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--c360-g-font-family-monospace: Consolas, Menio, Monaco, Courier, monospace;
```
#### Font Sizes
[View Font Sizes →](https://c360-subsystem-storybook.herokuapp.com/?path=/story/c360-subsystem-styling-hooks-global--font)
The C360 Design System offers a robust palette of font sizes. Our font sizes are independent of semantics so they are intended to be used for visual hierarchy. The sizes are based off a [major second scale](https://www.modularscale.com/?1&rem&1.125), 8:9 scale ratio with the base font size starting at 0.75rem or 12px. The scale offers 10 font sizes.
#### Font Styles
##### Heading
[View Font Heading →](https://c360-subsystem-storybook.herokuapp.com/?path=/story/c360-subsystem-foundation-typography--heading)
##### Body
[View Font Body →](https://c360-subsystem-storybook.herokuapp.com/?path=/story/c360-subsystem-foundation-typography--body)
##### Eyebrow
[View Font Eyebrow →](https://c360-subsystem-storybook.herokuapp.com/?path=/story/c360-subsystem-foundation-typography--eyebrow)
##### Caption
[View Font Caption →](https://c360-subsystem-storybook.herokuapp.com/?path=/story/c360-subsystem-foundation-typography--caption)
##### Code
[View Font Code →](https://c360-subsystem-storybook.herokuapp.com/?path=/story/c360-subsystem-foundation-typography--code)
##### Link
[View Font Link →](https://c360-subsystem-storybook.herokuapp.com/?path=/story/c360-subsystem-foundation-typography--link)
### Spacing
The C360 Design System offers spacings to control the amount of space for details within a component.
[View Spacing Code →](https://c360-subsystem-storybook.herokuapp.com/?path=/story/c360-subsystem-styling-hooks-global--spacing)
### Shadows
The C360 Design System offers shadows to highlight difference in elevations between components
[View Shadows Code →](https://c360-subsystem-storybook.herokuapp.com/?path=/story/c360-subsystem-styling-hooks-global--shadows)
### Radius
The C360 Design System offers border radius that can be applied on the element.
[View Radius Code →](https://c360-subsystem-storybook.herokuapp.com/?path=/story/c360-subsystem-styling-hooks-global--radius)
### Sizing
The C360 Design System offers border sizing that can be applied on the element.
[View Sizing Code →](https://c360-subsystem-storybook.herokuapp.com/?path=/story/c360-subsystem-styling-hooks-global--sizing)
---
_Source: https://npm.io/package/@salesforce-ux/c360-styling-hooks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._