@gainsight-hub/design-tokens 0.1.0

package/dist/tokens.scss

@@ -0,0 +1,360 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$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-neutral-0: #FFFFFF;
+$color-neutral-100: #FAFAFA;
+$color-neutral-200: #F4F5F6;
+$color-neutral-300: #DEDFE2;
+$color-neutral-400: #B8BBC2;
+$color-neutral-500: #8D919B;
+$color-neutral-600: #7B808E;
+$color-neutral-700: #696E7C;
+$color-neutral-800: #4F5663;
+$color-neutral-900: #3B4254;
+$color-neutral-1000: #2B3346;
+$color-neutral-a100: rgba(43, 51, 70, 0.04);
+$color-neutral-a200: rgba(43, 51, 70, 0.08);
+$color-neutral-a300: rgba(43, 51, 70, 0.16);
+$color-neutral-a400: rgba(43, 51, 70, 0.32);
+$color-neutral-a500: rgba(43, 51, 70, 0.48);
+$color-blue-100: #e9f2ff;
+$color-blue-200: #cce0ff;
+$color-blue-300: #85b8ff;
+$color-blue-400: #579dff;
+$color-blue-500: #388bff;
+$color-blue-600: #1d7afc;
+$color-blue-700: #0c66e4;
+$color-blue-800: #0055cc;
+$color-blue-900: #09326c;
+$color-blue-1000: #1c2b41;
+$color-green-100: #dcffeb;
+$color-green-200: #baf3d2;
+$color-green-300: #7ee2a6;
+$color-green-400: #4bce7f;
+$color-green-500: #2abb62;
+$color-green-600: #22a052;
+$color-green-700: #1f8444;
+$color-green-800: #216e3d;
+$color-green-900: #164b29;
+$color-green-1000: #1c3324;
+$color-red-100: #ffeceb;
+$color-red-200: #ffd3d2;
+$color-red-300: #fd9391;
+$color-red-400: #f86a68;
+$color-red-500: #f15050;
+$color-red-600: #e23d3d;
+$color-red-700: #c92c2f;
+$color-red-800: #ae2426;
+$color-red-900: #5d1a1c;
+$color-red-1000: #421f21;
+$color-yellow-100: #fff7d6;
+$color-yellow-200: #f8e6a0;
+$color-yellow-300: #f5cd47;
+$color-yellow-400: #e2b203;
+$color-yellow-500: #cf9f02;
+$color-yellow-600: #b38600;
+$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-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-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)
+$color-surface-muted: #F4F5F6; // sub-surface used inside containers to visually group secondary areas (e.g., comment/reply bubbles)
+$color-surface-disabled: #F4F5F6; // background of disabled interactive elements such as inputs, buttons, or selection controls
+$color-surface-overlay: #FFFFFF; // elevated surface for overlays and floating layers (modals, dropdowns, popovers).
+$color-surface-inverse: #2B3346; // color used for inverse surfaces such as tooltips and high-contrast floating UI
+$color-content-default: #2B3346; // default color used for primary body text and high-emphasis content
+$color-content-subtle: #4F5663; // color used for secondary text such as helper text, metadata, or supporting information
+$color-content-subtlest: #696E7C; // color used for low-emphasis text such as placeholders or less important UI copy
+$color-content-heading-default: #2B3346; // default color used for section and component headings
+$color-content-heading-hero: #FFFFFF; // color used for prominent page-level headings displayed on hero or banner areas
+$color-content-inverse: #FFFFFF; // color used for text displayed on high-contrast or brand-colored backgrounds
+$color-content-disabled: #B8BBC2; // color used for text on disabled elements or unavailable content
+$color-line-default: #DEDFE2; // default border and divider color used for standard UI boundaries, separators, and component outlines
+$color-line-disabled: #DEDFE2; // border and divider color used for disabled components or non-interactive states where visual emphasis is reduced
+$color-status-success-bold: #1f8444; // high-emphasis color used to communicate successful outcomes or confirmations
+$color-status-information-bold: #0c66e4; // high-emphasis color used to indicate errors or critical issues
+$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-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
+$color-overlay-interactive-pressed: rgba(43, 51, 70, 0.08); // overlay color applied to interactive elements to indicate an active or pressed state
+$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-mono: Roboto Mono;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-bold: 700;
+$font-size-100: 0.75rem;
+$font-size-200: 0.875rem;
+$font-size-300: 1rem;
+$font-size-400: 1.25rem;
+$font-size-500: 1.5rem;
+$font-size-600: 1.75rem;
+$font-size-700: 2rem;
+$line-height-ratio-tight: 1.25;
+$line-height-ratio-relaxed: 1.5;
+$line-height-grid-100: 1rem;
+$line-height-grid-200: 1.25rem;
+$line-height-grid-300: 1.5rem;
+$line-height-grid-400: 1.75rem;
+$line-height-grid-500: 2rem;
+$line-height-grid-600: 2.25rem;
+$line-height-grid-700: 2.5rem;
+$radius-100: 8px;
+$radius-150: 12px;
+$radius-200: 16px;
+$radius-025: 2px;
+$radius-050: 4px;
+$radius-full: 9999px;
+$shadow-100: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
+$shadow-200: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+$shadow-300: 0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
+$space-0: 0px;
+$space-100: 8px;
+$space-125: 12px;
+$space-200: 16px;
+$space-250: 20px;
+$space-300: 24px;
+$space-400: 32px;
+$space-500: 40px;
+$space-600: 48px;
+$space-800: 64px;
+$space-1000: 80px;
+$space-025: 2px;
+$space-050: 4px;
+$space-075: 6px;
+$space-layout-gutter: 12px; // space used as the default gap between columns or layout elements
+$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;
+$backtotop-background: #2B3346; // Back-to-top button background.
+$backtotop-content: #FFFFFF; // Back-to-top button icon/content color.
+$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-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.
+$button-primary-border-default: rgba(0, 0, 0, 0); // Primary button border color in default state (no visible border).
+$button-primary-border-hover: rgba(0, 0, 0, 0); // Primary button border color on hover (no visible border).
+$button-primary-border-pressed: rgba(0, 0, 0, 0); // Primary button border color on press (no visible border).
+$button-primary-shadow: none; // Primary button shadow (none).
+$button-secondary-background-default: #FFFFFF; // Secondary button background in default state.
+$button-secondary-background-hover: #FAFAFA; // Secondary button background on hover.
+$button-secondary-background-pressed: #F4F5F6; // Secondary button background on press.
+$button-secondary-content-default: #2B3346; // Secondary button label/icon color in default state.
+$button-secondary-content-hover: #2B3346; // Secondary button label/icon color on hover.
+$button-secondary-content-pressed: #2B3346; // Secondary button label/icon color on press.
+$button-secondary-border-default: #DEDFE2; // Secondary button border color in default state.
+$button-secondary-border-hover: #DEDFE2; // Secondary button border color on hover.
+$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-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.
+$button-destructive-content-pressed: #FFFFFF; // Destructive button label/icon color on press.
+$button-destructive-border-default: rgba(0, 0, 0, 0); // Destructive button border color in default state (no visible border).
+$button-destructive-border-hover: rgba(0, 0, 0, 0); // Destructive button border color on hover (no visible border).
+$button-destructive-border-pressed: rgba(0, 0, 0, 0); // Destructive button border color on press (no visible border).
+$button-destructive-shadow: none; // Destructive button shadow (none).
+$button-vote-background-default: #FFFFFF; // Vote button background in default state.
+$button-vote-background-hover: #FAFAFA; // Vote button background on hover.
+$button-vote-background-pressed: #F4F5F6; // Vote button background on press.
+$button-vote-content-default: #2B3346; // Vote button content color in default state.
+$button-vote-content-hover: #2B3346; // Vote button content color on hover.
+$button-vote-content-pressed: #2B3346; // Vote button content color on press.
+$button-vote-border-default: #DEDFE2; // Vote button border color in default state.
+$button-vote-border-hover: #DEDFE2; // Vote button border color on hover.
+$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-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).
+$button-vote-selected-border-default: rgba(0, 0, 0, 0); // Vote button border when selected (default) (no visible border).
+$button-vote-selected-border-hover: rgba(0, 0, 0, 0); // Vote button border when selected (hovered) (no visible border).
+$button-vote-selected-border-pressed: rgba(0, 0, 0, 0); // Vote button border when selected (pressed) (no visible border).
+$button-vote-selected-shadow-default: none; // Vote button shadow when selected (default) (none).
+$button-vote-selected-shadow-hover: none; // Vote button shadow when selected (hovered) (none).
+$button-vote-selected-shadow-pressed: none; // Vote button shadow when selected (pressed) (none).
+$card-radius: 8px; // Border radius used for cards.
+$card-border-width: 1px; // Border width used for cards.
+$card-border-default: #DEDFE2; // Card border color in default state.
+$card-border-hover: #DEDFE2; // Card border color on hover.
+$card-border-pressed: #DEDFE2; // Card border color on press.
+$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-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-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.
+$feed-container-radius: 8px; // Border radius used for the feed container.
+$feed-container-border-width: 1px; // Border width used for the feed container.
+$feed-container-border-color: #DEDFE2; // Feed container border color.
+$feed-container-background: #FFFFFF; // Feed container background.
+$feed-container-shadow: none; // Feed container shadow (none).
+$feed-item-radius: 8px; // Border radius used for feed items.
+$feed-item-border-width: 1px; // Border width used for feed items.
+$feed-item-border-default: #DEDFE2; // Feed item border color in default state.
+$feed-item-border-hover: #DEDFE2; // Feed item border color on hover.
+$feed-item-border-pressed: #DEDFE2; // Feed item border color on press.
+$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-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-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.
+$navigation-background: #FFFFFF; // Navigation bar background.
+$navigation-content: #2B3346; // Navigation bar content color (text/icons).
+$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.
+$widget-title: #2B3346; // Default widget title color.
+$widget-subtitle: #2B3346; // Default widget subtitle color.
+$widget-background: #FAFAFA; // Default widget background.
+$widget-shadow: none; // Default widget shadow (none).
+$widget-hero-title: #FFFFFF; // Hero widget title color.
+$widget-hero-subtitle: #FFFFFF; // Hero widget subtitle color.
+$widget-hero-content-shadow: none; // Hero widget content shadow (none; handled by image/overlay as needed).
+$widget-hero-background: uploaded image; // Background of the hero section.
+$widget-hero-height: 240px; // Height of the hero section.
+$widget-featured-background: #0c66e4; // Featured topic widget background.
+$widget-featured-content: #FFFFFF; // Featured topic widget content color.
+$widget-introduction-background: #FFFFFF; // Introduction widget background.
+$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-neutral-0: #FFFFFF;
+$theme-neutral-100: #FAFAFA;
+$theme-neutral-200: #F4F5F6;
+$theme-neutral-300: #DEDFE2;
+$theme-neutral-400: #B8BBC2;
+$theme-neutral-500: #8D919B;
+$theme-neutral-600: #7B808E;
+$theme-neutral-700: #696E7C;
+$theme-neutral-800: #4F5663;
+$theme-neutral-900: #3B4254;
+$theme-neutral-1000: #2B3346;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@gainsight-hub/design-tokens",
+  "version": "0.1.0",
+  "description": "Design tokens: CSS variables, JSON, TypeScript constants, and Tailwind preset.",
+  "license": "UNLICENSED",
+  "author": "Gainsight Design Systems",
+  "type": "module",
+  "files": ["dist"],
+  "sideEffects": ["**/*.css"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./themes.css": "./dist/themes.css",
+    "./themes/*": "./dist/themes/*.css",
+    "./tailwind": {
+      "import": "./dist/tailwind.preset.mjs",
+      "require": "./dist/tailwind.preset.cjs"
+    },
+    "./tokens.json": "./dist/tokens.json",
+    "./token-catalog.json": "./dist/token-catalog.json"
+  },
+  "scripts": {
+    "build": "node ./build.js",
+    "migrate:generate-mapping": "node ./themes/legacy/generate-mapping.js",
+    "migrate:tokens": "node ./themes/legacy/migrate-tokens.js"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "flat": "^6.0.1",
+    "glob": "^13.0.6",
+    "style-dictionary": "^4.4.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Gainsight/dch-sdk.git",
+    "directory": "packages/design-tokens"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": ["design-tokens", "design-system", "css-variables", "scss", "tailwind", "gainsight"]
+}