# Tokens
> This section outlines comprehensive details about semantic and core tokens.
## Introduction
Getting started with Workleap Design Tokens
Design tokens are central to Workleap's design language, underpinning all UI elements. These tokens encapsulate the Workleap brand and are maintained within the Hopper Design System.
A design token can store any of the following elements:
* A single value such as a `color`, `font-size`, or `border-width`.
* A collection of indivisible values such as a `box-shadow`.
### Definitions
Hopper aims to provide a three-tier token system, with each tier serving a specific purpose.
#### Core tokens
These tokens represent fundamental values like hexadecimal color codes, border widths, or font sizes. They serve as the building blocks of the design system.
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ------- |
| core\_sapphire-200 | `--hop-sapphire-200` | #95b1ff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Semantic tokens
Semantic tokens convey design intent and are context-aware. They should be used in most scenarios.
##### Light
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | -------------------------------- | ------- |
| primary-disabled | `--hop-primary-surface-disabled` | #95b1ff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Dark
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | -------------------------------- | ------- |
| primary-disabled | `--hop-primary-surface-disabled` | #2040c7 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Component tokens
These tokens cover the essential details of component implementation and are provided by the components themselves. They are linked to their specific components and should only be used when building components with a technology other than React.
##### Light
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------------------- | ------------------------------------ | ------- |
| hop-comp-button-primary-disabled | `--hop-comp-button-primary-disabled` | #95b1ff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Dark
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------------------- | ------------------------------------ | ------- |
| hop-comp-button-primary-disabled | `--hop-comp-button-primary-disabled` | #2040c7 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
### When to use
#### For Developers
Tokens should be used whenever Hopper components do not suit your current use case or if you can't use Hopper React components. They are also useful for situations such as setting a background color on an element.
It should be noted that if your current stack prevents you from directly using Hopper components, it is recommended to use component tokens, once released, in priority as they are mapped 1:1 with Hopper implementation.
#### For Designers
When developing features for Workleap, you may need to create new components or enhance existing ones. In this case, you should use semantic tokens to create your components. This ensures consistency with the rest of the design system. Only semantic tokens are available in Figma.
#### Do's and Don'ts
**Rule 1**
* ✅ Do:
``
Reference the value from the 'Component Prop Value' column in the tokens table when setting component properties.
* 🚫 Don't:
``
Use the 'Token Name (CSS Variable Name)' directly in the component prop value.
## Color
Design tokens are design decisions, translated into data. Explore the semantic color design tokens.
Colors are a clear way to convey meaning in design. Over time, we associate colors with specific meanings based on their context and frequency of use. In the Workleap ecosystem, each color complements the others and has a specific role.
### Guidelines
* **Communication is key** - Although we value an aesthetically pleasing use of color, we place a higher value on clear communication. Color supports the purpose of the content, communicating things like hierarchy, interactive states and differences between visual elements.
* **Colors have meaning** - Each color has assigned sentiment based on how they function within the interface. Defined color roles make things easy to modify and customize later. Their meaning is also expanded to all Workleap verticals so that users understand that they're in the same ecosystem and can recognize its codes.
### Deprecation notice
Tokens with the `-active` suffix are deprecated and should not be used in new code. They will be removed in a future release. Prefer using their `-press` counterparts. In some instances, `-active` tokens should be replaced with `-selected` tokens. This should be documented in your Figma files. If in doubt, validate with a designer.
### Light Tokens
#### Neutral
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| neutral-active | `--hop-neutral-border-active` | #787a7e |
| neutral-active | `--hop-neutral-icon-active` | #232426 |
| neutral-weak-active | `--hop-neutral-icon-weak-active` | #484a4d |
| neutral-active | `--hop-neutral-surface-active` | #eef0f2 |
| neutral-weak-active | `--hop-neutral-surface-weak-active` | #cbcdd2 |
| neutral-active | `--hop-neutral-text-active` | #232426 |
| neutral-weak-active | `--hop-neutral-text-weak-active` | #484a4d |
| neutral | `--hop-neutral-border` | #b3b5ba |
| neutral-selected | `--hop-neutral-border-selected` | #313335 |
| neutral-disabled | `--hop-neutral-border-disabled` | #eef0f2 |
| neutral-hover | `--hop-neutral-border-hover` | #96989d |
| neutral-press | `--hop-neutral-border-press` | #787a7e |
| neutral-strong | `--hop-neutral-border-strong` | #313335 |
| neutral-strong-hover | `--hop-neutral-border-strong-hover` | #484a4d |
| neutral-weak | `--hop-neutral-border-weak` | #e1e3e7 |
| neutral-weakest | `--hop-neutral-border-weakest` | #eef0f2 |
| neutral | `--hop-neutral-icon` | #313335 |
| neutral-selected | `--hop-neutral-icon-selected` | #ffffff |
| neutral-disabled | `--hop-neutral-icon-disabled` | #96989d |
| neutral-hover | `--hop-neutral-icon-hover` | #484a4d |
| neutral-press | `--hop-neutral-icon-press` | #232426 |
| neutral-strong | `--hop-neutral-icon-strong` | #ffffff |
| neutral-strong-hover | `--hop-neutral-icon-strong-hover` | #ffffff |
| neutral-weak | `--hop-neutral-icon-weak` | #787a7e |
| neutral-weak-hover | `--hop-neutral-icon-weak-hover` | #5e6064 |
| neutral-weak-press | `--hop-neutral-icon-weak-press` | #484a4d |
| neutral-weak-selected | `--hop-neutral-icon-weak-selected` | #5e6064 |
| neutral-weakest | `--hop-neutral-icon-weakest` | #b3b5ba |
| neutral | `--hop-neutral-surface` | #ffffff |
| neutral-selected | `--hop-neutral-surface-selected` | #313335 |
| neutral-disabled | `--hop-neutral-surface-disabled` | #eef0f2 |
| neutral-hover | `--hop-neutral-surface-hover` | #f8f9fa |
| neutral-press | `--hop-neutral-surface-press` | #eef0f2 |
| neutral-strong | `--hop-neutral-surface-strong` | #313335 |
| neutral-weak | `--hop-neutral-surface-weak` | #eef0f2 |
| neutral-weak-selected | `--hop-neutral-surface-weak-selected` | #eef0f2 |
| neutral-weak-hover | `--hop-neutral-surface-weak-hover` | #e1e3e7 |
| neutral-weak-press | `--hop-neutral-surface-weak-press` | #cbcdd2 |
| neutral-weakest | `--hop-neutral-surface-weakest` | #f8f9fa |
| neutral-weakest-selected | `--hop-neutral-surface-weakest-selected` | #eef0f2 |
| neutral-weakest-hover | `--hop-neutral-surface-weakest-hover` | #eef0f2 |
| neutral | `--hop-neutral-text` | #313335 |
| neutral-selected | `--hop-neutral-text-selected` | #ffffff |
| neutral-disabled | `--hop-neutral-text-disabled` | #96989d |
| neutral-hover | `--hop-neutral-text-hover` | #484a4d |
| neutral-press | `--hop-neutral-text-press` | #232426 |
| neutral-strong | `--hop-neutral-text-strong` | #ffffff |
| neutral-weak | `--hop-neutral-text-weak` | #6c6e72 |
| neutral-weak-hover | `--hop-neutral-text-weak-hover` | #5e6064 |
| neutral-weak-press | `--hop-neutral-text-weak-press` | #484a4d |
| neutral-weak-selected | `--hop-neutral-text-weak-selected` | #5e6064 |
| neutral-weakest | `--hop-neutral-text-weakest` | #96989d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| neutral-active | `--hop-neutral-border-active` | #787a7e |
| neutral-active | `--hop-neutral-icon-active` | #232426 |
| neutral-weak-active | `--hop-neutral-icon-weak-active` | #484a4d |
| neutral-active | `--hop-neutral-surface-active` | #eef0f2 |
| neutral-weak-active | `--hop-neutral-surface-weak-active` | #cbcdd2 |
| neutral-active | `--hop-neutral-text-active` | #232426 |
| neutral-weak-active | `--hop-neutral-text-weak-active` | #484a4d |
| neutral | `--hop-neutral-border` | #b3b5ba |
| neutral-selected | `--hop-neutral-border-selected` | #313335 |
| neutral-disabled | `--hop-neutral-border-disabled` | #eef0f2 |
| neutral-hover | `--hop-neutral-border-hover` | #96989d |
| neutral-press | `--hop-neutral-border-press` | #787a7e |
| neutral-strong | `--hop-neutral-border-strong` | #313335 |
| neutral-strong-hover | `--hop-neutral-border-strong-hover` | #484a4d |
| neutral-weak | `--hop-neutral-border-weak` | #e1e3e7 |
| neutral-weakest | `--hop-neutral-border-weakest` | #eef0f2 |
| neutral | `--hop-neutral-icon` | #313335 |
| neutral-selected | `--hop-neutral-icon-selected` | #ffffff |
| neutral-disabled | `--hop-neutral-icon-disabled` | #96989d |
| neutral-hover | `--hop-neutral-icon-hover` | #484a4d |
| neutral-press | `--hop-neutral-icon-press` | #232426 |
| neutral-strong | `--hop-neutral-icon-strong` | #ffffff |
| neutral-strong-hover | `--hop-neutral-icon-strong-hover` | #ffffff |
| neutral-weak | `--hop-neutral-icon-weak` | #787a7e |
| neutral-weak-hover | `--hop-neutral-icon-weak-hover` | #5e6064 |
| neutral-weak-press | `--hop-neutral-icon-weak-press` | #484a4d |
| neutral-weak-selected | `--hop-neutral-icon-weak-selected` | #5e6064 |
| neutral-weakest | `--hop-neutral-icon-weakest` | #b3b5ba |
| neutral | `--hop-neutral-surface` | #ffffff |
| neutral-selected | `--hop-neutral-surface-selected` | #313335 |
| neutral-disabled | `--hop-neutral-surface-disabled` | #eef0f2 |
| neutral-hover | `--hop-neutral-surface-hover` | #f8f9fa |
| neutral-press | `--hop-neutral-surface-press` | #eef0f2 |
| neutral-strong | `--hop-neutral-surface-strong` | #313335 |
| neutral-weak | `--hop-neutral-surface-weak` | #eef0f2 |
| neutral-weak-selected | `--hop-neutral-surface-weak-selected` | #eef0f2 |
| neutral-weak-hover | `--hop-neutral-surface-weak-hover` | #e1e3e7 |
| neutral-weak-press | `--hop-neutral-surface-weak-press` | #cbcdd2 |
| neutral-weakest | `--hop-neutral-surface-weakest` | #f8f9fa |
| neutral-weakest-selected | `--hop-neutral-surface-weakest-selected` | #eef0f2 |
| neutral-weakest-hover | `--hop-neutral-surface-weakest-hover` | #eef0f2 |
| neutral | `--hop-neutral-text` | #313335 |
| neutral-selected | `--hop-neutral-text-selected` | #ffffff |
| neutral-disabled | `--hop-neutral-text-disabled` | #96989d |
| neutral-hover | `--hop-neutral-text-hover` | #484a4d |
| neutral-press | `--hop-neutral-text-press` | #232426 |
| neutral-strong | `--hop-neutral-text-strong` | #ffffff |
| neutral-weak | `--hop-neutral-text-weak` | #6c6e72 |
| neutral-weak-hover | `--hop-neutral-text-weak-hover` | #5e6064 |
| neutral-weak-press | `--hop-neutral-text-weak-press` | #484a4d |
| neutral-weak-selected | `--hop-neutral-text-weak-selected` | #5e6064 |
| neutral-weakest | `--hop-neutral-text-weakest` | #96989d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Primary
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| primary-active | `--hop-primary-border-active` | #6c8ffd |
| primary-active | `--hop-primary-icon-active` | #2040c7 |
| primary-active | `--hop-primary-surface-active` | #6c8ffd |
| primary-strong-active | `--hop-primary-surface-strong-active` | #2040c7 |
| primary-weak-active | `--hop-primary-surface-weak-active` | #d6e0ff |
| primary-active | `--hop-primary-text-active` | #2040c7 |
| primary | `--hop-primary-border` | #4767fe |
| primary-selected | `--hop-primary-border-selected` | #4767fe |
| primary-focus | `--hop-primary-border-focus` | #3b57ff |
| primary-press | `--hop-primary-border-press` | #3b57ff |
| primary | `--hop-primary-icon` | #3b57ff |
| primary-selected | `--hop-primary-icon-selected` | #3b57ff |
| primary-disabled | `--hop-primary-icon-disabled` | #95b1ff |
| primary-hover | `--hop-primary-icon-hover` | #2a43e8 |
| primary-press | `--hop-primary-icon-press` | #2040c7 |
| primary-strong | `--hop-primary-icon-strong` | #ffffff |
| primary-strong-hover | `--hop-primary-icon-strong-hover` | #ffffff |
| primary | `--hop-primary-surface` | #e6ebff |
| primary-selected | `--hop-primary-surface-selected` | #e6ebff |
| primary-disabled | `--hop-primary-surface-disabled` | #95b1ff |
| primary-focus | `--hop-primary-surface-focus` | #f5f6ff |
| primary-hover | `--hop-primary-surface-hover` | #95b1ff |
| primary-press | `--hop-primary-surface-press` | #6c8ffd |
| primary-strong | `--hop-primary-surface-strong` | #4767fe |
| primary-strong-selected | `--hop-primary-surface-strong-selected` | #e6ebff |
| primary-strong-hover | `--hop-primary-surface-strong-hover` | #2a43e8 |
| primary-strong-press | `--hop-primary-surface-strong-press` | #2040c7 |
| primary-weak | `--hop-primary-surface-weak` | #f5f6ff |
| primary-weak-selected | `--hop-primary-surface-weak-selected` | #b9cbff |
| primary-weak-hover | `--hop-primary-surface-weak-hover` | #e6ebff |
| primary-weak-press | `--hop-primary-surface-weak-press` | #d6e0ff |
| primary | `--hop-primary-text` | #3b57ff |
| primary-selected | `--hop-primary-text-selected` | #3b57ff |
| primary-disabled | `--hop-primary-text-disabled` | #95b1ff |
| primary-hover | `--hop-primary-text-hover` | #2a43e8 |
| primary-press | `--hop-primary-text-press` | #2040c7 |
| primary-strong | `--hop-primary-text-strong` | #ffffff |
| primary-strong-hover | `--hop-primary-text-strong-hover` | #ffffff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| primary-active | `--hop-primary-border-active` | #6c8ffd |
| primary-active | `--hop-primary-icon-active` | #2040c7 |
| primary-active | `--hop-primary-surface-active` | #6c8ffd |
| primary-strong-active | `--hop-primary-surface-strong-active` | #2040c7 |
| primary-weak-active | `--hop-primary-surface-weak-active` | #d6e0ff |
| primary-active | `--hop-primary-text-active` | #2040c7 |
| primary | `--hop-primary-border` | #736ad2 |
| primary-selected | `--hop-primary-border-selected` | #dd3900 |
| primary-focus | `--hop-primary-border-focus` | #685dc9 |
| primary-press | `--hop-primary-border-press` | #685dc9 |
| primary | `--hop-primary-icon` | #685dc9 |
| primary-selected | `--hop-primary-icon-selected` | #ca3400 |
| primary-disabled | `--hop-primary-icon-disabled` | #b4abff |
| primary-hover | `--hop-primary-icon-hover` | #6057b3 |
| primary-press | `--hop-primary-icon-press` | #4d468f |
| primary-strong | `--hop-primary-icon-strong` | #ffffff |
| primary-strong-hover | `--hop-primary-icon-strong-hover` | #ffffff |
| primary | `--hop-primary-surface` | #eceaff |
| primary-selected | `--hop-primary-surface-selected` | #ff5b22 |
| primary-disabled | `--hop-primary-surface-disabled` | #b4abff |
| primary-focus | `--hop-primary-surface-focus` | #f6f6ff |
| primary-hover | `--hop-primary-surface-hover` | #b4abff |
| primary-press | `--hop-primary-surface-press` | #8e85ec |
| primary-strong | `--hop-primary-surface-strong` | #736ad2 |
| primary-strong-selected | `--hop-primary-surface-strong-selected` | #ffe7df |
| primary-strong-hover | `--hop-primary-surface-strong-hover` | #6057b3 |
| primary-strong-press | `--hop-primary-surface-strong-press` | #4d468f |
| primary-weak | `--hop-primary-surface-weak` | #f6f6ff |
| primary-weak-selected | `--hop-primary-surface-weak-selected` | #ff9874 |
| primary-weak-hover | `--hop-primary-surface-weak-hover` | #eceaff |
| primary-weak-press | `--hop-primary-surface-weak-press` | #deddff |
| primary | `--hop-primary-text` | #685dc9 |
| primary-selected | `--hop-primary-text-selected` | #ca3400 |
| primary-disabled | `--hop-primary-text-disabled` | #b4abff |
| primary-hover | `--hop-primary-text-hover` | #6057b3 |
| primary-press | `--hop-primary-text-press` | #4d468f |
| primary-strong | `--hop-primary-text-strong` | #ffffff |
| primary-strong-hover | `--hop-primary-text-strong-hover` | #ffffff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Success
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ------- |
| success | `--hop-success-border` | #aad89d |
| success | `--hop-success-icon` | #115a52 |
| success-weakest | `--hop-success-icon-weakest` | #aad89d |
| success-weak | `--hop-success-icon-weak` | #47a584 |
| success | `--hop-success-surface` | #f4f9e9 |
| success-strong | `--hop-success-surface-strong` | #aad89d |
| success-weak | `--hop-success-surface-weak` | #e3f3b9 |
| success | `--hop-success-text` | #115a52 |
| success-hover | `--hop-success-text-hover` | #16433d |
| success-weak | `--hop-success-text-weak` | #47a584 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ------- |
| success | `--hop-success-border` | #aad89d |
| success | `--hop-success-icon` | #115a52 |
| success-weakest | `--hop-success-icon-weakest` | #aad89d |
| success-weak | `--hop-success-icon-weak` | #47a584 |
| success | `--hop-success-surface` | #f4f9e9 |
| success-strong | `--hop-success-surface-strong` | #aad89d |
| success-weak | `--hop-success-surface-weak` | #e3f3b9 |
| success | `--hop-success-text` | #115a52 |
| success-hover | `--hop-success-text-hover` | #16433d |
| success-weak | `--hop-success-text-weak` | #47a584 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Warning
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ------- |
| warning | `--hop-warning-border` | #ffbf92 |
| warning | `--hop-warning-icon` | #8c3504 |
| warning-weakest | `--hop-warning-icon-weakest` | #ffbf92 |
| warning-weak | `--hop-warning-icon-weak` | #e57723 |
| warning | `--hop-warning-surface` | #fff5e9 |
| warning-strong | `--hop-warning-surface-strong` | #ffbf92 |
| warning-weak | `--hop-warning-surface-weak` | #ffe8d3 |
| warning | `--hop-warning-text` | #8c3504 |
| warning-weak | `--hop-warning-text-weak` | #e57723 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ------- |
| warning | `--hop-warning-border` | #ffbf92 |
| warning | `--hop-warning-icon` | #8c3504 |
| warning-weakest | `--hop-warning-icon-weakest` | #ffbf92 |
| warning-weak | `--hop-warning-icon-weak` | #e57723 |
| warning | `--hop-warning-surface` | #fff5e9 |
| warning-strong | `--hop-warning-surface-strong` | #ffbf92 |
| warning-weak | `--hop-warning-surface-weak` | #ffe8d3 |
| warning | `--hop-warning-text` | #8c3504 |
| warning-weak | `--hop-warning-text-weak` | #e57723 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Danger
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ----------------------------------- | ------- |
| danger-active | `--hop-danger-border-active` | #ba2d2d |
| danger-active | `--hop-danger-icon-active` | #6c2320 |
| danger-weak-active | `--hop-danger-icon-weak-active` | #ba2d2d |
| danger-active | `--hop-danger-surface-active` | #ba2d2d |
| danger-weak-active | `--hop-danger-surface-weak-active` | #ffbcb7 |
| danger-active | `--hop-danger-text-active` | #6c2320 |
| danger-weak-active | `--hop-danger-text-weak-active` | #ba2d2d |
| danger | `--hop-danger-border` | #ffbcb7 |
| danger-selected | `--hop-danger-border-selected` | #df3236 |
| danger-strong | `--hop-danger-border-strong` | #fa4d59 |
| danger-press | `--hop-danger-border-press` | #fa4d59 |
| danger | `--hop-danger-icon` | #952927 |
| danger-selected | `--hop-danger-icon-selected` | #df3236 |
| danger-disabled | `--hop-danger-icon-disabled` | #ffbcb7 |
| danger-hover | `--hop-danger-icon-hover` | #cb2e31 |
| danger-press | `--hop-danger-icon-press` | #6c2320 |
| danger-strong | `--hop-danger-icon-strong` | #ffffff |
| danger-strong-hover | `--hop-danger-icon-strong-hover` | #ffffff |
| danger-weak | `--hop-danger-icon-weak` | #df3236 |
| danger-weak-hover | `--hop-danger-icon-weak-hover` | #cb2e31 |
| danger-weak-press | `--hop-danger-icon-weak-press` | #ba2d2d |
| danger-weakest | `--hop-danger-icon-weakest` | #ffd6d3 |
| danger | `--hop-danger-surface` | #fdf6f6 |
| danger-selected | `--hop-danger-surface-selected` | #fde6e5 |
| danger-disabled | `--hop-danger-surface-disabled` | #ffbcb7 |
| danger-hover | `--hop-danger-surface-hover` | #cb2e31 |
| danger-press | `--hop-danger-surface-press` | #ba2d2d |
| danger-strong | `--hop-danger-surface-strong` | #df3236 |
| danger-strong-hover | `--hop-danger-surface-strong-hover` | #cb2e31 |
| danger-weak | `--hop-danger-surface-weak` | #fde6e5 |
| danger-weak-hover | `--hop-danger-surface-weak-hover` | #ffd6d3 |
| danger-weak-press | `--hop-danger-surface-weak-press` | #ffbcb7 |
| danger | `--hop-danger-text` | #952927 |
| danger-selected | `--hop-danger-text-selected` | #df3236 |
| danger-disabled | `--hop-danger-text-disabled` | #ffbcb7 |
| danger-hover | `--hop-danger-text-hover` | #cb2e31 |
| danger-press | `--hop-danger-text-press` | #6c2320 |
| danger-strong | `--hop-danger-text-strong` | #ffffff |
| danger-strong-hover | `--hop-danger-text-strong-hover` | #ffffff |
| danger-weak | `--hop-danger-text-weak` | #df3236 |
| danger-weak-hover | `--hop-danger-text-weak-hover` | #cb2e31 |
| danger-weak-press | `--hop-danger-text-weak-press` | #ba2d2d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ----------------------------------- | ------- |
| danger-active | `--hop-danger-border-active` | #ba2d2d |
| danger-active | `--hop-danger-icon-active` | #6c2320 |
| danger-weak-active | `--hop-danger-icon-weak-active` | #ba2d2d |
| danger-active | `--hop-danger-surface-active` | #ba2d2d |
| danger-weak-active | `--hop-danger-surface-weak-active` | #ffbcb7 |
| danger-active | `--hop-danger-text-active` | #6c2320 |
| danger-weak-active | `--hop-danger-text-weak-active` | #ba2d2d |
| danger | `--hop-danger-border` | #ffbcb7 |
| danger-selected | `--hop-danger-border-selected` | #df3236 |
| danger-strong | `--hop-danger-border-strong` | #fa4d59 |
| danger-press | `--hop-danger-border-press` | #fa4d59 |
| danger | `--hop-danger-icon` | #952927 |
| danger-selected | `--hop-danger-icon-selected` | #df3236 |
| danger-disabled | `--hop-danger-icon-disabled` | #ffbcb7 |
| danger-hover | `--hop-danger-icon-hover` | #cb2e31 |
| danger-press | `--hop-danger-icon-press` | #6c2320 |
| danger-strong | `--hop-danger-icon-strong` | #ffffff |
| danger-strong-hover | `--hop-danger-icon-strong-hover` | #ffffff |
| danger-weak | `--hop-danger-icon-weak` | #df3236 |
| danger-weak-hover | `--hop-danger-icon-weak-hover` | #cb2e31 |
| danger-weak-press | `--hop-danger-icon-weak-press` | #ba2d2d |
| danger-weakest | `--hop-danger-icon-weakest` | #ffd6d3 |
| danger | `--hop-danger-surface` | #fdf6f6 |
| danger-selected | `--hop-danger-surface-selected` | #fde6e5 |
| danger-disabled | `--hop-danger-surface-disabled` | #ffbcb7 |
| danger-hover | `--hop-danger-surface-hover` | #cb2e31 |
| danger-press | `--hop-danger-surface-press` | #ba2d2d |
| danger-strong | `--hop-danger-surface-strong` | #df3236 |
| danger-strong-hover | `--hop-danger-surface-strong-hover` | #cb2e31 |
| danger-weak | `--hop-danger-surface-weak` | #fde6e5 |
| danger-weak-hover | `--hop-danger-surface-weak-hover` | #ffd6d3 |
| danger-weak-press | `--hop-danger-surface-weak-press` | #ffbcb7 |
| danger | `--hop-danger-text` | #952927 |
| danger-selected | `--hop-danger-text-selected` | #df3236 |
| danger-disabled | `--hop-danger-text-disabled` | #ffbcb7 |
| danger-hover | `--hop-danger-text-hover` | #cb2e31 |
| danger-press | `--hop-danger-text-press` | #6c2320 |
| danger-strong | `--hop-danger-text-strong` | #ffffff |
| danger-strong-hover | `--hop-danger-text-strong-hover` | #ffffff |
| danger-weak | `--hop-danger-text-weak` | #df3236 |
| danger-weak-hover | `--hop-danger-text-weak-hover` | #cb2e31 |
| danger-weak-press | `--hop-danger-text-weak-press` | #ba2d2d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Information
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ---------------------------------- | ------- |
| information | `--hop-information-border` | #9fd2f7 |
| information | `--hop-information-icon` | #0a538b |
| information-weakest | `--hop-information-icon-weakest` | #bae6ff |
| information-weak | `--hop-information-icon-weak` | #5d9acd |
| information | `--hop-information-surface` | #f0f8ff |
| information-strong | `--hop-information-surface-strong` | #9fd2f7 |
| information-weak | `--hop-information-surface-weak` | #d9efff |
| information | `--hop-information-text` | #003d70 |
| information-weak | `--hop-information-text-weak` | #5d9acd |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ---------------------------------- | ------- |
| information | `--hop-information-border` | #9fd2f7 |
| information | `--hop-information-icon` | #0a538b |
| information-weakest | `--hop-information-icon-weakest` | #bae6ff |
| information-weak | `--hop-information-icon-weak` | #5d9acd |
| information | `--hop-information-surface` | #f0f8ff |
| information-strong | `--hop-information-surface-strong` | #9fd2f7 |
| information-weak | `--hop-information-surface-weak` | #d9efff |
| information | `--hop-information-text` | #003d70 |
| information-weak | `--hop-information-text-weak` | #5d9acd |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Upsell
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ---------------------------------- | ------- |
| upsell-active | `--hop-upsell-border-active` | #e2a934 |
| upsell-active | `--hop-upsell-icon-active` | #2f250d |
| upsell-weak-active | `--hop-upsell-icon-weak-active` | #7e5e0a |
| upsell-active | `--hop-upsell-surface-active` | #e2a934 |
| upsell-weak-active | `--hop-upsell-surface-weak-active` | #f7e694 |
| upsell-active | `--hop-upsell-text-active` | #2f250d |
| upsell-weak-active | `--hop-upsell-text-weak-active` | #7e5e0a |
| upsell | `--hop-upsell-border` | #eac96d |
| upsell-selected | `--hop-upsell-border-selected` | #996f08 |
| upsell-disabled | `--hop-upsell-border-disabled` | #f7e694 |
| upsell-press | `--hop-upsell-border-press` | #c28b12 |
| upsell | `--hop-upsell-icon` | #654c0d |
| upsell-selected | `--hop-upsell-icon-selected` | #996f08 |
| upsell-hover | `--hop-upsell-icon-hover` | #4b390f |
| upsell-press | `--hop-upsell-icon-press` | #2f250d |
| upsell-weakest | `--hop-upsell-icon-weakest` | #f7e694 |
| upsell-weak | `--hop-upsell-icon-weak` | #c28b12 |
| upsell-weak-hover | `--hop-upsell-icon-weak-hover` | #8b6609 |
| upsell-weak-press | `--hop-upsell-icon-weak-press` | #7e5e0a |
| upsell | `--hop-upsell-surface` | #fff8d6 |
| upsell-selected | `--hop-upsell-surface-selected` | #fff2b8 |
| upsell-disabled | `--hop-upsell-surface-disabled` | #fff8d6 |
| upsell-hover | `--hop-upsell-surface-hover` | #fff2b8 |
| upsell-press | `--hop-upsell-surface-press` | #f7e694 |
| upsell-weak | `--hop-upsell-surface-weak` | #f7e694 |
| upsell-weak-hover | `--hop-upsell-surface-weak-hover` | #eac96d |
| upsell-weak-press | `--hop-upsell-surface-weak-press` | #e2a934 |
| upsell | `--hop-upsell-text` | #654c0d |
| upsell-selected | `--hop-upsell-text-selected` | #996f08 |
| upsell-disabled | `--hop-upsell-text-disabled` | #996f08 |
| upsell-hover | `--hop-upsell-text-hover` | #4b390f |
| upsell-press | `--hop-upsell-text-press` | #2f250d |
| upsell-weak | `--hop-upsell-text-weak` | #c28b12 |
| upsell-weak-hover | `--hop-upsell-text-weak-hover` | #8b6609 |
| upsell-weak-press | `--hop-upsell-text-weak-press` | #7e5e0a |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ---------------------------------- | ------- |
| upsell-active | `--hop-upsell-border-active` | #e2a934 |
| upsell-active | `--hop-upsell-icon-active` | #2f250d |
| upsell-weak-active | `--hop-upsell-icon-weak-active` | #7e5e0a |
| upsell-active | `--hop-upsell-surface-active` | #e2a934 |
| upsell-weak-active | `--hop-upsell-surface-weak-active` | #f7e694 |
| upsell-active | `--hop-upsell-text-active` | #2f250d |
| upsell-weak-active | `--hop-upsell-text-weak-active` | #7e5e0a |
| upsell | `--hop-upsell-border` | #a3df00 |
| upsell-selected | `--hop-upsell-border-selected` | #5f8100 |
| upsell-disabled | `--hop-upsell-border-disabled` | #b3f400 |
| upsell-press | `--hop-upsell-border-press` | #77a300 |
| upsell | `--hop-upsell-icon` | #415800 |
| upsell-selected | `--hop-upsell-icon-selected` | #4f6c00 |
| upsell-hover | `--hop-upsell-icon-hover` | #304200 |
| upsell-press | `--hop-upsell-icon-press` | #1f2b00 |
| upsell-weakest | `--hop-upsell-icon-weakest` | #b3f400 |
| upsell-weak | `--hop-upsell-icon-weak` | #77a300 |
| upsell-weak-hover | `--hop-upsell-icon-weak-hover` | #577600 |
| upsell-weak-press | `--hop-upsell-icon-weak-press` | #4f6c00 |
| upsell | `--hop-upsell-surface` | #edffbc |
| upsell-selected | `--hop-upsell-surface-selected` | #ccff42 |
| upsell-disabled | `--hop-upsell-surface-disabled` | #edffbc |
| upsell-hover | `--hop-upsell-surface-hover` | #ccff42 |
| upsell-press | `--hop-upsell-surface-press` | #b3f400 |
| upsell-weak | `--hop-upsell-surface-weak` | #b3f400 |
| upsell-weak-hover | `--hop-upsell-surface-weak-hover` | #a3df00 |
| upsell-weak-press | `--hop-upsell-surface-weak-press` | #8fc300 |
| upsell | `--hop-upsell-text` | #415800 |
| upsell-selected | `--hop-upsell-text-selected` | #4f6c00 |
| upsell-disabled | `--hop-upsell-text-disabled` | #5f8100 |
| upsell-hover | `--hop-upsell-text-hover` | #304200 |
| upsell-press | `--hop-upsell-text-press` | #1f2b00 |
| upsell-weak | `--hop-upsell-text-weak` | #77a300 |
| upsell-weak-hover | `--hop-upsell-text-weak-hover` | #577600 |
| upsell-weak-press | `--hop-upsell-text-weak-press` | #4f6c00 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Decorative
##### Option 1
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option1 | `--hop-decorative-option1-border` | #b9cbff |
| decorative-option1 | `--hop-decorative-option1-icon` | #152450 |
| decorative-option1 | `--hop-decorative-option1-surface` | #b9cbff |
| decorative-option1-hover | `--hop-decorative-option1-surface-hover` | #95b1ff |
| decorative-option1-strong | `--hop-decorative-option1-surface-strong` | #95b1ff |
| decorative-option1-weak | `--hop-decorative-option1-surface-weak` | #e6ebff |
| decorative-option1-weak-hover | `--hop-decorative-option1-surface-weak-hover` | #d6e0ff |
| decorative-option1-weakest | `--hop-decorative-option1-surface-weakest` | #f5f6ff |
| decorative-option1 | `--hop-decorative-option1-text` | #152450 |
| decorative-option1-weak | `--hop-decorative-option1-text-weak` | #6c8ffd |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option1 | `--hop-decorative-option1-border` | #b9cbff |
| decorative-option1 | `--hop-decorative-option1-icon` | #152450 |
| decorative-option1 | `--hop-decorative-option1-surface` | #b9cbff |
| decorative-option1-hover | `--hop-decorative-option1-surface-hover` | #95b1ff |
| decorative-option1-strong | `--hop-decorative-option1-surface-strong` | #95b1ff |
| decorative-option1-weak | `--hop-decorative-option1-surface-weak` | #e6ebff |
| decorative-option1-weak-hover | `--hop-decorative-option1-surface-weak-hover` | #d6e0ff |
| decorative-option1-weakest | `--hop-decorative-option1-surface-weakest` | #f5f6ff |
| decorative-option1 | `--hop-decorative-option1-text` | #152450 |
| decorative-option1-weak | `--hop-decorative-option1-text-weak` | #6c8ffd |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 2
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option2 | `--hop-decorative-option2-border` | #a3d6cb |
| decorative-option2 | `--hop-decorative-option2-icon` | #002d1c |
| decorative-option2 | `--hop-decorative-option2-surface` | #bde8e1 |
| decorative-option2-hover | `--hop-decorative-option2-surface-hover` | #a3d6cb |
| decorative-option2-strong | `--hop-decorative-option2-surface-strong` | #a3d6cb |
| decorative-option2-weak | `--hop-decorative-option2-surface-weak` | #cff4ef |
| decorative-option2-weak-hover | `--hop-decorative-option2-surface-weak-hover` | #bde8e1 |
| decorative-option2-weakest | `--hop-decorative-option2-surface-weakest` | #ddfdf9 |
| decorative-option2 | `--hop-decorative-option2-text` | #002d1c |
| decorative-option2-weak | `--hop-decorative-option2-text-weak` | #5da18c |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option2 | `--hop-decorative-option2-border` | #a3d6cb |
| decorative-option2 | `--hop-decorative-option2-icon` | #002d1c |
| decorative-option2 | `--hop-decorative-option2-surface` | #bde8e1 |
| decorative-option2-hover | `--hop-decorative-option2-surface-hover` | #a3d6cb |
| decorative-option2-strong | `--hop-decorative-option2-surface-strong` | #a3d6cb |
| decorative-option2-weak | `--hop-decorative-option2-surface-weak` | #cff4ef |
| decorative-option2-weak-hover | `--hop-decorative-option2-surface-weak-hover` | #bde8e1 |
| decorative-option2-weakest | `--hop-decorative-option2-surface-weakest` | #ddfdf9 |
| decorative-option2 | `--hop-decorative-option2-text` | #002d1c |
| decorative-option2-weak | `--hop-decorative-option2-text-weak` | #5da18c |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 3
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option3 | `--hop-decorative-option3-border` | #ffbf92 |
| decorative-option3 | `--hop-decorative-option3-icon` | #451a02 |
| decorative-option3 | `--hop-decorative-option3-surface` | #ffbf92 |
| decorative-option3-hover | `--hop-decorative-option3-surface-hover` | #ff9b3f |
| decorative-option3-strong | `--hop-decorative-option3-surface-strong` | #ff9b3f |
| decorative-option3-weak | `--hop-decorative-option3-surface-weak` | #ffe8d3 |
| decorative-option3-weak-hover | `--hop-decorative-option3-surface-weak-hover` | #ffd8be |
| decorative-option3-weakest | `--hop-decorative-option3-surface-weakest` | #fff5e9 |
| decorative-option3 | `--hop-decorative-option3-text` | #451a02 |
| decorative-option3-weak | `--hop-decorative-option3-text-weak` | #e57723 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option3 | `--hop-decorative-option3-border` | #ffbf92 |
| decorative-option3 | `--hop-decorative-option3-icon` | #451a02 |
| decorative-option3 | `--hop-decorative-option3-surface` | #ffbf92 |
| decorative-option3-hover | `--hop-decorative-option3-surface-hover` | #ff9b3f |
| decorative-option3-strong | `--hop-decorative-option3-surface-strong` | #ff9b3f |
| decorative-option3-weak | `--hop-decorative-option3-surface-weak` | #ffe8d3 |
| decorative-option3-weak-hover | `--hop-decorative-option3-surface-weak-hover` | #ffd8be |
| decorative-option3-weakest | `--hop-decorative-option3-surface-weakest` | #fff5e9 |
| decorative-option3 | `--hop-decorative-option3-text` | #451a02 |
| decorative-option3-weak | `--hop-decorative-option3-text-weak` | #e57723 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 4
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option4 | `--hop-decorative-option4-border` | #aad89d |
| decorative-option4 | `--hop-decorative-option4-icon` | #132a27 |
| decorative-option4 | `--hop-decorative-option4-surface` | #cde8ac |
| decorative-option4-hover | `--hop-decorative-option4-surface-hover` | #aad89d |
| decorative-option4-strong | `--hop-decorative-option4-surface-strong` | #aad89d |
| decorative-option4-weak | `--hop-decorative-option4-surface-weak` | #e3f3b9 |
| decorative-option4-weak-hover | `--hop-decorative-option4-surface-weak-hover` | #cde8ac |
| decorative-option4-weakest | `--hop-decorative-option4-surface-weakest` | #f4f9e9 |
| decorative-option4 | `--hop-decorative-option4-text` | #132a27 |
| decorative-option4-weak | `--hop-decorative-option4-text-weak` | #188a71 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option4 | `--hop-decorative-option4-border` | #aad89d |
| decorative-option4 | `--hop-decorative-option4-icon` | #132a27 |
| decorative-option4 | `--hop-decorative-option4-surface` | #cde8ac |
| decorative-option4-hover | `--hop-decorative-option4-surface-hover` | #aad89d |
| decorative-option4-strong | `--hop-decorative-option4-surface-strong` | #aad89d |
| decorative-option4-weak | `--hop-decorative-option4-surface-weak` | #e3f3b9 |
| decorative-option4-weak-hover | `--hop-decorative-option4-surface-weak-hover` | #cde8ac |
| decorative-option4-weakest | `--hop-decorative-option4-surface-weakest` | #f4f9e9 |
| decorative-option4 | `--hop-decorative-option4-text` | #132a27 |
| decorative-option4-weak | `--hop-decorative-option4-text-weak` | #188a71 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 5
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option5 | `--hop-decorative-option5-border` | #9fd2f7 |
| decorative-option5 | `--hop-decorative-option5-icon` | #00274b |
| decorative-option5 | `--hop-decorative-option5-surface` | #bae6ff |
| decorative-option5-hover | `--hop-decorative-option5-surface-hover` | #9fd2f7 |
| decorative-option5-strong | `--hop-decorative-option5-surface-strong` | #9fd2f7 |
| decorative-option5-weak | `--hop-decorative-option5-surface-weak` | #d9efff |
| decorative-option5-weak-hover | `--hop-decorative-option5-surface-weak-hover` | #bae6ff |
| decorative-option5-weakest | `--hop-decorative-option5-surface-weakest` | #f0f8ff |
| decorative-option5 | `--hop-decorative-option5-text` | #00274b |
| decorative-option5-weak | `--hop-decorative-option5-text-weak` | #5d9acd |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option5 | `--hop-decorative-option5-border` | #9fd2f7 |
| decorative-option5 | `--hop-decorative-option5-icon` | #00274b |
| decorative-option5 | `--hop-decorative-option5-surface` | #bae6ff |
| decorative-option5-hover | `--hop-decorative-option5-surface-hover` | #9fd2f7 |
| decorative-option5-strong | `--hop-decorative-option5-surface-strong` | #9fd2f7 |
| decorative-option5-weak | `--hop-decorative-option5-surface-weak` | #d9efff |
| decorative-option5-weak-hover | `--hop-decorative-option5-surface-weak-hover` | #bae6ff |
| decorative-option5-weakest | `--hop-decorative-option5-surface-weakest` | #f0f8ff |
| decorative-option5 | `--hop-decorative-option5-text` | #00274b |
| decorative-option5-weak | `--hop-decorative-option5-text-weak` | #5d9acd |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 6
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option6 | `--hop-decorative-option6-border` | #eac96d |
| decorative-option6 | `--hop-decorative-option6-icon` | #2f250d |
| decorative-option6 | `--hop-decorative-option6-surface` | #f7e694 |
| decorative-option6-hover | `--hop-decorative-option6-surface-hover` | #eac96d |
| decorative-option6-strong | `--hop-decorative-option6-surface-strong` | #eac96d |
| decorative-option6-weak | `--hop-decorative-option6-surface-weak` | #fff2b8 |
| decorative-option6-weak-hover | `--hop-decorative-option6-surface-weak-hover` | #f7e694 |
| decorative-option6-weakest | `--hop-decorative-option6-surface-weakest` | #fff8d6 |
| decorative-option6 | `--hop-decorative-option6-text` | #2f250d |
| decorative-option6-weak | `--hop-decorative-option6-text-weak` | #e2a934 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option6 | `--hop-decorative-option6-border` | #eac96d |
| decorative-option6 | `--hop-decorative-option6-icon` | #2f250d |
| decorative-option6 | `--hop-decorative-option6-surface` | #f7e694 |
| decorative-option6-hover | `--hop-decorative-option6-surface-hover` | #eac96d |
| decorative-option6-strong | `--hop-decorative-option6-surface-strong` | #eac96d |
| decorative-option6-weak | `--hop-decorative-option6-surface-weak` | #fff2b8 |
| decorative-option6-weak-hover | `--hop-decorative-option6-surface-weak-hover` | #f7e694 |
| decorative-option6-weakest | `--hop-decorative-option6-surface-weakest` | #fff8d6 |
| decorative-option6 | `--hop-decorative-option6-text` | #2f250d |
| decorative-option6-weak | `--hop-decorative-option6-text-weak` | #e2a934 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 7
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option7 | `--hop-decorative-option7-border` | #d4cbc0 |
| decorative-option7 | `--hop-decorative-option7-icon` | #2a2620 |
| decorative-option7 | `--hop-decorative-option7-surface` | #e5ded6 |
| decorative-option7-hover | `--hop-decorative-option7-surface-hover` | #d4cbc0 |
| decorative-option7-strong | `--hop-decorative-option7-surface-strong` | #d4cbc0 |
| decorative-option7-weak | `--hop-decorative-option7-surface-weak` | #f0eae3 |
| decorative-option7-weak-hover | `--hop-decorative-option7-surface-weak-hover` | #e5ded6 |
| decorative-option7-weakest | `--hop-decorative-option7-surface-weakest` | #fef6ef |
| decorative-option7 | `--hop-decorative-option7-text` | #2a2620 |
| decorative-option7-weak | `--hop-decorative-option7-text-weak` | #776a59 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option7 | `--hop-decorative-option7-border` | #d4cbc0 |
| decorative-option7 | `--hop-decorative-option7-icon` | #2a2620 |
| decorative-option7 | `--hop-decorative-option7-surface` | #e5ded6 |
| decorative-option7-hover | `--hop-decorative-option7-surface-hover` | #d4cbc0 |
| decorative-option7-strong | `--hop-decorative-option7-surface-strong` | #d4cbc0 |
| decorative-option7-weak | `--hop-decorative-option7-surface-weak` | #f0eae3 |
| decorative-option7-weak-hover | `--hop-decorative-option7-surface-weak-hover` | #e5ded6 |
| decorative-option7-weakest | `--hop-decorative-option7-surface-weakest` | #fef6ef |
| decorative-option7 | `--hop-decorative-option7-text` | #2a2620 |
| decorative-option7-weak | `--hop-decorative-option7-text-weak` | #776a59 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 8
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option8 | `--hop-decorative-option8-border` | #ffbcb7 |
| decorative-option8 | `--hop-decorative-option8-icon` | #431a17 |
| decorative-option8 | `--hop-decorative-option8-surface` | #ffd6d3 |
| decorative-option8-hover | `--hop-decorative-option8-surface-hover` | #ff8e8e |
| decorative-option8-strong | `--hop-decorative-option8-surface-strong` | #ffbcb7 |
| decorative-option8-weak | `--hop-decorative-option8-surface-weak` | #fde6e5 |
| decorative-option8-weak-hover | `--hop-decorative-option8-surface-weak-hover` | #ffd6d3 |
| decorative-option8-weakest | `--hop-decorative-option8-surface-weakest` | #fdf6f6 |
| decorative-option8 | `--hop-decorative-option8-text` | #431a17 |
| decorative-option8-weak | `--hop-decorative-option8-text-weak` | #fa4d59 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option8 | `--hop-decorative-option8-border` | #ffbcb7 |
| decorative-option8 | `--hop-decorative-option8-icon` | #431a17 |
| decorative-option8 | `--hop-decorative-option8-surface` | #ffd6d3 |
| decorative-option8-hover | `--hop-decorative-option8-surface-hover` | #ff8e8e |
| decorative-option8-strong | `--hop-decorative-option8-surface-strong` | #ffbcb7 |
| decorative-option8-weak | `--hop-decorative-option8-surface-weak` | #fde6e5 |
| decorative-option8-weak-hover | `--hop-decorative-option8-surface-weak-hover` | #ffd6d3 |
| decorative-option8-weakest | `--hop-decorative-option8-surface-weakest` | #fdf6f6 |
| decorative-option8 | `--hop-decorative-option8-text` | #431a17 |
| decorative-option8-weak | `--hop-decorative-option8-text-weak` | #fa4d59 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 9
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option9 | `--hop-decorative-option9-border` | #cbcdd2 |
| decorative-option9 | `--hop-decorative-option9-icon` | #ffffff |
| decorative-option9 | `--hop-decorative-option9-surface` | #787a7e |
| decorative-option9-hover | `--hop-decorative-option9-surface-hover` | #6c6e72 |
| decorative-option9-strong | `--hop-decorative-option9-surface-strong` | #313335 |
| decorative-option9-weak | `--hop-decorative-option9-surface-weak` | #96989d |
| decorative-option9-weak-hover | `--hop-decorative-option9-surface-weak-hover` | #787a7e |
| decorative-option9-weakest | `--hop-decorative-option9-surface-weakest` | #b3b5ba |
| decorative-option9 | `--hop-decorative-option9-text` | #ffffff |
| decorative-option9-weak | `--hop-decorative-option9-text-weak` | #96989d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option9 | `--hop-decorative-option9-border` | #cbcdd2 |
| decorative-option9 | `--hop-decorative-option9-icon` | #ffffff |
| decorative-option9 | `--hop-decorative-option9-surface` | #787a7e |
| decorative-option9-hover | `--hop-decorative-option9-surface-hover` | #6c6e72 |
| decorative-option9-strong | `--hop-decorative-option9-surface-strong` | #313335 |
| decorative-option9-weak | `--hop-decorative-option9-surface-weak` | #96989d |
| decorative-option9-weak-hover | `--hop-decorative-option9-surface-weak-hover` | #787a7e |
| decorative-option9-weakest | `--hop-decorative-option9-surface-weakest` | #b3b5ba |
| decorative-option9 | `--hop-decorative-option9-text` | #ffffff |
| decorative-option9-weak | `--hop-decorative-option9-text-weak` | #96989d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Status
##### Neutral
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-neutral | `--hop-status-neutral-border` | #313335 |
| status-neutral-disabled | `--hop-status-neutral-border-disabled` | #eef0f2 |
| status-neutral-hover | `--hop-status-neutral-border-hover` | #484a4d |
| status-neutral-press | `--hop-status-neutral-border-press` | #232426 |
| status-neutral-selected | `--hop-status-neutral-border-selected` | #313335 |
| status-neutral | `--hop-status-neutral-icon` | #313335 |
| status-neutral-disabled | `--hop-status-neutral-icon-disabled` | #96989d |
| status-neutral-hover | `--hop-status-neutral-icon-hover` | #484a4d |
| status-neutral-press | `--hop-status-neutral-icon-press` | #232426 |
| status-neutral-selected | `--hop-status-neutral-icon-selected` | #ffffff |
| status-neutral | `--hop-status-neutral-surface` | #ffffff |
| status-neutral-disabled | `--hop-status-neutral-surface-disabled` | #eef0f2 |
| status-neutral-hover | `--hop-status-neutral-surface-hover` | #f8f9fa |
| status-neutral-press | `--hop-status-neutral-surface-press` | #eef0f2 |
| status-neutral-selected | `--hop-status-neutral-surface-selected` | #313335 |
| status-neutral-strong | `--hop-status-neutral-surface-strong` | #b3b5ba |
| status-neutral | `--hop-status-neutral-text` | #313335 |
| status-neutral-disabled | `--hop-status-neutral-text-disabled` | #96989d |
| status-neutral-hover | `--hop-status-neutral-text-hover` | #484a4d |
| status-neutral-press | `--hop-status-neutral-text-press` | #232426 |
| status-neutral-selected | `--hop-status-neutral-text-selected` | #ffffff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-neutral | `--hop-status-neutral-border` | #313335 |
| status-neutral-disabled | `--hop-status-neutral-border-disabled` | #eef0f2 |
| status-neutral-hover | `--hop-status-neutral-border-hover` | #484a4d |
| status-neutral-press | `--hop-status-neutral-border-press` | #232426 |
| status-neutral-selected | `--hop-status-neutral-border-selected` | #313335 |
| status-neutral | `--hop-status-neutral-icon` | #313335 |
| status-neutral-disabled | `--hop-status-neutral-icon-disabled` | #96989d |
| status-neutral-hover | `--hop-status-neutral-icon-hover` | #484a4d |
| status-neutral-press | `--hop-status-neutral-icon-press` | #232426 |
| status-neutral-selected | `--hop-status-neutral-icon-selected` | #ffffff |
| status-neutral | `--hop-status-neutral-surface` | #ffffff |
| status-neutral-disabled | `--hop-status-neutral-surface-disabled` | #eef0f2 |
| status-neutral-hover | `--hop-status-neutral-surface-hover` | #f8f9fa |
| status-neutral-press | `--hop-status-neutral-surface-press` | #eef0f2 |
| status-neutral-selected | `--hop-status-neutral-surface-selected` | #313335 |
| status-neutral-strong | `--hop-status-neutral-surface-strong` | #b3b5ba |
| status-neutral | `--hop-status-neutral-text` | #313335 |
| status-neutral-disabled | `--hop-status-neutral-text-disabled` | #96989d |
| status-neutral-hover | `--hop-status-neutral-text-hover` | #484a4d |
| status-neutral-press | `--hop-status-neutral-text-press` | #232426 |
| status-neutral-selected | `--hop-status-neutral-text-selected` | #ffffff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Progress
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-progress | `--hop-status-progress-border` | #6c8ffd |
| status-progress-disabled | `--hop-status-progress-border-disabled` | #e6ebff |
| status-progress-hover | `--hop-status-progress-border-hover` | #4767fe |
| status-progress-press | `--hop-status-progress-border-press` | #3b57ff |
| status-progress-selected | `--hop-status-progress-border-selected` | #4767fe |
| status-progress | `--hop-status-progress-icon` | #2a43e8 |
| status-progress-disabled | `--hop-status-progress-icon-disabled` | #95b1ff |
| status-progress-hover | `--hop-status-progress-icon-hover` | #2040c7 |
| status-progress-press | `--hop-status-progress-icon-press` | #1b3587 |
| status-progress-selected | `--hop-status-progress-icon-selected` | #3b57ff |
| status-progress | `--hop-status-progress-surface` | #e6ebff |
| status-progress-disabled | `--hop-status-progress-surface-disabled` | #f5f6ff |
| status-progress-hover | `--hop-status-progress-surface-hover` | #d6e0ff |
| status-progress-press | `--hop-status-progress-surface-press` | #b9cbff |
| status-progress-selected | `--hop-status-progress-surface-selected` | #e6ebff |
| status-progress-strong | `--hop-status-progress-surface-strong` | #95b1ff |
| status-progress | `--hop-status-progress-text` | #2a43e8 |
| status-progress-disabled | `--hop-status-progress-text-disabled` | #95b1ff |
| status-progress-hover | `--hop-status-progress-text-hover` | #2040c7 |
| status-progress-press | `--hop-status-progress-text-press` | #1b3587 |
| status-progress-selected | `--hop-status-progress-text-selected` | #3b57ff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-progress | `--hop-status-progress-border` | #6c8ffd |
| status-progress-disabled | `--hop-status-progress-border-disabled` | #e6ebff |
| status-progress-hover | `--hop-status-progress-border-hover` | #4767fe |
| status-progress-press | `--hop-status-progress-border-press` | #3b57ff |
| status-progress-selected | `--hop-status-progress-border-selected` | #4767fe |
| status-progress | `--hop-status-progress-icon` | #2a43e8 |
| status-progress-disabled | `--hop-status-progress-icon-disabled` | #95b1ff |
| status-progress-hover | `--hop-status-progress-icon-hover` | #2040c7 |
| status-progress-press | `--hop-status-progress-icon-press` | #1b3587 |
| status-progress-selected | `--hop-status-progress-icon-selected` | #3b57ff |
| status-progress | `--hop-status-progress-surface` | #e6ebff |
| status-progress-disabled | `--hop-status-progress-surface-disabled` | #f5f6ff |
| status-progress-hover | `--hop-status-progress-surface-hover` | #d6e0ff |
| status-progress-press | `--hop-status-progress-surface-press` | #b9cbff |
| status-progress-selected | `--hop-status-progress-surface-selected` | #e6ebff |
| status-progress-strong | `--hop-status-progress-surface-strong` | #95b1ff |
| status-progress | `--hop-status-progress-text` | #2a43e8 |
| status-progress-disabled | `--hop-status-progress-text-disabled` | #95b1ff |
| status-progress-hover | `--hop-status-progress-text-hover` | #2040c7 |
| status-progress-press | `--hop-status-progress-text-press` | #1b3587 |
| status-progress-selected | `--hop-status-progress-text-selected` | #3b57ff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Positive
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-positive | `--hop-status-positive-border` | #47a584 |
| status-positive-disabled | `--hop-status-positive-border-disabled` | #e3f3b9 |
| status-positive-hover | `--hop-status-positive-border-hover` | #188a71 |
| status-positive-press | `--hop-status-positive-border-press` | #0c796b |
| status-positive-selected | `--hop-status-positive-border-selected` | #115a52 |
| status-positive | `--hop-status-positive-icon` | #0a6f64 |
| status-positive-disabled | `--hop-status-positive-icon-disabled` | #7dc291 |
| status-positive-hover | `--hop-status-positive-icon-hover` | #115a52 |
| status-positive-press | `--hop-status-positive-icon-press` | #16433d |
| status-positive-selected | `--hop-status-positive-icon-selected` | #115a52 |
| status-positive | `--hop-status-positive-surface` | #e3f3b9 |
| status-positive-disabled | `--hop-status-positive-surface-disabled` | #f4f9e9 |
| status-positive-hover | `--hop-status-positive-surface-hover` | #cde8ac |
| status-positive-press | `--hop-status-positive-surface-press` | #aad89d |
| status-positive-selected | `--hop-status-positive-surface-selected` | #e3f3b9 |
| status-positive-strong | `--hop-status-positive-surface-strong` | #7dc291 |
| status-positive | `--hop-status-positive-text` | #0a6f64 |
| status-positive-disabled | `--hop-status-positive-text-disabled` | #7dc291 |
| status-positive-hover | `--hop-status-positive-text-hover` | #115a52 |
| status-positive-press | `--hop-status-positive-text-press` | #16433d |
| status-positive-selected | `--hop-status-positive-text-selected` | #115a52 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-positive | `--hop-status-positive-border` | #47a584 |
| status-positive-disabled | `--hop-status-positive-border-disabled` | #e3f3b9 |
| status-positive-hover | `--hop-status-positive-border-hover` | #188a71 |
| status-positive-press | `--hop-status-positive-border-press` | #0c796b |
| status-positive-selected | `--hop-status-positive-border-selected` | #115a52 |
| status-positive | `--hop-status-positive-icon` | #0a6f64 |
| status-positive-disabled | `--hop-status-positive-icon-disabled` | #7dc291 |
| status-positive-hover | `--hop-status-positive-icon-hover` | #115a52 |
| status-positive-press | `--hop-status-positive-icon-press` | #16433d |
| status-positive-selected | `--hop-status-positive-icon-selected` | #115a52 |
| status-positive | `--hop-status-positive-surface` | #e3f3b9 |
| status-positive-disabled | `--hop-status-positive-surface-disabled` | #f4f9e9 |
| status-positive-hover | `--hop-status-positive-surface-hover` | #cde8ac |
| status-positive-press | `--hop-status-positive-surface-press` | #aad89d |
| status-positive-selected | `--hop-status-positive-surface-selected` | #e3f3b9 |
| status-positive-strong | `--hop-status-positive-surface-strong` | #7dc291 |
| status-positive | `--hop-status-positive-text` | #0a6f64 |
| status-positive-disabled | `--hop-status-positive-text-disabled` | #7dc291 |
| status-positive-hover | `--hop-status-positive-text-hover` | #115a52 |
| status-positive-press | `--hop-status-positive-text-press` | #16433d |
| status-positive-selected | `--hop-status-positive-text-selected` | #115a52 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Caution
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-caution | `--hop-status-caution-border` | #e57723 |
| status-caution-disabled | `--hop-status-caution-border-disabled` | #ffe8d3 |
| status-caution-hover | `--hop-status-caution-border-hover` | #c95109 |
| status-caution-press | `--hop-status-caution-border-press` | #ba4705 |
| status-caution-selected | `--hop-status-caution-border-selected` | #8c3504 |
| status-caution | `--hop-status-caution-icon` | #ab4104 |
| status-caution-disabled | `--hop-status-caution-icon-disabled` | #ff9b3f |
| status-caution-hover | `--hop-status-caution-icon-hover` | #8c3504 |
| status-caution-press | `--hop-status-caution-icon-press` | #692803 |
| status-caution-selected | `--hop-status-caution-icon-selected` | #8c3504 |
| status-caution | `--hop-status-caution-surface` | #ffe8d3 |
| status-caution-disabled | `--hop-status-caution-surface-disabled` | #fff5e9 |
| status-caution-hover | `--hop-status-caution-surface-hover` | #ffd8be |
| status-caution-press | `--hop-status-caution-surface-press` | #ffbf92 |
| status-caution-selected | `--hop-status-caution-surface-selected` | #ffe8d3 |
| status-caution-strong | `--hop-status-caution-surface-strong` | #ff9b3f |
| status-caution | `--hop-status-caution-text` | #ab4104 |
| status-caution-disabled | `--hop-status-caution-text-disabled` | #ff9b3f |
| status-caution-hover | `--hop-status-caution-text-hover` | #8c3504 |
| status-caution-press | `--hop-status-caution-text-press` | #692803 |
| status-caution-selected | `--hop-status-caution-text-selected` | #8c3504 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-caution | `--hop-status-caution-border` | #e57723 |
| status-caution-disabled | `--hop-status-caution-border-disabled` | #ffe8d3 |
| status-caution-hover | `--hop-status-caution-border-hover` | #c95109 |
| status-caution-press | `--hop-status-caution-border-press` | #ba4705 |
| status-caution-selected | `--hop-status-caution-border-selected` | #8c3504 |
| status-caution | `--hop-status-caution-icon` | #ab4104 |
| status-caution-disabled | `--hop-status-caution-icon-disabled` | #ff9b3f |
| status-caution-hover | `--hop-status-caution-icon-hover` | #8c3504 |
| status-caution-press | `--hop-status-caution-icon-press` | #692803 |
| status-caution-selected | `--hop-status-caution-icon-selected` | #8c3504 |
| status-caution | `--hop-status-caution-surface` | #ffe8d3 |
| status-caution-disabled | `--hop-status-caution-surface-disabled` | #fff5e9 |
| status-caution-hover | `--hop-status-caution-surface-hover` | #ffd8be |
| status-caution-press | `--hop-status-caution-surface-press` | #ffbf92 |
| status-caution-selected | `--hop-status-caution-surface-selected` | #ffe8d3 |
| status-caution-strong | `--hop-status-caution-surface-strong` | #ff9b3f |
| status-caution | `--hop-status-caution-text` | #ab4104 |
| status-caution-disabled | `--hop-status-caution-text-disabled` | #ff9b3f |
| status-caution-hover | `--hop-status-caution-text-hover` | #8c3504 |
| status-caution-press | `--hop-status-caution-text-press` | #692803 |
| status-caution-selected | `--hop-status-caution-text-selected` | #8c3504 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Negative
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-negative | `--hop-status-negative-border` | #fa4d59 |
| status-negative-disabled | `--hop-status-negative-border-disabled` | #fde6e5 |
| status-negative-hover | `--hop-status-negative-border-hover` | #df3236 |
| status-negative-press | `--hop-status-negative-border-press` | #cb2e31 |
| status-negative-selected | `--hop-status-negative-border-selected` | #952927 |
| status-negative | `--hop-status-negative-icon` | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-icon-disabled` | #ff8e8e |
| status-negative-hover | `--hop-status-negative-icon-hover` | #952927 |
| status-negative-press | `--hop-status-negative-icon-press` | #6c2320 |
| status-negative-selected | `--hop-status-negative-icon-selected` | #952927 |
| status-negative | `--hop-status-negative-surface` | #fde6e5 |
| status-negative-disabled | `--hop-status-negative-surface-disabled` | #fdf6f6 |
| status-negative-hover | `--hop-status-negative-surface-hover` | #ffd6d3 |
| status-negative-press | `--hop-status-negative-surface-press` | #ffbcb7 |
| status-negative-selected | `--hop-status-negative-surface-selected` | #fde6e5 |
| status-negative-strong | `--hop-status-negative-surface-strong` | #ff8e8e |
| status-negative | `--hop-status-negative-text` | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-text-disabled` | #ff8e8e |
| status-negative-hover | `--hop-status-negative-text-hover` | #952927 |
| status-negative-press | `--hop-status-negative-text-press` | #6c2320 |
| status-negative-selected | `--hop-status-negative-text-selected` | #952927 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-negative | `--hop-status-negative-border` | #fa4d59 |
| status-negative-disabled | `--hop-status-negative-border-disabled` | #fde6e5 |
| status-negative-hover | `--hop-status-negative-border-hover` | #df3236 |
| status-negative-press | `--hop-status-negative-border-press` | #cb2e31 |
| status-negative-selected | `--hop-status-negative-border-selected` | #952927 |
| status-negative | `--hop-status-negative-icon` | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-icon-disabled` | #ff8e8e |
| status-negative-hover | `--hop-status-negative-icon-hover` | #952927 |
| status-negative-press | `--hop-status-negative-icon-press` | #6c2320 |
| status-negative-selected | `--hop-status-negative-icon-selected` | #952927 |
| status-negative | `--hop-status-negative-surface` | #fde6e5 |
| status-negative-disabled | `--hop-status-negative-surface-disabled` | #fdf6f6 |
| status-negative-hover | `--hop-status-negative-surface-hover` | #ffd6d3 |
| status-negative-press | `--hop-status-negative-surface-press` | #ffbcb7 |
| status-negative-selected | `--hop-status-negative-surface-selected` | #fde6e5 |
| status-negative-strong | `--hop-status-negative-surface-strong` | #ff8e8e |
| status-negative | `--hop-status-negative-text` | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-text-disabled` | #ff8e8e |
| status-negative-hover | `--hop-status-negative-text-hover` | #952927 |
| status-negative-press | `--hop-status-negative-text-press` | #6c2320 |
| status-negative-selected | `--hop-status-negative-text-selected` | #952927 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Inactive
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-inactive | `--hop-status-inactive-border` | #96989d |
| status-inactive-disabled | `--hop-status-inactive-border-disabled` | #eef0f2 |
| status-inactive-hover | `--hop-status-inactive-border-hover` | #787a7e |
| status-inactive-press | `--hop-status-inactive-border-press` | #6c6e72 |
| status-inactive-selected | `--hop-status-inactive-border-selected` | #484a4d |
| status-inactive | `--hop-status-inactive-icon` | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-icon-disabled` | #b3b5ba |
| status-inactive-hover | `--hop-status-inactive-icon-hover` | #484a4d |
| status-inactive-press | `--hop-status-inactive-icon-press` | #313335 |
| status-inactive-selected | `--hop-status-inactive-icon-selected` | #484a4d |
| status-inactive | `--hop-status-inactive-surface` | #eef0f2 |
| status-inactive-disabled | `--hop-status-inactive-surface-disabled` | #f8f9fa |
| status-inactive-hover | `--hop-status-inactive-surface-hover` | #e1e3e7 |
| status-inactive-press | `--hop-status-inactive-surface-press` | #cbcdd2 |
| status-inactive-selected | `--hop-status-inactive-surface-selected` | #eef0f2 |
| status-inactive-strong | `--hop-status-inactive-surface-strong` | #cbcdd2 |
| status-inactive | `--hop-status-inactive-text` | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-text-disabled` | #b3b5ba |
| status-inactive-hover | `--hop-status-inactive-text-hover` | #484a4d |
| status-inactive-press | `--hop-status-inactive-text-press` | #313335 |
| status-inactive-selected | `--hop-status-inactive-text-selected` | #484a4d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-inactive | `--hop-status-inactive-border` | #96989d |
| status-inactive-disabled | `--hop-status-inactive-border-disabled` | #eef0f2 |
| status-inactive-hover | `--hop-status-inactive-border-hover` | #787a7e |
| status-inactive-press | `--hop-status-inactive-border-press` | #6c6e72 |
| status-inactive-selected | `--hop-status-inactive-border-selected` | #484a4d |
| status-inactive | `--hop-status-inactive-icon` | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-icon-disabled` | #b3b5ba |
| status-inactive-hover | `--hop-status-inactive-icon-hover` | #484a4d |
| status-inactive-press | `--hop-status-inactive-icon-press` | #313335 |
| status-inactive-selected | `--hop-status-inactive-icon-selected` | #484a4d |
| status-inactive | `--hop-status-inactive-surface` | #eef0f2 |
| status-inactive-disabled | `--hop-status-inactive-surface-disabled` | #f8f9fa |
| status-inactive-hover | `--hop-status-inactive-surface-hover` | #e1e3e7 |
| status-inactive-press | `--hop-status-inactive-surface-press` | #cbcdd2 |
| status-inactive-selected | `--hop-status-inactive-surface-selected` | #eef0f2 |
| status-inactive-strong | `--hop-status-inactive-surface-strong` | #cbcdd2 |
| status-inactive | `--hop-status-inactive-text` | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-text-disabled` | #b3b5ba |
| status-inactive-hover | `--hop-status-inactive-text-hover` | #484a4d |
| status-inactive-press | `--hop-status-inactive-text-press` | #313335 |
| status-inactive-selected | `--hop-status-inactive-text-selected` | #484a4d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 1
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option1 | `--hop-status-option1-border` | #5d9acd |
| status-option1-disabled | `--hop-status-option1-border-disabled` | #d9efff |
| status-option1-hover | `--hop-status-option1-border-hover` | #3a7bb2 |
| status-option1-press | `--hop-status-option1-border-press` | #2e70a8 |
| status-option1-selected | `--hop-status-option1-border-selected` | #0a538b |
| status-option1 | `--hop-status-option1-icon` | #23669f |
| status-option1-disabled | `--hop-status-option1-icon-disabled` | #81b9e4 |
| status-option1-hover | `--hop-status-option1-icon-hover` | #0a538b |
| status-option1-press | `--hop-status-option1-icon-press` | #003d70 |
| status-option1-selected | `--hop-status-option1-icon-selected` | #0a538b |
| status-option1 | `--hop-status-option1-surface` | #d9efff |
| status-option1-disabled | `--hop-status-option1-surface-disabled` | #f0f8ff |
| status-option1-hover | `--hop-status-option1-surface-hover` | #bae6ff |
| status-option1-press | `--hop-status-option1-surface-press` | #9fd2f7 |
| status-option1-selected | `--hop-status-option1-surface-selected` | #d9efff |
| status-option1-strong | `--hop-status-option1-surface-strong` | #81b9e4 |
| status-option1 | `--hop-status-option1-text` | #23669f |
| status-option1-disabled | `--hop-status-option1-text-disabled` | #81b9e4 |
| status-option1-hover | `--hop-status-option1-text-hover` | #0a538b |
| status-option1-press | `--hop-status-option1-text-press` | #003d70 |
| status-option1-selected | `--hop-status-option1-text-selected` | #0a538b |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option1 | `--hop-status-option1-border` | #5d9acd |
| status-option1-disabled | `--hop-status-option1-border-disabled` | #d9efff |
| status-option1-hover | `--hop-status-option1-border-hover` | #3a7bb2 |
| status-option1-press | `--hop-status-option1-border-press` | #2e70a8 |
| status-option1-selected | `--hop-status-option1-border-selected` | #0a538b |
| status-option1 | `--hop-status-option1-icon` | #23669f |
| status-option1-disabled | `--hop-status-option1-icon-disabled` | #81b9e4 |
| status-option1-hover | `--hop-status-option1-icon-hover` | #0a538b |
| status-option1-press | `--hop-status-option1-icon-press` | #003d70 |
| status-option1-selected | `--hop-status-option1-icon-selected` | #0a538b |
| status-option1 | `--hop-status-option1-surface` | #d9efff |
| status-option1-disabled | `--hop-status-option1-surface-disabled` | #f0f8ff |
| status-option1-hover | `--hop-status-option1-surface-hover` | #bae6ff |
| status-option1-press | `--hop-status-option1-surface-press` | #9fd2f7 |
| status-option1-selected | `--hop-status-option1-surface-selected` | #d9efff |
| status-option1-strong | `--hop-status-option1-surface-strong` | #81b9e4 |
| status-option1 | `--hop-status-option1-text` | #23669f |
| status-option1-disabled | `--hop-status-option1-text-disabled` | #81b9e4 |
| status-option1-hover | `--hop-status-option1-text-hover` | #0a538b |
| status-option1-press | `--hop-status-option1-text-press` | #003d70 |
| status-option1-selected | `--hop-status-option1-text-selected` | #0a538b |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 2
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option2 | `--hop-status-option2-border` | #8d91dc |
| status-option2-disabled | `--hop-status-option2-border-disabled` | #eae9fb |
| status-option2-hover | `--hop-status-option2-border-hover` | #6b6ecc |
| status-option2-press | `--hop-status-option2-border-press` | #5f61c5 |
| status-option2-selected | `--hop-status-option2-border-selected` | #433fac |
| status-option2 | `--hop-status-option2-icon` | #5454be |
| status-option2-disabled | `--hop-status-option2-icon-disabled` | #aeb3e8 |
| status-option2-hover | `--hop-status-option2-icon-hover` | #433fac |
| status-option2-press | `--hop-status-option2-icon-press` | #322b8d |
| status-option2-selected | `--hop-status-option2-icon-selected` | #433fac |
| status-option2 | `--hop-status-option2-surface` | #eae9fb |
| status-option2-disabled | `--hop-status-option2-surface-disabled` | #f6f5ff |
| status-option2-hover | `--hop-status-option2-surface-hover` | #ddddf7 |
| status-option2-press | `--hop-status-option2-surface-press` | #c8caf0 |
| status-option2-selected | `--hop-status-option2-surface-selected` | #eae9fb |
| status-option2-strong | `--hop-status-option2-surface-strong` | #aeb3e8 |
| status-option2 | `--hop-status-option2-text` | #5454be |
| status-option2-disabled | `--hop-status-option2-text-disabled` | #aeb3e8 |
| status-option2-hover | `--hop-status-option2-text-hover` | #433fac |
| status-option2-press | `--hop-status-option2-text-press` | #322b8d |
| status-option2-selected | `--hop-status-option2-text-selected` | #433fac |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option2 | `--hop-status-option2-border` | #8d91dc |
| status-option2-disabled | `--hop-status-option2-border-disabled` | #eae9fb |
| status-option2-hover | `--hop-status-option2-border-hover` | #6b6ecc |
| status-option2-press | `--hop-status-option2-border-press` | #5f61c5 |
| status-option2-selected | `--hop-status-option2-border-selected` | #433fac |
| status-option2 | `--hop-status-option2-icon` | #5454be |
| status-option2-disabled | `--hop-status-option2-icon-disabled` | #aeb3e8 |
| status-option2-hover | `--hop-status-option2-icon-hover` | #433fac |
| status-option2-press | `--hop-status-option2-icon-press` | #322b8d |
| status-option2-selected | `--hop-status-option2-icon-selected` | #433fac |
| status-option2 | `--hop-status-option2-surface` | #eae9fb |
| status-option2-disabled | `--hop-status-option2-surface-disabled` | #f6f5ff |
| status-option2-hover | `--hop-status-option2-surface-hover` | #ddddf7 |
| status-option2-press | `--hop-status-option2-surface-press` | #c8caf0 |
| status-option2-selected | `--hop-status-option2-surface-selected` | #eae9fb |
| status-option2-strong | `--hop-status-option2-surface-strong` | #aeb3e8 |
| status-option2 | `--hop-status-option2-text` | #5454be |
| status-option2-disabled | `--hop-status-option2-text-disabled` | #aeb3e8 |
| status-option2-hover | `--hop-status-option2-text-hover` | #433fac |
| status-option2-press | `--hop-status-option2-text-press` | #322b8d |
| status-option2-selected | `--hop-status-option2-text-selected` | #433fac |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 3
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option3 | `--hop-status-option3-border` | #5da18c |
| status-option3-disabled | `--hop-status-option3-border-disabled` | #cff4ef |
| status-option3-hover | `--hop-status-option3-border-hover` | #38836a |
| status-option3-press | `--hop-status-option3-border-press` | #2b795e |
| status-option3-selected | `--hop-status-option3-border-selected` | #cff4ef |
| status-option3 | `--hop-status-option3-icon` | #206f54 |
| status-option3-disabled | `--hop-status-option3-icon-disabled` | #83beaf |
| status-option3-hover | `--hop-status-option3-icon-hover` | #055c41 |
| status-option3-press | `--hop-status-option3-icon-press` | #00452d |
| status-option3-selected | `--hop-status-option3-icon-selected` | #055c41 |
| status-option3 | `--hop-status-option3-surface` | #cff4ef |
| status-option3-disabled | `--hop-status-option3-surface-disabled` | #ddfdf9 |
| status-option3-hover | `--hop-status-option3-surface-hover` | #bde8e1 |
| status-option3-press | `--hop-status-option3-surface-press` | #a3d6cb |
| status-option3-selected | `--hop-status-option3-surface-selected` | #055c41 |
| status-option3-strong | `--hop-status-option3-surface-strong` | #83beaf |
| status-option3 | `--hop-status-option3-text` | #206f54 |
| status-option3-disabled | `--hop-status-option3-text-disabled` | #83beaf |
| status-option3-hover | `--hop-status-option3-text-hover` | #055c41 |
| status-option3-press | `--hop-status-option3-text-press` | #00452d |
| status-option3-selected | `--hop-status-option3-text-selected` | #055c41 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option3 | `--hop-status-option3-border` | #5da18c |
| status-option3-disabled | `--hop-status-option3-border-disabled` | #cff4ef |
| status-option3-hover | `--hop-status-option3-border-hover` | #38836a |
| status-option3-press | `--hop-status-option3-border-press` | #2b795e |
| status-option3-selected | `--hop-status-option3-border-selected` | #cff4ef |
| status-option3 | `--hop-status-option3-icon` | #206f54 |
| status-option3-disabled | `--hop-status-option3-icon-disabled` | #83beaf |
| status-option3-hover | `--hop-status-option3-icon-hover` | #055c41 |
| status-option3-press | `--hop-status-option3-icon-press` | #00452d |
| status-option3-selected | `--hop-status-option3-icon-selected` | #055c41 |
| status-option3 | `--hop-status-option3-surface` | #cff4ef |
| status-option3-disabled | `--hop-status-option3-surface-disabled` | #ddfdf9 |
| status-option3-hover | `--hop-status-option3-surface-hover` | #bde8e1 |
| status-option3-press | `--hop-status-option3-surface-press` | #a3d6cb |
| status-option3-selected | `--hop-status-option3-surface-selected` | #055c41 |
| status-option3-strong | `--hop-status-option3-surface-strong` | #83beaf |
| status-option3 | `--hop-status-option3-text` | #206f54 |
| status-option3-disabled | `--hop-status-option3-text-disabled` | #83beaf |
| status-option3-hover | `--hop-status-option3-text-hover` | #055c41 |
| status-option3-press | `--hop-status-option3-text-press` | #00452d |
| status-option3-selected | `--hop-status-option3-text-selected` | #055c41 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 4
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option4 | `--hop-status-option4-border` | #7c9aa3 |
| status-option4-disabled | `--hop-status-option4-border-disabled` | #e1eef1 |
| status-option4-hover | `--hop-status-option4-border-hover` | #5e7b84 |
| status-option4-press | `--hop-status-option4-border-press` | #557079 |
| status-option4-selected | `--hop-status-option4-border-selected` | #40535a |
| status-option4 | `--hop-status-option4-icon` | #4e6770 |
| status-option4-disabled | `--hop-status-option4-icon-disabled` | #9cb7be |
| status-option4-hover | `--hop-status-option4-icon-hover` | #40535a |
| status-option4-press | `--hop-status-option4-icon-press` | #313e43 |
| status-option4-selected | `--hop-status-option4-icon-selected` | #40535a |
| status-option4 | `--hop-status-option4-surface` | #e1eef1 |
| status-option4-disabled | `--hop-status-option4-surface-disabled` | #f2f8fa |
| status-option4-hover | `--hop-status-option4-surface-hover` | #d2e3e7 |
| status-option4-press | `--hop-status-option4-surface-press` | #bad0d5 |
| status-option4-selected | `--hop-status-option4-surface-selected` | #e1eef1 |
| status-option4-strong | `--hop-status-option4-surface-strong` | #9cb7be |
| status-option4 | `--hop-status-option4-text` | #4e6770 |
| status-option4-disabled | `--hop-status-option4-text-disabled` | #9cb7be |
| status-option4-hover | `--hop-status-option4-text-hover` | #40535a |
| status-option4-press | `--hop-status-option4-text-press` | #313e43 |
| status-option4-selected | `--hop-status-option4-text-selected` | #40535a |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option4 | `--hop-status-option4-border` | #7c9aa3 |
| status-option4-disabled | `--hop-status-option4-border-disabled` | #e1eef1 |
| status-option4-hover | `--hop-status-option4-border-hover` | #5e7b84 |
| status-option4-press | `--hop-status-option4-border-press` | #557079 |
| status-option4-selected | `--hop-status-option4-border-selected` | #40535a |
| status-option4 | `--hop-status-option4-icon` | #4e6770 |
| status-option4-disabled | `--hop-status-option4-icon-disabled` | #9cb7be |
| status-option4-hover | `--hop-status-option4-icon-hover` | #40535a |
| status-option4-press | `--hop-status-option4-icon-press` | #313e43 |
| status-option4-selected | `--hop-status-option4-icon-selected` | #40535a |
| status-option4 | `--hop-status-option4-surface` | #e1eef1 |
| status-option4-disabled | `--hop-status-option4-surface-disabled` | #f2f8fa |
| status-option4-hover | `--hop-status-option4-surface-hover` | #d2e3e7 |
| status-option4-press | `--hop-status-option4-surface-press` | #bad0d5 |
| status-option4-selected | `--hop-status-option4-surface-selected` | #e1eef1 |
| status-option4-strong | `--hop-status-option4-surface-strong` | #9cb7be |
| status-option4 | `--hop-status-option4-text` | #4e6770 |
| status-option4-disabled | `--hop-status-option4-text-disabled` | #9cb7be |
| status-option4-hover | `--hop-status-option4-text-hover` | #40535a |
| status-option4-press | `--hop-status-option4-text-press` | #313e43 |
| status-option4-selected | `--hop-status-option4-text-selected` | #40535a |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 5
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option5 | `--hop-status-option5-border` | #a19382 |
| status-option5-disabled | `--hop-status-option5-border-disabled` | #f0eae3 |
| status-option5-hover | `--hop-status-option5-border-hover` | #837463 |
| status-option5-press | `--hop-status-option5-border-press` | #776a59 |
| status-option5-selected | `--hop-status-option5-border-selected` | #594f41 |
| status-option5 | `--hop-status-option5-icon` | #6e6151 |
| status-option5-disabled | `--hop-status-option5-icon-disabled` | #bdb1a3 |
| status-option5-hover | `--hop-status-option5-icon-hover` | #594f41 |
| status-option5-press | `--hop-status-option5-icon-press` | #433b31 |
| status-option5-selected | `--hop-status-option5-icon-selected` | #594f41 |
| status-option5 | `--hop-status-option5-surface` | #f0eae3 |
| status-option5-disabled | `--hop-status-option5-surface-disabled` | #fef6ef |
| status-option5-hover | `--hop-status-option5-surface-hover` | #e5ded6 |
| status-option5-press | `--hop-status-option5-surface-press` | #d4cbc0 |
| status-option5-selected | `--hop-status-option5-surface-selected` | #f0eae3 |
| status-option5-strong | `--hop-status-option5-surface-strong` | #bdb1a3 |
| status-option5 | `--hop-status-option5-text` | #6e6151 |
| status-option5-disabled | `--hop-status-option5-text-disabled` | #bdb1a3 |
| status-option5-hover | `--hop-status-option5-text-hover` | #594f41 |
| status-option5-press | `--hop-status-option5-text-press` | #433b31 |
| status-option5-selected | `--hop-status-option5-text-selected` | #594f41 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option5 | `--hop-status-option5-border` | #a19382 |
| status-option5-disabled | `--hop-status-option5-border-disabled` | #f0eae3 |
| status-option5-hover | `--hop-status-option5-border-hover` | #837463 |
| status-option5-press | `--hop-status-option5-border-press` | #776a59 |
| status-option5-selected | `--hop-status-option5-border-selected` | #594f41 |
| status-option5 | `--hop-status-option5-icon` | #6e6151 |
| status-option5-disabled | `--hop-status-option5-icon-disabled` | #bdb1a3 |
| status-option5-hover | `--hop-status-option5-icon-hover` | #594f41 |
| status-option5-press | `--hop-status-option5-icon-press` | #433b31 |
| status-option5-selected | `--hop-status-option5-icon-selected` | #594f41 |
| status-option5 | `--hop-status-option5-surface` | #f0eae3 |
| status-option5-disabled | `--hop-status-option5-surface-disabled` | #fef6ef |
| status-option5-hover | `--hop-status-option5-surface-hover` | #e5ded6 |
| status-option5-press | `--hop-status-option5-surface-press` | #d4cbc0 |
| status-option5-selected | `--hop-status-option5-surface-selected` | #f0eae3 |
| status-option5-strong | `--hop-status-option5-surface-strong` | #bdb1a3 |
| status-option5 | `--hop-status-option5-text` | #6e6151 |
| status-option5-disabled | `--hop-status-option5-text-disabled` | #bdb1a3 |
| status-option5-hover | `--hop-status-option5-text-hover` | #594f41 |
| status-option5-press | `--hop-status-option5-text-press` | #433b31 |
| status-option5-selected | `--hop-status-option5-text-selected` | #594f41 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 6
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option6 | `--hop-status-option6-border` | #c28b12 |
| status-option6-disabled | `--hop-status-option6-border-disabled` | #fff2b8 |
| status-option6-hover | `--hop-status-option6-border-hover` | #996f08 |
| status-option6-press | `--hop-status-option6-border-press` | #8b6609 |
| status-option6-selected | `--hop-status-option6-border-selected` | #654c0d |
| status-option6 | `--hop-status-option6-icon` | #7e5e0a |
| status-option6-disabled | `--hop-status-option6-icon-disabled` | #e2a934 |
| status-option6-hover | `--hop-status-option6-icon-hover` | #654c0d |
| status-option6-press | `--hop-status-option6-icon-press` | #4b390f |
| status-option6-selected | `--hop-status-option6-icon-selected` | #654c0d |
| status-option6 | `--hop-status-option6-surface` | #fff8d6 |
| status-option6-disabled | `--hop-status-option6-surface-disabled` | #fff8d6 |
| status-option6-hover | `--hop-status-option6-surface-hover` | #fff2b8 |
| status-option6-press | `--hop-status-option6-surface-press` | #eac96d |
| status-option6-selected | `--hop-status-option6-surface-selected` | #fff2b8 |
| status-option6-strong | `--hop-status-option6-surface-strong` | #e2a934 |
| status-option6 | `--hop-status-option6-text` | #7e5e0a |
| status-option6-disabled | `--hop-status-option6-text-disabled` | #e2a934 |
| status-option6-hover | `--hop-status-option6-text-hover` | #654c0d |
| status-option6-press | `--hop-status-option6-text-press` | #4b390f |
| status-option6-selected | `--hop-status-option6-text-selected` | #654c0d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option6 | `--hop-status-option6-border` | #c28b12 |
| status-option6-disabled | `--hop-status-option6-border-disabled` | #fff2b8 |
| status-option6-hover | `--hop-status-option6-border-hover` | #996f08 |
| status-option6-press | `--hop-status-option6-border-press` | #8b6609 |
| status-option6-selected | `--hop-status-option6-border-selected` | #654c0d |
| status-option6 | `--hop-status-option6-icon` | #7e5e0a |
| status-option6-disabled | `--hop-status-option6-icon-disabled` | #e2a934 |
| status-option6-hover | `--hop-status-option6-icon-hover` | #654c0d |
| status-option6-press | `--hop-status-option6-icon-press` | #4b390f |
| status-option6-selected | `--hop-status-option6-icon-selected` | #654c0d |
| status-option6 | `--hop-status-option6-surface` | #fff8d6 |
| status-option6-disabled | `--hop-status-option6-surface-disabled` | #fff8d6 |
| status-option6-hover | `--hop-status-option6-surface-hover` | #fff2b8 |
| status-option6-press | `--hop-status-option6-surface-press` | #eac96d |
| status-option6-selected | `--hop-status-option6-surface-selected` | #fff2b8 |
| status-option6-strong | `--hop-status-option6-surface-strong` | #e2a934 |
| status-option6 | `--hop-status-option6-text` | #7e5e0a |
| status-option6-disabled | `--hop-status-option6-text-disabled` | #e2a934 |
| status-option6-hover | `--hop-status-option6-text-hover` | #654c0d |
| status-option6-press | `--hop-status-option6-text-press` | #4b390f |
| status-option6-selected | `--hop-status-option6-text-selected` | #654c0d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Data Visualization
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| --------------------------- | ---------------------------------- | ------- |
| dataviz\_unavailable | `--hop-dataviz-unavailable` | #e1e3e7 |
| dataviz\_unavailable-weak | `--hop-dataviz-unavailable-weak` | #eef0f2 |
| dataviz\_unavailable-strong | `--hop-dataviz-unavailable-strong` | #cbcdd2 |
| dataviz\_onlight | `--hop-dataviz-text-onlight` | #313335 |
| dataviz\_ondark | `--hop-dataviz-text-ondark` | #ffffff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| --------------------------- | ---------------------------------- | ------- |
| dataviz\_unavailable | `--hop-dataviz-unavailable` | #e1e3e7 |
| dataviz\_unavailable-weak | `--hop-dataviz-unavailable-weak` | #eef0f2 |
| dataviz\_unavailable-strong | `--hop-dataviz-unavailable-strong` | #cbcdd2 |
| dataviz\_onlight | `--hop-dataviz-text-onlight` | #313335 |
| dataviz\_ondark | `--hop-dataviz-text-ondark` | #ffffff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Monochromatic - Primary
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ---------------------------------------- | ----------------------------------------------- | ------- |
| dataviz\_monochromatic-primary-25 | `--hop-dataviz-monochromatic-primary-25` | #f5f6ff |
| dataviz\_monochromatic-primary-50 | `--hop-dataviz-monochromatic-primary-50` | #e6ebff |
| dataviz\_monochromatic-primary-75 | `--hop-dataviz-monochromatic-primary-75` | #d6e0ff |
| dataviz\_monochromatic-primary-100 | `--hop-dataviz-monochromatic-primary-100` | #b9cbff |
| dataviz\_monochromatic-primary-200 | `--hop-dataviz-monochromatic-primary-200` | #95b1ff |
| dataviz\_monochromatic-primary-300 | `--hop-dataviz-monochromatic-primary-300` | #6c8ffd |
| dataviz\_monochromatic-primary-400 | `--hop-dataviz-monochromatic-primary-400` | #4767fe |
| dataviz\_monochromatic-primary-500 | `--hop-dataviz-monochromatic-primary-500` | #3b57ff |
| dataviz\_monochromatic-primary-600 | `--hop-dataviz-monochromatic-primary-600` | #2a43e8 |
| dataviz\_monochromatic-primary-700 | `--hop-dataviz-monochromatic-primary-700` | #2040c7 |
| dataviz\_monochromatic-primary-800 | `--hop-dataviz-monochromatic-primary-800` | #1b3587 |
| dataviz\_monochromatic-primary-900 | `--hop-dataviz-monochromatic-primary-900` | #152450 |
| dataviz\_monochromatic-primary-25-hover | `--hop-dataviz-monochromatic-primary-25-hover` | #e6ebff |
| dataviz\_monochromatic-primary-50-hover | `--hop-dataviz-monochromatic-primary-50-hover` | #d6e0ff |
| dataviz\_monochromatic-primary-75-hover | `--hop-dataviz-monochromatic-primary-75-hover` | #b9cbff |
| dataviz\_monochromatic-primary-100-hover | `--hop-dataviz-monochromatic-primary-100-hover` | #95b1ff |
| dataviz\_monochromatic-primary-200-hover | `--hop-dataviz-monochromatic-primary-200-hover` | #6c8ffd |
| dataviz\_monochromatic-primary-300-hover | `--hop-dataviz-monochromatic-primary-300-hover` | #4767fe |
| dataviz\_monochromatic-primary-400-hover | `--hop-dataviz-monochromatic-primary-400-hover` | #3b57ff |
| dataviz\_monochromatic-primary-500-hover | `--hop-dataviz-monochromatic-primary-500-hover` | #2a43e8 |
| dataviz\_monochromatic-primary-600-hover | `--hop-dataviz-monochromatic-primary-600-hover` | #2040c7 |
| dataviz\_monochromatic-primary-700-hover | `--hop-dataviz-monochromatic-primary-700-hover` | #1b3587 |
| dataviz\_monochromatic-primary-800-hover | `--hop-dataviz-monochromatic-primary-800-hover` | #152450 |
| dataviz\_monochromatic-primary-900-hover | `--hop-dataviz-monochromatic-primary-900-hover` | #0b173a |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ---------------------------------------- | ----------------------------------------------- | ------- |
| dataviz\_monochromatic-primary-25 | `--hop-dataviz-monochromatic-primary-25` | #f5f6ff |
| dataviz\_monochromatic-primary-50 | `--hop-dataviz-monochromatic-primary-50` | #e6ebff |
| dataviz\_monochromatic-primary-75 | `--hop-dataviz-monochromatic-primary-75` | #d6e0ff |
| dataviz\_monochromatic-primary-100 | `--hop-dataviz-monochromatic-primary-100` | #b9cbff |
| dataviz\_monochromatic-primary-200 | `--hop-dataviz-monochromatic-primary-200` | #95b1ff |
| dataviz\_monochromatic-primary-300 | `--hop-dataviz-monochromatic-primary-300` | #6c8ffd |
| dataviz\_monochromatic-primary-400 | `--hop-dataviz-monochromatic-primary-400` | #4767fe |
| dataviz\_monochromatic-primary-500 | `--hop-dataviz-monochromatic-primary-500` | #3b57ff |
| dataviz\_monochromatic-primary-600 | `--hop-dataviz-monochromatic-primary-600` | #2a43e8 |
| dataviz\_monochromatic-primary-700 | `--hop-dataviz-monochromatic-primary-700` | #2040c7 |
| dataviz\_monochromatic-primary-800 | `--hop-dataviz-monochromatic-primary-800` | #1b3587 |
| dataviz\_monochromatic-primary-900 | `--hop-dataviz-monochromatic-primary-900` | #152450 |
| dataviz\_monochromatic-primary-25-hover | `--hop-dataviz-monochromatic-primary-25-hover` | #e6ebff |
| dataviz\_monochromatic-primary-50-hover | `--hop-dataviz-monochromatic-primary-50-hover` | #d6e0ff |
| dataviz\_monochromatic-primary-75-hover | `--hop-dataviz-monochromatic-primary-75-hover` | #b9cbff |
| dataviz\_monochromatic-primary-100-hover | `--hop-dataviz-monochromatic-primary-100-hover` | #95b1ff |
| dataviz\_monochromatic-primary-200-hover | `--hop-dataviz-monochromatic-primary-200-hover` | #6c8ffd |
| dataviz\_monochromatic-primary-300-hover | `--hop-dataviz-monochromatic-primary-300-hover` | #4767fe |
| dataviz\_monochromatic-primary-400-hover | `--hop-dataviz-monochromatic-primary-400-hover` | #3b57ff |
| dataviz\_monochromatic-primary-500-hover | `--hop-dataviz-monochromatic-primary-500-hover` | #2a43e8 |
| dataviz\_monochromatic-primary-600-hover | `--hop-dataviz-monochromatic-primary-600-hover` | #2040c7 |
| dataviz\_monochromatic-primary-700-hover | `--hop-dataviz-monochromatic-primary-700-hover` | #1b3587 |
| dataviz\_monochromatic-primary-800-hover | `--hop-dataviz-monochromatic-primary-800-hover` | #152450 |
| dataviz\_monochromatic-primary-900-hover | `--hop-dataviz-monochromatic-primary-900-hover` | #0b173a |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Monochromatic - Positive
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------------------- | ------------------------------------------------ | ------- |
| dataviz\_monochromatic-positive-25 | `--hop-dataviz-monochromatic-positive-25` | #f4f9e9 |
| dataviz\_monochromatic-positive-50 | `--hop-dataviz-monochromatic-positive-50` | #e3f3b9 |
| dataviz\_monochromatic-positive-75 | `--hop-dataviz-monochromatic-positive-75` | #cde8ac |
| dataviz\_monochromatic-positive-100 | `--hop-dataviz-monochromatic-positive-100` | #aad89d |
| dataviz\_monochromatic-positive-200 | `--hop-dataviz-monochromatic-positive-200` | #7dc291 |
| dataviz\_monochromatic-positive-300 | `--hop-dataviz-monochromatic-positive-300` | #47a584 |
| dataviz\_monochromatic-positive-400 | `--hop-dataviz-monochromatic-positive-400` | #188a71 |
| dataviz\_monochromatic-positive-500 | `--hop-dataviz-monochromatic-positive-500` | #0c796b |
| dataviz\_monochromatic-positive-600 | `--hop-dataviz-monochromatic-positive-600` | #0a6f64 |
| dataviz\_monochromatic-positive-700 | `--hop-dataviz-monochromatic-positive-700` | #115a52 |
| dataviz\_monochromatic-positive-800 | `--hop-dataviz-monochromatic-positive-800` | #16433d |
| dataviz\_monochromatic-positive-900 | `--hop-dataviz-monochromatic-positive-900` | #132a27 |
| dataviz\_monochromatic-positive-25-hover | `--hop-dataviz-monochromatic-positive-25-hover` | #e3f3b9 |
| dataviz\_monochromatic-positive-50-hover | `--hop-dataviz-monochromatic-positive-50-hover` | #cde8ac |
| dataviz\_monochromatic-positive-75-hover | `--hop-dataviz-monochromatic-positive-75-hover` | #aad89d |
| dataviz\_monochromatic-positive-100-hover | `--hop-dataviz-monochromatic-positive-100-hover` | #7dc291 |
| dataviz\_monochromatic-positive-200-hover | `--hop-dataviz-monochromatic-positive-200-hover` | #47a584 |
| dataviz\_monochromatic-positive-300-hover | `--hop-dataviz-monochromatic-positive-300-hover` | #188a71 |
| dataviz\_monochromatic-positive-400-hover | `--hop-dataviz-monochromatic-positive-400-hover` | #0c796b |
| dataviz\_monochromatic-positive-500-hover | `--hop-dataviz-monochromatic-positive-500-hover` | #0a6f64 |
| dataviz\_monochromatic-positive-600-hover | `--hop-dataviz-monochromatic-positive-600-hover` | #115a52 |
| dataviz\_monochromatic-positive-700-hover | `--hop-dataviz-monochromatic-positive-700-hover` | #16433d |
| dataviz\_monochromatic-positive-800-hover | `--hop-dataviz-monochromatic-positive-800-hover` | #132a27 |
| dataviz\_monochromatic-positive-900-hover | `--hop-dataviz-monochromatic-positive-900-hover` | #0a1716 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------------------- | ------------------------------------------------ | ------- |
| dataviz\_monochromatic-positive-25 | `--hop-dataviz-monochromatic-positive-25` | #f4f9e9 |
| dataviz\_monochromatic-positive-50 | `--hop-dataviz-monochromatic-positive-50` | #e3f3b9 |
| dataviz\_monochromatic-positive-75 | `--hop-dataviz-monochromatic-positive-75` | #cde8ac |
| dataviz\_monochromatic-positive-100 | `--hop-dataviz-monochromatic-positive-100` | #aad89d |
| dataviz\_monochromatic-positive-200 | `--hop-dataviz-monochromatic-positive-200` | #7dc291 |
| dataviz\_monochromatic-positive-300 | `--hop-dataviz-monochromatic-positive-300` | #47a584 |
| dataviz\_monochromatic-positive-400 | `--hop-dataviz-monochromatic-positive-400` | #188a71 |
| dataviz\_monochromatic-positive-500 | `--hop-dataviz-monochromatic-positive-500` | #0c796b |
| dataviz\_monochromatic-positive-600 | `--hop-dataviz-monochromatic-positive-600` | #0a6f64 |
| dataviz\_monochromatic-positive-700 | `--hop-dataviz-monochromatic-positive-700` | #115a52 |
| dataviz\_monochromatic-positive-800 | `--hop-dataviz-monochromatic-positive-800` | #16433d |
| dataviz\_monochromatic-positive-900 | `--hop-dataviz-monochromatic-positive-900` | #132a27 |
| dataviz\_monochromatic-positive-25-hover | `--hop-dataviz-monochromatic-positive-25-hover` | #e3f3b9 |
| dataviz\_monochromatic-positive-50-hover | `--hop-dataviz-monochromatic-positive-50-hover` | #cde8ac |
| dataviz\_monochromatic-positive-75-hover | `--hop-dataviz-monochromatic-positive-75-hover` | #aad89d |
| dataviz\_monochromatic-positive-100-hover | `--hop-dataviz-monochromatic-positive-100-hover` | #7dc291 |
| dataviz\_monochromatic-positive-200-hover | `--hop-dataviz-monochromatic-positive-200-hover` | #47a584 |
| dataviz\_monochromatic-positive-300-hover | `--hop-dataviz-monochromatic-positive-300-hover` | #188a71 |
| dataviz\_monochromatic-positive-400-hover | `--hop-dataviz-monochromatic-positive-400-hover` | #0c796b |
| dataviz\_monochromatic-positive-500-hover | `--hop-dataviz-monochromatic-positive-500-hover` | #0a6f64 |
| dataviz\_monochromatic-positive-600-hover | `--hop-dataviz-monochromatic-positive-600-hover` | #115a52 |
| dataviz\_monochromatic-positive-700-hover | `--hop-dataviz-monochromatic-positive-700-hover` | #16433d |
| dataviz\_monochromatic-positive-800-hover | `--hop-dataviz-monochromatic-positive-800-hover` | #132a27 |
| dataviz\_monochromatic-positive-900-hover | `--hop-dataviz-monochromatic-positive-900-hover` | #0a1716 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Monochromatic - Negative
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------------------- | ------------------------------------------------ | ------- |
| dataviz\_monochromatic-negative-25 | `--hop-dataviz-monochromatic-negative-25` | #fdf6f6 |
| dataviz\_monochromatic-negative-50 | `--hop-dataviz-monochromatic-negative-50` | #fde6e5 |
| dataviz\_monochromatic-negative-75 | `--hop-dataviz-monochromatic-negative-75` | #ffd6d3 |
| dataviz\_monochromatic-negative-100 | `--hop-dataviz-monochromatic-negative-100` | #ffbcb7 |
| dataviz\_monochromatic-negative-200 | `--hop-dataviz-monochromatic-negative-200` | #ff8e8e |
| dataviz\_monochromatic-negative-300 | `--hop-dataviz-monochromatic-negative-300` | #f56263 |
| dataviz\_monochromatic-negative-400 | `--hop-dataviz-monochromatic-negative-400` | #df3236 |
| dataviz\_monochromatic-negative-500 | `--hop-dataviz-monochromatic-negative-500` | #cb2e31 |
| dataviz\_monochromatic-negative-600 | `--hop-dataviz-monochromatic-negative-600` | #ba2d2d |
| dataviz\_monochromatic-negative-700 | `--hop-dataviz-monochromatic-negative-700` | #952927 |
| dataviz\_monochromatic-negative-800 | `--hop-dataviz-monochromatic-negative-800` | #6c2320 |
| dataviz\_monochromatic-negative-900 | `--hop-dataviz-monochromatic-negative-900` | #431a17 |
| dataviz\_monochromatic-negative-25-hover | `--hop-dataviz-monochromatic-negative-25-hover` | #fde6e5 |
| dataviz\_monochromatic-negative-50-hover | `--hop-dataviz-monochromatic-negative-50-hover` | #ffd6d3 |
| dataviz\_monochromatic-negative-75-hover | `--hop-dataviz-monochromatic-negative-75-hover` | #ffbcb7 |
| dataviz\_monochromatic-negative-100-hover | `--hop-dataviz-monochromatic-negative-100-hover` | #ff8e8e |
| dataviz\_monochromatic-negative-200-hover | `--hop-dataviz-monochromatic-negative-200-hover` | #f56263 |
| dataviz\_monochromatic-negative-300-hover | `--hop-dataviz-monochromatic-negative-300-hover` | #df3236 |
| dataviz\_monochromatic-negative-400-hover | `--hop-dataviz-monochromatic-negative-400-hover` | #cb2e31 |
| dataviz\_monochromatic-negative-500-hover | `--hop-dataviz-monochromatic-negative-500-hover` | #ba2d2d |
| dataviz\_monochromatic-negative-600-hover | `--hop-dataviz-monochromatic-negative-600-hover` | #952927 |
| dataviz\_monochromatic-negative-700-hover | `--hop-dataviz-monochromatic-negative-700-hover` | #6c2320 |
| dataviz\_monochromatic-negative-800-hover | `--hop-dataviz-monochromatic-negative-800-hover` | #431a17 |
| dataviz\_monochromatic-negative-900-hover | `--hop-dataviz-monochromatic-negative-900-hover` | #2d100d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------------------- | ------------------------------------------------ | ------- |
| dataviz\_monochromatic-negative-25 | `--hop-dataviz-monochromatic-negative-25` | #fdf6f6 |
| dataviz\_monochromatic-negative-50 | `--hop-dataviz-monochromatic-negative-50` | #fde6e5 |
| dataviz\_monochromatic-negative-75 | `--hop-dataviz-monochromatic-negative-75` | #ffd6d3 |
| dataviz\_monochromatic-negative-100 | `--hop-dataviz-monochromatic-negative-100` | #ffbcb7 |
| dataviz\_monochromatic-negative-200 | `--hop-dataviz-monochromatic-negative-200` | #ff8e8e |
| dataviz\_monochromatic-negative-300 | `--hop-dataviz-monochromatic-negative-300` | #f56263 |
| dataviz\_monochromatic-negative-400 | `--hop-dataviz-monochromatic-negative-400` | #df3236 |
| dataviz\_monochromatic-negative-500 | `--hop-dataviz-monochromatic-negative-500` | #cb2e31 |
| dataviz\_monochromatic-negative-600 | `--hop-dataviz-monochromatic-negative-600` | #ba2d2d |
| dataviz\_monochromatic-negative-700 | `--hop-dataviz-monochromatic-negative-700` | #952927 |
| dataviz\_monochromatic-negative-800 | `--hop-dataviz-monochromatic-negative-800` | #6c2320 |
| dataviz\_monochromatic-negative-900 | `--hop-dataviz-monochromatic-negative-900` | #431a17 |
| dataviz\_monochromatic-negative-25-hover | `--hop-dataviz-monochromatic-negative-25-hover` | #fde6e5 |
| dataviz\_monochromatic-negative-50-hover | `--hop-dataviz-monochromatic-negative-50-hover` | #ffd6d3 |
| dataviz\_monochromatic-negative-75-hover | `--hop-dataviz-monochromatic-negative-75-hover` | #ffbcb7 |
| dataviz\_monochromatic-negative-100-hover | `--hop-dataviz-monochromatic-negative-100-hover` | #ff8e8e |
| dataviz\_monochromatic-negative-200-hover | `--hop-dataviz-monochromatic-negative-200-hover` | #f56263 |
| dataviz\_monochromatic-negative-300-hover | `--hop-dataviz-monochromatic-negative-300-hover` | #df3236 |
| dataviz\_monochromatic-negative-400-hover | `--hop-dataviz-monochromatic-negative-400-hover` | #cb2e31 |
| dataviz\_monochromatic-negative-500-hover | `--hop-dataviz-monochromatic-negative-500-hover` | #ba2d2d |
| dataviz\_monochromatic-negative-600-hover | `--hop-dataviz-monochromatic-negative-600-hover` | #952927 |
| dataviz\_monochromatic-negative-700-hover | `--hop-dataviz-monochromatic-negative-700-hover` | #6c2320 |
| dataviz\_monochromatic-negative-800-hover | `--hop-dataviz-monochromatic-negative-800-hover` | #431a17 |
| dataviz\_monochromatic-negative-900-hover | `--hop-dataviz-monochromatic-negative-900-hover` | #2d100d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Diverging Sequence 1
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ---------------------------------------------- | ----------------------------------------------------- | ------- |
| dataviz\_diverging-sequence-1-positive9 | `--hop-dataviz-diverging-sequence-1-positive9` | #16433d |
| dataviz\_diverging-sequence-1-positive9-hover | `--hop-dataviz-diverging-sequence-1-positive9-hover` | #132a27 |
| dataviz\_diverging-sequence-1-positive8 | `--hop-dataviz-diverging-sequence-1-positive8` | #115a52 |
| dataviz\_diverging-sequence-1-positive8-hover | `--hop-dataviz-diverging-sequence-1-positive8-hover` | #16433d |
| dataviz\_diverging-sequence-1-positive7 | `--hop-dataviz-diverging-sequence-1-positive7` | #0a6f64 |
| dataviz\_diverging-sequence-1-positive7-hover | `--hop-dataviz-diverging-sequence-1-positive7-hover` | #115a52 |
| dataviz\_diverging-sequence-1-positive6 | `--hop-dataviz-diverging-sequence-1-positive6` | #0c796b |
| dataviz\_diverging-sequence-1-positive6-hover | `--hop-dataviz-diverging-sequence-1-positive6-hover` | #0a6f64 |
| dataviz\_diverging-sequence-1-positive5 | `--hop-dataviz-diverging-sequence-1-positive5` | #188a71 |
| dataviz\_diverging-sequence-1-positive5-hover | `--hop-dataviz-diverging-sequence-1-positive5-hover` | #0c796b |
| dataviz\_diverging-sequence-1-positive4 | `--hop-dataviz-diverging-sequence-1-positive4` | #47a584 |
| dataviz\_diverging-sequence-1-positive-4-hover | `--hop-dataviz-diverging-sequence-1-positive-4-hover` | #188a71 |
| dataviz\_diverging-sequence-1-positive3 | `--hop-dataviz-diverging-sequence-1-positive3` | #7dc291 |
| dataviz\_diverging-sequence-1-positive3-hover | `--hop-dataviz-diverging-sequence-1-positive3-hover` | #47a584 |
| dataviz\_diverging-sequence-1-positive2 | `--hop-dataviz-diverging-sequence-1-positive2` | #aad89d |
| dataviz\_diverging-sequence-1-positive2-hover | `--hop-dataviz-diverging-sequence-1-positive2-hover` | #7dc291 |
| dataviz\_diverging-sequence-1-positive1 | `--hop-dataviz-diverging-sequence-1-positive1` | #cde8ac |
| dataviz\_diverging-sequence-1-positive1-hover | `--hop-dataviz-diverging-sequence-1-positive1-hover` | #aad89d |
| dataviz\_diverging-sequence-1-neutral | `--hop-dataviz-diverging-sequence-1-neutral` | #f7e694 |
| dataviz\_diverging-sequence-1-neutral-hover | `--hop-dataviz-diverging-sequence-1-neutral-hover` | #eac96d |
| dataviz\_diverging-sequence-1-negative1 | `--hop-dataviz-diverging-sequence-1-negative1` | #ffd8be |
| dataviz\_diverging-sequence-1-negative1-hover | `--hop-dataviz-diverging-sequence-1-negative1-hover` | #ffbcb7 |
| dataviz\_diverging-sequence-1-negative2 | `--hop-dataviz-diverging-sequence-1-negative2` | #ffbcb7 |
| dataviz\_diverging-sequence-1-negative2-hover | `--hop-dataviz-diverging-sequence-1-negative2-hover` | #ff8e8e |
| dataviz\_diverging-sequence-1-negative3 | `--hop-dataviz-diverging-sequence-1-negative3` | #ff8e8e |
| dataviz\_diverging-sequence-1-negative3-hover | `--hop-dataviz-diverging-sequence-1-negative3-hover` | #f56263 |
| dataviz\_diverging-sequence-1-negative4 | `--hop-dataviz-diverging-sequence-1-negative4` | #f56263 |
| dataviz\_diverging-sequence-1-negative4-hover | `--hop-dataviz-diverging-sequence-1-negative4-hover` | #df3236 |
| dataviz\_diverging-sequence-1-negative5 | `--hop-dataviz-diverging-sequence-1-negative5` | #df3236 |
| dataviz\_diverging-sequence-1-negative5-hover | `--hop-dataviz-diverging-sequence-1-negative5-hover` | #cb2e31 |
| dataviz\_diverging-sequence-1-negative6 | `--hop-dataviz-diverging-sequence-1-negative6` | #cb2e31 |
| dataviz\_diverging-sequence-1-negative6-hover | `--hop-dataviz-diverging-sequence-1-negative6-hover` | #ba2d2d |
| dataviz\_diverging-sequence-1-negative7 | `--hop-dataviz-diverging-sequence-1-negative7` | #ba2d2d |
| dataviz\_diverging-sequence-1-negative7-hover | `--hop-dataviz-diverging-sequence-1-negative7-hover` | #952927 |
| dataviz\_diverging-sequence-1-negative8 | `--hop-dataviz-diverging-sequence-1-negative8` | #952927 |
| dataviz\_diverging-sequence-1-negative8-hover | `--hop-dataviz-diverging-sequence-1-negative8-hover` | #6c2320 |
| dataviz\_diverging-sequence-1-negative9 | `--hop-dataviz-diverging-sequence-1-negative9` | #6c2320 |
| dataviz\_diverging-sequence-1-negative9-hover | `--hop-dataviz-diverging-sequence-1-negative9-hover` | #431a17 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ---------------------------------------------- | ----------------------------------------------------- | ------- |
| dataviz\_diverging-sequence-1-positive9 | `--hop-dataviz-diverging-sequence-1-positive9` | #16433d |
| dataviz\_diverging-sequence-1-positive9-hover | `--hop-dataviz-diverging-sequence-1-positive9-hover` | #132a27 |
| dataviz\_diverging-sequence-1-positive8 | `--hop-dataviz-diverging-sequence-1-positive8` | #115a52 |
| dataviz\_diverging-sequence-1-positive8-hover | `--hop-dataviz-diverging-sequence-1-positive8-hover` | #16433d |
| dataviz\_diverging-sequence-1-positive7 | `--hop-dataviz-diverging-sequence-1-positive7` | #0a6f64 |
| dataviz\_diverging-sequence-1-positive7-hover | `--hop-dataviz-diverging-sequence-1-positive7-hover` | #115a52 |
| dataviz\_diverging-sequence-1-positive6 | `--hop-dataviz-diverging-sequence-1-positive6` | #0c796b |
| dataviz\_diverging-sequence-1-positive6-hover | `--hop-dataviz-diverging-sequence-1-positive6-hover` | #0a6f64 |
| dataviz\_diverging-sequence-1-positive5 | `--hop-dataviz-diverging-sequence-1-positive5` | #188a71 |
| dataviz\_diverging-sequence-1-positive5-hover | `--hop-dataviz-diverging-sequence-1-positive5-hover` | #0c796b |
| dataviz\_diverging-sequence-1-positive4 | `--hop-dataviz-diverging-sequence-1-positive4` | #47a584 |
| dataviz\_diverging-sequence-1-positive-4-hover | `--hop-dataviz-diverging-sequence-1-positive-4-hover` | #188a71 |
| dataviz\_diverging-sequence-1-positive3 | `--hop-dataviz-diverging-sequence-1-positive3` | #7dc291 |
| dataviz\_diverging-sequence-1-positive3-hover | `--hop-dataviz-diverging-sequence-1-positive3-hover` | #47a584 |
| dataviz\_diverging-sequence-1-positive2 | `--hop-dataviz-diverging-sequence-1-positive2` | #aad89d |
| dataviz\_diverging-sequence-1-positive2-hover | `--hop-dataviz-diverging-sequence-1-positive2-hover` | #7dc291 |
| dataviz\_diverging-sequence-1-positive1 | `--hop-dataviz-diverging-sequence-1-positive1` | #cde8ac |
| dataviz\_diverging-sequence-1-positive1-hover | `--hop-dataviz-diverging-sequence-1-positive1-hover` | #aad89d |
| dataviz\_diverging-sequence-1-neutral | `--hop-dataviz-diverging-sequence-1-neutral` | #f7e694 |
| dataviz\_diverging-sequence-1-neutral-hover | `--hop-dataviz-diverging-sequence-1-neutral-hover` | #eac96d |
| dataviz\_diverging-sequence-1-negative1 | `--hop-dataviz-diverging-sequence-1-negative1` | #ffd8be |
| dataviz\_diverging-sequence-1-negative1-hover | `--hop-dataviz-diverging-sequence-1-negative1-hover` | #ffbcb7 |
| dataviz\_diverging-sequence-1-negative2 | `--hop-dataviz-diverging-sequence-1-negative2` | #ffbcb7 |
| dataviz\_diverging-sequence-1-negative2-hover | `--hop-dataviz-diverging-sequence-1-negative2-hover` | #ff8e8e |
| dataviz\_diverging-sequence-1-negative3 | `--hop-dataviz-diverging-sequence-1-negative3` | #ff8e8e |
| dataviz\_diverging-sequence-1-negative3-hover | `--hop-dataviz-diverging-sequence-1-negative3-hover` | #f56263 |
| dataviz\_diverging-sequence-1-negative4 | `--hop-dataviz-diverging-sequence-1-negative4` | #f56263 |
| dataviz\_diverging-sequence-1-negative4-hover | `--hop-dataviz-diverging-sequence-1-negative4-hover` | #df3236 |
| dataviz\_diverging-sequence-1-negative5 | `--hop-dataviz-diverging-sequence-1-negative5` | #df3236 |
| dataviz\_diverging-sequence-1-negative5-hover | `--hop-dataviz-diverging-sequence-1-negative5-hover` | #cb2e31 |
| dataviz\_diverging-sequence-1-negative6 | `--hop-dataviz-diverging-sequence-1-negative6` | #cb2e31 |
| dataviz\_diverging-sequence-1-negative6-hover | `--hop-dataviz-diverging-sequence-1-negative6-hover` | #ba2d2d |
| dataviz\_diverging-sequence-1-negative7 | `--hop-dataviz-diverging-sequence-1-negative7` | #ba2d2d |
| dataviz\_diverging-sequence-1-negative7-hover | `--hop-dataviz-diverging-sequence-1-negative7-hover` | #952927 |
| dataviz\_diverging-sequence-1-negative8 | `--hop-dataviz-diverging-sequence-1-negative8` | #952927 |
| dataviz\_diverging-sequence-1-negative8-hover | `--hop-dataviz-diverging-sequence-1-negative8-hover` | #6c2320 |
| dataviz\_diverging-sequence-1-negative9 | `--hop-dataviz-diverging-sequence-1-negative9` | #6c2320 |
| dataviz\_diverging-sequence-1-negative9-hover | `--hop-dataviz-diverging-sequence-1-negative9-hover` | #431a17 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Diverging Sequence 2
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ---------------------------------------------- | ----------------------------------------------------- | ------- |
| dataviz\_diverging-sequence-2-positive10 | `--hop-dataviz-diverging-sequence-2-positive10` | #16433d |
| dataviz\_diverging-sequence-2-positive10-hover | `--hop-dataviz-diverging-sequence-2-positive10-hover` | #132a27 |
| dataviz\_diverging-sequence-2-positive9 | `--hop-dataviz-diverging-sequence-2-positive9` | #115a52 |
| dataviz\_diverging-sequence-2-positive9-hover | `--hop-dataviz-diverging-sequence-2-positive9-hover` | #16433d |
| dataviz\_diverging-sequence-2-positive8 | `--hop-dataviz-diverging-sequence-2-positive8` | #0a6f64 |
| dataviz\_diverging-sequence-2-positive8-hover | `--hop-dataviz-diverging-sequence-2-positive8-hover` | #115a52 |
| dataviz\_diverging-sequence-2-positive7 | `--hop-dataviz-diverging-sequence-2-positive7` | #0c796b |
| dataviz\_diverging-sequence-2-positive7-hover | `--hop-dataviz-diverging-sequence-2-positive7-hover` | #0a6f64 |
| dataviz\_diverging-sequence-2-positive6 | `--hop-dataviz-diverging-sequence-2-positive6` | #188a71 |
| dataviz\_diverging-sequence-2-positive6-hover | `--hop-dataviz-diverging-sequence-2-positive6-hover` | #0c796b |
| dataviz\_diverging-sequence-2-positive5 | `--hop-dataviz-diverging-sequence-2-positive5` | #47a584 |
| dataviz\_diverging-sequence-2-positive5-hover | `--hop-dataviz-diverging-sequence-2-positive5-hover` | #188a71 |
| dataviz\_diverging-sequence-2-positive4 | `--hop-dataviz-diverging-sequence-2-positive4` | #7dc291 |
| dataviz\_diverging-sequence-2-positive4-hover | `--hop-dataviz-diverging-sequence-2-positive4-hover` | #47a584 |
| dataviz\_diverging-sequence-2-positive3 | `--hop-dataviz-diverging-sequence-2-positive3` | #aad89d |
| dataviz\_diverging-sequence-2-positive3-hover | `--hop-dataviz-diverging-sequence-2-positive3-hover` | #7dc291 |
| dataviz\_diverging-sequence-2-positive2 | `--hop-dataviz-diverging-sequence-2-positive2` | #cde8ac |
| dataviz\_diverging-sequence-2-positive2-hover | `--hop-dataviz-diverging-sequence-2-positive2-hover` | #aad89d |
| dataviz\_diverging-sequence-2-positive1 | `--hop-dataviz-diverging-sequence-2-positive1` | #e3f3b9 |
| dataviz\_diverging-sequence-2-positive1-hover | `--hop-dataviz-diverging-sequence-2-positive1-hover` | #cde8ac |
| dataviz\_diverging-sequence-2-negative1 | `--hop-dataviz-diverging-sequence-2-negative1` | #fde6e5 |
| dataviz\_diverging-sequence-2-negative1-hover | `--hop-dataviz-diverging-sequence-2-negative1-hover` | #ffd6d3 |
| dataviz\_diverging-sequence-2-negative2 | `--hop-dataviz-diverging-sequence-2-negative2` | #ffd6d3 |
| dataviz\_diverging-sequence-2-negative2-hover | `--hop-dataviz-diverging-sequence-2-negative2-hover` | #ffbcb7 |
| dataviz\_diverging-sequence-2-negative3 | `--hop-dataviz-diverging-sequence-2-negative3` | #ffbcb7 |
| dataviz\_diverging-sequence-2-negative3-hover | `--hop-dataviz-diverging-sequence-2-negative3-hover` | #ff8e8e |
| dataviz\_diverging-sequence-2-negative4 | `--hop-dataviz-diverging-sequence-2-negative4` | #ff8e8e |
| dataviz\_diverging-sequence-2-negative4-hover | `--hop-dataviz-diverging-sequence-2-negative4-hover` | #f56263 |
| dataviz\_diverging-sequence-2-negative5 | `--hop-dataviz-diverging-sequence-2-negative5` | #f56263 |
| dataviz\_diverging-sequence-2-negative5-hover | `--hop-dataviz-diverging-sequence-2-negative5-hover` | #df3236 |
| dataviz\_diverging-sequence-2-negative6 | `--hop-dataviz-diverging-sequence-2-negative6` | #df3236 |
| dataviz\_diverging-sequence-2-negative6-hover | `--hop-dataviz-diverging-sequence-2-negative6-hover` | #cb2e31 |
| dataviz\_diverging-sequence-2-negative7 | `--hop-dataviz-diverging-sequence-2-negative7` | #cb2e31 |
| dataviz\_diverging-sequence-2-negative7-hover | `--hop-dataviz-diverging-sequence-2-negative7-hover` | #ba2d2d |
| dataviz\_diverging-sequence-2-negative8 | `--hop-dataviz-diverging-sequence-2-negative8` | #ba2d2d |
| dataviz\_diverging-sequence-2-negative8-hover | `--hop-dataviz-diverging-sequence-2-negative8-hover` | #952927 |
| dataviz\_diverging-sequence-2-negative9 | `--hop-dataviz-diverging-sequence-2-negative9` | #952927 |
| dataviz\_diverging-sequence-2-negative9-hover | `--hop-dataviz-diverging-sequence-2-negative9-hover` | #6c2320 |
| dataviz\_diverging-sequence-2-negative10 | `--hop-dataviz-diverging-sequence-2-negative10` | #6c2320 |
| dataviz\_diverging-sequence-2-negative10-hover | `--hop-dataviz-diverging-sequence-2-negative10-hover` | #431a17 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ---------------------------------------------- | ----------------------------------------------------- | ------- |
| dataviz\_diverging-sequence-2-positive10 | `--hop-dataviz-diverging-sequence-2-positive10` | #16433d |
| dataviz\_diverging-sequence-2-positive10-hover | `--hop-dataviz-diverging-sequence-2-positive10-hover` | #132a27 |
| dataviz\_diverging-sequence-2-positive9 | `--hop-dataviz-diverging-sequence-2-positive9` | #115a52 |
| dataviz\_diverging-sequence-2-positive9-hover | `--hop-dataviz-diverging-sequence-2-positive9-hover` | #16433d |
| dataviz\_diverging-sequence-2-positive8 | `--hop-dataviz-diverging-sequence-2-positive8` | #0a6f64 |
| dataviz\_diverging-sequence-2-positive8-hover | `--hop-dataviz-diverging-sequence-2-positive8-hover` | #115a52 |
| dataviz\_diverging-sequence-2-positive7 | `--hop-dataviz-diverging-sequence-2-positive7` | #0c796b |
| dataviz\_diverging-sequence-2-positive7-hover | `--hop-dataviz-diverging-sequence-2-positive7-hover` | #0a6f64 |
| dataviz\_diverging-sequence-2-positive6 | `--hop-dataviz-diverging-sequence-2-positive6` | #188a71 |
| dataviz\_diverging-sequence-2-positive6-hover | `--hop-dataviz-diverging-sequence-2-positive6-hover` | #0c796b |
| dataviz\_diverging-sequence-2-positive5 | `--hop-dataviz-diverging-sequence-2-positive5` | #47a584 |
| dataviz\_diverging-sequence-2-positive5-hover | `--hop-dataviz-diverging-sequence-2-positive5-hover` | #188a71 |
| dataviz\_diverging-sequence-2-positive4 | `--hop-dataviz-diverging-sequence-2-positive4` | #7dc291 |
| dataviz\_diverging-sequence-2-positive4-hover | `--hop-dataviz-diverging-sequence-2-positive4-hover` | #47a584 |
| dataviz\_diverging-sequence-2-positive3 | `--hop-dataviz-diverging-sequence-2-positive3` | #aad89d |
| dataviz\_diverging-sequence-2-positive3-hover | `--hop-dataviz-diverging-sequence-2-positive3-hover` | #7dc291 |
| dataviz\_diverging-sequence-2-positive2 | `--hop-dataviz-diverging-sequence-2-positive2` | #cde8ac |
| dataviz\_diverging-sequence-2-positive2-hover | `--hop-dataviz-diverging-sequence-2-positive2-hover` | #aad89d |
| dataviz\_diverging-sequence-2-positive1 | `--hop-dataviz-diverging-sequence-2-positive1` | #e3f3b9 |
| dataviz\_diverging-sequence-2-positive1-hover | `--hop-dataviz-diverging-sequence-2-positive1-hover` | #cde8ac |
| dataviz\_diverging-sequence-2-negative1 | `--hop-dataviz-diverging-sequence-2-negative1` | #fde6e5 |
| dataviz\_diverging-sequence-2-negative1-hover | `--hop-dataviz-diverging-sequence-2-negative1-hover` | #ffd6d3 |
| dataviz\_diverging-sequence-2-negative2 | `--hop-dataviz-diverging-sequence-2-negative2` | #ffd6d3 |
| dataviz\_diverging-sequence-2-negative2-hover | `--hop-dataviz-diverging-sequence-2-negative2-hover` | #ffbcb7 |
| dataviz\_diverging-sequence-2-negative3 | `--hop-dataviz-diverging-sequence-2-negative3` | #ffbcb7 |
| dataviz\_diverging-sequence-2-negative3-hover | `--hop-dataviz-diverging-sequence-2-negative3-hover` | #ff8e8e |
| dataviz\_diverging-sequence-2-negative4 | `--hop-dataviz-diverging-sequence-2-negative4` | #ff8e8e |
| dataviz\_diverging-sequence-2-negative4-hover | `--hop-dataviz-diverging-sequence-2-negative4-hover` | #f56263 |
| dataviz\_diverging-sequence-2-negative5 | `--hop-dataviz-diverging-sequence-2-negative5` | #f56263 |
| dataviz\_diverging-sequence-2-negative5-hover | `--hop-dataviz-diverging-sequence-2-negative5-hover` | #df3236 |
| dataviz\_diverging-sequence-2-negative6 | `--hop-dataviz-diverging-sequence-2-negative6` | #df3236 |
| dataviz\_diverging-sequence-2-negative6-hover | `--hop-dataviz-diverging-sequence-2-negative6-hover` | #cb2e31 |
| dataviz\_diverging-sequence-2-negative7 | `--hop-dataviz-diverging-sequence-2-negative7` | #cb2e31 |
| dataviz\_diverging-sequence-2-negative7-hover | `--hop-dataviz-diverging-sequence-2-negative7-hover` | #ba2d2d |
| dataviz\_diverging-sequence-2-negative8 | `--hop-dataviz-diverging-sequence-2-negative8` | #ba2d2d |
| dataviz\_diverging-sequence-2-negative8-hover | `--hop-dataviz-diverging-sequence-2-negative8-hover` | #952927 |
| dataviz\_diverging-sequence-2-negative9 | `--hop-dataviz-diverging-sequence-2-negative9` | #952927 |
| dataviz\_diverging-sequence-2-negative9-hover | `--hop-dataviz-diverging-sequence-2-negative9-hover` | #6c2320 |
| dataviz\_diverging-sequence-2-negative10 | `--hop-dataviz-diverging-sequence-2-negative10` | #6c2320 |
| dataviz\_diverging-sequence-2-negative10-hover | `--hop-dataviz-diverging-sequence-2-negative10-hover` | #431a17 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Categorical - Sequences
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ---------------------------------------------- | ----------------------------------------------------- | ------- |
| dataviz\_categorical-sequence-category1 | `--hop-dataviz-categorical-sequence-category1` | #c7ebff |
| dataviz\_categorical-sequence-category1-hover | `--hop-dataviz-categorical-sequence-category1-hover` | #ade2ff |
| dataviz\_categorical-sequence-category2 | `--hop-dataviz-categorical-sequence-category2` | #ecd599 |
| dataviz\_categorical-sequence-category2-hover | `--hop-dataviz-categorical-sequence-category2-hover` | #e6c675 |
| dataviz\_categorical-sequence-category3 | `--hop-dataviz-categorical-sequence-category3` | #d2cdf8 |
| dataviz\_categorical-sequence-category3-hover | `--hop-dataviz-categorical-sequence-category3-hover` | #bfb8f5 |
| dataviz\_categorical-sequence-category4 | `--hop-dataviz-categorical-sequence-category4` | #b6bead |
| dataviz\_categorical-sequence-category4-hover | `--hop-dataviz-categorical-sequence-category4-hover` | #a4ae98 |
| dataviz\_categorical-sequence-category5 | `--hop-dataviz-categorical-sequence-category5` | #fbbdcf |
| dataviz\_categorical-sequence-category5-hover | `--hop-dataviz-categorical-sequence-category5-hover` | #f99fb8 |
| dataviz\_categorical-sequence-category6 | `--hop-dataviz-categorical-sequence-category6` | #bfdca9 |
| dataviz\_categorical-sequence-category6-hover | `--hop-dataviz-categorical-sequence-category6-hover` | #a9d08b |
| dataviz\_categorical-sequence-category7 | `--hop-dataviz-categorical-sequence-category7` | #fbe997 |
| dataviz\_categorical-sequence-category7-hover | `--hop-dataviz-categorical-sequence-category7-hover` | #fae275 |
| dataviz\_categorical-sequence-category8 | `--hop-dataviz-categorical-sequence-category8` | #e8ddd0 |
| dataviz\_categorical-sequence-category8-hover | `--hop-dataviz-categorical-sequence-category8-hover` | #ddcebb |
| dataviz\_categorical-sequence-category9 | `--hop-dataviz-categorical-sequence-category9` | #a7e6dc |
| dataviz\_categorical-sequence-category9-hover | `--hop-dataviz-categorical-sequence-category9-hover` | #90e0d2 |
| dataviz\_categorical-sequence-category10 | `--hop-dataviz-categorical-sequence-category10` | #aecdd5 |
| dataviz\_categorical-sequence-category10-hover | `--hop-dataviz-categorical-sequence-category10-hover` | #93bdc8 |
| dataviz\_categorical-sequence-category11 | `--hop-dataviz-categorical-sequence-category11` | #ffbf92 |
| dataviz\_categorical-sequence-category11-hover | `--hop-dataviz-categorical-sequence-category11-hover` | #ffac70 |
| dataviz\_categorical-sequence-category12 | `--hop-dataviz-categorical-sequence-category12` | #a0b8fa |
| dataviz\_categorical-sequence-category12-hover | `--hop-dataviz-categorical-sequence-category12-hover` | #779af8 |
| dataviz\_categorical-sequence-category13 | `--hop-dataviz-categorical-sequence-category13` | #69bfa0 |
| dataviz\_categorical-sequence-category13-hover | `--hop-dataviz-categorical-sequence-category13-hover` | #54b692 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ---------------------------------------------- | ----------------------------------------------------- | ------- |
| dataviz\_categorical-sequence-category1 | `--hop-dataviz-categorical-sequence-category1` | #c7ebff |
| dataviz\_categorical-sequence-category1-hover | `--hop-dataviz-categorical-sequence-category1-hover` | #ade2ff |
| dataviz\_categorical-sequence-category2 | `--hop-dataviz-categorical-sequence-category2` | #ecd599 |
| dataviz\_categorical-sequence-category2-hover | `--hop-dataviz-categorical-sequence-category2-hover` | #e6c675 |
| dataviz\_categorical-sequence-category3 | `--hop-dataviz-categorical-sequence-category3` | #d2cdf8 |
| dataviz\_categorical-sequence-category3-hover | `--hop-dataviz-categorical-sequence-category3-hover` | #bfb8f5 |
| dataviz\_categorical-sequence-category4 | `--hop-dataviz-categorical-sequence-category4` | #b6bead |
| dataviz\_categorical-sequence-category4-hover | `--hop-dataviz-categorical-sequence-category4-hover` | #a4ae98 |
| dataviz\_categorical-sequence-category5 | `--hop-dataviz-categorical-sequence-category5` | #fbbdcf |
| dataviz\_categorical-sequence-category5-hover | `--hop-dataviz-categorical-sequence-category5-hover` | #f99fb8 |
| dataviz\_categorical-sequence-category6 | `--hop-dataviz-categorical-sequence-category6` | #bfdca9 |
| dataviz\_categorical-sequence-category6-hover | `--hop-dataviz-categorical-sequence-category6-hover` | #a9d08b |
| dataviz\_categorical-sequence-category7 | `--hop-dataviz-categorical-sequence-category7` | #fbe997 |
| dataviz\_categorical-sequence-category7-hover | `--hop-dataviz-categorical-sequence-category7-hover` | #fae275 |
| dataviz\_categorical-sequence-category8 | `--hop-dataviz-categorical-sequence-category8` | #e8ddd0 |
| dataviz\_categorical-sequence-category8-hover | `--hop-dataviz-categorical-sequence-category8-hover` | #ddcebb |
| dataviz\_categorical-sequence-category9 | `--hop-dataviz-categorical-sequence-category9` | #a7e6dc |
| dataviz\_categorical-sequence-category9-hover | `--hop-dataviz-categorical-sequence-category9-hover` | #90e0d2 |
| dataviz\_categorical-sequence-category10 | `--hop-dataviz-categorical-sequence-category10` | #aecdd5 |
| dataviz\_categorical-sequence-category10-hover | `--hop-dataviz-categorical-sequence-category10-hover` | #93bdc8 |
| dataviz\_categorical-sequence-category11 | `--hop-dataviz-categorical-sequence-category11` | #ffbf92 |
| dataviz\_categorical-sequence-category11-hover | `--hop-dataviz-categorical-sequence-category11-hover` | #ffac70 |
| dataviz\_categorical-sequence-category12 | `--hop-dataviz-categorical-sequence-category12` | #a0b8fa |
| dataviz\_categorical-sequence-category12-hover | `--hop-dataviz-categorical-sequence-category12-hover` | #779af8 |
| dataviz\_categorical-sequence-category13 | `--hop-dataviz-categorical-sequence-category13` | #69bfa0 |
| dataviz\_categorical-sequence-category13-hover | `--hop-dataviz-categorical-sequence-category13-hover` | #54b692 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Categorical - 2 Color Groups
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-2colorgroup-option6-category2 | `--hop-dataviz-categorical-2colorgroup-option6-category2` | #69bfa0 |
| dataviz\_categorical-2colorgroup-option6-category1 | `--hop-dataviz-categorical-2colorgroup-option6-category1` | #ffbf92 |
| dataviz\_categorical-2colorgroup-option5-category2 | `--hop-dataviz-categorical-2colorgroup-option5-category2` | #a0b8fa |
| dataviz\_categorical-2colorgroup-option5-category1 | `--hop-dataviz-categorical-2colorgroup-option5-category1` | #a7e6dc |
| dataviz\_categorical-2colorgroup-option4-category2 | `--hop-dataviz-categorical-2colorgroup-option4-category2` | #6c8ffd |
| dataviz\_categorical-2colorgroup-option4-category1 | `--hop-dataviz-categorical-2colorgroup-option4-category1` | #bfdca9 |
| dataviz\_categorical-2colorgroup-option3-category2 | `--hop-dataviz-categorical-2colorgroup-option3-category2` | #ff9b3f |
| dataviz\_categorical-2colorgroup-option3-category1 | `--hop-dataviz-categorical-2colorgroup-option3-category1` | #2f48ff |
| dataviz\_categorical-2colorgroup-option2-category2 | `--hop-dataviz-categorical-2colorgroup-option2-category2` | #fbe997 |
| dataviz\_categorical-2colorgroup-option2-category1 | `--hop-dataviz-categorical-2colorgroup-option2-category1` | #fbbdcf |
| dataviz\_categorical-2colorgroup-option1-category2 | `--hop-dataviz-categorical-2colorgroup-option1-category2` | #c7ebff |
| dataviz\_categorical-2colorgroup-option1-category1 | `--hop-dataviz-categorical-2colorgroup-option1-category1` | #b6bead |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-2colorgroup-option6-category2 | `--hop-dataviz-categorical-2colorgroup-option6-category2` | #69bfa0 |
| dataviz\_categorical-2colorgroup-option6-category1 | `--hop-dataviz-categorical-2colorgroup-option6-category1` | #ffbf92 |
| dataviz\_categorical-2colorgroup-option5-category2 | `--hop-dataviz-categorical-2colorgroup-option5-category2` | #a0b8fa |
| dataviz\_categorical-2colorgroup-option5-category1 | `--hop-dataviz-categorical-2colorgroup-option5-category1` | #a7e6dc |
| dataviz\_categorical-2colorgroup-option4-category2 | `--hop-dataviz-categorical-2colorgroup-option4-category2` | #6c8ffd |
| dataviz\_categorical-2colorgroup-option4-category1 | `--hop-dataviz-categorical-2colorgroup-option4-category1` | #bfdca9 |
| dataviz\_categorical-2colorgroup-option3-category2 | `--hop-dataviz-categorical-2colorgroup-option3-category2` | #ff9b3f |
| dataviz\_categorical-2colorgroup-option3-category1 | `--hop-dataviz-categorical-2colorgroup-option3-category1` | #2f48ff |
| dataviz\_categorical-2colorgroup-option2-category2 | `--hop-dataviz-categorical-2colorgroup-option2-category2` | #fbe997 |
| dataviz\_categorical-2colorgroup-option2-category1 | `--hop-dataviz-categorical-2colorgroup-option2-category1` | #fbbdcf |
| dataviz\_categorical-2colorgroup-option1-category2 | `--hop-dataviz-categorical-2colorgroup-option1-category2` | #c7ebff |
| dataviz\_categorical-2colorgroup-option1-category1 | `--hop-dataviz-categorical-2colorgroup-option1-category1` | #b6bead |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Categorical - 3 Color Groups
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-3colorgroup-option1-category1 | `--hop-dataviz-categorical-3colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-3colorgroup-option1-category2 | `--hop-dataviz-categorical-3colorgroup-option1-category2` | #d2cdf8 |
| dataviz\_categorical-3colorgroup-option1-category3 | `--hop-dataviz-categorical-3colorgroup-option1-category3` | #bfdca9 |
| dataviz\_categorical-3colorgroup-option2-category1 | `--hop-dataviz-categorical-3colorgroup-option2-category1` | #ecd599 |
| dataviz\_categorical-3colorgroup-option2-category2 | `--hop-dataviz-categorical-3colorgroup-option2-category2` | #a7e6dc |
| dataviz\_categorical-3colorgroup-option2-category3 | `--hop-dataviz-categorical-3colorgroup-option2-category3` | #69bfa0 |
| dataviz\_categorical-3colorgroup-option3-category1 | `--hop-dataviz-categorical-3colorgroup-option3-category1` | #69bfa0 |
| dataviz\_categorical-3colorgroup-option3-category2 | `--hop-dataviz-categorical-3colorgroup-option3-category2` | #fbe997 |
| dataviz\_categorical-3colorgroup-option3-category3 | `--hop-dataviz-categorical-3colorgroup-option3-category3` | #aecdd5 |
| dataviz\_categorical-3colorgroup-option4-category1 | `--hop-dataviz-categorical-3colorgroup-option4-category1` | #b6bead |
| dataviz\_categorical-3colorgroup-option4-category2 | `--hop-dataviz-categorical-3colorgroup-option4-category2` | #a0b8fa |
| dataviz\_categorical-3colorgroup-option4-category3 | `--hop-dataviz-categorical-3colorgroup-option4-category3` | #fbbdcf |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-3colorgroup-option1-category1 | `--hop-dataviz-categorical-3colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-3colorgroup-option1-category2 | `--hop-dataviz-categorical-3colorgroup-option1-category2` | #d2cdf8 |
| dataviz\_categorical-3colorgroup-option1-category3 | `--hop-dataviz-categorical-3colorgroup-option1-category3` | #bfdca9 |
| dataviz\_categorical-3colorgroup-option2-category1 | `--hop-dataviz-categorical-3colorgroup-option2-category1` | #ecd599 |
| dataviz\_categorical-3colorgroup-option2-category2 | `--hop-dataviz-categorical-3colorgroup-option2-category2` | #a7e6dc |
| dataviz\_categorical-3colorgroup-option2-category3 | `--hop-dataviz-categorical-3colorgroup-option2-category3` | #69bfa0 |
| dataviz\_categorical-3colorgroup-option3-category1 | `--hop-dataviz-categorical-3colorgroup-option3-category1` | #69bfa0 |
| dataviz\_categorical-3colorgroup-option3-category2 | `--hop-dataviz-categorical-3colorgroup-option3-category2` | #fbe997 |
| dataviz\_categorical-3colorgroup-option3-category3 | `--hop-dataviz-categorical-3colorgroup-option3-category3` | #aecdd5 |
| dataviz\_categorical-3colorgroup-option4-category1 | `--hop-dataviz-categorical-3colorgroup-option4-category1` | #b6bead |
| dataviz\_categorical-3colorgroup-option4-category2 | `--hop-dataviz-categorical-3colorgroup-option4-category2` | #a0b8fa |
| dataviz\_categorical-3colorgroup-option4-category3 | `--hop-dataviz-categorical-3colorgroup-option4-category3` | #fbbdcf |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Categorical - 4 Color Groups
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-4colorgroup-option1-category1 | `--hop-dataviz-categorical-4colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-4colorgroup-option1-category2 | `--hop-dataviz-categorical-4colorgroup-option1-category2` | #d2cdf8 |
| dataviz\_categorical-4colorgroup-option1-category3 | `--hop-dataviz-categorical-4colorgroup-option1-category3` | #cde8ac |
| dataviz\_categorical-4colorgroup-option1-category4 | `--hop-dataviz-categorical-4colorgroup-option1-category4` | #fbbdcf |
| dataviz\_categorical-4colorgroup-option2-category1 | `--hop-dataviz-categorical-4colorgroup-option2-category1` | #b6bead |
| dataviz\_categorical-4colorgroup-option2-category2 | `--hop-dataviz-categorical-4colorgroup-option2-category2` | #c7ebff |
| dataviz\_categorical-4colorgroup-option2-category3 | `--hop-dataviz-categorical-4colorgroup-option2-category3` | #84d0b4 |
| dataviz\_categorical-4colorgroup-option2-category4 | `--hop-dataviz-categorical-4colorgroup-option2-category4` | #fbe997 |
| dataviz\_categorical-4colorgroup-option3-category1 | `--hop-dataviz-categorical-4colorgroup-option3-category1` | #ffbf92 |
| dataviz\_categorical-4colorgroup-option3-category2 | `--hop-dataviz-categorical-4colorgroup-option3-category2` | #b6bead |
| dataviz\_categorical-4colorgroup-option3-category3 | `--hop-dataviz-categorical-4colorgroup-option3-category3` | #2e70a8 |
| dataviz\_categorical-4colorgroup-option3-category4 | `--hop-dataviz-categorical-4colorgroup-option3-category4` | #ecd599 |
| dataviz\_categorical-4colorgroup-option4-category1 | `--hop-dataviz-categorical-4colorgroup-option4-category1` | #69bfa0 |
| dataviz\_categorical-4colorgroup-option4-category2 | `--hop-dataviz-categorical-4colorgroup-option4-category2` | #c7ebff |
| dataviz\_categorical-4colorgroup-option4-category3 | `--hop-dataviz-categorical-4colorgroup-option4-category3` | #fa4d59 |
| dataviz\_categorical-4colorgroup-option4-category4 | `--hop-dataviz-categorical-4colorgroup-option4-category4` | #d2cdf8 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-4colorgroup-option1-category1 | `--hop-dataviz-categorical-4colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-4colorgroup-option1-category2 | `--hop-dataviz-categorical-4colorgroup-option1-category2` | #d2cdf8 |
| dataviz\_categorical-4colorgroup-option1-category3 | `--hop-dataviz-categorical-4colorgroup-option1-category3` | #cde8ac |
| dataviz\_categorical-4colorgroup-option1-category4 | `--hop-dataviz-categorical-4colorgroup-option1-category4` | #fbbdcf |
| dataviz\_categorical-4colorgroup-option2-category1 | `--hop-dataviz-categorical-4colorgroup-option2-category1` | #b6bead |
| dataviz\_categorical-4colorgroup-option2-category2 | `--hop-dataviz-categorical-4colorgroup-option2-category2` | #c7ebff |
| dataviz\_categorical-4colorgroup-option2-category3 | `--hop-dataviz-categorical-4colorgroup-option2-category3` | #84d0b4 |
| dataviz\_categorical-4colorgroup-option2-category4 | `--hop-dataviz-categorical-4colorgroup-option2-category4` | #fbe997 |
| dataviz\_categorical-4colorgroup-option3-category1 | `--hop-dataviz-categorical-4colorgroup-option3-category1` | #ffbf92 |
| dataviz\_categorical-4colorgroup-option3-category2 | `--hop-dataviz-categorical-4colorgroup-option3-category2` | #b6bead |
| dataviz\_categorical-4colorgroup-option3-category3 | `--hop-dataviz-categorical-4colorgroup-option3-category3` | #2e70a8 |
| dataviz\_categorical-4colorgroup-option3-category4 | `--hop-dataviz-categorical-4colorgroup-option3-category4` | #ecd599 |
| dataviz\_categorical-4colorgroup-option4-category1 | `--hop-dataviz-categorical-4colorgroup-option4-category1` | #69bfa0 |
| dataviz\_categorical-4colorgroup-option4-category2 | `--hop-dataviz-categorical-4colorgroup-option4-category2` | #c7ebff |
| dataviz\_categorical-4colorgroup-option4-category3 | `--hop-dataviz-categorical-4colorgroup-option4-category3` | #fa4d59 |
| dataviz\_categorical-4colorgroup-option4-category4 | `--hop-dataviz-categorical-4colorgroup-option4-category4` | #d2cdf8 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Categorical - 5 Color Groups
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-5colorgroup-option1-category1 | `--hop-dataviz-categorical-5colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-5colorgroup-option1-category2 | `--hop-dataviz-categorical-5colorgroup-option1-category2` | #ff9b3f |
| dataviz\_categorical-5colorgroup-option1-category3 | `--hop-dataviz-categorical-5colorgroup-option1-category3` | #bfdca9 |
| dataviz\_categorical-5colorgroup-option1-category4 | `--hop-dataviz-categorical-5colorgroup-option1-category4` | #ecd599 |
| dataviz\_categorical-5colorgroup-option1-category5 | `--hop-dataviz-categorical-5colorgroup-option1-category5` | #69bfa0 |
| dataviz\_categorical-5colorgroup-option2-category1 | `--hop-dataviz-categorical-5colorgroup-option2-category1` | #ff9b3f |
| dataviz\_categorical-5colorgroup-option2-category2 | `--hop-dataviz-categorical-5colorgroup-option2-category2` | #b6bead |
| dataviz\_categorical-5colorgroup-option2-category3 | `--hop-dataviz-categorical-5colorgroup-option2-category3` | #2e70a8 |
| dataviz\_categorical-5colorgroup-option2-category4 | `--hop-dataviz-categorical-5colorgroup-option2-category4` | #fbe997 |
| dataviz\_categorical-5colorgroup-option2-category5 | `--hop-dataviz-categorical-5colorgroup-option2-category5` | #c5bef6 |
| dataviz\_categorical-5colorgroup-option3-category1 | `--hop-dataviz-categorical-5colorgroup-option3-category1` | #d2cdf8 |
| dataviz\_categorical-5colorgroup-option3-category2 | `--hop-dataviz-categorical-5colorgroup-option3-category2` | #ecd599 |
| dataviz\_categorical-5colorgroup-option3-category3 | `--hop-dataviz-categorical-5colorgroup-option3-category3` | #aecdd5 |
| dataviz\_categorical-5colorgroup-option3-category4 | `--hop-dataviz-categorical-5colorgroup-option3-category4` | #b6bead |
| dataviz\_categorical-5colorgroup-option3-category5 | `--hop-dataviz-categorical-5colorgroup-option3-category5` | #ffbf92 |
| dataviz\_categorical-5colorgroup-option4-category1 | `--hop-dataviz-categorical-5colorgroup-option4-category1` | #69bfa0 |
| dataviz\_categorical-5colorgroup-option4-category2 | `--hop-dataviz-categorical-5colorgroup-option4-category2` | #c7ebff |
| dataviz\_categorical-5colorgroup-option4-category3 | `--hop-dataviz-categorical-5colorgroup-option4-category3` | #fa4d59 |
| dataviz\_categorical-5colorgroup-option4-category4 | `--hop-dataviz-categorical-5colorgroup-option4-category4` | #d2cdf8 |
| dataviz\_categorical-5colorgroup-option4-category5 | `--hop-dataviz-categorical-5colorgroup-option4-category5` | #b6bead |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-5colorgroup-option1-category1 | `--hop-dataviz-categorical-5colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-5colorgroup-option1-category2 | `--hop-dataviz-categorical-5colorgroup-option1-category2` | #ff9b3f |
| dataviz\_categorical-5colorgroup-option1-category3 | `--hop-dataviz-categorical-5colorgroup-option1-category3` | #bfdca9 |
| dataviz\_categorical-5colorgroup-option1-category4 | `--hop-dataviz-categorical-5colorgroup-option1-category4` | #ecd599 |
| dataviz\_categorical-5colorgroup-option1-category5 | `--hop-dataviz-categorical-5colorgroup-option1-category5` | #69bfa0 |
| dataviz\_categorical-5colorgroup-option2-category1 | `--hop-dataviz-categorical-5colorgroup-option2-category1` | #ff9b3f |
| dataviz\_categorical-5colorgroup-option2-category2 | `--hop-dataviz-categorical-5colorgroup-option2-category2` | #b6bead |
| dataviz\_categorical-5colorgroup-option2-category3 | `--hop-dataviz-categorical-5colorgroup-option2-category3` | #2e70a8 |
| dataviz\_categorical-5colorgroup-option2-category4 | `--hop-dataviz-categorical-5colorgroup-option2-category4` | #fbe997 |
| dataviz\_categorical-5colorgroup-option2-category5 | `--hop-dataviz-categorical-5colorgroup-option2-category5` | #c5bef6 |
| dataviz\_categorical-5colorgroup-option3-category1 | `--hop-dataviz-categorical-5colorgroup-option3-category1` | #d2cdf8 |
| dataviz\_categorical-5colorgroup-option3-category2 | `--hop-dataviz-categorical-5colorgroup-option3-category2` | #ecd599 |
| dataviz\_categorical-5colorgroup-option3-category3 | `--hop-dataviz-categorical-5colorgroup-option3-category3` | #aecdd5 |
| dataviz\_categorical-5colorgroup-option3-category4 | `--hop-dataviz-categorical-5colorgroup-option3-category4` | #b6bead |
| dataviz\_categorical-5colorgroup-option3-category5 | `--hop-dataviz-categorical-5colorgroup-option3-category5` | #ffbf92 |
| dataviz\_categorical-5colorgroup-option4-category1 | `--hop-dataviz-categorical-5colorgroup-option4-category1` | #69bfa0 |
| dataviz\_categorical-5colorgroup-option4-category2 | `--hop-dataviz-categorical-5colorgroup-option4-category2` | #c7ebff |
| dataviz\_categorical-5colorgroup-option4-category3 | `--hop-dataviz-categorical-5colorgroup-option4-category3` | #fa4d59 |
| dataviz\_categorical-5colorgroup-option4-category4 | `--hop-dataviz-categorical-5colorgroup-option4-category4` | #d2cdf8 |
| dataviz\_categorical-5colorgroup-option4-category5 | `--hop-dataviz-categorical-5colorgroup-option4-category5` | #b6bead |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Categorical - 6 Color Groups
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-6colorgroup-option1-category1 | `--hop-dataviz-categorical-6colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-6colorgroup-option1-category2 | `--hop-dataviz-categorical-6colorgroup-option1-category2` | #a0b8fa |
| dataviz\_categorical-6colorgroup-option1-category3 | `--hop-dataviz-categorical-6colorgroup-option1-category3` | #bfdca9 |
| dataviz\_categorical-6colorgroup-option1-category4 | `--hop-dataviz-categorical-6colorgroup-option1-category4` | #fa4d59 |
| dataviz\_categorical-6colorgroup-option1-category5 | `--hop-dataviz-categorical-6colorgroup-option1-category5` | #ecd599 |
| dataviz\_categorical-6colorgroup-option1-category6 | `--hop-dataviz-categorical-6colorgroup-option1-category6` | #69bfa0 |
| dataviz\_categorical-6colorgroup-option2-category1 | `--hop-dataviz-categorical-6colorgroup-option2-category1` | #2e70a8 |
| dataviz\_categorical-6colorgroup-option2-category2 | `--hop-dataviz-categorical-6colorgroup-option2-category2` | #fbe997 |
| dataviz\_categorical-6colorgroup-option2-category3 | `--hop-dataviz-categorical-6colorgroup-option2-category3` | #69bfa0 |
| dataviz\_categorical-6colorgroup-option2-category4 | `--hop-dataviz-categorical-6colorgroup-option2-category4` | #ff9b3f |
| dataviz\_categorical-6colorgroup-option2-category5 | `--hop-dataviz-categorical-6colorgroup-option2-category5` | #a7e6dc |
| dataviz\_categorical-6colorgroup-option2-category6 | `--hop-dataviz-categorical-6colorgroup-option2-category6` | #d2cdf8 |
| dataviz\_categorical-6colorgroup-option3-category1 | `--hop-dataviz-categorical-6colorgroup-option3-category1` | #b6bead |
| dataviz\_categorical-6colorgroup-option3-category2 | `--hop-dataviz-categorical-6colorgroup-option3-category2` | #aecdd5 |
| dataviz\_categorical-6colorgroup-option3-category3 | `--hop-dataviz-categorical-6colorgroup-option3-category3` | #e8ddd0 |
| dataviz\_categorical-6colorgroup-option3-category4 | `--hop-dataviz-categorical-6colorgroup-option3-category4` | #a7e6dc |
| dataviz\_categorical-6colorgroup-option3-category5 | `--hop-dataviz-categorical-6colorgroup-option3-category5` | #2e70a8 |
| dataviz\_categorical-6colorgroup-option3-category6 | `--hop-dataviz-categorical-6colorgroup-option3-category6` | #fbbdcf |
| dataviz\_categorical-6colorgroup-option4-category1 | `--hop-dataviz-categorical-6colorgroup-option4-category1` | #fbbdcf |
| dataviz\_categorical-6colorgroup-option4-category2 | `--hop-dataviz-categorical-6colorgroup-option4-category2` | #a0b8fa |
| dataviz\_categorical-6colorgroup-option4-category3 | `--hop-dataviz-categorical-6colorgroup-option4-category3` | #ffbf92 |
| dataviz\_categorical-6colorgroup-option4-category4 | `--hop-dataviz-categorical-6colorgroup-option4-category4` | #c7ebff |
| dataviz\_categorical-6colorgroup-option4-category5 | `--hop-dataviz-categorical-6colorgroup-option4-category5` | #bfdca9 |
| dataviz\_categorical-6colorgroup-option4-category6 | `--hop-dataviz-categorical-6colorgroup-option4-category6` | #fbe997 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-6colorgroup-option1-category1 | `--hop-dataviz-categorical-6colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-6colorgroup-option1-category2 | `--hop-dataviz-categorical-6colorgroup-option1-category2` | #a0b8fa |
| dataviz\_categorical-6colorgroup-option1-category3 | `--hop-dataviz-categorical-6colorgroup-option1-category3` | #bfdca9 |
| dataviz\_categorical-6colorgroup-option1-category4 | `--hop-dataviz-categorical-6colorgroup-option1-category4` | #fa4d59 |
| dataviz\_categorical-6colorgroup-option1-category5 | `--hop-dataviz-categorical-6colorgroup-option1-category5` | #ecd599 |
| dataviz\_categorical-6colorgroup-option1-category6 | `--hop-dataviz-categorical-6colorgroup-option1-category6` | #69bfa0 |
| dataviz\_categorical-6colorgroup-option2-category1 | `--hop-dataviz-categorical-6colorgroup-option2-category1` | #2e70a8 |
| dataviz\_categorical-6colorgroup-option2-category2 | `--hop-dataviz-categorical-6colorgroup-option2-category2` | #fbe997 |
| dataviz\_categorical-6colorgroup-option2-category3 | `--hop-dataviz-categorical-6colorgroup-option2-category3` | #69bfa0 |
| dataviz\_categorical-6colorgroup-option2-category4 | `--hop-dataviz-categorical-6colorgroup-option2-category4` | #ff9b3f |
| dataviz\_categorical-6colorgroup-option2-category5 | `--hop-dataviz-categorical-6colorgroup-option2-category5` | #a7e6dc |
| dataviz\_categorical-6colorgroup-option2-category6 | `--hop-dataviz-categorical-6colorgroup-option2-category6` | #d2cdf8 |
| dataviz\_categorical-6colorgroup-option3-category1 | `--hop-dataviz-categorical-6colorgroup-option3-category1` | #b6bead |
| dataviz\_categorical-6colorgroup-option3-category2 | `--hop-dataviz-categorical-6colorgroup-option3-category2` | #aecdd5 |
| dataviz\_categorical-6colorgroup-option3-category3 | `--hop-dataviz-categorical-6colorgroup-option3-category3` | #e8ddd0 |
| dataviz\_categorical-6colorgroup-option3-category4 | `--hop-dataviz-categorical-6colorgroup-option3-category4` | #a7e6dc |
| dataviz\_categorical-6colorgroup-option3-category5 | `--hop-dataviz-categorical-6colorgroup-option3-category5` | #2e70a8 |
| dataviz\_categorical-6colorgroup-option3-category6 | `--hop-dataviz-categorical-6colorgroup-option3-category6` | #fbbdcf |
| dataviz\_categorical-6colorgroup-option4-category1 | `--hop-dataviz-categorical-6colorgroup-option4-category1` | #fbbdcf |
| dataviz\_categorical-6colorgroup-option4-category2 | `--hop-dataviz-categorical-6colorgroup-option4-category2` | #a0b8fa |
| dataviz\_categorical-6colorgroup-option4-category3 | `--hop-dataviz-categorical-6colorgroup-option4-category3` | #ffbf92 |
| dataviz\_categorical-6colorgroup-option4-category4 | `--hop-dataviz-categorical-6colorgroup-option4-category4` | #c7ebff |
| dataviz\_categorical-6colorgroup-option4-category5 | `--hop-dataviz-categorical-6colorgroup-option4-category5` | #bfdca9 |
| dataviz\_categorical-6colorgroup-option4-category6 | `--hop-dataviz-categorical-6colorgroup-option4-category6` | #fbe997 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
### Dark Tokens
#### Neutral
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| neutral-active | `--hop-neutral-border-active` | #787a7e |
| neutral-active | `--hop-neutral-icon-active` | #232426 |
| neutral-weak-active | `--hop-neutral-icon-weak-active` | #484a4d |
| neutral-active | `--hop-neutral-surface-active` | #eef0f2 |
| neutral-weak-active | `--hop-neutral-surface-weak-active` | #cbcdd2 |
| neutral-active | `--hop-neutral-text-active` | #232426 |
| neutral-weak-active | `--hop-neutral-text-weak-active` | #484a4d |
| neutral | `--hop-neutral-border` | #b3b5ba |
| neutral-selected | `--hop-neutral-border-selected` | #313335 |
| neutral-disabled | `--hop-neutral-border-disabled` | #eef0f2 |
| neutral-hover | `--hop-neutral-border-hover` | #96989d |
| neutral-press | `--hop-neutral-border-press` | #787a7e |
| neutral-strong | `--hop-neutral-border-strong` | #313335 |
| neutral-strong-hover | `--hop-neutral-border-strong-hover` | #484a4d |
| neutral-weak | `--hop-neutral-border-weak` | #e1e3e7 |
| neutral-weakest | `--hop-neutral-border-weakest` | #eef0f2 |
| neutral | `--hop-neutral-icon` | #313335 |
| neutral-selected | `--hop-neutral-icon-selected` | #ffffff |
| neutral-disabled | `--hop-neutral-icon-disabled` | #96989d |
| neutral-hover | `--hop-neutral-icon-hover` | #484a4d |
| neutral-press | `--hop-neutral-icon-press` | #232426 |
| neutral-strong | `--hop-neutral-icon-strong` | #ffffff |
| neutral-strong-hover | `--hop-neutral-icon-strong-hover` | #ffffff |
| neutral-weak | `--hop-neutral-icon-weak` | #787a7e |
| neutral-weak-hover | `--hop-neutral-icon-weak-hover` | #5e6064 |
| neutral-weak-press | `--hop-neutral-icon-weak-press` | #484a4d |
| neutral-weak-selected | `--hop-neutral-icon-weak-selected` | #5e6064 |
| neutral-weakest | `--hop-neutral-icon-weakest` | #b3b5ba |
| neutral | `--hop-neutral-surface` | #ffffff |
| neutral-selected | `--hop-neutral-surface-selected` | #313335 |
| neutral-disabled | `--hop-neutral-surface-disabled` | #eef0f2 |
| neutral-hover | `--hop-neutral-surface-hover` | #f8f9fa |
| neutral-press | `--hop-neutral-surface-press` | #eef0f2 |
| neutral-strong | `--hop-neutral-surface-strong` | #313335 |
| neutral-weak | `--hop-neutral-surface-weak` | #eef0f2 |
| neutral-weak-selected | `--hop-neutral-surface-weak-selected` | #eef0f2 |
| neutral-weak-hover | `--hop-neutral-surface-weak-hover` | #e1e3e7 |
| neutral-weak-press | `--hop-neutral-surface-weak-press` | #cbcdd2 |
| neutral-weakest | `--hop-neutral-surface-weakest` | #f8f9fa |
| neutral-weakest-selected | `--hop-neutral-surface-weakest-selected` | #eef0f2 |
| neutral-weakest-hover | `--hop-neutral-surface-weakest-hover` | #eef0f2 |
| neutral | `--hop-neutral-text` | #313335 |
| neutral-selected | `--hop-neutral-text-selected` | #ffffff |
| neutral-disabled | `--hop-neutral-text-disabled` | #96989d |
| neutral-hover | `--hop-neutral-text-hover` | #484a4d |
| neutral-press | `--hop-neutral-text-press` | #232426 |
| neutral-strong | `--hop-neutral-text-strong` | #ffffff |
| neutral-weak | `--hop-neutral-text-weak` | #6c6e72 |
| neutral-weak-hover | `--hop-neutral-text-weak-hover` | #5e6064 |
| neutral-weak-press | `--hop-neutral-text-weak-press` | #484a4d |
| neutral-weak-selected | `--hop-neutral-text-weak-selected` | #5e6064 |
| neutral-weakest | `--hop-neutral-text-weakest` | #96989d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| neutral-active | `--hop-neutral-border-active` | #787a7e |
| neutral-active | `--hop-neutral-icon-active` | #232426 |
| neutral-weak-active | `--hop-neutral-icon-weak-active` | #484a4d |
| neutral-active | `--hop-neutral-surface-active` | #eef0f2 |
| neutral-weak-active | `--hop-neutral-surface-weak-active` | #cbcdd2 |
| neutral-active | `--hop-neutral-text-active` | #232426 |
| neutral-weak-active | `--hop-neutral-text-weak-active` | #484a4d |
| neutral | `--hop-neutral-border` | #b3b5ba |
| neutral-selected | `--hop-neutral-border-selected` | #313335 |
| neutral-disabled | `--hop-neutral-border-disabled` | #eef0f2 |
| neutral-hover | `--hop-neutral-border-hover` | #96989d |
| neutral-press | `--hop-neutral-border-press` | #787a7e |
| neutral-strong | `--hop-neutral-border-strong` | #313335 |
| neutral-strong-hover | `--hop-neutral-border-strong-hover` | #484a4d |
| neutral-weak | `--hop-neutral-border-weak` | #e1e3e7 |
| neutral-weakest | `--hop-neutral-border-weakest` | #eef0f2 |
| neutral | `--hop-neutral-icon` | #313335 |
| neutral-selected | `--hop-neutral-icon-selected` | #ffffff |
| neutral-disabled | `--hop-neutral-icon-disabled` | #96989d |
| neutral-hover | `--hop-neutral-icon-hover` | #484a4d |
| neutral-press | `--hop-neutral-icon-press` | #232426 |
| neutral-strong | `--hop-neutral-icon-strong` | #ffffff |
| neutral-strong-hover | `--hop-neutral-icon-strong-hover` | #ffffff |
| neutral-weak | `--hop-neutral-icon-weak` | #787a7e |
| neutral-weak-hover | `--hop-neutral-icon-weak-hover` | #5e6064 |
| neutral-weak-press | `--hop-neutral-icon-weak-press` | #484a4d |
| neutral-weak-selected | `--hop-neutral-icon-weak-selected` | #5e6064 |
| neutral-weakest | `--hop-neutral-icon-weakest` | #b3b5ba |
| neutral | `--hop-neutral-surface` | #ffffff |
| neutral-selected | `--hop-neutral-surface-selected` | #313335 |
| neutral-disabled | `--hop-neutral-surface-disabled` | #eef0f2 |
| neutral-hover | `--hop-neutral-surface-hover` | #f8f9fa |
| neutral-press | `--hop-neutral-surface-press` | #eef0f2 |
| neutral-strong | `--hop-neutral-surface-strong` | #313335 |
| neutral-weak | `--hop-neutral-surface-weak` | #eef0f2 |
| neutral-weak-selected | `--hop-neutral-surface-weak-selected` | #eef0f2 |
| neutral-weak-hover | `--hop-neutral-surface-weak-hover` | #e1e3e7 |
| neutral-weak-press | `--hop-neutral-surface-weak-press` | #cbcdd2 |
| neutral-weakest | `--hop-neutral-surface-weakest` | #f8f9fa |
| neutral-weakest-selected | `--hop-neutral-surface-weakest-selected` | #eef0f2 |
| neutral-weakest-hover | `--hop-neutral-surface-weakest-hover` | #eef0f2 |
| neutral | `--hop-neutral-text` | #313335 |
| neutral-selected | `--hop-neutral-text-selected` | #ffffff |
| neutral-disabled | `--hop-neutral-text-disabled` | #96989d |
| neutral-hover | `--hop-neutral-text-hover` | #484a4d |
| neutral-press | `--hop-neutral-text-press` | #232426 |
| neutral-strong | `--hop-neutral-text-strong` | #ffffff |
| neutral-weak | `--hop-neutral-text-weak` | #6c6e72 |
| neutral-weak-hover | `--hop-neutral-text-weak-hover` | #5e6064 |
| neutral-weak-press | `--hop-neutral-text-weak-press` | #484a4d |
| neutral-weak-selected | `--hop-neutral-text-weak-selected` | #5e6064 |
| neutral-weakest | `--hop-neutral-text-weakest` | #96989d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Primary
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| primary-active | `--hop-primary-border-active` | #6c8ffd |
| primary-active | `--hop-primary-icon-active` | #2040c7 |
| primary-active | `--hop-primary-surface-active` | #6c8ffd |
| primary-strong-active | `--hop-primary-surface-strong-active` | #2040c7 |
| primary-weak-active | `--hop-primary-surface-weak-active` | #d6e0ff |
| primary-active | `--hop-primary-text-active` | #2040c7 |
| primary | `--hop-primary-border` | #4767fe |
| primary-selected | `--hop-primary-border-selected` | #4767fe |
| primary-focus | `--hop-primary-border-focus` | #3b57ff |
| primary-press | `--hop-primary-border-press` | #3b57ff |
| primary | `--hop-primary-icon` | #3b57ff |
| primary-selected | `--hop-primary-icon-selected` | #3b57ff |
| primary-disabled | `--hop-primary-icon-disabled` | #95b1ff |
| primary-hover | `--hop-primary-icon-hover` | #2a43e8 |
| primary-press | `--hop-primary-icon-press` | #2040c7 |
| primary-strong | `--hop-primary-icon-strong` | #ffffff |
| primary-strong-hover | `--hop-primary-icon-strong-hover` | #ffffff |
| primary | `--hop-primary-surface` | #e6ebff |
| primary-selected | `--hop-primary-surface-selected` | #e6ebff |
| primary-disabled | `--hop-primary-surface-disabled` | #95b1ff |
| primary-focus | `--hop-primary-surface-focus` | #f5f6ff |
| primary-hover | `--hop-primary-surface-hover` | #95b1ff |
| primary-press | `--hop-primary-surface-press` | #6c8ffd |
| primary-strong | `--hop-primary-surface-strong` | #4767fe |
| primary-strong-selected | `--hop-primary-surface-strong-selected` | #e6ebff |
| primary-strong-hover | `--hop-primary-surface-strong-hover` | #2a43e8 |
| primary-strong-press | `--hop-primary-surface-strong-press` | #2040c7 |
| primary-weak | `--hop-primary-surface-weak` | #f5f6ff |
| primary-weak-selected | `--hop-primary-surface-weak-selected` | #b9cbff |
| primary-weak-hover | `--hop-primary-surface-weak-hover` | #e6ebff |
| primary-weak-press | `--hop-primary-surface-weak-press` | #d6e0ff |
| primary | `--hop-primary-text` | #3b57ff |
| primary-selected | `--hop-primary-text-selected` | #3b57ff |
| primary-disabled | `--hop-primary-text-disabled` | #95b1ff |
| primary-hover | `--hop-primary-text-hover` | #2a43e8 |
| primary-press | `--hop-primary-text-press` | #2040c7 |
| primary-strong | `--hop-primary-text-strong` | #ffffff |
| primary-strong-hover | `--hop-primary-text-strong-hover` | #ffffff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| primary-active | `--hop-primary-border-active` | #6c8ffd |
| primary-active | `--hop-primary-icon-active` | #2040c7 |
| primary-active | `--hop-primary-surface-active` | #6c8ffd |
| primary-strong-active | `--hop-primary-surface-strong-active` | #2040c7 |
| primary-weak-active | `--hop-primary-surface-weak-active` | #d6e0ff |
| primary-active | `--hop-primary-text-active` | #2040c7 |
| primary | `--hop-primary-border` | #736ad2 |
| primary-selected | `--hop-primary-border-selected` | #dd3900 |
| primary-focus | `--hop-primary-border-focus` | #685dc9 |
| primary-press | `--hop-primary-border-press` | #685dc9 |
| primary | `--hop-primary-icon` | #685dc9 |
| primary-selected | `--hop-primary-icon-selected` | #ca3400 |
| primary-disabled | `--hop-primary-icon-disabled` | #b4abff |
| primary-hover | `--hop-primary-icon-hover` | #6057b3 |
| primary-press | `--hop-primary-icon-press` | #4d468f |
| primary-strong | `--hop-primary-icon-strong` | #ffffff |
| primary-strong-hover | `--hop-primary-icon-strong-hover` | #ffffff |
| primary | `--hop-primary-surface` | #eceaff |
| primary-selected | `--hop-primary-surface-selected` | #ff5b22 |
| primary-disabled | `--hop-primary-surface-disabled` | #b4abff |
| primary-focus | `--hop-primary-surface-focus` | #f6f6ff |
| primary-hover | `--hop-primary-surface-hover` | #b4abff |
| primary-press | `--hop-primary-surface-press` | #8e85ec |
| primary-strong | `--hop-primary-surface-strong` | #736ad2 |
| primary-strong-selected | `--hop-primary-surface-strong-selected` | #ffe7df |
| primary-strong-hover | `--hop-primary-surface-strong-hover` | #6057b3 |
| primary-strong-press | `--hop-primary-surface-strong-press` | #4d468f |
| primary-weak | `--hop-primary-surface-weak` | #f6f6ff |
| primary-weak-selected | `--hop-primary-surface-weak-selected` | #ff9874 |
| primary-weak-hover | `--hop-primary-surface-weak-hover` | #eceaff |
| primary-weak-press | `--hop-primary-surface-weak-press` | #deddff |
| primary | `--hop-primary-text` | #685dc9 |
| primary-selected | `--hop-primary-text-selected` | #ca3400 |
| primary-disabled | `--hop-primary-text-disabled` | #b4abff |
| primary-hover | `--hop-primary-text-hover` | #6057b3 |
| primary-press | `--hop-primary-text-press` | #4d468f |
| primary-strong | `--hop-primary-text-strong` | #ffffff |
| primary-strong-hover | `--hop-primary-text-strong-hover` | #ffffff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Success
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ------- |
| success | `--hop-success-border` | #aad89d |
| success | `--hop-success-icon` | #115a52 |
| success-weakest | `--hop-success-icon-weakest` | #aad89d |
| success-weak | `--hop-success-icon-weak` | #47a584 |
| success | `--hop-success-surface` | #f4f9e9 |
| success-strong | `--hop-success-surface-strong` | #aad89d |
| success-weak | `--hop-success-surface-weak` | #e3f3b9 |
| success | `--hop-success-text` | #115a52 |
| success-hover | `--hop-success-text-hover` | #16433d |
| success-weak | `--hop-success-text-weak` | #47a584 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ------- |
| success | `--hop-success-border` | #aad89d |
| success | `--hop-success-icon` | #115a52 |
| success-weakest | `--hop-success-icon-weakest` | #aad89d |
| success-weak | `--hop-success-icon-weak` | #47a584 |
| success | `--hop-success-surface` | #f4f9e9 |
| success-strong | `--hop-success-surface-strong` | #aad89d |
| success-weak | `--hop-success-surface-weak` | #e3f3b9 |
| success | `--hop-success-text` | #115a52 |
| success-hover | `--hop-success-text-hover` | #16433d |
| success-weak | `--hop-success-text-weak` | #47a584 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Warning
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ------- |
| warning | `--hop-warning-border` | #ffbf92 |
| warning | `--hop-warning-icon` | #8c3504 |
| warning-weakest | `--hop-warning-icon-weakest` | #ffbf92 |
| warning-weak | `--hop-warning-icon-weak` | #e57723 |
| warning | `--hop-warning-surface` | #fff5e9 |
| warning-strong | `--hop-warning-surface-strong` | #ffbf92 |
| warning-weak | `--hop-warning-surface-weak` | #ffe8d3 |
| warning | `--hop-warning-text` | #8c3504 |
| warning-weak | `--hop-warning-text-weak` | #e57723 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ------- |
| warning | `--hop-warning-border` | #ffbf92 |
| warning | `--hop-warning-icon` | #8c3504 |
| warning-weakest | `--hop-warning-icon-weakest` | #ffbf92 |
| warning-weak | `--hop-warning-icon-weak` | #e57723 |
| warning | `--hop-warning-surface` | #fff5e9 |
| warning-strong | `--hop-warning-surface-strong` | #ffbf92 |
| warning-weak | `--hop-warning-surface-weak` | #ffe8d3 |
| warning | `--hop-warning-text` | #8c3504 |
| warning-weak | `--hop-warning-text-weak` | #e57723 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Danger
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ----------------------------------- | ------- |
| danger-active | `--hop-danger-border-active` | #ba2d2d |
| danger-active | `--hop-danger-icon-active` | #6c2320 |
| danger-weak-active | `--hop-danger-icon-weak-active` | #ba2d2d |
| danger-active | `--hop-danger-surface-active` | #ba2d2d |
| danger-weak-active | `--hop-danger-surface-weak-active` | #ffbcb7 |
| danger-active | `--hop-danger-text-active` | #6c2320 |
| danger-weak-active | `--hop-danger-text-weak-active` | #ba2d2d |
| danger | `--hop-danger-border` | #ffbcb7 |
| danger-selected | `--hop-danger-border-selected` | #df3236 |
| danger-strong | `--hop-danger-border-strong` | #fa4d59 |
| danger-press | `--hop-danger-border-press` | #fa4d59 |
| danger | `--hop-danger-icon` | #952927 |
| danger-selected | `--hop-danger-icon-selected` | #df3236 |
| danger-disabled | `--hop-danger-icon-disabled` | #ffbcb7 |
| danger-hover | `--hop-danger-icon-hover` | #cb2e31 |
| danger-press | `--hop-danger-icon-press` | #6c2320 |
| danger-strong | `--hop-danger-icon-strong` | #ffffff |
| danger-strong-hover | `--hop-danger-icon-strong-hover` | #ffffff |
| danger-weak | `--hop-danger-icon-weak` | #df3236 |
| danger-weak-hover | `--hop-danger-icon-weak-hover` | #cb2e31 |
| danger-weak-press | `--hop-danger-icon-weak-press` | #ba2d2d |
| danger-weakest | `--hop-danger-icon-weakest` | #ffd6d3 |
| danger | `--hop-danger-surface` | #fdf6f6 |
| danger-selected | `--hop-danger-surface-selected` | #fde6e5 |
| danger-disabled | `--hop-danger-surface-disabled` | #ffbcb7 |
| danger-hover | `--hop-danger-surface-hover` | #cb2e31 |
| danger-press | `--hop-danger-surface-press` | #ba2d2d |
| danger-strong | `--hop-danger-surface-strong` | #df3236 |
| danger-strong-hover | `--hop-danger-surface-strong-hover` | #cb2e31 |
| danger-weak | `--hop-danger-surface-weak` | #fde6e5 |
| danger-weak-hover | `--hop-danger-surface-weak-hover` | #ffd6d3 |
| danger-weak-press | `--hop-danger-surface-weak-press` | #ffbcb7 |
| danger | `--hop-danger-text` | #952927 |
| danger-selected | `--hop-danger-text-selected` | #df3236 |
| danger-disabled | `--hop-danger-text-disabled` | #ffbcb7 |
| danger-hover | `--hop-danger-text-hover` | #cb2e31 |
| danger-press | `--hop-danger-text-press` | #6c2320 |
| danger-strong | `--hop-danger-text-strong` | #ffffff |
| danger-strong-hover | `--hop-danger-text-strong-hover` | #ffffff |
| danger-weak | `--hop-danger-text-weak` | #df3236 |
| danger-weak-hover | `--hop-danger-text-weak-hover` | #cb2e31 |
| danger-weak-press | `--hop-danger-text-weak-press` | #ba2d2d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ----------------------------------- | ------- |
| danger-active | `--hop-danger-border-active` | #ba2d2d |
| danger-active | `--hop-danger-icon-active` | #6c2320 |
| danger-weak-active | `--hop-danger-icon-weak-active` | #ba2d2d |
| danger-active | `--hop-danger-surface-active` | #ba2d2d |
| danger-weak-active | `--hop-danger-surface-weak-active` | #ffbcb7 |
| danger-active | `--hop-danger-text-active` | #6c2320 |
| danger-weak-active | `--hop-danger-text-weak-active` | #ba2d2d |
| danger | `--hop-danger-border` | #ffbcb7 |
| danger-selected | `--hop-danger-border-selected` | #df3236 |
| danger-strong | `--hop-danger-border-strong` | #fa4d59 |
| danger-press | `--hop-danger-border-press` | #fa4d59 |
| danger | `--hop-danger-icon` | #952927 |
| danger-selected | `--hop-danger-icon-selected` | #df3236 |
| danger-disabled | `--hop-danger-icon-disabled` | #ffbcb7 |
| danger-hover | `--hop-danger-icon-hover` | #cb2e31 |
| danger-press | `--hop-danger-icon-press` | #6c2320 |
| danger-strong | `--hop-danger-icon-strong` | #ffffff |
| danger-strong-hover | `--hop-danger-icon-strong-hover` | #ffffff |
| danger-weak | `--hop-danger-icon-weak` | #df3236 |
| danger-weak-hover | `--hop-danger-icon-weak-hover` | #cb2e31 |
| danger-weak-press | `--hop-danger-icon-weak-press` | #ba2d2d |
| danger-weakest | `--hop-danger-icon-weakest` | #ffd6d3 |
| danger | `--hop-danger-surface` | #fdf6f6 |
| danger-selected | `--hop-danger-surface-selected` | #fde6e5 |
| danger-disabled | `--hop-danger-surface-disabled` | #ffbcb7 |
| danger-hover | `--hop-danger-surface-hover` | #cb2e31 |
| danger-press | `--hop-danger-surface-press` | #ba2d2d |
| danger-strong | `--hop-danger-surface-strong` | #df3236 |
| danger-strong-hover | `--hop-danger-surface-strong-hover` | #cb2e31 |
| danger-weak | `--hop-danger-surface-weak` | #fde6e5 |
| danger-weak-hover | `--hop-danger-surface-weak-hover` | #ffd6d3 |
| danger-weak-press | `--hop-danger-surface-weak-press` | #ffbcb7 |
| danger | `--hop-danger-text` | #952927 |
| danger-selected | `--hop-danger-text-selected` | #df3236 |
| danger-disabled | `--hop-danger-text-disabled` | #ffbcb7 |
| danger-hover | `--hop-danger-text-hover` | #cb2e31 |
| danger-press | `--hop-danger-text-press` | #6c2320 |
| danger-strong | `--hop-danger-text-strong` | #ffffff |
| danger-strong-hover | `--hop-danger-text-strong-hover` | #ffffff |
| danger-weak | `--hop-danger-text-weak` | #df3236 |
| danger-weak-hover | `--hop-danger-text-weak-hover` | #cb2e31 |
| danger-weak-press | `--hop-danger-text-weak-press` | #ba2d2d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Information
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ---------------------------------- | ------- |
| information | `--hop-information-border` | #9fd2f7 |
| information | `--hop-information-icon` | #0a538b |
| information-weakest | `--hop-information-icon-weakest` | #bae6ff |
| information-weak | `--hop-information-icon-weak` | #5d9acd |
| information | `--hop-information-surface` | #f0f8ff |
| information-strong | `--hop-information-surface-strong` | #9fd2f7 |
| information-weak | `--hop-information-surface-weak` | #d9efff |
| information | `--hop-information-text` | #003d70 |
| information-weak | `--hop-information-text-weak` | #5d9acd |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ---------------------------------- | ------- |
| information | `--hop-information-border` | #9fd2f7 |
| information | `--hop-information-icon` | #0a538b |
| information-weakest | `--hop-information-icon-weakest` | #bae6ff |
| information-weak | `--hop-information-icon-weak` | #5d9acd |
| information | `--hop-information-surface` | #f0f8ff |
| information-strong | `--hop-information-surface-strong` | #9fd2f7 |
| information-weak | `--hop-information-surface-weak` | #d9efff |
| information | `--hop-information-text` | #003d70 |
| information-weak | `--hop-information-text-weak` | #5d9acd |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Upsell
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ---------------------------------- | ------- |
| upsell-active | `--hop-upsell-border-active` | #e2a934 |
| upsell-active | `--hop-upsell-icon-active` | #2f250d |
| upsell-weak-active | `--hop-upsell-icon-weak-active` | #7e5e0a |
| upsell-active | `--hop-upsell-surface-active` | #e2a934 |
| upsell-weak-active | `--hop-upsell-surface-weak-active` | #f7e694 |
| upsell-active | `--hop-upsell-text-active` | #2f250d |
| upsell-weak-active | `--hop-upsell-text-weak-active` | #7e5e0a |
| upsell | `--hop-upsell-border` | #eac96d |
| upsell-selected | `--hop-upsell-border-selected` | #996f08 |
| upsell-disabled | `--hop-upsell-border-disabled` | #f7e694 |
| upsell-press | `--hop-upsell-border-press` | #c28b12 |
| upsell | `--hop-upsell-icon` | #654c0d |
| upsell-selected | `--hop-upsell-icon-selected` | #996f08 |
| upsell-hover | `--hop-upsell-icon-hover` | #4b390f |
| upsell-press | `--hop-upsell-icon-press` | #2f250d |
| upsell-weakest | `--hop-upsell-icon-weakest` | #f7e694 |
| upsell-weak | `--hop-upsell-icon-weak` | #c28b12 |
| upsell-weak-hover | `--hop-upsell-icon-weak-hover` | #8b6609 |
| upsell-weak-press | `--hop-upsell-icon-weak-press` | #7e5e0a |
| upsell | `--hop-upsell-surface` | #fff8d6 |
| upsell-selected | `--hop-upsell-surface-selected` | #fff2b8 |
| upsell-disabled | `--hop-upsell-surface-disabled` | #fff8d6 |
| upsell-hover | `--hop-upsell-surface-hover` | #fff2b8 |
| upsell-press | `--hop-upsell-surface-press` | #f7e694 |
| upsell-weak | `--hop-upsell-surface-weak` | #f7e694 |
| upsell-weak-hover | `--hop-upsell-surface-weak-hover` | #eac96d |
| upsell-weak-press | `--hop-upsell-surface-weak-press` | #e2a934 |
| upsell | `--hop-upsell-text` | #654c0d |
| upsell-selected | `--hop-upsell-text-selected` | #996f08 |
| upsell-disabled | `--hop-upsell-text-disabled` | #996f08 |
| upsell-hover | `--hop-upsell-text-hover` | #4b390f |
| upsell-press | `--hop-upsell-text-press` | #2f250d |
| upsell-weak | `--hop-upsell-text-weak` | #c28b12 |
| upsell-weak-hover | `--hop-upsell-text-weak-hover` | #8b6609 |
| upsell-weak-press | `--hop-upsell-text-weak-press` | #7e5e0a |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ---------------------------------- | ------- |
| upsell-active | `--hop-upsell-border-active` | #e2a934 |
| upsell-active | `--hop-upsell-icon-active` | #2f250d |
| upsell-weak-active | `--hop-upsell-icon-weak-active` | #7e5e0a |
| upsell-active | `--hop-upsell-surface-active` | #e2a934 |
| upsell-weak-active | `--hop-upsell-surface-weak-active` | #f7e694 |
| upsell-active | `--hop-upsell-text-active` | #2f250d |
| upsell-weak-active | `--hop-upsell-text-weak-active` | #7e5e0a |
| upsell | `--hop-upsell-border` | #a3df00 |
| upsell-selected | `--hop-upsell-border-selected` | #5f8100 |
| upsell-disabled | `--hop-upsell-border-disabled` | #b3f400 |
| upsell-press | `--hop-upsell-border-press` | #77a300 |
| upsell | `--hop-upsell-icon` | #415800 |
| upsell-selected | `--hop-upsell-icon-selected` | #4f6c00 |
| upsell-hover | `--hop-upsell-icon-hover` | #304200 |
| upsell-press | `--hop-upsell-icon-press` | #1f2b00 |
| upsell-weakest | `--hop-upsell-icon-weakest` | #b3f400 |
| upsell-weak | `--hop-upsell-icon-weak` | #77a300 |
| upsell-weak-hover | `--hop-upsell-icon-weak-hover` | #577600 |
| upsell-weak-press | `--hop-upsell-icon-weak-press` | #4f6c00 |
| upsell | `--hop-upsell-surface` | #edffbc |
| upsell-selected | `--hop-upsell-surface-selected` | #ccff42 |
| upsell-disabled | `--hop-upsell-surface-disabled` | #edffbc |
| upsell-hover | `--hop-upsell-surface-hover` | #ccff42 |
| upsell-press | `--hop-upsell-surface-press` | #b3f400 |
| upsell-weak | `--hop-upsell-surface-weak` | #b3f400 |
| upsell-weak-hover | `--hop-upsell-surface-weak-hover` | #a3df00 |
| upsell-weak-press | `--hop-upsell-surface-weak-press` | #8fc300 |
| upsell | `--hop-upsell-text` | #415800 |
| upsell-selected | `--hop-upsell-text-selected` | #4f6c00 |
| upsell-disabled | `--hop-upsell-text-disabled` | #5f8100 |
| upsell-hover | `--hop-upsell-text-hover` | #304200 |
| upsell-press | `--hop-upsell-text-press` | #1f2b00 |
| upsell-weak | `--hop-upsell-text-weak` | #77a300 |
| upsell-weak-hover | `--hop-upsell-text-weak-hover` | #577600 |
| upsell-weak-press | `--hop-upsell-text-weak-press` | #4f6c00 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Decorative
##### Option 1
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option1 | `--hop-decorative-option1-border` | #b9cbff |
| decorative-option1 | `--hop-decorative-option1-icon` | #152450 |
| decorative-option1 | `--hop-decorative-option1-surface` | #b9cbff |
| decorative-option1-hover | `--hop-decorative-option1-surface-hover` | #95b1ff |
| decorative-option1-strong | `--hop-decorative-option1-surface-strong` | #95b1ff |
| decorative-option1-weak | `--hop-decorative-option1-surface-weak` | #e6ebff |
| decorative-option1-weak-hover | `--hop-decorative-option1-surface-weak-hover` | #d6e0ff |
| decorative-option1-weakest | `--hop-decorative-option1-surface-weakest` | #f5f6ff |
| decorative-option1 | `--hop-decorative-option1-text` | #152450 |
| decorative-option1-weak | `--hop-decorative-option1-text-weak` | #6c8ffd |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option1 | `--hop-decorative-option1-border` | #b9cbff |
| decorative-option1 | `--hop-decorative-option1-icon` | #152450 |
| decorative-option1 | `--hop-decorative-option1-surface` | #b9cbff |
| decorative-option1-hover | `--hop-decorative-option1-surface-hover` | #95b1ff |
| decorative-option1-strong | `--hop-decorative-option1-surface-strong` | #95b1ff |
| decorative-option1-weak | `--hop-decorative-option1-surface-weak` | #e6ebff |
| decorative-option1-weak-hover | `--hop-decorative-option1-surface-weak-hover` | #d6e0ff |
| decorative-option1-weakest | `--hop-decorative-option1-surface-weakest` | #f5f6ff |
| decorative-option1 | `--hop-decorative-option1-text` | #152450 |
| decorative-option1-weak | `--hop-decorative-option1-text-weak` | #6c8ffd |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 2
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option2 | `--hop-decorative-option2-border` | #a3d6cb |
| decorative-option2 | `--hop-decorative-option2-icon` | #002d1c |
| decorative-option2 | `--hop-decorative-option2-surface` | #bde8e1 |
| decorative-option2-hover | `--hop-decorative-option2-surface-hover` | #a3d6cb |
| decorative-option2-strong | `--hop-decorative-option2-surface-strong` | #a3d6cb |
| decorative-option2-weak | `--hop-decorative-option2-surface-weak` | #cff4ef |
| decorative-option2-weak-hover | `--hop-decorative-option2-surface-weak-hover` | #bde8e1 |
| decorative-option2-weakest | `--hop-decorative-option2-surface-weakest` | #ddfdf9 |
| decorative-option2 | `--hop-decorative-option2-text` | #002d1c |
| decorative-option2-weak | `--hop-decorative-option2-text-weak` | #5da18c |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option2 | `--hop-decorative-option2-border` | #a3d6cb |
| decorative-option2 | `--hop-decorative-option2-icon` | #002d1c |
| decorative-option2 | `--hop-decorative-option2-surface` | #bde8e1 |
| decorative-option2-hover | `--hop-decorative-option2-surface-hover` | #a3d6cb |
| decorative-option2-strong | `--hop-decorative-option2-surface-strong` | #a3d6cb |
| decorative-option2-weak | `--hop-decorative-option2-surface-weak` | #cff4ef |
| decorative-option2-weak-hover | `--hop-decorative-option2-surface-weak-hover` | #bde8e1 |
| decorative-option2-weakest | `--hop-decorative-option2-surface-weakest` | #ddfdf9 |
| decorative-option2 | `--hop-decorative-option2-text` | #002d1c |
| decorative-option2-weak | `--hop-decorative-option2-text-weak` | #5da18c |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 3
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option3 | `--hop-decorative-option3-border` | #ffbf92 |
| decorative-option3 | `--hop-decorative-option3-icon` | #451a02 |
| decorative-option3 | `--hop-decorative-option3-surface` | #ffbf92 |
| decorative-option3-hover | `--hop-decorative-option3-surface-hover` | #ff9b3f |
| decorative-option3-strong | `--hop-decorative-option3-surface-strong` | #ff9b3f |
| decorative-option3-weak | `--hop-decorative-option3-surface-weak` | #ffe8d3 |
| decorative-option3-weak-hover | `--hop-decorative-option3-surface-weak-hover` | #ffd8be |
| decorative-option3-weakest | `--hop-decorative-option3-surface-weakest` | #fff5e9 |
| decorative-option3 | `--hop-decorative-option3-text` | #451a02 |
| decorative-option3-weak | `--hop-decorative-option3-text-weak` | #e57723 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option3 | `--hop-decorative-option3-border` | #ffbf92 |
| decorative-option3 | `--hop-decorative-option3-icon` | #451a02 |
| decorative-option3 | `--hop-decorative-option3-surface` | #ffbf92 |
| decorative-option3-hover | `--hop-decorative-option3-surface-hover` | #ff9b3f |
| decorative-option3-strong | `--hop-decorative-option3-surface-strong` | #ff9b3f |
| decorative-option3-weak | `--hop-decorative-option3-surface-weak` | #ffe8d3 |
| decorative-option3-weak-hover | `--hop-decorative-option3-surface-weak-hover` | #ffd8be |
| decorative-option3-weakest | `--hop-decorative-option3-surface-weakest` | #fff5e9 |
| decorative-option3 | `--hop-decorative-option3-text` | #451a02 |
| decorative-option3-weak | `--hop-decorative-option3-text-weak` | #e57723 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 4
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option4 | `--hop-decorative-option4-border` | #aad89d |
| decorative-option4 | `--hop-decorative-option4-icon` | #132a27 |
| decorative-option4 | `--hop-decorative-option4-surface` | #cde8ac |
| decorative-option4-hover | `--hop-decorative-option4-surface-hover` | #aad89d |
| decorative-option4-strong | `--hop-decorative-option4-surface-strong` | #aad89d |
| decorative-option4-weak | `--hop-decorative-option4-surface-weak` | #e3f3b9 |
| decorative-option4-weak-hover | `--hop-decorative-option4-surface-weak-hover` | #cde8ac |
| decorative-option4-weakest | `--hop-decorative-option4-surface-weakest` | #f4f9e9 |
| decorative-option4 | `--hop-decorative-option4-text` | #132a27 |
| decorative-option4-weak | `--hop-decorative-option4-text-weak` | #188a71 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option4 | `--hop-decorative-option4-border` | #aad89d |
| decorative-option4 | `--hop-decorative-option4-icon` | #132a27 |
| decorative-option4 | `--hop-decorative-option4-surface` | #cde8ac |
| decorative-option4-hover | `--hop-decorative-option4-surface-hover` | #aad89d |
| decorative-option4-strong | `--hop-decorative-option4-surface-strong` | #aad89d |
| decorative-option4-weak | `--hop-decorative-option4-surface-weak` | #e3f3b9 |
| decorative-option4-weak-hover | `--hop-decorative-option4-surface-weak-hover` | #cde8ac |
| decorative-option4-weakest | `--hop-decorative-option4-surface-weakest` | #f4f9e9 |
| decorative-option4 | `--hop-decorative-option4-text` | #132a27 |
| decorative-option4-weak | `--hop-decorative-option4-text-weak` | #188a71 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 5
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option5 | `--hop-decorative-option5-border` | #9fd2f7 |
| decorative-option5 | `--hop-decorative-option5-icon` | #00274b |
| decorative-option5 | `--hop-decorative-option5-surface` | #bae6ff |
| decorative-option5-hover | `--hop-decorative-option5-surface-hover` | #9fd2f7 |
| decorative-option5-strong | `--hop-decorative-option5-surface-strong` | #9fd2f7 |
| decorative-option5-weak | `--hop-decorative-option5-surface-weak` | #d9efff |
| decorative-option5-weak-hover | `--hop-decorative-option5-surface-weak-hover` | #bae6ff |
| decorative-option5-weakest | `--hop-decorative-option5-surface-weakest` | #f0f8ff |
| decorative-option5 | `--hop-decorative-option5-text` | #00274b |
| decorative-option5-weak | `--hop-decorative-option5-text-weak` | #5d9acd |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option5 | `--hop-decorative-option5-border` | #9fd2f7 |
| decorative-option5 | `--hop-decorative-option5-icon` | #00274b |
| decorative-option5 | `--hop-decorative-option5-surface` | #bae6ff |
| decorative-option5-hover | `--hop-decorative-option5-surface-hover` | #9fd2f7 |
| decorative-option5-strong | `--hop-decorative-option5-surface-strong` | #9fd2f7 |
| decorative-option5-weak | `--hop-decorative-option5-surface-weak` | #d9efff |
| decorative-option5-weak-hover | `--hop-decorative-option5-surface-weak-hover` | #bae6ff |
| decorative-option5-weakest | `--hop-decorative-option5-surface-weakest` | #f0f8ff |
| decorative-option5 | `--hop-decorative-option5-text` | #00274b |
| decorative-option5-weak | `--hop-decorative-option5-text-weak` | #5d9acd |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 6
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option6 | `--hop-decorative-option6-border` | #eac96d |
| decorative-option6 | `--hop-decorative-option6-icon` | #2f250d |
| decorative-option6 | `--hop-decorative-option6-surface` | #f7e694 |
| decorative-option6-hover | `--hop-decorative-option6-surface-hover` | #eac96d |
| decorative-option6-strong | `--hop-decorative-option6-surface-strong` | #eac96d |
| decorative-option6-weak | `--hop-decorative-option6-surface-weak` | #fff2b8 |
| decorative-option6-weak-hover | `--hop-decorative-option6-surface-weak-hover` | #f7e694 |
| decorative-option6-weakest | `--hop-decorative-option6-surface-weakest` | #fff8d6 |
| decorative-option6 | `--hop-decorative-option6-text` | #2f250d |
| decorative-option6-weak | `--hop-decorative-option6-text-weak` | #e2a934 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option6 | `--hop-decorative-option6-border` | #eac96d |
| decorative-option6 | `--hop-decorative-option6-icon` | #2f250d |
| decorative-option6 | `--hop-decorative-option6-surface` | #f7e694 |
| decorative-option6-hover | `--hop-decorative-option6-surface-hover` | #eac96d |
| decorative-option6-strong | `--hop-decorative-option6-surface-strong` | #eac96d |
| decorative-option6-weak | `--hop-decorative-option6-surface-weak` | #fff2b8 |
| decorative-option6-weak-hover | `--hop-decorative-option6-surface-weak-hover` | #f7e694 |
| decorative-option6-weakest | `--hop-decorative-option6-surface-weakest` | #fff8d6 |
| decorative-option6 | `--hop-decorative-option6-text` | #2f250d |
| decorative-option6-weak | `--hop-decorative-option6-text-weak` | #e2a934 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 7
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option7 | `--hop-decorative-option7-border` | #d4cbc0 |
| decorative-option7 | `--hop-decorative-option7-icon` | #2a2620 |
| decorative-option7 | `--hop-decorative-option7-surface` | #e5ded6 |
| decorative-option7-hover | `--hop-decorative-option7-surface-hover` | #d4cbc0 |
| decorative-option7-strong | `--hop-decorative-option7-surface-strong` | #d4cbc0 |
| decorative-option7-weak | `--hop-decorative-option7-surface-weak` | #f0eae3 |
| decorative-option7-weak-hover | `--hop-decorative-option7-surface-weak-hover` | #e5ded6 |
| decorative-option7-weakest | `--hop-decorative-option7-surface-weakest` | #fef6ef |
| decorative-option7 | `--hop-decorative-option7-text` | #2a2620 |
| decorative-option7-weak | `--hop-decorative-option7-text-weak` | #776a59 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option7 | `--hop-decorative-option7-border` | #d4cbc0 |
| decorative-option7 | `--hop-decorative-option7-icon` | #2a2620 |
| decorative-option7 | `--hop-decorative-option7-surface` | #e5ded6 |
| decorative-option7-hover | `--hop-decorative-option7-surface-hover` | #d4cbc0 |
| decorative-option7-strong | `--hop-decorative-option7-surface-strong` | #d4cbc0 |
| decorative-option7-weak | `--hop-decorative-option7-surface-weak` | #f0eae3 |
| decorative-option7-weak-hover | `--hop-decorative-option7-surface-weak-hover` | #e5ded6 |
| decorative-option7-weakest | `--hop-decorative-option7-surface-weakest` | #fef6ef |
| decorative-option7 | `--hop-decorative-option7-text` | #2a2620 |
| decorative-option7-weak | `--hop-decorative-option7-text-weak` | #776a59 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 8
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option8 | `--hop-decorative-option8-border` | #ffbcb7 |
| decorative-option8 | `--hop-decorative-option8-icon` | #431a17 |
| decorative-option8 | `--hop-decorative-option8-surface` | #ffd6d3 |
| decorative-option8-hover | `--hop-decorative-option8-surface-hover` | #ff8e8e |
| decorative-option8-strong | `--hop-decorative-option8-surface-strong` | #ffbcb7 |
| decorative-option8-weak | `--hop-decorative-option8-surface-weak` | #fde6e5 |
| decorative-option8-weak-hover | `--hop-decorative-option8-surface-weak-hover` | #ffd6d3 |
| decorative-option8-weakest | `--hop-decorative-option8-surface-weakest` | #fdf6f6 |
| decorative-option8 | `--hop-decorative-option8-text` | #431a17 |
| decorative-option8-weak | `--hop-decorative-option8-text-weak` | #fa4d59 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option8 | `--hop-decorative-option8-border` | #ffbcb7 |
| decorative-option8 | `--hop-decorative-option8-icon` | #431a17 |
| decorative-option8 | `--hop-decorative-option8-surface` | #ffd6d3 |
| decorative-option8-hover | `--hop-decorative-option8-surface-hover` | #ff8e8e |
| decorative-option8-strong | `--hop-decorative-option8-surface-strong` | #ffbcb7 |
| decorative-option8-weak | `--hop-decorative-option8-surface-weak` | #fde6e5 |
| decorative-option8-weak-hover | `--hop-decorative-option8-surface-weak-hover` | #ffd6d3 |
| decorative-option8-weakest | `--hop-decorative-option8-surface-weakest` | #fdf6f6 |
| decorative-option8 | `--hop-decorative-option8-text` | #431a17 |
| decorative-option8-weak | `--hop-decorative-option8-text-weak` | #fa4d59 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 9
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option9 | `--hop-decorative-option9-border` | #cbcdd2 |
| decorative-option9 | `--hop-decorative-option9-icon` | #ffffff |
| decorative-option9 | `--hop-decorative-option9-surface` | #787a7e |
| decorative-option9-hover | `--hop-decorative-option9-surface-hover` | #6c6e72 |
| decorative-option9-strong | `--hop-decorative-option9-surface-strong` | #313335 |
| decorative-option9-weak | `--hop-decorative-option9-surface-weak` | #96989d |
| decorative-option9-weak-hover | `--hop-decorative-option9-surface-weak-hover` | #787a7e |
| decorative-option9-weakest | `--hop-decorative-option9-surface-weakest` | #b3b5ba |
| decorative-option9 | `--hop-decorative-option9-text` | #ffffff |
| decorative-option9-weak | `--hop-decorative-option9-text-weak` | #96989d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option9 | `--hop-decorative-option9-border` | #cbcdd2 |
| decorative-option9 | `--hop-decorative-option9-icon` | #ffffff |
| decorative-option9 | `--hop-decorative-option9-surface` | #787a7e |
| decorative-option9-hover | `--hop-decorative-option9-surface-hover` | #6c6e72 |
| decorative-option9-strong | `--hop-decorative-option9-surface-strong` | #313335 |
| decorative-option9-weak | `--hop-decorative-option9-surface-weak` | #96989d |
| decorative-option9-weak-hover | `--hop-decorative-option9-surface-weak-hover` | #787a7e |
| decorative-option9-weakest | `--hop-decorative-option9-surface-weakest` | #b3b5ba |
| decorative-option9 | `--hop-decorative-option9-text` | #ffffff |
| decorative-option9-weak | `--hop-decorative-option9-text-weak` | #96989d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Status
##### Neutral
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-neutral | `--hop-status-neutral-border` | #313335 |
| status-neutral-disabled | `--hop-status-neutral-border-disabled` | #eef0f2 |
| status-neutral-hover | `--hop-status-neutral-border-hover` | #484a4d |
| status-neutral-press | `--hop-status-neutral-border-press` | #232426 |
| status-neutral-selected | `--hop-status-neutral-border-selected` | #313335 |
| status-neutral | `--hop-status-neutral-icon` | #313335 |
| status-neutral-disabled | `--hop-status-neutral-icon-disabled` | #96989d |
| status-neutral-hover | `--hop-status-neutral-icon-hover` | #484a4d |
| status-neutral-press | `--hop-status-neutral-icon-press` | #232426 |
| status-neutral-selected | `--hop-status-neutral-icon-selected` | #ffffff |
| status-neutral | `--hop-status-neutral-surface` | #ffffff |
| status-neutral-disabled | `--hop-status-neutral-surface-disabled` | #eef0f2 |
| status-neutral-hover | `--hop-status-neutral-surface-hover` | #f8f9fa |
| status-neutral-press | `--hop-status-neutral-surface-press` | #eef0f2 |
| status-neutral-selected | `--hop-status-neutral-surface-selected` | #313335 |
| status-neutral-strong | `--hop-status-neutral-surface-strong` | #b3b5ba |
| status-neutral | `--hop-status-neutral-text` | #313335 |
| status-neutral-disabled | `--hop-status-neutral-text-disabled` | #96989d |
| status-neutral-hover | `--hop-status-neutral-text-hover` | #484a4d |
| status-neutral-press | `--hop-status-neutral-text-press` | #232426 |
| status-neutral-selected | `--hop-status-neutral-text-selected` | #ffffff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-neutral | `--hop-status-neutral-border` | #313335 |
| status-neutral-disabled | `--hop-status-neutral-border-disabled` | #eef0f2 |
| status-neutral-hover | `--hop-status-neutral-border-hover` | #484a4d |
| status-neutral-press | `--hop-status-neutral-border-press` | #232426 |
| status-neutral-selected | `--hop-status-neutral-border-selected` | #313335 |
| status-neutral | `--hop-status-neutral-icon` | #313335 |
| status-neutral-disabled | `--hop-status-neutral-icon-disabled` | #96989d |
| status-neutral-hover | `--hop-status-neutral-icon-hover` | #484a4d |
| status-neutral-press | `--hop-status-neutral-icon-press` | #232426 |
| status-neutral-selected | `--hop-status-neutral-icon-selected` | #ffffff |
| status-neutral | `--hop-status-neutral-surface` | #ffffff |
| status-neutral-disabled | `--hop-status-neutral-surface-disabled` | #eef0f2 |
| status-neutral-hover | `--hop-status-neutral-surface-hover` | #f8f9fa |
| status-neutral-press | `--hop-status-neutral-surface-press` | #eef0f2 |
| status-neutral-selected | `--hop-status-neutral-surface-selected` | #313335 |
| status-neutral-strong | `--hop-status-neutral-surface-strong` | #b3b5ba |
| status-neutral | `--hop-status-neutral-text` | #313335 |
| status-neutral-disabled | `--hop-status-neutral-text-disabled` | #96989d |
| status-neutral-hover | `--hop-status-neutral-text-hover` | #484a4d |
| status-neutral-press | `--hop-status-neutral-text-press` | #232426 |
| status-neutral-selected | `--hop-status-neutral-text-selected` | #ffffff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Progress
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-progress | `--hop-status-progress-border` | #6c8ffd |
| status-progress-disabled | `--hop-status-progress-border-disabled` | #e6ebff |
| status-progress-hover | `--hop-status-progress-border-hover` | #4767fe |
| status-progress-press | `--hop-status-progress-border-press` | #3b57ff |
| status-progress-selected | `--hop-status-progress-border-selected` | #4767fe |
| status-progress | `--hop-status-progress-icon` | #2a43e8 |
| status-progress-disabled | `--hop-status-progress-icon-disabled` | #95b1ff |
| status-progress-hover | `--hop-status-progress-icon-hover` | #2040c7 |
| status-progress-press | `--hop-status-progress-icon-press` | #1b3587 |
| status-progress-selected | `--hop-status-progress-icon-selected` | #3b57ff |
| status-progress | `--hop-status-progress-surface` | #e6ebff |
| status-progress-disabled | `--hop-status-progress-surface-disabled` | #f5f6ff |
| status-progress-hover | `--hop-status-progress-surface-hover` | #d6e0ff |
| status-progress-press | `--hop-status-progress-surface-press` | #b9cbff |
| status-progress-selected | `--hop-status-progress-surface-selected` | #e6ebff |
| status-progress-strong | `--hop-status-progress-surface-strong` | #95b1ff |
| status-progress | `--hop-status-progress-text` | #2a43e8 |
| status-progress-disabled | `--hop-status-progress-text-disabled` | #95b1ff |
| status-progress-hover | `--hop-status-progress-text-hover` | #2040c7 |
| status-progress-press | `--hop-status-progress-text-press` | #1b3587 |
| status-progress-selected | `--hop-status-progress-text-selected` | #3b57ff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-progress | `--hop-status-progress-border` | #6c8ffd |
| status-progress-disabled | `--hop-status-progress-border-disabled` | #e6ebff |
| status-progress-hover | `--hop-status-progress-border-hover` | #4767fe |
| status-progress-press | `--hop-status-progress-border-press` | #3b57ff |
| status-progress-selected | `--hop-status-progress-border-selected` | #4767fe |
| status-progress | `--hop-status-progress-icon` | #2a43e8 |
| status-progress-disabled | `--hop-status-progress-icon-disabled` | #95b1ff |
| status-progress-hover | `--hop-status-progress-icon-hover` | #2040c7 |
| status-progress-press | `--hop-status-progress-icon-press` | #1b3587 |
| status-progress-selected | `--hop-status-progress-icon-selected` | #3b57ff |
| status-progress | `--hop-status-progress-surface` | #e6ebff |
| status-progress-disabled | `--hop-status-progress-surface-disabled` | #f5f6ff |
| status-progress-hover | `--hop-status-progress-surface-hover` | #d6e0ff |
| status-progress-press | `--hop-status-progress-surface-press` | #b9cbff |
| status-progress-selected | `--hop-status-progress-surface-selected` | #e6ebff |
| status-progress-strong | `--hop-status-progress-surface-strong` | #95b1ff |
| status-progress | `--hop-status-progress-text` | #2a43e8 |
| status-progress-disabled | `--hop-status-progress-text-disabled` | #95b1ff |
| status-progress-hover | `--hop-status-progress-text-hover` | #2040c7 |
| status-progress-press | `--hop-status-progress-text-press` | #1b3587 |
| status-progress-selected | `--hop-status-progress-text-selected` | #3b57ff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Positive
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-positive | `--hop-status-positive-border` | #47a584 |
| status-positive-disabled | `--hop-status-positive-border-disabled` | #e3f3b9 |
| status-positive-hover | `--hop-status-positive-border-hover` | #188a71 |
| status-positive-press | `--hop-status-positive-border-press` | #0c796b |
| status-positive-selected | `--hop-status-positive-border-selected` | #115a52 |
| status-positive | `--hop-status-positive-icon` | #0a6f64 |
| status-positive-disabled | `--hop-status-positive-icon-disabled` | #7dc291 |
| status-positive-hover | `--hop-status-positive-icon-hover` | #115a52 |
| status-positive-press | `--hop-status-positive-icon-press` | #16433d |
| status-positive-selected | `--hop-status-positive-icon-selected` | #115a52 |
| status-positive | `--hop-status-positive-surface` | #e3f3b9 |
| status-positive-disabled | `--hop-status-positive-surface-disabled` | #f4f9e9 |
| status-positive-hover | `--hop-status-positive-surface-hover` | #cde8ac |
| status-positive-press | `--hop-status-positive-surface-press` | #aad89d |
| status-positive-selected | `--hop-status-positive-surface-selected` | #e3f3b9 |
| status-positive-strong | `--hop-status-positive-surface-strong` | #7dc291 |
| status-positive | `--hop-status-positive-text` | #0a6f64 |
| status-positive-disabled | `--hop-status-positive-text-disabled` | #7dc291 |
| status-positive-hover | `--hop-status-positive-text-hover` | #115a52 |
| status-positive-press | `--hop-status-positive-text-press` | #16433d |
| status-positive-selected | `--hop-status-positive-text-selected` | #115a52 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-positive | `--hop-status-positive-border` | #47a584 |
| status-positive-disabled | `--hop-status-positive-border-disabled` | #e3f3b9 |
| status-positive-hover | `--hop-status-positive-border-hover` | #188a71 |
| status-positive-press | `--hop-status-positive-border-press` | #0c796b |
| status-positive-selected | `--hop-status-positive-border-selected` | #115a52 |
| status-positive | `--hop-status-positive-icon` | #0a6f64 |
| status-positive-disabled | `--hop-status-positive-icon-disabled` | #7dc291 |
| status-positive-hover | `--hop-status-positive-icon-hover` | #115a52 |
| status-positive-press | `--hop-status-positive-icon-press` | #16433d |
| status-positive-selected | `--hop-status-positive-icon-selected` | #115a52 |
| status-positive | `--hop-status-positive-surface` | #e3f3b9 |
| status-positive-disabled | `--hop-status-positive-surface-disabled` | #f4f9e9 |
| status-positive-hover | `--hop-status-positive-surface-hover` | #cde8ac |
| status-positive-press | `--hop-status-positive-surface-press` | #aad89d |
| status-positive-selected | `--hop-status-positive-surface-selected` | #e3f3b9 |
| status-positive-strong | `--hop-status-positive-surface-strong` | #7dc291 |
| status-positive | `--hop-status-positive-text` | #0a6f64 |
| status-positive-disabled | `--hop-status-positive-text-disabled` | #7dc291 |
| status-positive-hover | `--hop-status-positive-text-hover` | #115a52 |
| status-positive-press | `--hop-status-positive-text-press` | #16433d |
| status-positive-selected | `--hop-status-positive-text-selected` | #115a52 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Caution
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-caution | `--hop-status-caution-border` | #e57723 |
| status-caution-disabled | `--hop-status-caution-border-disabled` | #ffe8d3 |
| status-caution-hover | `--hop-status-caution-border-hover` | #c95109 |
| status-caution-press | `--hop-status-caution-border-press` | #ba4705 |
| status-caution-selected | `--hop-status-caution-border-selected` | #8c3504 |
| status-caution | `--hop-status-caution-icon` | #ab4104 |
| status-caution-disabled | `--hop-status-caution-icon-disabled` | #ff9b3f |
| status-caution-hover | `--hop-status-caution-icon-hover` | #8c3504 |
| status-caution-press | `--hop-status-caution-icon-press` | #692803 |
| status-caution-selected | `--hop-status-caution-icon-selected` | #8c3504 |
| status-caution | `--hop-status-caution-surface` | #ffe8d3 |
| status-caution-disabled | `--hop-status-caution-surface-disabled` | #fff5e9 |
| status-caution-hover | `--hop-status-caution-surface-hover` | #ffd8be |
| status-caution-press | `--hop-status-caution-surface-press` | #ffbf92 |
| status-caution-selected | `--hop-status-caution-surface-selected` | #ffe8d3 |
| status-caution-strong | `--hop-status-caution-surface-strong` | #ff9b3f |
| status-caution | `--hop-status-caution-text` | #ab4104 |
| status-caution-disabled | `--hop-status-caution-text-disabled` | #ff9b3f |
| status-caution-hover | `--hop-status-caution-text-hover` | #8c3504 |
| status-caution-press | `--hop-status-caution-text-press` | #692803 |
| status-caution-selected | `--hop-status-caution-text-selected` | #8c3504 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-caution | `--hop-status-caution-border` | #e57723 |
| status-caution-disabled | `--hop-status-caution-border-disabled` | #ffe8d3 |
| status-caution-hover | `--hop-status-caution-border-hover` | #c95109 |
| status-caution-press | `--hop-status-caution-border-press` | #ba4705 |
| status-caution-selected | `--hop-status-caution-border-selected` | #8c3504 |
| status-caution | `--hop-status-caution-icon` | #ab4104 |
| status-caution-disabled | `--hop-status-caution-icon-disabled` | #ff9b3f |
| status-caution-hover | `--hop-status-caution-icon-hover` | #8c3504 |
| status-caution-press | `--hop-status-caution-icon-press` | #692803 |
| status-caution-selected | `--hop-status-caution-icon-selected` | #8c3504 |
| status-caution | `--hop-status-caution-surface` | #ffe8d3 |
| status-caution-disabled | `--hop-status-caution-surface-disabled` | #fff5e9 |
| status-caution-hover | `--hop-status-caution-surface-hover` | #ffd8be |
| status-caution-press | `--hop-status-caution-surface-press` | #ffbf92 |
| status-caution-selected | `--hop-status-caution-surface-selected` | #ffe8d3 |
| status-caution-strong | `--hop-status-caution-surface-strong` | #ff9b3f |
| status-caution | `--hop-status-caution-text` | #ab4104 |
| status-caution-disabled | `--hop-status-caution-text-disabled` | #ff9b3f |
| status-caution-hover | `--hop-status-caution-text-hover` | #8c3504 |
| status-caution-press | `--hop-status-caution-text-press` | #692803 |
| status-caution-selected | `--hop-status-caution-text-selected` | #8c3504 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Negative
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-negative | `--hop-status-negative-border` | #fa4d59 |
| status-negative-disabled | `--hop-status-negative-border-disabled` | #fde6e5 |
| status-negative-hover | `--hop-status-negative-border-hover` | #df3236 |
| status-negative-press | `--hop-status-negative-border-press` | #cb2e31 |
| status-negative-selected | `--hop-status-negative-border-selected` | #952927 |
| status-negative | `--hop-status-negative-icon` | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-icon-disabled` | #ff8e8e |
| status-negative-hover | `--hop-status-negative-icon-hover` | #952927 |
| status-negative-press | `--hop-status-negative-icon-press` | #6c2320 |
| status-negative-selected | `--hop-status-negative-icon-selected` | #952927 |
| status-negative | `--hop-status-negative-surface` | #fde6e5 |
| status-negative-disabled | `--hop-status-negative-surface-disabled` | #fdf6f6 |
| status-negative-hover | `--hop-status-negative-surface-hover` | #ffd6d3 |
| status-negative-press | `--hop-status-negative-surface-press` | #ffbcb7 |
| status-negative-selected | `--hop-status-negative-surface-selected` | #fde6e5 |
| status-negative-strong | `--hop-status-negative-surface-strong` | #ff8e8e |
| status-negative | `--hop-status-negative-text` | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-text-disabled` | #ff8e8e |
| status-negative-hover | `--hop-status-negative-text-hover` | #952927 |
| status-negative-press | `--hop-status-negative-text-press` | #6c2320 |
| status-negative-selected | `--hop-status-negative-text-selected` | #952927 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-negative | `--hop-status-negative-border` | #fa4d59 |
| status-negative-disabled | `--hop-status-negative-border-disabled` | #fde6e5 |
| status-negative-hover | `--hop-status-negative-border-hover` | #df3236 |
| status-negative-press | `--hop-status-negative-border-press` | #cb2e31 |
| status-negative-selected | `--hop-status-negative-border-selected` | #952927 |
| status-negative | `--hop-status-negative-icon` | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-icon-disabled` | #ff8e8e |
| status-negative-hover | `--hop-status-negative-icon-hover` | #952927 |
| status-negative-press | `--hop-status-negative-icon-press` | #6c2320 |
| status-negative-selected | `--hop-status-negative-icon-selected` | #952927 |
| status-negative | `--hop-status-negative-surface` | #fde6e5 |
| status-negative-disabled | `--hop-status-negative-surface-disabled` | #fdf6f6 |
| status-negative-hover | `--hop-status-negative-surface-hover` | #ffd6d3 |
| status-negative-press | `--hop-status-negative-surface-press` | #ffbcb7 |
| status-negative-selected | `--hop-status-negative-surface-selected` | #fde6e5 |
| status-negative-strong | `--hop-status-negative-surface-strong` | #ff8e8e |
| status-negative | `--hop-status-negative-text` | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-text-disabled` | #ff8e8e |
| status-negative-hover | `--hop-status-negative-text-hover` | #952927 |
| status-negative-press | `--hop-status-negative-text-press` | #6c2320 |
| status-negative-selected | `--hop-status-negative-text-selected` | #952927 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Inactive
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-inactive | `--hop-status-inactive-border` | #96989d |
| status-inactive-disabled | `--hop-status-inactive-border-disabled` | #eef0f2 |
| status-inactive-hover | `--hop-status-inactive-border-hover` | #787a7e |
| status-inactive-press | `--hop-status-inactive-border-press` | #6c6e72 |
| status-inactive-selected | `--hop-status-inactive-border-selected` | #484a4d |
| status-inactive | `--hop-status-inactive-icon` | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-icon-disabled` | #b3b5ba |
| status-inactive-hover | `--hop-status-inactive-icon-hover` | #484a4d |
| status-inactive-press | `--hop-status-inactive-icon-press` | #313335 |
| status-inactive-selected | `--hop-status-inactive-icon-selected` | #484a4d |
| status-inactive | `--hop-status-inactive-surface` | #eef0f2 |
| status-inactive-disabled | `--hop-status-inactive-surface-disabled` | #f8f9fa |
| status-inactive-hover | `--hop-status-inactive-surface-hover` | #e1e3e7 |
| status-inactive-press | `--hop-status-inactive-surface-press` | #cbcdd2 |
| status-inactive-selected | `--hop-status-inactive-surface-selected` | #eef0f2 |
| status-inactive-strong | `--hop-status-inactive-surface-strong` | #cbcdd2 |
| status-inactive | `--hop-status-inactive-text` | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-text-disabled` | #b3b5ba |
| status-inactive-hover | `--hop-status-inactive-text-hover` | #484a4d |
| status-inactive-press | `--hop-status-inactive-text-press` | #313335 |
| status-inactive-selected | `--hop-status-inactive-text-selected` | #484a4d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------ | ---------------------------------------- | ------- |
| status-inactive | `--hop-status-inactive-border` | #96989d |
| status-inactive-disabled | `--hop-status-inactive-border-disabled` | #eef0f2 |
| status-inactive-hover | `--hop-status-inactive-border-hover` | #787a7e |
| status-inactive-press | `--hop-status-inactive-border-press` | #6c6e72 |
| status-inactive-selected | `--hop-status-inactive-border-selected` | #484a4d |
| status-inactive | `--hop-status-inactive-icon` | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-icon-disabled` | #b3b5ba |
| status-inactive-hover | `--hop-status-inactive-icon-hover` | #484a4d |
| status-inactive-press | `--hop-status-inactive-icon-press` | #313335 |
| status-inactive-selected | `--hop-status-inactive-icon-selected` | #484a4d |
| status-inactive | `--hop-status-inactive-surface` | #eef0f2 |
| status-inactive-disabled | `--hop-status-inactive-surface-disabled` | #f8f9fa |
| status-inactive-hover | `--hop-status-inactive-surface-hover` | #e1e3e7 |
| status-inactive-press | `--hop-status-inactive-surface-press` | #cbcdd2 |
| status-inactive-selected | `--hop-status-inactive-surface-selected` | #eef0f2 |
| status-inactive-strong | `--hop-status-inactive-surface-strong` | #cbcdd2 |
| status-inactive | `--hop-status-inactive-text` | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-text-disabled` | #b3b5ba |
| status-inactive-hover | `--hop-status-inactive-text-hover` | #484a4d |
| status-inactive-press | `--hop-status-inactive-text-press` | #313335 |
| status-inactive-selected | `--hop-status-inactive-text-selected` | #484a4d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 1
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option1 | `--hop-status-option1-border` | #5d9acd |
| status-option1-disabled | `--hop-status-option1-border-disabled` | #d9efff |
| status-option1-hover | `--hop-status-option1-border-hover` | #3a7bb2 |
| status-option1-press | `--hop-status-option1-border-press` | #2e70a8 |
| status-option1-selected | `--hop-status-option1-border-selected` | #0a538b |
| status-option1 | `--hop-status-option1-icon` | #23669f |
| status-option1-disabled | `--hop-status-option1-icon-disabled` | #81b9e4 |
| status-option1-hover | `--hop-status-option1-icon-hover` | #0a538b |
| status-option1-press | `--hop-status-option1-icon-press` | #003d70 |
| status-option1-selected | `--hop-status-option1-icon-selected` | #0a538b |
| status-option1 | `--hop-status-option1-surface` | #d9efff |
| status-option1-disabled | `--hop-status-option1-surface-disabled` | #f0f8ff |
| status-option1-hover | `--hop-status-option1-surface-hover` | #bae6ff |
| status-option1-press | `--hop-status-option1-surface-press` | #9fd2f7 |
| status-option1-selected | `--hop-status-option1-surface-selected` | #d9efff |
| status-option1-strong | `--hop-status-option1-surface-strong` | #81b9e4 |
| status-option1 | `--hop-status-option1-text` | #23669f |
| status-option1-disabled | `--hop-status-option1-text-disabled` | #81b9e4 |
| status-option1-hover | `--hop-status-option1-text-hover` | #0a538b |
| status-option1-press | `--hop-status-option1-text-press` | #003d70 |
| status-option1-selected | `--hop-status-option1-text-selected` | #0a538b |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option1 | `--hop-status-option1-border` | #5d9acd |
| status-option1-disabled | `--hop-status-option1-border-disabled` | #d9efff |
| status-option1-hover | `--hop-status-option1-border-hover` | #3a7bb2 |
| status-option1-press | `--hop-status-option1-border-press` | #2e70a8 |
| status-option1-selected | `--hop-status-option1-border-selected` | #0a538b |
| status-option1 | `--hop-status-option1-icon` | #23669f |
| status-option1-disabled | `--hop-status-option1-icon-disabled` | #81b9e4 |
| status-option1-hover | `--hop-status-option1-icon-hover` | #0a538b |
| status-option1-press | `--hop-status-option1-icon-press` | #003d70 |
| status-option1-selected | `--hop-status-option1-icon-selected` | #0a538b |
| status-option1 | `--hop-status-option1-surface` | #d9efff |
| status-option1-disabled | `--hop-status-option1-surface-disabled` | #f0f8ff |
| status-option1-hover | `--hop-status-option1-surface-hover` | #bae6ff |
| status-option1-press | `--hop-status-option1-surface-press` | #9fd2f7 |
| status-option1-selected | `--hop-status-option1-surface-selected` | #d9efff |
| status-option1-strong | `--hop-status-option1-surface-strong` | #81b9e4 |
| status-option1 | `--hop-status-option1-text` | #23669f |
| status-option1-disabled | `--hop-status-option1-text-disabled` | #81b9e4 |
| status-option1-hover | `--hop-status-option1-text-hover` | #0a538b |
| status-option1-press | `--hop-status-option1-text-press` | #003d70 |
| status-option1-selected | `--hop-status-option1-text-selected` | #0a538b |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 2
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option2 | `--hop-status-option2-border` | #8d91dc |
| status-option2-disabled | `--hop-status-option2-border-disabled` | #eae9fb |
| status-option2-hover | `--hop-status-option2-border-hover` | #6b6ecc |
| status-option2-press | `--hop-status-option2-border-press` | #5f61c5 |
| status-option2-selected | `--hop-status-option2-border-selected` | #433fac |
| status-option2 | `--hop-status-option2-icon` | #5454be |
| status-option2-disabled | `--hop-status-option2-icon-disabled` | #aeb3e8 |
| status-option2-hover | `--hop-status-option2-icon-hover` | #433fac |
| status-option2-press | `--hop-status-option2-icon-press` | #322b8d |
| status-option2-selected | `--hop-status-option2-icon-selected` | #433fac |
| status-option2 | `--hop-status-option2-surface` | #eae9fb |
| status-option2-disabled | `--hop-status-option2-surface-disabled` | #f6f5ff |
| status-option2-hover | `--hop-status-option2-surface-hover` | #ddddf7 |
| status-option2-press | `--hop-status-option2-surface-press` | #c8caf0 |
| status-option2-selected | `--hop-status-option2-surface-selected` | #eae9fb |
| status-option2-strong | `--hop-status-option2-surface-strong` | #aeb3e8 |
| status-option2 | `--hop-status-option2-text` | #5454be |
| status-option2-disabled | `--hop-status-option2-text-disabled` | #aeb3e8 |
| status-option2-hover | `--hop-status-option2-text-hover` | #433fac |
| status-option2-press | `--hop-status-option2-text-press` | #322b8d |
| status-option2-selected | `--hop-status-option2-text-selected` | #433fac |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option2 | `--hop-status-option2-border` | #8d91dc |
| status-option2-disabled | `--hop-status-option2-border-disabled` | #eae9fb |
| status-option2-hover | `--hop-status-option2-border-hover` | #6b6ecc |
| status-option2-press | `--hop-status-option2-border-press` | #5f61c5 |
| status-option2-selected | `--hop-status-option2-border-selected` | #433fac |
| status-option2 | `--hop-status-option2-icon` | #5454be |
| status-option2-disabled | `--hop-status-option2-icon-disabled` | #aeb3e8 |
| status-option2-hover | `--hop-status-option2-icon-hover` | #433fac |
| status-option2-press | `--hop-status-option2-icon-press` | #322b8d |
| status-option2-selected | `--hop-status-option2-icon-selected` | #433fac |
| status-option2 | `--hop-status-option2-surface` | #eae9fb |
| status-option2-disabled | `--hop-status-option2-surface-disabled` | #f6f5ff |
| status-option2-hover | `--hop-status-option2-surface-hover` | #ddddf7 |
| status-option2-press | `--hop-status-option2-surface-press` | #c8caf0 |
| status-option2-selected | `--hop-status-option2-surface-selected` | #eae9fb |
| status-option2-strong | `--hop-status-option2-surface-strong` | #aeb3e8 |
| status-option2 | `--hop-status-option2-text` | #5454be |
| status-option2-disabled | `--hop-status-option2-text-disabled` | #aeb3e8 |
| status-option2-hover | `--hop-status-option2-text-hover` | #433fac |
| status-option2-press | `--hop-status-option2-text-press` | #322b8d |
| status-option2-selected | `--hop-status-option2-text-selected` | #433fac |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 3
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option3 | `--hop-status-option3-border` | #5da18c |
| status-option3-disabled | `--hop-status-option3-border-disabled` | #cff4ef |
| status-option3-hover | `--hop-status-option3-border-hover` | #38836a |
| status-option3-press | `--hop-status-option3-border-press` | #2b795e |
| status-option3-selected | `--hop-status-option3-border-selected` | #cff4ef |
| status-option3 | `--hop-status-option3-icon` | #206f54 |
| status-option3-disabled | `--hop-status-option3-icon-disabled` | #83beaf |
| status-option3-hover | `--hop-status-option3-icon-hover` | #055c41 |
| status-option3-press | `--hop-status-option3-icon-press` | #00452d |
| status-option3-selected | `--hop-status-option3-icon-selected` | #055c41 |
| status-option3 | `--hop-status-option3-surface` | #cff4ef |
| status-option3-disabled | `--hop-status-option3-surface-disabled` | #ddfdf9 |
| status-option3-hover | `--hop-status-option3-surface-hover` | #bde8e1 |
| status-option3-press | `--hop-status-option3-surface-press` | #a3d6cb |
| status-option3-selected | `--hop-status-option3-surface-selected` | #055c41 |
| status-option3-strong | `--hop-status-option3-surface-strong` | #83beaf |
| status-option3 | `--hop-status-option3-text` | #206f54 |
| status-option3-disabled | `--hop-status-option3-text-disabled` | #83beaf |
| status-option3-hover | `--hop-status-option3-text-hover` | #055c41 |
| status-option3-press | `--hop-status-option3-text-press` | #00452d |
| status-option3-selected | `--hop-status-option3-text-selected` | #055c41 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option3 | `--hop-status-option3-border` | #5da18c |
| status-option3-disabled | `--hop-status-option3-border-disabled` | #cff4ef |
| status-option3-hover | `--hop-status-option3-border-hover` | #38836a |
| status-option3-press | `--hop-status-option3-border-press` | #2b795e |
| status-option3-selected | `--hop-status-option3-border-selected` | #cff4ef |
| status-option3 | `--hop-status-option3-icon` | #206f54 |
| status-option3-disabled | `--hop-status-option3-icon-disabled` | #83beaf |
| status-option3-hover | `--hop-status-option3-icon-hover` | #055c41 |
| status-option3-press | `--hop-status-option3-icon-press` | #00452d |
| status-option3-selected | `--hop-status-option3-icon-selected` | #055c41 |
| status-option3 | `--hop-status-option3-surface` | #cff4ef |
| status-option3-disabled | `--hop-status-option3-surface-disabled` | #ddfdf9 |
| status-option3-hover | `--hop-status-option3-surface-hover` | #bde8e1 |
| status-option3-press | `--hop-status-option3-surface-press` | #a3d6cb |
| status-option3-selected | `--hop-status-option3-surface-selected` | #055c41 |
| status-option3-strong | `--hop-status-option3-surface-strong` | #83beaf |
| status-option3 | `--hop-status-option3-text` | #206f54 |
| status-option3-disabled | `--hop-status-option3-text-disabled` | #83beaf |
| status-option3-hover | `--hop-status-option3-text-hover` | #055c41 |
| status-option3-press | `--hop-status-option3-text-press` | #00452d |
| status-option3-selected | `--hop-status-option3-text-selected` | #055c41 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 4
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option4 | `--hop-status-option4-border` | #7c9aa3 |
| status-option4-disabled | `--hop-status-option4-border-disabled` | #e1eef1 |
| status-option4-hover | `--hop-status-option4-border-hover` | #5e7b84 |
| status-option4-press | `--hop-status-option4-border-press` | #557079 |
| status-option4-selected | `--hop-status-option4-border-selected` | #40535a |
| status-option4 | `--hop-status-option4-icon` | #4e6770 |
| status-option4-disabled | `--hop-status-option4-icon-disabled` | #9cb7be |
| status-option4-hover | `--hop-status-option4-icon-hover` | #40535a |
| status-option4-press | `--hop-status-option4-icon-press` | #313e43 |
| status-option4-selected | `--hop-status-option4-icon-selected` | #40535a |
| status-option4 | `--hop-status-option4-surface` | #e1eef1 |
| status-option4-disabled | `--hop-status-option4-surface-disabled` | #f2f8fa |
| status-option4-hover | `--hop-status-option4-surface-hover` | #d2e3e7 |
| status-option4-press | `--hop-status-option4-surface-press` | #bad0d5 |
| status-option4-selected | `--hop-status-option4-surface-selected` | #e1eef1 |
| status-option4-strong | `--hop-status-option4-surface-strong` | #9cb7be |
| status-option4 | `--hop-status-option4-text` | #4e6770 |
| status-option4-disabled | `--hop-status-option4-text-disabled` | #9cb7be |
| status-option4-hover | `--hop-status-option4-text-hover` | #40535a |
| status-option4-press | `--hop-status-option4-text-press` | #313e43 |
| status-option4-selected | `--hop-status-option4-text-selected` | #40535a |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option4 | `--hop-status-option4-border` | #7c9aa3 |
| status-option4-disabled | `--hop-status-option4-border-disabled` | #e1eef1 |
| status-option4-hover | `--hop-status-option4-border-hover` | #5e7b84 |
| status-option4-press | `--hop-status-option4-border-press` | #557079 |
| status-option4-selected | `--hop-status-option4-border-selected` | #40535a |
| status-option4 | `--hop-status-option4-icon` | #4e6770 |
| status-option4-disabled | `--hop-status-option4-icon-disabled` | #9cb7be |
| status-option4-hover | `--hop-status-option4-icon-hover` | #40535a |
| status-option4-press | `--hop-status-option4-icon-press` | #313e43 |
| status-option4-selected | `--hop-status-option4-icon-selected` | #40535a |
| status-option4 | `--hop-status-option4-surface` | #e1eef1 |
| status-option4-disabled | `--hop-status-option4-surface-disabled` | #f2f8fa |
| status-option4-hover | `--hop-status-option4-surface-hover` | #d2e3e7 |
| status-option4-press | `--hop-status-option4-surface-press` | #bad0d5 |
| status-option4-selected | `--hop-status-option4-surface-selected` | #e1eef1 |
| status-option4-strong | `--hop-status-option4-surface-strong` | #9cb7be |
| status-option4 | `--hop-status-option4-text` | #4e6770 |
| status-option4-disabled | `--hop-status-option4-text-disabled` | #9cb7be |
| status-option4-hover | `--hop-status-option4-text-hover` | #40535a |
| status-option4-press | `--hop-status-option4-text-press` | #313e43 |
| status-option4-selected | `--hop-status-option4-text-selected` | #40535a |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 5
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option5 | `--hop-status-option5-border` | #a19382 |
| status-option5-disabled | `--hop-status-option5-border-disabled` | #f0eae3 |
| status-option5-hover | `--hop-status-option5-border-hover` | #837463 |
| status-option5-press | `--hop-status-option5-border-press` | #776a59 |
| status-option5-selected | `--hop-status-option5-border-selected` | #594f41 |
| status-option5 | `--hop-status-option5-icon` | #6e6151 |
| status-option5-disabled | `--hop-status-option5-icon-disabled` | #bdb1a3 |
| status-option5-hover | `--hop-status-option5-icon-hover` | #594f41 |
| status-option5-press | `--hop-status-option5-icon-press` | #433b31 |
| status-option5-selected | `--hop-status-option5-icon-selected` | #594f41 |
| status-option5 | `--hop-status-option5-surface` | #f0eae3 |
| status-option5-disabled | `--hop-status-option5-surface-disabled` | #fef6ef |
| status-option5-hover | `--hop-status-option5-surface-hover` | #e5ded6 |
| status-option5-press | `--hop-status-option5-surface-press` | #d4cbc0 |
| status-option5-selected | `--hop-status-option5-surface-selected` | #f0eae3 |
| status-option5-strong | `--hop-status-option5-surface-strong` | #bdb1a3 |
| status-option5 | `--hop-status-option5-text` | #6e6151 |
| status-option5-disabled | `--hop-status-option5-text-disabled` | #bdb1a3 |
| status-option5-hover | `--hop-status-option5-text-hover` | #594f41 |
| status-option5-press | `--hop-status-option5-text-press` | #433b31 |
| status-option5-selected | `--hop-status-option5-text-selected` | #594f41 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option5 | `--hop-status-option5-border` | #a19382 |
| status-option5-disabled | `--hop-status-option5-border-disabled` | #f0eae3 |
| status-option5-hover | `--hop-status-option5-border-hover` | #837463 |
| status-option5-press | `--hop-status-option5-border-press` | #776a59 |
| status-option5-selected | `--hop-status-option5-border-selected` | #594f41 |
| status-option5 | `--hop-status-option5-icon` | #6e6151 |
| status-option5-disabled | `--hop-status-option5-icon-disabled` | #bdb1a3 |
| status-option5-hover | `--hop-status-option5-icon-hover` | #594f41 |
| status-option5-press | `--hop-status-option5-icon-press` | #433b31 |
| status-option5-selected | `--hop-status-option5-icon-selected` | #594f41 |
| status-option5 | `--hop-status-option5-surface` | #f0eae3 |
| status-option5-disabled | `--hop-status-option5-surface-disabled` | #fef6ef |
| status-option5-hover | `--hop-status-option5-surface-hover` | #e5ded6 |
| status-option5-press | `--hop-status-option5-surface-press` | #d4cbc0 |
| status-option5-selected | `--hop-status-option5-surface-selected` | #f0eae3 |
| status-option5-strong | `--hop-status-option5-surface-strong` | #bdb1a3 |
| status-option5 | `--hop-status-option5-text` | #6e6151 |
| status-option5-disabled | `--hop-status-option5-text-disabled` | #bdb1a3 |
| status-option5-hover | `--hop-status-option5-text-hover` | #594f41 |
| status-option5-press | `--hop-status-option5-text-press` | #433b31 |
| status-option5-selected | `--hop-status-option5-text-selected` | #594f41 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Option 6
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option6 | `--hop-status-option6-border` | #c28b12 |
| status-option6-disabled | `--hop-status-option6-border-disabled` | #fff2b8 |
| status-option6-hover | `--hop-status-option6-border-hover` | #996f08 |
| status-option6-press | `--hop-status-option6-border-press` | #8b6609 |
| status-option6-selected | `--hop-status-option6-border-selected` | #654c0d |
| status-option6 | `--hop-status-option6-icon` | #7e5e0a |
| status-option6-disabled | `--hop-status-option6-icon-disabled` | #e2a934 |
| status-option6-hover | `--hop-status-option6-icon-hover` | #654c0d |
| status-option6-press | `--hop-status-option6-icon-press` | #4b390f |
| status-option6-selected | `--hop-status-option6-icon-selected` | #654c0d |
| status-option6 | `--hop-status-option6-surface` | #fff8d6 |
| status-option6-disabled | `--hop-status-option6-surface-disabled` | #fff8d6 |
| status-option6-hover | `--hop-status-option6-surface-hover` | #fff2b8 |
| status-option6-press | `--hop-status-option6-surface-press` | #eac96d |
| status-option6-selected | `--hop-status-option6-surface-selected` | #fff2b8 |
| status-option6-strong | `--hop-status-option6-surface-strong` | #e2a934 |
| status-option6 | `--hop-status-option6-text` | #7e5e0a |
| status-option6-disabled | `--hop-status-option6-text-disabled` | #e2a934 |
| status-option6-hover | `--hop-status-option6-text-hover` | #654c0d |
| status-option6-press | `--hop-status-option6-text-press` | #4b390f |
| status-option6-selected | `--hop-status-option6-text-selected` | #654c0d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | --------------------------------------- | ------- |
| status-option6 | `--hop-status-option6-border` | #c28b12 |
| status-option6-disabled | `--hop-status-option6-border-disabled` | #fff2b8 |
| status-option6-hover | `--hop-status-option6-border-hover` | #996f08 |
| status-option6-press | `--hop-status-option6-border-press` | #8b6609 |
| status-option6-selected | `--hop-status-option6-border-selected` | #654c0d |
| status-option6 | `--hop-status-option6-icon` | #7e5e0a |
| status-option6-disabled | `--hop-status-option6-icon-disabled` | #e2a934 |
| status-option6-hover | `--hop-status-option6-icon-hover` | #654c0d |
| status-option6-press | `--hop-status-option6-icon-press` | #4b390f |
| status-option6-selected | `--hop-status-option6-icon-selected` | #654c0d |
| status-option6 | `--hop-status-option6-surface` | #fff8d6 |
| status-option6-disabled | `--hop-status-option6-surface-disabled` | #fff8d6 |
| status-option6-hover | `--hop-status-option6-surface-hover` | #fff2b8 |
| status-option6-press | `--hop-status-option6-surface-press` | #eac96d |
| status-option6-selected | `--hop-status-option6-surface-selected` | #fff2b8 |
| status-option6-strong | `--hop-status-option6-surface-strong` | #e2a934 |
| status-option6 | `--hop-status-option6-text` | #7e5e0a |
| status-option6-disabled | `--hop-status-option6-text-disabled` | #e2a934 |
| status-option6-hover | `--hop-status-option6-text-hover` | #654c0d |
| status-option6-press | `--hop-status-option6-text-press` | #4b390f |
| status-option6-selected | `--hop-status-option6-text-selected` | #654c0d |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Data Visualization
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| --------------------------- | ---------------------------------- | ------- |
| dataviz\_unavailable | `--hop-dataviz-unavailable` | #e1e3e7 |
| dataviz\_unavailable-weak | `--hop-dataviz-unavailable-weak` | #eef0f2 |
| dataviz\_unavailable-strong | `--hop-dataviz-unavailable-strong` | #cbcdd2 |
| dataviz\_onlight | `--hop-dataviz-text-onlight` | #313335 |
| dataviz\_ondark | `--hop-dataviz-text-ondark` | #ffffff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| --------------------------- | ---------------------------------- | ------- |
| dataviz\_unavailable | `--hop-dataviz-unavailable` | #e1e3e7 |
| dataviz\_unavailable-weak | `--hop-dataviz-unavailable-weak` | #eef0f2 |
| dataviz\_unavailable-strong | `--hop-dataviz-unavailable-strong` | #cbcdd2 |
| dataviz\_onlight | `--hop-dataviz-text-onlight` | #313335 |
| dataviz\_ondark | `--hop-dataviz-text-ondark` | #ffffff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
## Elevation
Design tokens are design decisions, translated into data. Explore the semantic elevation design tokens.
### Guidelines
* **Working with elevation** - Elevation allows to bring a sense of materiality and depth to an interface. Use elevation to infer information hierarchy.
* **Don't skip elevation levels** - When applying elevation to visual elements, ensure that each level is used progressively so users can understand the layering of elements on the page. Start with no elevation at the background level and build interfaces by 'piling up' containers and other elements step by step. Avoid jumping from a raised token to a floating token without using the intermediate lifted level.
* **Use elevation purposefully** - Each elevation has a purpose and allow users to see what is closer to them – what requires their attention now. Always respect how elements are stacked on top of each other so that users understand the materiality of the application.
### Tokens
The values of these tokens are only valid if the current theme is
workleap
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | -------------------------------------- |
| none | `--hop-elevation-none` | none |
| raised | `--hop-elevation-raised` | 0 1px 6px 0 rgba(60, 60, 60, 0.10) |
| lifted | `--hop-elevation-lifted` | 0 4px 10px 4px rgba(60, 60, 60, 0.08) |
| floating | `--hop-elevation-floating` | 0 10px 18px 8px rgba(60, 60, 60, 0.08) |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
The values of these tokens are only valid if the current theme is
sharegate
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | -------------------------------------- |
| none | `--hop-elevation-none` | none |
| raised | `--hop-elevation-raised` | 0 1px 6px 0 rgba(60, 60, 60, 0.10) |
| lifted | `--hop-elevation-lifted` | 0 4px 10px 4px rgba(60, 60, 60, 0.08) |
| floating | `--hop-elevation-floating` | 0 10px 18px 8px rgba(60, 60, 60, 0.08) |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
## Shape
Design tokens are design decisions, translated into data. Explore the semantic shape design tokens.
Shape tokens refer to the border radius of a visual element. Border radius is the amount of smoothness applied to the corners of a shape. The higher the value, the smoother the corners are. In addition to t-shirt-sized tokens, there are some utility tokens used for specific elements such as pill and circle.
### Tokens
The values of these tokens are only valid if the current theme is
workleap
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ----------- |
| circle | `--hop-shape-circle` | 624.9375rem |
| pill | `--hop-shape-pill` | 1.5rem |
| rounded-lg | `--hop-shape-rounded-lg` | 1rem |
| rounded-md | `--hop-shape-rounded-md` | 0.5rem |
| rounded-sm | `--hop-shape-rounded-sm` | 0.25rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
The values of these tokens are only valid if the current theme is
sharegate
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ----------- |
| circle | `--hop-shape-circle` | 624.9375rem |
| pill | `--hop-shape-pill` | 1.5rem |
| rounded-lg | `--hop-shape-rounded-lg` | 1rem |
| rounded-md | `--hop-shape-rounded-md` | 0.5rem |
| rounded-sm | `--hop-shape-rounded-sm` | 0.25rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
## Space
Design tokens are design decisions, translated into data. Explore the semantic space design tokens.
### Guidelines
* **Working with space** - Space is the distance between two objects in your design. It should be used to complement the purpose of a page by creating hierarchy and making the content clearer and more comprehensible.
* **Be harmonious** - Use space tokens in a way that is consistent with the rest of the experience. Some spaces are used in specific context, follow the proper documentation to apply space at the right places.
* **Create visual groups** - The more visual elements are related, the closer they should be to each other.
### Designing with space
Every part of a UI should be intentional including the empty space between elements. The amount of space between items creates relationships and hierarchy.
#### Creating relationships
Elements in a design that are near each other are seen as being meaningfully related. As more space is added between elements, their perceived relationship weakens.
Patterns created through spacing can also create relationships. Elements arranged in the same spacing pattern are seen as related pieces that have equal weight.
Space can also be used to denote groups of associated information. This creates content sections on a page without having to use lines or other graphical elements as a divider.
#### Creating hierarchy
Elements that have more spacing around them tend to be perceived as higher in importance than elements that have less space around them. Take this page for instance. The top level headers have more space surrounding them giving them focus and prominence. Then as the headers descend in importance they receive less space, signaling they are subordinate.
Elements that are set close to each other can be easily overlooked. Users may see the grouping but not process each individual item. Therefore, if you have an element or content of high importance on the page, consider giving it extra surrounding space to help it attract focus.
#### White space
Empty space — also known as white space — is important in design. It can be used to break up sections on a page or to help create focus on certain element(s). White space helps with information processing; too much dense information can be disorienting or overwhelming for a user. Sections of a UI are allowed to be dense, but the whole page should not be crowded; there should be white space to let the user's eye rest.
#### Staying consistent with the 8px grid
We use an 8px spacing grid to keep layouts consistent and clear. Most spacing should follow 8px increments: 8, 16, 24, and so on. In tighter layouts, a half step of 4px can be used when needed. This system builds rhythm, reinforces visual relationships, and makes spacing easier to apply across design and code. It helps keep interfaces clean, intentional, and easy to scan.
### Tokens
#### Padding
Padding refers to the space within a block or container from which elements are separated from the edge. Is is refered as inset in Hopper.
##### Inset
By default, the inset is equal on all four sides.
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ------- |
| inset-xs | `--hop-space-inset-xs` | 0.25rem |
| inset-sm | `--hop-space-inset-sm` | 0.5rem |
| inset-md | `--hop-space-inset-md` | 1rem |
| inset-lg | `--hop-space-inset-lg` | 1.5rem |
| inset-xl | `--hop-space-inset-xl` | 2rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ------- |
| inset-xs | `--hop-space-inset-xs` | 0.25rem |
| inset-sm | `--hop-space-inset-sm` | 0.5rem |
| inset-md | `--hop-space-inset-md` | 1rem |
| inset-lg | `--hop-space-inset-lg` | 1.5rem |
| inset-xl | `--hop-space-inset-xl` | 2rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Inset Squish
Squish inset reduces the top and bottom padding by one increment relative to the declared inset space.
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | -------------- |
| inset-squish-sm | `--hop-space-inset-squish-sm` | 0.25rem 0.5rem |
| inset-squish-md | `--hop-space-inset-squish-md` | 0.5rem 1rem |
| inset-squish-lg | `--hop-space-inset-squish-lg` | 1rem 2rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | -------------- |
| inset-squish-sm | `--hop-space-inset-squish-sm` | 0.25rem 0.5rem |
| inset-squish-md | `--hop-space-inset-squish-md` | 0.5rem 1rem |
| inset-squish-lg | `--hop-space-inset-squish-lg` | 1rem 2rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Inset Stretch
Stretch inset increases the top and bottom padding by one increment relative to the declared inset space.
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ----------- |
| inset-stretch-sm | `--hop-space-inset-stretch-sm` | 1rem 0.5rem |
| inset-stretch-md | `--hop-space-inset-stretch-md` | 1.5rem 1rem |
| inset-stretch-lg | `--hop-space-inset-stretch-lg` | 3rem 1.5rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ----------- |
| inset-stretch-sm | `--hop-space-inset-stretch-sm` | 1rem 0.5rem |
| inset-stretch-md | `--hop-space-inset-stretch-md` | 1.5rem 1rem |
| inset-stretch-lg | `--hop-space-inset-stretch-lg` | 3rem 1.5rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Margin
Margin refers to the traditional meaning of space between elements. It can be used as a margin or gap when in a grid or flex layout. It is refered as stack in Hopper. The last element of a stack should omit this space.
##### Stack
Stack is the space that separates elements or containers arranged vertically within a column.
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ------- |
| stack-xs | `--hop-space-stack-xs` | 0.25rem |
| stack-sm | `--hop-space-stack-sm` | 0.5rem |
| stack-md | `--hop-space-stack-md` | 1rem |
| stack-lg | `--hop-space-stack-lg` | 1.5rem |
| stack-xl | `--hop-space-stack-xl` | 2rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ------- |
| stack-xs | `--hop-space-stack-xs` | 0.25rem |
| stack-sm | `--hop-space-stack-sm` | 0.5rem |
| stack-md | `--hop-space-stack-md` | 1rem |
| stack-lg | `--hop-space-stack-lg` | 1.5rem |
| stack-xl | `--hop-space-stack-xl` | 2rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
##### Inline
Inline refers to the space that separates inline elements arranged horizontally.
**🎨 Workleap theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ------- |
| inline-xs | `--hop-space-inline-xs` | 0.25rem |
| inline-sm | `--hop-space-inline-sm` | 0.5rem |
| inline-md | `--hop-space-inline-md` | 1rem |
| inline-lg | `--hop-space-inline-lg` | 1.5rem |
| inline-xl | `--hop-space-inline-xl` | 2rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
**🎨 Sharegate theme tokens:**
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ------- |
| inline-xs | `--hop-space-inline-xs` | 0.25rem |
| inline-sm | `--hop-space-inline-sm` | 0.5rem |
| inline-md | `--hop-space-inline-md` | 1rem |
| inline-lg | `--hop-space-inline-lg` | 1.5rem |
| inline-xl | `--hop-space-inline-xl` | 2rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
## Typography
Design tokens are design decisions, translated into data. Explore the semantic typography design tokens.
Typography tokens are composite tokens, meaning they are made up of multiple other tokens. This allows us to create a consistent typographic scale across our products.
### Guidelines
* **Use the bounding box to align with the grid** - The bounding box is the vertical height of the text and is defined by the line height. That value of the line height is critical to make sure text is aligned to the 8px grid of the interface.
* **Use text-crop when a font looks off-centered** - Some fonts, such as *ABC Favorit* requires a little help to look centered. In those cases, apply a [text-crop](/getting-started/guides/text-crop.md) to adjust the line height. These values are available as tokens and are documented below. Hopper Components already make use of these values when necessary.
* **Align text using baseline** - When aligning different text boxes together horizontally, use their baselines as a guide instead of their true center for a more harmonious look.
* **Line length should be between 40 to 60 characters** - Lines of text that are too short make the eyes strain while long lines make it hard to concentrate. As a way to give users the best reading experience, aim for lines of text between 40 to 60 characters, including spaces. If your text doesn't fit this rule, review the content length, font size or even information hierarchy.
### Tokens
#### Heading
Headings are used to create a hierarchy of content. They are used to help users scan and understand the content on a page.
| Component Prop Name | Component Prop Value | Token Name | Value |
| ------------------- | ------------------------- | ------------------------------- | ------------------------------------------- |
| fontSize | heading-3xl | `hop-heading-3xl-font-size` | 2.25rem |
| fontWeight | heading-3xl | `hop-heading-3xl-font-weight` | 680 |
| lineHeight | heading-3xl | `hop-heading-3xl-line-height` | 1.3333333 |
| fontFamily | heading-3xl | `hop-heading-3xl-font-family` | 'ABC Favorit', Helvetica, Arial, sans-serif |
| topOffset | heading-3xl-top-offset | `hop-heading-3xl-top-offset` | -0.9375rem |
| bottomOffset | heading-3xl-bottom-offset | `hop-heading-3xl-bottom-offset` | -0.5625rem |
| fontSize | heading-2xl | `hop-heading-2xl-font-size` | 2rem |
| fontWeight | heading-2xl | `hop-heading-2xl-font-weight` | 580 |
| lineHeight | heading-2xl | `hop-heading-2xl-line-height` | 1.25 |
| fontFamily | heading-2xl | `hop-heading-2xl-font-family` | 'ABC Favorit', Helvetica, Arial, sans-serif |
| topOffset | heading-2xl-top-offset | `hop-heading-2xl-top-offset` | -0.6667rem |
| bottomOffset | heading-2xl-bottom-offset | `hop-heading-2xl-bottom-offset` | -0.3334rem |
| fontSize | heading-xl | `hop-heading-xl-font-size` | 1.75rem |
| fontWeight | heading-xl | `hop-heading-xl-font-weight` | 680 |
| lineHeight | heading-xl | `hop-heading-xl-line-height` | 1.1428571 |
| fontFamily | heading-xl | `hop-heading-xl-font-family` | 'ABC Favorit', Helvetica, Arial, sans-serif |
| topOffset | heading-xl-top-offset | `hop-heading-xl-top-offset` | -0.5rem |
| bottomOffset | heading-xl-bottom-offset | `hop-heading-xl-bottom-offset` | -0.1875rem |
| fontSize | heading-lg | `hop-heading-lg-font-size` | 1.5rem |
| fontWeight | heading-lg | `hop-heading-lg-font-weight` | 680 |
| lineHeight | heading-lg | `hop-heading-lg-line-height` | 1.3333333 |
| fontFamily | heading-lg | `hop-heading-lg-font-family` | 'ABC Favorit', Helvetica, Arial, sans-serif |
| topOffset | heading-lg-top-offset | `hop-heading-lg-top-offset` | -0.5625rem |
| bottomOffset | heading-lg-bottom-offset | `hop-heading-lg-bottom-offset` | -0.3125rem |
| fontSize | heading-md | `hop-heading-md-font-size` | 1.25rem |
| fontWeight | heading-md | `hop-heading-md-font-weight` | 580 |
| lineHeight | heading-md | `hop-heading-md-line-height` | 1.2 |
| fontFamily | heading-md | `hop-heading-md-font-family` | 'ABC Favorit', Helvetica, Arial, sans-serif |
| topOffset | heading-md-top-offset | `hop-heading-md-top-offset` | -0.3333rem |
| bottomOffset | heading-md-bottom-offset | `hop-heading-md-bottom-offset` | -0.125rem |
| fontSize | heading-sm | `hop-heading-sm-font-size` | 1.125rem |
| fontWeight | heading-sm | `hop-heading-sm-font-weight` | 580 |
| lineHeight | heading-sm | `hop-heading-sm-line-height` | 1.3333333 |
| fontFamily | heading-sm | `hop-heading-sm-font-family` | 'ABC Favorit', Helvetica, Arial, sans-serif |
| topOffset | heading-sm-top-offset | `hop-heading-sm-top-offset` | -0.375rem |
| bottomOffset | heading-sm-bottom-offset | `hop-heading-sm-bottom-offset` | -0.1875rem |
| fontSize | heading-xs | `hop-heading-xs-font-size` | 1rem |
| fontWeight | heading-xs | `hop-heading-xs-font-weight` | 410 |
| lineHeight | heading-xs | `hop-heading-xs-line-height` | 1.5 |
| fontFamily | heading-xs | `hop-heading-xs-font-family` | 'ABC Favorit', Helvetica, Arial, sans-serif |
| topOffset | heading-xs-top-offset | `hop-heading-xs-top-offset` | -0.4166rem |
| bottomOffset | heading-xs-bottom-offset | `hop-heading-xs-bottom-offset` | -0.25rem |
##### Variations
| Token Name | Value |
| ----------------------------------- | ----- |
| `hop-heading-xs-medium-font-weight` | 580 |
#### Overline
Used to introduce a headline.
*Adding a text-transform of uppercase is necessary in order to render overline as intended by the Design. A letter spacing of `0.24px` is also necessary.*
| Component Prop Name | Token Name | Value |
| ------------------- | ---------------------------- | -------------------------------------------------- |
| fontSize | `hop-overline-font-size` | 0.75rem |
| fontWeight | `hop-overline-font-weight` | 400 |
| lineHeight | `hop-overline-line-height` | 1.3333333 |
| fontFamily | `hop-overline-font-family` | 'ABC Favorit Mono', Consolas, 'SF Mono', monospace |
| topOffset | `hop-overline-top-offset` | -0.25rem |
| bottomOffset | `hop-overline-bottom-offset` | -0.25rem |
#### Body
Body text is used to communicate the main content of a page.
| Component Prop Name | Component Prop Value | Token Name | Value |
| ------------------- | -------------------- | -------------------------- | ------------------------------------- |
| fontSize | body-2xl | `hop-body-2xl-font-size` | 2rem |
| fontWeight | body-2xl | `hop-body-2xl-font-weight` | 410 |
| lineHeight | body-2xl | `hop-body-2xl-line-height` | 1.125 |
| fontFamily | body-2xl | `hop-body-2xl-font-family` | 'Inter', Helvetica, Arial, sans-serif |
| fontSize | body-xl | `hop-body-xl-font-size` | 1.75rem |
| fontWeight | body-xl | `hop-body-xl-font-weight` | 410 |
| lineHeight | body-xl | `hop-body-xl-line-height` | 1.1428571 |
| fontFamily | body-xl | `hop-body-xl-font-family` | 'Inter', Helvetica, Arial, sans-serif |
| fontSize | body-lg | `hop-body-lg-font-size` | 1.125rem |
| fontWeight | body-lg | `hop-body-lg-font-weight` | 410 |
| lineHeight | body-lg | `hop-body-lg-line-height` | 1.3333333 |
| fontFamily | body-lg | `hop-body-lg-font-family` | 'Inter', Helvetica, Arial, sans-serif |
| fontSize | body-md | `hop-body-md-font-size` | 1rem |
| fontWeight | body-md | `hop-body-md-font-weight` | 410 |
| lineHeight | body-md | `hop-body-md-line-height` | 1.5 |
| fontFamily | body-md | `hop-body-md-font-family` | 'Inter', Helvetica, Arial, sans-serif |
| fontSize | body-sm | `hop-body-sm-font-size` | 0.875rem |
| fontWeight | body-sm | `hop-body-sm-font-weight` | 410 |
| lineHeight | body-sm | `hop-body-sm-line-height` | 1.4285714 |
| fontFamily | body-sm | `hop-body-sm-font-family` | 'Inter', Helvetica, Arial, sans-serif |
| fontSize | body-xs | `hop-body-xs-font-size` | 0.75rem |
| fontWeight | body-xs | `hop-body-xs-font-weight` | 410 |
| lineHeight | body-xs | `hop-body-xs-line-height` | 1.3333333 |
| fontFamily | body-xs | `hop-body-xs-font-family` | 'Inter', Helvetica, Arial, sans-serif |
##### Variations
| Token Name | Value |
| ---------------------------------- | ----- |
| `hop-body-lg-medium-font-weight` | 505 |
| `hop-body-lg-semibold-font-weight` | 590 |
| `hop-body-lg-bold-font-weight` | 690 |
| `hop-body-md-medium-font-weight` | 505 |
| `hop-body-md-semibold-font-weight` | 590 |
| `hop-body-md-bold-font-weight` | 690 |
| `hop-body-sm-medium-font-weight` | 505 |
| `hop-body-sm-semibold-font-weight` | 590 |
| `hop-body-sm-bold-font-weight` | 690 |
| `hop-body-xs-medium-font-weight` | 505 |
| `hop-body-xs-semibold-font-weight` | 590 |
| `hop-body-xs-bold-font-weight` | 690 |
#### Accent
Accent text is used to highlight important information on a page.
| Component Prop Name | Component Prop Value | Token Name | Value |
| ------------------- | -------------------- | --------------------------- | ------------------------------------------- |
| fontSize | accent-lg | `hop-accent-lg-font-size` | 3rem |
| fontWeight | accent-lg | `hop-accent-lg-font-weight` | 580 |
| lineHeight | accent-lg | `hop-accent-lg-line-height` | 1.125 |
| fontFamily | accent-lg | `hop-accent-lg-font-family` | 'ABC Favorit', Helvetica, Arial, sans-serif |
| fontSize | accent-sm | `hop-accent-sm-font-size` | 1.125rem |
| fontWeight | accent-sm | `hop-accent-sm-font-weight` | 580 |
| lineHeight | accent-sm | `hop-accent-sm-line-height` | 1.3333333 |
| fontFamily | accent-sm | `hop-accent-sm-font-family` | 'ABC Favorit', Helvetica, Arial, sans-serif |
## Border Radius
Design tokens are design decisions, translated into data. Explore the core border-radius design tokens.
### Tokens
The values of these tokens are only valid if the current theme is
workleap
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ----------- |
| core\_0 | `--hop-border-radius-0` | 0 |
| core\_1 | `--hop-border-radius-1` | 0.25rem |
| core\_2 | `--hop-border-radius-2` | 0.5rem |
| core\_3 | `--hop-border-radius-3` | 1rem |
| core\_4 | `--hop-border-radius-4` | 1.5rem |
| core\_9999 | `--hop-border-radius-9999` | 624.9375rem |
| core\_2-5 | `--hop-border-radius-2-5` | 0.75rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
The values of these tokens are only valid if the current theme is
sharegate
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ----------- |
| core\_0 | `--hop-border-radius-0` | 0 |
| core\_1 | `--hop-border-radius-1` | 0.25rem |
| core\_2 | `--hop-border-radius-2` | 0.5rem |
| core\_3 | `--hop-border-radius-3` | 1rem |
| core\_4 | `--hop-border-radius-4` | 1.5rem |
| core\_9999 | `--hop-border-radius-9999` | 624.9375rem |
| core\_2-5 | `--hop-border-radius-2-5` | 0.75rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
## Color
Design tokens are design decisions, translated into data. Explore the core color design tokens.
### Tokens
The values of these tokens are only valid if the current theme is
workleap
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------- | ------------------------------ | ------- |
| core\_coastal-25 | `--hop-coastal-25` | #f0f8ff |
| core\_coastal-50 | `--hop-coastal-50` | #d9efff |
| core\_coastal-75 | `--hop-coastal-75` | #bae6ff |
| core\_coastal-100 | `--hop-coastal-100` | #9fd2f7 |
| core\_coastal-200 | `--hop-coastal-200` | #81b9e4 |
| core\_coastal-300 | `--hop-coastal-300` | #5d9acd |
| core\_coastal-400 | `--hop-coastal-400` | #3a7bb2 |
| core\_coastal-500 | `--hop-coastal-500` | #2e70a8 |
| core\_coastal-600 | `--hop-coastal-600` | #23669f |
| core\_coastal-700 | `--hop-coastal-700` | #0a538b |
| core\_coastal-800 | `--hop-coastal-800` | #003d70 |
| core\_coastal-900 | `--hop-coastal-900` | #00274b |
| core\_quetzal-25 | `--hop-quetzal-25` | #ddfdf9 |
| core\_quetzal-50 | `--hop-quetzal-50` | #cff4ef |
| core\_quetzal-75 | `--hop-quetzal-75` | #bde8e1 |
| core\_quetzal-100 | `--hop-quetzal-100` | #a3d6cb |
| core\_quetzal-200 | `--hop-quetzal-200` | #83beaf |
| core\_quetzal-300 | `--hop-quetzal-300` | #5da18c |
| core\_quetzal-400 | `--hop-quetzal-400` | #38836a |
| core\_quetzal-500 | `--hop-quetzal-500` | #2b795e |
| core\_quetzal-600 | `--hop-quetzal-600` | #206f54 |
| core\_quetzal-700 | `--hop-quetzal-700` | #055c41 |
| core\_quetzal-800 | `--hop-quetzal-800` | #00452d |
| core\_quetzal-900 | `--hop-quetzal-900` | #002d1c |
| core\_orchid-bloom-25 | `--hop-orchid-bloom-25` | #f6f5ff |
| core\_orchid-bloom-50 | `--hop-orchid-bloom-50` | #eae9fb |
| core\_orchid-bloom-75 | `--hop-orchid-bloom-75` | #ddddf7 |
| core\_orchid-bloom-100 | `--hop-orchid-bloom-100` | #c8caf0 |
| core\_orchid-bloom-200 | `--hop-orchid-bloom-200` | #aeb3e8 |
| core\_orchid-bloom-300 | `--hop-orchid-bloom-300` | #8d91dc |
| core\_orchid-bloom-400 | `--hop-orchid-bloom-400` | #6b6ecc |
| core\_orchid-bloom-500 | `--hop-orchid-bloom-500` | #5f61c5 |
| core\_orchid-bloom-600 | `--hop-orchid-bloom-600` | #5454be |
| core\_orchid-bloom-700 | `--hop-orchid-bloom-700` | #433fac |
| core\_orchid-bloom-800 | `--hop-orchid-bloom-800` | #322b8d |
| core\_orchid-bloom-900 | `--hop-orchid-bloom-900` | #1e1c5d |
| core\_persimmon-25 | `--hop-persimmon-25` | #fff5f2 |
| core\_persimmon-50 | `--hop-persimmon-50` | #ffe7df |
| core\_persimmon-75 | `--hop-persimmon-75` | #ffd8ca |
| core\_persimmon-100 | `--hop-persimmon-100` | #ffbda7 |
| core\_persimmon-200 | `--hop-persimmon-200` | #ff9874 |
| core\_persimmon-300 | `--hop-persimmon-300` | #ff5b22 |
| core\_persimmon-400 | `--hop-persimmon-400` | #dd3900 |
| core\_persimmon-500 | `--hop-persimmon-500` | #ca3400 |
| core\_persimmon-600 | `--hop-persimmon-600` | #ba3000 |
| core\_persimmon-700 | `--hop-persimmon-700` | #982700 |
| core\_persimmon-800 | `--hop-persimmon-800` | #731e00 |
| core\_persimmon-900 | `--hop-persimmon-900` | #4c1300 |
| core\_sapphire-25 | `--hop-sapphire-25` | #f5f6ff |
| core\_sapphire-50 | `--hop-sapphire-50` | #e6ebff |
| core\_sapphire-75 | `--hop-sapphire-75` | #d6e0ff |
| core\_sapphire-100 | `--hop-sapphire-100` | #b9cbff |
| core\_sapphire-200 | `--hop-sapphire-200` | #95b1ff |
| core\_sapphire-300 | `--hop-sapphire-300` | #6c8ffd |
| core\_sapphire-400 | `--hop-sapphire-400` | #4767fe |
| core\_sapphire-500 | `--hop-sapphire-500` | #3b57ff |
| core\_sapphire-600 | `--hop-sapphire-600` | #2a43e8 |
| core\_sapphire-700 | `--hop-sapphire-700` | #2040c7 |
| core\_sapphire-800 | `--hop-sapphire-800` | #1b3587 |
| core\_sapphire-900 | `--hop-sapphire-900` | #152450 |
| core\_fog-25 | `--hop-fog-25` | #f2f8fa |
| core\_fog-50 | `--hop-fog-50` | #e1eef1 |
| core\_fog-75 | `--hop-fog-75` | #d2e3e7 |
| core\_fog-100 | `--hop-fog-100` | #bad0d5 |
| core\_fog-200 | `--hop-fog-200` | #9cb7be |
| core\_fog-300 | `--hop-fog-300` | #7c9aa3 |
| core\_fog-400 | `--hop-fog-400` | #5e7b84 |
| core\_fog-500 | `--hop-fog-500` | #557079 |
| core\_fog-600 | `--hop-fog-600` | #4e6770 |
| core\_fog-700 | `--hop-fog-700` | #40535a |
| core\_fog-800 | `--hop-fog-800` | #313e43 |
| core\_fog-900 | `--hop-fog-900` | #20282a |
| core\_iris-25 | `--hop-iris-25` | #f6f6ff |
| core\_iris-50 | `--hop-iris-50` | #eceaff |
| core\_iris-75 | `--hop-iris-75` | #deddff |
| core\_iris-100 | `--hop-iris-100` | #c3bcff |
| core\_iris-200 | `--hop-iris-200` | #b4abff |
| core\_iris-300 | `--hop-iris-300` | #8e85ec |
| core\_iris-400 | `--hop-iris-400` | #736ad2 |
| core\_iris-500 | `--hop-iris-500` | #685dc9 |
| core\_iris-600 | `--hop-iris-600` | #6057b3 |
| core\_iris-700 | `--hop-iris-700` | #4d468f |
| core\_iris-800 | `--hop-iris-800` | #3b356c |
| core\_iris-900 | `--hop-iris-900` | #292362 |
| core\_toad-25 | `--hop-toad-25` | #fef6ef |
| core\_toad-50 | `--hop-toad-50` | #f0eae3 |
| core\_toad-75 | `--hop-toad-75` | #e5ded6 |
| core\_toad-100 | `--hop-toad-100` | #d4cbc0 |
| core\_toad-200 | `--hop-toad-200` | #bdb1a3 |
| core\_toad-300 | `--hop-toad-300` | #a19382 |
| core\_toad-400 | `--hop-toad-400` | #837463 |
| core\_toad-500 | `--hop-toad-500` | #776a59 |
| core\_toad-600 | `--hop-toad-600` | #6e6151 |
| core\_toad-700 | `--hop-toad-700` | #594f41 |
| core\_toad-800 | `--hop-toad-800` | #433b31 |
| core\_toad-900 | `--hop-toad-900` | #2a2620 |
| core\_sunken-treasure-25 | `--hop-sunken-treasure-25` | #fff8d6 |
| core\_sunken-treasure-50 | `--hop-sunken-treasure-50` | #fff2b8 |
| core\_sunken-treasure-75 | `--hop-sunken-treasure-75` | #f7e694 |
| core\_sunken-treasure-100 | `--hop-sunken-treasure-100` | #eac96d |
| core\_sunken-treasure-200 | `--hop-sunken-treasure-200` | #e2a934 |
| core\_sunken-treasure-300 | `--hop-sunken-treasure-300` | #c28b12 |
| core\_sunken-treasure-400 | `--hop-sunken-treasure-400` | #996f08 |
| core\_sunken-treasure-500 | `--hop-sunken-treasure-500` | #8b6609 |
| core\_sunken-treasure-600 | `--hop-sunken-treasure-600` | #7e5e0a |
| core\_sunken-treasure-700 | `--hop-sunken-treasure-700` | #654c0d |
| core\_sunken-treasure-800 | `--hop-sunken-treasure-800` | #4b390f |
| core\_sunken-treasure-900 | `--hop-sunken-treasure-900` | #2f250d |
| core\_koi-25 | `--hop-koi-25` | #fff5e9 |
| core\_koi-50 | `--hop-koi-50` | #ffe8d3 |
| core\_koi-75 | `--hop-koi-75` | #ffd8be |
| core\_koi-100 | `--hop-koi-100` | #ffbf92 |
| core\_koi-200 | `--hop-koi-200` | #ff9b3f |
| core\_koi-300 | `--hop-koi-300` | #e57723 |
| core\_koi-400 | `--hop-koi-400` | #c95109 |
| core\_koi-500 | `--hop-koi-500` | #ba4705 |
| core\_koi-600 | `--hop-koi-600` | #ab4104 |
| core\_koi-700 | `--hop-koi-700` | #8c3504 |
| core\_koi-800 | `--hop-koi-800` | #692803 |
| core\_koi-900 | `--hop-koi-900` | #451a02 |
| core\_limeburst-25 | `--hop-limeburst-25` | #edffbc |
| core\_limeburst-50 | `--hop-limeburst-50` | #ccff42 |
| core\_limeburst-75 | `--hop-limeburst-75` | #b3f400 |
| core\_limeburst-100 | `--hop-limeburst-100` | #a3df00 |
| core\_limeburst-200 | `--hop-limeburst-200` | #8fc300 |
| core\_limeburst-300 | `--hop-limeburst-300` | #77a300 |
| core\_limeburst-400 | `--hop-limeburst-400` | #5f8100 |
| core\_limeburst-500 | `--hop-limeburst-500` | #577600 |
| core\_limeburst-600 | `--hop-limeburst-600` | #4f6c00 |
| core\_limeburst-700 | `--hop-limeburst-700` | #415800 |
| core\_limeburst-800 | `--hop-limeburst-800` | #304200 |
| core\_limeburst-900 | `--hop-limeburst-900` | #1f2b00 |
| core\_amanita-25 | `--hop-amanita-25` | #fdf6f6 |
| core\_amanita-50 | `--hop-amanita-50` | #fde6e5 |
| core\_amanita-75 | `--hop-amanita-75` | #ffd6d3 |
| core\_amanita-100 | `--hop-amanita-100` | #ffbcb7 |
| core\_amanita-200 | `--hop-amanita-200` | #ff8e8e |
| core\_amanita-300 | `--hop-amanita-300` | #fa4d59 |
| core\_amanita-400 | `--hop-amanita-400` | #df3236 |
| core\_amanita-500 | `--hop-amanita-500` | #cb2e31 |
| core\_amanita-600 | `--hop-amanita-600` | #ba2d2d |
| core\_amanita-700 | `--hop-amanita-700` | #952927 |
| core\_amanita-800 | `--hop-amanita-800` | #6c2320 |
| core\_amanita-900 | `--hop-amanita-900` | #431a17 |
| core\_moss-25 | `--hop-moss-25` | #f4f9e9 |
| core\_moss-50 | `--hop-moss-50` | #e3f3b9 |
| core\_moss-75 | `--hop-moss-75` | #cde8ac |
| core\_moss-100 | `--hop-moss-100` | #aad89d |
| core\_moss-200 | `--hop-moss-200` | #7dc291 |
| core\_moss-300 | `--hop-moss-300` | #47a584 |
| core\_moss-400 | `--hop-moss-400` | #188a71 |
| core\_moss-500 | `--hop-moss-500` | #0c796b |
| core\_moss-600 | `--hop-moss-600` | #0a6f64 |
| core\_moss-700 | `--hop-moss-700` | #115a52 |
| core\_moss-800 | `--hop-moss-800` | #16433d |
| core\_moss-900 | `--hop-moss-900` | #132a27 |
| core\_abyss | `--hop-abyss` | #1d1d1c |
| core\_rock-20 | `--hop-rock-20` | #fafbfc |
| core\_rock-25 | `--hop-rock-25` | #f8f9fa |
| core\_rock-50 | `--hop-rock-50` | #eef0f2 |
| core\_rock-75 | `--hop-rock-75` | #e1e3e7 |
| core\_rock-100 | `--hop-rock-100` | #cbcdd2 |
| core\_rock-200 | `--hop-rock-200` | #b3b5ba |
| core\_rock-300 | `--hop-rock-300` | #96989d |
| core\_rock-400 | `--hop-rock-400` | #787a7e |
| core\_rock-500 | `--hop-rock-500` | #6c6e72 |
| core\_rock-600 | `--hop-rock-600` | #5e6064 |
| core\_rock-700 | `--hop-rock-700` | #484a4d |
| core\_rock-800 | `--hop-rock-800` | #313335 |
| core\_rock-900 | `--hop-rock-900` | #232426 |
| core\_samoyed | `--hop-samoyed` | #ffffff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
The values of these tokens are only valid if the current theme is
sharegate
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ------------------------- | ------------------------------ | ------- |
| core\_coastal-25 | `--hop-coastal-25` | #f0f8ff |
| core\_coastal-50 | `--hop-coastal-50` | #d9efff |
| core\_coastal-75 | `--hop-coastal-75` | #bae6ff |
| core\_coastal-100 | `--hop-coastal-100` | #9fd2f7 |
| core\_coastal-200 | `--hop-coastal-200` | #81b9e4 |
| core\_coastal-300 | `--hop-coastal-300` | #5d9acd |
| core\_coastal-400 | `--hop-coastal-400` | #3a7bb2 |
| core\_coastal-500 | `--hop-coastal-500` | #2e70a8 |
| core\_coastal-600 | `--hop-coastal-600` | #23669f |
| core\_coastal-700 | `--hop-coastal-700` | #0a538b |
| core\_coastal-800 | `--hop-coastal-800` | #003d70 |
| core\_coastal-900 | `--hop-coastal-900` | #00274b |
| core\_quetzal-25 | `--hop-quetzal-25` | #ddfdf9 |
| core\_quetzal-50 | `--hop-quetzal-50` | #cff4ef |
| core\_quetzal-75 | `--hop-quetzal-75` | #bde8e1 |
| core\_quetzal-100 | `--hop-quetzal-100` | #a3d6cb |
| core\_quetzal-200 | `--hop-quetzal-200` | #83beaf |
| core\_quetzal-300 | `--hop-quetzal-300` | #5da18c |
| core\_quetzal-400 | `--hop-quetzal-400` | #38836a |
| core\_quetzal-500 | `--hop-quetzal-500` | #2b795e |
| core\_quetzal-600 | `--hop-quetzal-600` | #206f54 |
| core\_quetzal-700 | `--hop-quetzal-700` | #055c41 |
| core\_quetzal-800 | `--hop-quetzal-800` | #00452d |
| core\_quetzal-900 | `--hop-quetzal-900` | #002d1c |
| core\_orchid-bloom-25 | `--hop-orchid-bloom-25` | #f6f5ff |
| core\_orchid-bloom-50 | `--hop-orchid-bloom-50` | #eae9fb |
| core\_orchid-bloom-75 | `--hop-orchid-bloom-75` | #ddddf7 |
| core\_orchid-bloom-100 | `--hop-orchid-bloom-100` | #c8caf0 |
| core\_orchid-bloom-200 | `--hop-orchid-bloom-200` | #aeb3e8 |
| core\_orchid-bloom-300 | `--hop-orchid-bloom-300` | #8d91dc |
| core\_orchid-bloom-400 | `--hop-orchid-bloom-400` | #6b6ecc |
| core\_orchid-bloom-500 | `--hop-orchid-bloom-500` | #5f61c5 |
| core\_orchid-bloom-600 | `--hop-orchid-bloom-600` | #5454be |
| core\_orchid-bloom-700 | `--hop-orchid-bloom-700` | #433fac |
| core\_orchid-bloom-800 | `--hop-orchid-bloom-800` | #322b8d |
| core\_orchid-bloom-900 | `--hop-orchid-bloom-900` | #1e1c5d |
| core\_persimmon-25 | `--hop-persimmon-25` | #fff5f2 |
| core\_persimmon-50 | `--hop-persimmon-50` | #ffe7df |
| core\_persimmon-75 | `--hop-persimmon-75` | #ffd8ca |
| core\_persimmon-100 | `--hop-persimmon-100` | #ffbda7 |
| core\_persimmon-200 | `--hop-persimmon-200` | #ff9874 |
| core\_persimmon-300 | `--hop-persimmon-300` | #ff5b22 |
| core\_persimmon-400 | `--hop-persimmon-400` | #dd3900 |
| core\_persimmon-500 | `--hop-persimmon-500` | #ca3400 |
| core\_persimmon-600 | `--hop-persimmon-600` | #ba3000 |
| core\_persimmon-700 | `--hop-persimmon-700` | #982700 |
| core\_persimmon-800 | `--hop-persimmon-800` | #731e00 |
| core\_persimmon-900 | `--hop-persimmon-900` | #4c1300 |
| core\_sapphire-25 | `--hop-sapphire-25` | #f5f6ff |
| core\_sapphire-50 | `--hop-sapphire-50` | #e6ebff |
| core\_sapphire-75 | `--hop-sapphire-75` | #d6e0ff |
| core\_sapphire-100 | `--hop-sapphire-100` | #b9cbff |
| core\_sapphire-200 | `--hop-sapphire-200` | #95b1ff |
| core\_sapphire-300 | `--hop-sapphire-300` | #6c8ffd |
| core\_sapphire-400 | `--hop-sapphire-400` | #4767fe |
| core\_sapphire-500 | `--hop-sapphire-500` | #3b57ff |
| core\_sapphire-600 | `--hop-sapphire-600` | #2a43e8 |
| core\_sapphire-700 | `--hop-sapphire-700` | #2040c7 |
| core\_sapphire-800 | `--hop-sapphire-800` | #1b3587 |
| core\_sapphire-900 | `--hop-sapphire-900` | #152450 |
| core\_fog-25 | `--hop-fog-25` | #f2f8fa |
| core\_fog-50 | `--hop-fog-50` | #e1eef1 |
| core\_fog-75 | `--hop-fog-75` | #d2e3e7 |
| core\_fog-100 | `--hop-fog-100` | #bad0d5 |
| core\_fog-200 | `--hop-fog-200` | #9cb7be |
| core\_fog-300 | `--hop-fog-300` | #7c9aa3 |
| core\_fog-400 | `--hop-fog-400` | #5e7b84 |
| core\_fog-500 | `--hop-fog-500` | #557079 |
| core\_fog-600 | `--hop-fog-600` | #4e6770 |
| core\_fog-700 | `--hop-fog-700` | #40535a |
| core\_fog-800 | `--hop-fog-800` | #313e43 |
| core\_fog-900 | `--hop-fog-900` | #20282a |
| core\_iris-25 | `--hop-iris-25` | #f6f6ff |
| core\_iris-50 | `--hop-iris-50` | #eceaff |
| core\_iris-75 | `--hop-iris-75` | #deddff |
| core\_iris-100 | `--hop-iris-100` | #c3bcff |
| core\_iris-200 | `--hop-iris-200` | #b4abff |
| core\_iris-300 | `--hop-iris-300` | #8e85ec |
| core\_iris-400 | `--hop-iris-400` | #736ad2 |
| core\_iris-500 | `--hop-iris-500` | #685dc9 |
| core\_iris-600 | `--hop-iris-600` | #6057b3 |
| core\_iris-700 | `--hop-iris-700` | #4d468f |
| core\_iris-800 | `--hop-iris-800` | #3b356c |
| core\_iris-900 | `--hop-iris-900` | #292362 |
| core\_toad-25 | `--hop-toad-25` | #fef6ef |
| core\_toad-50 | `--hop-toad-50` | #f0eae3 |
| core\_toad-75 | `--hop-toad-75` | #e5ded6 |
| core\_toad-100 | `--hop-toad-100` | #d4cbc0 |
| core\_toad-200 | `--hop-toad-200` | #bdb1a3 |
| core\_toad-300 | `--hop-toad-300` | #a19382 |
| core\_toad-400 | `--hop-toad-400` | #837463 |
| core\_toad-500 | `--hop-toad-500` | #776a59 |
| core\_toad-600 | `--hop-toad-600` | #6e6151 |
| core\_toad-700 | `--hop-toad-700` | #594f41 |
| core\_toad-800 | `--hop-toad-800` | #433b31 |
| core\_toad-900 | `--hop-toad-900` | #2a2620 |
| core\_sunken-treasure-25 | `--hop-sunken-treasure-25` | #fff8d6 |
| core\_sunken-treasure-50 | `--hop-sunken-treasure-50` | #fff2b8 |
| core\_sunken-treasure-75 | `--hop-sunken-treasure-75` | #f7e694 |
| core\_sunken-treasure-100 | `--hop-sunken-treasure-100` | #eac96d |
| core\_sunken-treasure-200 | `--hop-sunken-treasure-200` | #e2a934 |
| core\_sunken-treasure-300 | `--hop-sunken-treasure-300` | #c28b12 |
| core\_sunken-treasure-400 | `--hop-sunken-treasure-400` | #996f08 |
| core\_sunken-treasure-500 | `--hop-sunken-treasure-500` | #8b6609 |
| core\_sunken-treasure-600 | `--hop-sunken-treasure-600` | #7e5e0a |
| core\_sunken-treasure-700 | `--hop-sunken-treasure-700` | #654c0d |
| core\_sunken-treasure-800 | `--hop-sunken-treasure-800` | #4b390f |
| core\_sunken-treasure-900 | `--hop-sunken-treasure-900` | #2f250d |
| core\_koi-25 | `--hop-koi-25` | #fff5e9 |
| core\_koi-50 | `--hop-koi-50` | #ffe8d3 |
| core\_koi-75 | `--hop-koi-75` | #ffd8be |
| core\_koi-100 | `--hop-koi-100` | #ffbf92 |
| core\_koi-200 | `--hop-koi-200` | #ff9b3f |
| core\_koi-300 | `--hop-koi-300` | #e57723 |
| core\_koi-400 | `--hop-koi-400` | #c95109 |
| core\_koi-500 | `--hop-koi-500` | #ba4705 |
| core\_koi-600 | `--hop-koi-600` | #ab4104 |
| core\_koi-700 | `--hop-koi-700` | #8c3504 |
| core\_koi-800 | `--hop-koi-800` | #692803 |
| core\_koi-900 | `--hop-koi-900` | #451a02 |
| core\_limeburst-25 | `--hop-limeburst-25` | #edffbc |
| core\_limeburst-50 | `--hop-limeburst-50` | #ccff42 |
| core\_limeburst-75 | `--hop-limeburst-75` | #b3f400 |
| core\_limeburst-100 | `--hop-limeburst-100` | #a3df00 |
| core\_limeburst-200 | `--hop-limeburst-200` | #8fc300 |
| core\_limeburst-300 | `--hop-limeburst-300` | #77a300 |
| core\_limeburst-400 | `--hop-limeburst-400` | #5f8100 |
| core\_limeburst-500 | `--hop-limeburst-500` | #577600 |
| core\_limeburst-600 | `--hop-limeburst-600` | #4f6c00 |
| core\_limeburst-700 | `--hop-limeburst-700` | #415800 |
| core\_limeburst-800 | `--hop-limeburst-800` | #304200 |
| core\_limeburst-900 | `--hop-limeburst-900` | #1f2b00 |
| core\_amanita-25 | `--hop-amanita-25` | #fdf6f6 |
| core\_amanita-50 | `--hop-amanita-50` | #fde6e5 |
| core\_amanita-75 | `--hop-amanita-75` | #ffd6d3 |
| core\_amanita-100 | `--hop-amanita-100` | #ffbcb7 |
| core\_amanita-200 | `--hop-amanita-200` | #ff8e8e |
| core\_amanita-300 | `--hop-amanita-300` | #fa4d59 |
| core\_amanita-400 | `--hop-amanita-400` | #df3236 |
| core\_amanita-500 | `--hop-amanita-500` | #cb2e31 |
| core\_amanita-600 | `--hop-amanita-600` | #ba2d2d |
| core\_amanita-700 | `--hop-amanita-700` | #952927 |
| core\_amanita-800 | `--hop-amanita-800` | #6c2320 |
| core\_amanita-900 | `--hop-amanita-900` | #431a17 |
| core\_moss-25 | `--hop-moss-25` | #f4f9e9 |
| core\_moss-50 | `--hop-moss-50` | #e3f3b9 |
| core\_moss-75 | `--hop-moss-75` | #cde8ac |
| core\_moss-100 | `--hop-moss-100` | #aad89d |
| core\_moss-200 | `--hop-moss-200` | #7dc291 |
| core\_moss-300 | `--hop-moss-300` | #47a584 |
| core\_moss-400 | `--hop-moss-400` | #188a71 |
| core\_moss-500 | `--hop-moss-500` | #0c796b |
| core\_moss-600 | `--hop-moss-600` | #0a6f64 |
| core\_moss-700 | `--hop-moss-700` | #115a52 |
| core\_moss-800 | `--hop-moss-800` | #16433d |
| core\_moss-900 | `--hop-moss-900` | #132a27 |
| core\_abyss | `--hop-abyss` | #1d1d1c |
| core\_rock-20 | `--hop-rock-20` | #fafbfc |
| core\_rock-25 | `--hop-rock-25` | #f8f9fa |
| core\_rock-50 | `--hop-rock-50` | #eef0f2 |
| core\_rock-75 | `--hop-rock-75` | #e1e3e7 |
| core\_rock-100 | `--hop-rock-100` | #cbcdd2 |
| core\_rock-200 | `--hop-rock-200` | #b3b5ba |
| core\_rock-300 | `--hop-rock-300` | #96989d |
| core\_rock-400 | `--hop-rock-400` | #787a7e |
| core\_rock-500 | `--hop-rock-500` | #6c6e72 |
| core\_rock-600 | `--hop-rock-600` | #5e6064 |
| core\_rock-700 | `--hop-rock-700` | #484a4d |
| core\_rock-800 | `--hop-rock-800` | #313335 |
| core\_rock-900 | `--hop-rock-900` | #232426 |
| core\_samoyed | `--hop-samoyed` | #ffffff |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
## Dimensions
Design tokens are design decisions, translated into data. Explore the core dimensions design tokens.
### Tokens
The values of these tokens are only valid if the current theme is
workleap
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | --------- |
| core\_0 | `--hop-space-0` | 0 |
| core\_10 | `--hop-space-10` | 0.0625rem |
| core\_20 | `--hop-space-20` | 0.125rem |
| core\_40 | `--hop-space-40` | 0.25rem |
| core\_80 | `--hop-space-80` | 0.5rem |
| core\_160 | `--hop-space-160` | 1rem |
| core\_240 | `--hop-space-240` | 1.5rem |
| core\_320 | `--hop-space-320` | 2rem |
| core\_400 | `--hop-space-400` | 2.5rem |
| core\_480 | `--hop-space-480` | 3rem |
| core\_640 | `--hop-space-640` | 4rem |
| core\_800 | `--hop-space-800` | 5rem |
| core\_960 | `--hop-space-960` | 6rem |
| core\_1280 | `--hop-space-1280` | 8rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
The values of these tokens are only valid if the current theme is
sharegate
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | --------- |
| core\_0 | `--hop-space-0` | 0 |
| core\_10 | `--hop-space-10` | 0.0625rem |
| core\_20 | `--hop-space-20` | 0.125rem |
| core\_40 | `--hop-space-40` | 0.25rem |
| core\_80 | `--hop-space-80` | 0.5rem |
| core\_160 | `--hop-space-160` | 1rem |
| core\_240 | `--hop-space-240` | 1.5rem |
| core\_320 | `--hop-space-320` | 2rem |
| core\_400 | `--hop-space-400` | 2.5rem |
| core\_480 | `--hop-space-480` | 3rem |
| core\_640 | `--hop-space-640` | 4rem |
| core\_800 | `--hop-space-800` | 5rem |
| core\_960 | `--hop-space-960` | 6rem |
| core\_1280 | `--hop-space-1280` | 8rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
## Font Family
Design tokens are design decisions, translated into data. Explore the core font-family design tokens.
### Tokens
The values of these tokens are only valid if the current theme is
workleap
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | -------------------------------------------------- |
| core\_primary | `--hop-font-family-primary` | 'ABC Favorit', Helvetica, Arial, sans-serif |
| core\_secondary | `--hop-font-family-secondary` | 'Inter', Helvetica, Arial, sans-serif |
| core\_tertiary | `--hop-font-family-tertiary` | 'ABC Favorit Mono', Consolas, 'SF Mono', monospace |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
The values of these tokens are only valid if the current theme is
sharegate
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | -------------------------------------------------- |
| core\_primary | `--hop-font-family-primary` | 'ABC Favorit', Helvetica, Arial, sans-serif |
| core\_secondary | `--hop-font-family-secondary` | 'Inter', Helvetica, Arial, sans-serif |
| core\_tertiary | `--hop-font-family-tertiary` | 'ABC Favorit Mono', Consolas, 'SF Mono', monospace |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
## Font Size
Design tokens are design decisions, translated into data. Explore the core font-size design tokens.
### Tokens
The values of these tokens are only valid if the current theme is
workleap
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | -------- |
| core\_120 | `--hop-font-size-120` | 0.75rem |
| core\_140 | `--hop-font-size-140` | 0.875rem |
| core\_160 | `--hop-font-size-160` | 1rem |
| core\_180 | `--hop-font-size-180` | 1.125rem |
| core\_200 | `--hop-font-size-200` | 1.25rem |
| core\_240 | `--hop-font-size-240` | 1.5rem |
| core\_280 | `--hop-font-size-280` | 1.75rem |
| core\_320 | `--hop-font-size-320` | 2rem |
| core\_360 | `--hop-font-size-360` | 2.25rem |
| core\_480 | `--hop-font-size-480` | 3rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
The values of these tokens are only valid if the current theme is
sharegate
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | -------- |
| core\_120 | `--hop-font-size-120` | 0.75rem |
| core\_140 | `--hop-font-size-140` | 0.875rem |
| core\_160 | `--hop-font-size-160` | 1rem |
| core\_180 | `--hop-font-size-180` | 1.125rem |
| core\_200 | `--hop-font-size-200` | 1.25rem |
| core\_240 | `--hop-font-size-240` | 1.5rem |
| core\_280 | `--hop-font-size-280` | 1.75rem |
| core\_320 | `--hop-font-size-320` | 2rem |
| core\_360 | `--hop-font-size-360` | 2.25rem |
| core\_480 | `--hop-font-size-480` | 3rem |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
## Font Weight
Design tokens are design decisions, translated into data. Explore the core font-weight design tokens.
### Tokens
The values of these tokens are only valid if the current theme is
workleap
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ----- |
| core\_400 | `--hop-font-weight-400` | 400 |
| core\_410 | `--hop-font-weight-410` | 410 |
| core\_505 | `--hop-font-weight-505` | 505 |
| core\_580 | `--hop-font-weight-580` | 580 |
| core\_590 | `--hop-font-weight-590` | 590 |
| core\_680 | `--hop-font-weight-680` | 680 |
| core\_690 | `--hop-font-weight-690` | 690 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
The values of these tokens are only valid if the current theme is
sharegate
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ----- |
| core\_400 | `--hop-font-weight-400` | 400 |
| core\_410 | `--hop-font-weight-410` | 410 |
| core\_505 | `--hop-font-weight-505` | 505 |
| core\_580 | `--hop-font-weight-580` | 580 |
| core\_590 | `--hop-font-weight-590` | 590 |
| core\_680 | `--hop-font-weight-680` | 680 |
| core\_690 | `--hop-font-weight-690` | 690 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
## Line Height
Design tokens are design decisions, translated into data. Explore the core line-height design tokens.
### Tokens
The values of these tokens are only valid if the current theme is
workleap
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | --------- |
| core\_1-125 | `--hop-line-height-1-125` | 1.125 |
| core\_1-14 | `--hop-line-height-1-14` | 1.1428571 |
| core\_1-20 | `--hop-line-height-1-20` | 1.2 |
| core\_1-25 | `--hop-line-height-1-25` | 1.25 |
| core\_1-33 | `--hop-line-height-1-33` | 1.3333333 |
| core\_1-4285 | `--hop-line-height-1-4285` | 1.4285714 |
| core\_1-50 | `--hop-line-height-1-50` | 1.5 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
The values of these tokens are only valid if the current theme is
sharegate
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | --------- |
| core\_1-125 | `--hop-line-height-1-125` | 1.125 |
| core\_1-14 | `--hop-line-height-1-14` | 1.1428571 |
| core\_1-20 | `--hop-line-height-1-20` | 1.2 |
| core\_1-25 | `--hop-line-height-1-25` | 1.25 |
| core\_1-33 | `--hop-line-height-1-33` | 1.3333333 |
| core\_1-4285 | `--hop-line-height-1-4285` | 1.4285714 |
| core\_1-50 | `--hop-line-height-1-50` | 1.5 |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
## Motion
Design tokens are design decisions, translated into data. Explore the core motion design tokens.
Motion brings meaning and a sense of life to the experience. It should be purposeful, intuitive, and seamless. Our motion utilities consists of two set of values, *durations* and *easings*.
### Usage
Both variables can be combined in [transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) as well in [CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) to set the tone of an animation/transition (animation is used interchangeably with transition from now on).
In a transition declaration:
```css
.tease {
transition: color var(--hop-easing-duration-1) var(--hop-easing-focus);
}
```
In an animation declaration:
```css
@keyframes tease-animation {
0% {
opacity: 0;
transform: scale(1.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.tease {
animation: tease-animation var(--hop-easing-duration-2) var(--hop-easing-productive);
}
```
### Tokens
#### Duration
Hopper exposes 5 durations, they help convey a message and makes animations smooth and responsive.
The values of these tokens are only valid if the current theme is
workleap
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | ------------------------------ | ----- |
| core\_easing-duration-1 | `--hop-easing-duration-1` | 100ms |
| core\_easing-duration-2 | `--hop-easing-duration-2` | 200ms |
| core\_easing-duration-3 | `--hop-easing-duration-3` | 300ms |
| core\_easing-duration-4 | `--hop-easing-duration-4` | 500ms |
| core\_easing-duration-5 | `--hop-easing-duration-5` | 800ms |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
The values of these tokens are only valid if the current theme is
sharegate
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | ------------------------------ | ----- |
| core\_easing-duration-1 | `--hop-easing-duration-1` | 100ms |
| core\_easing-duration-2 | `--hop-easing-duration-2` | 200ms |
| core\_easing-duration-3 | `--hop-easing-duration-3` | 300ms |
| core\_easing-duration-4 | `--hop-easing-duration-4` | 500ms |
| core\_easing-duration-5 | `--hop-easing-duration-5` | 800ms |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Easings
[Easings](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) denotes a mathematical function that describes the rate at which a numerical value changes.They add life to motion by providing natural rests and setting the mood of an animation. Hopper provides 3 predefined easings, each having their use.
##### Productive
Used in animations that are not in the way, they quickly change from one state to another.
##### Focus
Used in animations that are designed to draw the user's attention on what changed, in order to let them move on with their next task.
##### Expressive
Used in animations that are meant to give a sense of completeness or resolution to the user. Use them sparsely.
The values of these tokens are only valid if the current theme is
workleap
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | ------------------------------ | ------------------------------------ |
| core\_easing-productive | `--hop-easing-productive` | cubic-bezier(0.22, 0.61, 0.36, 1) |
| core\_easing-focus | `--hop-easing-focus` | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
| core\_easing-expressive | `--hop-easing-expressive` | cubic-bezier(0.72, -0.66, 0.15, 1.5) |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
The values of these tokens are only valid if the current theme is
sharegate
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | ------------------------------ | ------------------------------------ |
| core\_easing-productive | `--hop-easing-productive` | cubic-bezier(0.22, 0.61, 0.36, 1) |
| core\_easing-focus | `--hop-easing-focus` | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
| core\_easing-expressive | `--hop-easing-expressive` | cubic-bezier(0.72, -0.66, 0.15, 1.5) |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
#### Playground
## Shadow
Design tokens are design decisions, translated into data. Explore the core box-shadow design tokens.
### Tokens
The values of these tokens are only valid if the current theme is
workleap
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| core\_none | `--hop-shadow-none` | none |
| core\_sm | `--hop-shadow-sm` | 0 1px 6px 0 rgba(60, 60, 60, 0.10) |
| core\_md | `--hop-shadow-md` | 0 4px 10px 4px rgba(60, 60, 60, 0.08) |
| core\_lg | `--hop-shadow-lg` | 0 10px 18px 8px rgba(60, 60, 60, 0.08) |
| core\_tactility-button | `--hop-shadow-tactility-button` | 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset |
| core\_tactility-card | `--hop-shadow-tactility-card` | 0 12px 12px 0 rgba(0, 0, 0, 0.05) |
| core\_tactility-control | `--hop-shadow-tactility-control` | 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.03), -5px -5px 20px 0 rgba(255, 255, 255, 0.2), 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.1) inset, -2.5px 2.5px 5px 0 rgba(255, 255, 255, 0.5) inset |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.
The values of these tokens are only valid if the current theme is
sharegate
| Component Prop Value | Token Name (CSS Variable Name) | Value |
| ----------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| core\_none | `--hop-shadow-none` | none |
| core\_sm | `--hop-shadow-sm` | 0 1px 6px 0 rgba(60, 60, 60, 0.10) |
| core\_md | `--hop-shadow-md` | 0 4px 10px 4px rgba(60, 60, 60, 0.08) |
| core\_lg | `--hop-shadow-lg` | 0 10px 18px 8px rgba(60, 60, 60, 0.08) |
| core\_tactility-button | `--hop-shadow-tactility-button` | 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset |
| core\_tactility-card | `--hop-shadow-tactility-card` | 0 12px 12px 0 rgba(0, 0, 0, 0.05) |
| core\_tactility-control | `--hop-shadow-tactility-control` | 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.03), -5px -5px 20px 0 rgba(255, 255, 255, 0.2), 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.1) inset, -2.5px 2.5px 5px 0 rgba(255, 255, 255, 0.5) inset |
⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.
If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.