@gainsight-hub/design-tokens 0.2.2 → 0.2.4

package/dist/tokens.scss

@@ -3,16 +3,16 @@
 
 $border-width-100: 1px;
 $border-width-200: 2px;
-$color-brand-100: #E9F2FF;
-$color-brand-200: #CCE0FF;
-$color-brand-300: #85B8FF;
-$color-brand-400: #579DFF;
-$color-brand-500: #388BFF;
-$color-brand-600: #1D7AFC;
-$color-brand-700: #0C66E4;
-$color-brand-800: #0055CC;
-$color-brand-900: #09326C;
-$color-brand-1000: #1C2B41;
+$color-brand-100: #F2F0FF;
+$color-brand-200: #DCD8FD;
+$color-brand-300: #B3ACF6;
+$color-brand-400: #978FEF;
+$color-brand-500: #877EE7;
+$color-brand-600: #7970DB;
+$color-brand-700: #645DC6;
+$color-brand-800: #544DB2;
+$color-brand-900: #2F2C63;
+$color-brand-1000: #28273F;
 $color-neutral-0: #FFFFFF;
 $color-neutral-100: #FAFAFA;
 $color-neutral-200: #F4F5F6;
@@ -56,7 +56,7 @@ $color-red-400: #f86a68;
 $color-red-500: #f15050;
 $color-red-600: #e23d3d;
 $color-red-700: #c92c2f;
-$color-red-800: #ae2426;
+$color-red-800: #ae2424;
 $color-red-900: #5d1a1c;
 $color-red-1000: #421f21;
 $color-yellow-100: #fff7d6;
@@ -69,14 +69,14 @@ $color-yellow-700: #946f00;
 $color-yellow-800: #7f5f01;
 $color-yellow-900: #533f04;
 $color-yellow-1000: #332e1b;
-$color-action-primary-default: #0C66E4; // default color used for the most prominent call-to-action in the interface
-$color-action-primary-hover: #0055CC; // color used when a primary action is hovered
-$color-action-primary-pressed: #09326C; // color used when a primary action is actively pressed
+$color-action-primary-default: #645DC6; // default color used for the most prominent call-to-action in the interface
+$color-action-primary-hover: #544DB2; // color used when a primary action is hovered
+$color-action-primary-pressed: #2F2C63; // color used when a primary action is actively pressed
 $color-action-neutral-default: #FFFFFF; // color used for less prominent actions that support the primary action
 $color-action-neutral-hover: #FAFAFA; // color used when a secondary action is hovered
 $color-action-neutral-pressed: #F4F5F6; // color used when a secondary action is actively pressed
 $color-action-destructive-default: #c92c2f; // color used for actions that perform irreversible or potentially harmful operations
-$color-action-destructive-hover: #ae2426; // color used when a destructive action is hovered
+$color-action-destructive-hover: #ae2424; // color used when a destructive action is hovered
 $color-action-destructive-pressed: #5d1a1c; // color used when a destructive action is actively pressed
 $color-surface-page: #FAFAFA; // application canvas background used behind all UI surfaces
 $color-surface-default: #FFFFFF; // default container surface for standard UI sections (cards, panels, content areas)
@@ -98,10 +98,10 @@ $color-status-information-bold: #0c66e4; // high-emphasis color used to indicate
 $color-status-danger-bold: #c92c2f; // high-emphasis color used for neutral informational messages
 $color-community-answered: #1f8444; // color used to indicate that a question or thread has received an accepted answer
 $color-community-unanswered: #696E7C; // color used to indicate that a question or thread has not yet received a response
-$color-community-highlighted: #0C66E4; // color used to highlight content that is featured or editorially promoted
-$color-community-pinned: #0C66E4; // color used to indicate content that is pinned and prioritized in listings
-$color-link-default: #0C66E4; // default color used for interactive text links
-$color-link-hover: #0055CC; // color used for interactive text links on hover
+$color-community-highlighted: #645DC6; // color used to highlight content that is featured or editorially promoted
+$color-community-pinned: #645DC6; // color used to indicate content that is pinned and prioritized in listings
+$color-link-default: #645DC6; // default color used for interactive text links
+$color-link-hover: #544DB2; // color used for interactive text links on hover
 $color-focus-ring: #388bff; // default color used for focus rings on interactive elements
 $color-overlay-backdrop: rgba(43, 51, 70, 0.48); // semi-transparent color displayed behind modals to obscure background content
 $color-overlay-interactive-hover: rgba(43, 51, 70, 0.04); // overlay color applied to interactive elements to indicate a hover state
@@ -109,6 +109,8 @@ $color-overlay-interactive-pressed: rgba(43, 51, 70, 0.08); // overlay color app
 $color-skeleton-default: #F4F5F6; // base color used for loading placeholders while content is being fetched
 $color-skeleton-subtle: rgba(43, 51, 70, 0.04); // highlight color used in animated skeleton states to simulate loading progress
 $font-family-sans: Roboto;
+$font-family-heading: Roboto;
+$font-family-button: Roboto;
 $font-family-mono: Roboto Mono;
 $font-weight-regular: 400;
 $font-weight-medium: 500;
@@ -156,63 +158,48 @@ $space-layout-gutter: 12px; // space used as the default gap between columns or
 $elevation-1: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1); // low elevation used for raised surfaces above the base layout
 $elevation-2: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1); // medium elevation used for floating surfaces above regular content
 $elevation-3: 0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1); // high elevation used for top-level surfaces above other floating elements
-$text-hero-font-family: Roboto;
 $text-hero-font-weight: 700;
 $text-hero-font-size: 2rem;
 $text-hero-line-height: 1.25;
-$text-heading-small-font-family: Roboto;
 $text-heading-small-font-weight: 500;
 $text-heading-small-font-size: 1.25rem;
 $text-heading-small-line-height: 1.25;
-$text-heading-medium-font-family: Roboto;
 $text-heading-medium-font-weight: 500;
 $text-heading-medium-font-size: 1.5rem;
 $text-heading-medium-line-height: 1.25;
-$text-heading-large-font-family: Roboto;
 $text-heading-large-font-weight: 700;
 $text-heading-large-font-size: 1.75rem;
 $text-heading-large-line-height: 1.25;
-$text-heading-xlarge-font-family: Roboto;
 $text-heading-xlarge-font-weight: 700;
 $text-heading-xlarge-font-size: 2rem;
 $text-heading-xlarge-line-height: 1.25;
-$text-body-small-font-family: Roboto;
 $text-body-small-font-weight: 400;
 $text-body-small-font-size: 0.875rem;
 $text-body-small-line-height: 1.5;
-$text-body-medium-font-family: Roboto;
 $text-body-medium-font-weight: 400;
 $text-body-medium-font-size: 1rem;
 $text-body-medium-line-height: 1.5;
-$text-body-large-font-family: Roboto;
 $text-body-large-font-weight: 400;
 $text-body-large-font-size: 1.25rem;
 $text-body-large-line-height: 1.5;
-$text-navigation-font-family: Roboto;
 $text-navigation-font-weight: 400;
 $text-navigation-font-size: 0.875rem;
 $text-navigation-line-height: 1.25rem;
-$text-menu-font-family: Roboto;
 $text-menu-font-weight: 400;
 $text-menu-font-size: 0.875rem;
 $text-menu-line-height: 1.25rem;
-$text-button-font-family: Roboto;
 $text-button-font-weight: 500;
 $text-button-font-size: 0.875rem;
 $text-button-line-height: 1.25rem;
-$text-label-small-font-family: Roboto;
 $text-label-small-font-weight: 500;
 $text-label-small-font-size: 0.875rem;
 $text-label-small-line-height: 1.25rem;
-$text-label-medium-font-family: Roboto;
 $text-label-medium-font-weight: 500;
 $text-label-medium-font-size: 1rem;
 $text-label-medium-line-height: 1.5rem;
-$text-caption-font-family: Roboto;
 $text-caption-font-weight: 400;
 $text-caption-font-size: 0.75rem;
 $text-caption-line-height: 1rem;
-$text-code-font-family: Roboto Mono;
 $text-code-font-weight: 400;
 $text-code-font-size: 1rem;
 $text-code-line-height: 1.5;
@@ -222,9 +209,9 @@ $button-radius: 8px; // Border radius used for all button variants.
 $button-border-width: 1px; // Border width used for all button variants.
 $button-font-weight: 500; // Font weight used for button labels across all variants.
 $button-text-transform: none; // Text transform applied to button labels (e.g., none/uppercase).
-$button-primary-background-default: #0C66E4; // Primary button background in default state.
-$button-primary-background-hover: #0055CC; // Primary button background on hover.
-$button-primary-background-pressed: #09326C; // Primary button background on press.
+$button-primary-background-default: #645DC6; // Primary button background in default state.
+$button-primary-background-hover: #544DB2; // Primary button background on hover.
+$button-primary-background-pressed: #2F2C63; // Primary button background on press.
 $button-primary-content-default: #FFFFFF; // Primary button label/icon color in default state.
 $button-primary-content-hover: #FFFFFF; // Primary button label/icon color on hover.
 $button-primary-content-pressed: #FFFFFF; // Primary button label/icon color on press.
@@ -243,7 +230,7 @@ $button-secondary-border-hover: #DEDFE2; // Secondary button border color on hov
 $button-secondary-border-pressed: #DEDFE2; // Secondary button border color on press.
 $button-secondary-shadow: none; // Secondary button shadow (none).
 $button-destructive-background-default: #c92c2f; // Destructive button background in default state.
-$button-destructive-background-hover: #ae2426; // Destructive button background on hover.
+$button-destructive-background-hover: #ae2424; // Destructive button background on hover.
 $button-destructive-background-pressed: #5d1a1c; // Destructive button background on press.
 $button-destructive-content-default: #FFFFFF; // Destructive button label/icon color in default state.
 $button-destructive-content-hover: #FFFFFF; // Destructive button label/icon color on hover.
@@ -264,9 +251,9 @@ $button-vote-border-pressed: #DEDFE2; // Vote button border color on press.
 $button-vote-shadow-default: none; // Vote button shadow in default state (none).
 $button-vote-shadow-hover: none; // Vote button shadow on hover (none).
 $button-vote-shadow-pressed: none; // Vote button shadow on press (none).
-$button-vote-selected-background-default: #0C66E4; // Vote button background when selected (default).
-$button-vote-selected-background-hover: #0055CC; // Vote button background when selected (hovered).
-$button-vote-selected-background-pressed: #09326C; // Vote button background when selected (pressed).
+$button-vote-selected-background-default: #645DC6; // Vote button background when selected (default).
+$button-vote-selected-background-hover: #544DB2; // Vote button background when selected (hovered).
+$button-vote-selected-background-pressed: #2F2C63; // Vote button background when selected (pressed).
 $button-vote-selected-content-default: #FFFFFF; // Vote button content color when selected (default).
 $button-vote-selected-content-hover: #FFFFFF; // Vote button content color when selected (hovered).
 $button-vote-selected-content-pressed: #FFFFFF; // Vote button content color when selected (pressed).
@@ -285,11 +272,11 @@ $card-background-default: #FFFFFF; // Card background in default state.
 $card-background-hover: #FFFFFF; // Card background on hover.
 $card-background-pressed: #FFFFFF; // Card background on press.
 $card-title-default: #2B3346; // Card title color in default state.
-$card-title-hover: #0C66E4; // Card title color on hover (link styling).
+$card-title-hover: #645DC6; // Card title color on hover (link styling).
 $card-title-pressed: #2B3346; // Card title color on press.
 $card-content-default: #2B3346; // Card body/content color in default state.
 $card-content-hover: #2B3346; // Card body/content color on hover.
-$card-content-pressed: #0055CC; // Card body/content color on press (link hovered styling).
+$card-content-pressed: #544DB2; // Card body/content color on press (link hovered styling).
 $card-shadow-default: none; // Card shadow in default state (none).
 $card-shadow-hover: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1); // Card shadow on hover.
 $card-shadow-pressed: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1); // Card shadow on press.
@@ -307,11 +294,11 @@ $feed-item-background-default: #FFFFFF; // Feed item background in default state
 $feed-item-background-hover: #FFFFFF; // Feed item background on hover.
 $feed-item-background-pressed: #FFFFFF; // Feed item background on press.
 $feed-item-title-default: #2B3346; // Feed item title color in default state.
-$feed-item-title-hover: #0C66E4; // Feed item title color on hover (link styling).
-$feed-item-title-pressed: #0055CC; // Feed item title color on press (link hovered styling).
+$feed-item-title-hover: #645DC6; // Feed item title color on hover (link styling).
+$feed-item-title-pressed: #544DB2; // Feed item title color on press (link hovered styling).
 $feed-item-content-default: #2B3346; // Feed item content color in default state.
 $feed-item-content-hover: #2B3346; // Feed item content color on hover.
-$feed-item-content-pressed: #0055CC; // Feed item content color on press (link hovered styling).
+$feed-item-content-pressed: #544DB2; // Feed item content color on press (link hovered styling).
 $feed-item-shadow-default: none; // Feed item shadow in default state (none).
 $feed-item-shadow-hover: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1); // Feed item shadow on hover.
 $feed-item-shadow-pressed: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1); // Feed item shadow on press.
@@ -321,6 +308,14 @@ $navigation-dropdown-background: #FFFFFF; // Navigation dropdown background.
 $navigation-dropdown-content: #2B3346; // Navigation dropdown content color.
 $navigation-border-top: rgba(0, 0, 0, 0); // Top border of navigation (transparent).
 $navigation-border-bottom: #DEDFE2; // Bottom border of navigation.
+$sidebar-background: #FFFFFF; // Sidebar widget placeholder background color.
+$sidebar-border-radius: 8px; // Sidebar widget placeholder border radius.
+$sidebar-border-color: #DEDFE2; // Sidebar widget placeholder border color.
+$sidebar-border-width: 1px; // Sidebar widget placeholder border width.
+$sidebar-shadow: none; // Sidebar widget placeholder box shadow.
+$sidebar-title-color: #2B3346; // Sidebar widget title text color.
+$sidebar-title-font-family: Roboto; // Sidebar widget title font family.
+$sidebar-title-font-weight: 500; // Sidebar widget title font weight.
 $widget-title: #2B3346; // Default widget title color.
 $widget-subtitle: #2B3346; // Default widget subtitle color.
 $widget-background: #FAFAFA; // Default widget background.
@@ -337,16 +332,16 @@ $widget-introduction-content: #2B3346; // Introduction widget body/content color
 $widget-introduction-icon-background: #1f8444; // Introduction widget icon container background.
 $widget-introduction-icon-content: #FFFFFF; // Introduction widget icon color.
 $widget-introduction-close-content: #696E7C; // Introduction widget close button color.
-$theme-brand-100: #E9F2FF;
-$theme-brand-200: #CCE0FF;
-$theme-brand-300: #85B8FF;
-$theme-brand-400: #579DFF;
-$theme-brand-500: #388BFF;
-$theme-brand-600: #1D7AFC;
-$theme-brand-700: #0C66E4;
-$theme-brand-800: #0055CC;
-$theme-brand-900: #09326C;
-$theme-brand-1000: #1C2B41;
+$theme-brand-100: #F2F0FF;
+$theme-brand-200: #DCD8FD;
+$theme-brand-300: #B3ACF6;
+$theme-brand-400: #978FEF;
+$theme-brand-500: #877EE7;
+$theme-brand-600: #7970DB;
+$theme-brand-700: #645DC6;
+$theme-brand-800: #544DB2;
+$theme-brand-900: #2F2C63;
+$theme-brand-1000: #28273F;
 $theme-neutral-0: #FFFFFF;
 $theme-neutral-100: #FAFAFA;
 $theme-neutral-200: #F4F5F6;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gainsight-hub/design-tokens",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Design tokens: CSS variables, JSON, TypeScript constants, and Tailwind preset.",
   "license": "UNLICENSED",
   "author": "Gainsight Design Systems",