@gainsight-hub/design-tokens 0.2.2 → 0.2.3

package/dist/tokens.d.ts

@@ -149,6 +149,8 @@ export const ColorSkeletonDefault: string;
 /** highlight color used in animated skeleton states to simulate loading progress */
 export const ColorSkeletonSubtle: string;
 export const FontFamilySans: string;
+export const FontFamilyHeading: string;
+export const FontFamilyButton: string;
 export const FontFamilyMono: string;
 export const FontWeightRegular: number;
 export const FontWeightMedium: number;
@@ -200,63 +202,48 @@ export const Elevation1: string;
 export const Elevation2: string;
 /** high elevation used for top-level surfaces above other floating elements */
 export const Elevation3: string;
-export const TextHeroFontFamily: string;
 export const TextHeroFontWeight: number;
 export const TextHeroFontSize: string;
 export const TextHeroLineHeight: number;
-export const TextHeadingSmallFontFamily: string;
 export const TextHeadingSmallFontWeight: number;
 export const TextHeadingSmallFontSize: string;
 export const TextHeadingSmallLineHeight: number;
-export const TextHeadingMediumFontFamily: string;
 export const TextHeadingMediumFontWeight: number;
 export const TextHeadingMediumFontSize: string;
 export const TextHeadingMediumLineHeight: number;
-export const TextHeadingLargeFontFamily: string;
 export const TextHeadingLargeFontWeight: number;
 export const TextHeadingLargeFontSize: string;
 export const TextHeadingLargeLineHeight: number;
-export const TextHeadingXlargeFontFamily: string;
 export const TextHeadingXlargeFontWeight: number;
 export const TextHeadingXlargeFontSize: string;
 export const TextHeadingXlargeLineHeight: number;
-export const TextBodySmallFontFamily: string;
 export const TextBodySmallFontWeight: number;
 export const TextBodySmallFontSize: string;
 export const TextBodySmallLineHeight: number;
-export const TextBodyMediumFontFamily: string;
 export const TextBodyMediumFontWeight: number;
 export const TextBodyMediumFontSize: string;
 export const TextBodyMediumLineHeight: number;
-export const TextBodyLargeFontFamily: string;
 export const TextBodyLargeFontWeight: number;
 export const TextBodyLargeFontSize: string;
 export const TextBodyLargeLineHeight: number;
-export const TextNavigationFontFamily: string;
 export const TextNavigationFontWeight: number;
 export const TextNavigationFontSize: string;
 export const TextNavigationLineHeight: string;
-export const TextMenuFontFamily: string;
 export const TextMenuFontWeight: number;
 export const TextMenuFontSize: string;
 export const TextMenuLineHeight: string;
-export const TextButtonFontFamily: string;
 export const TextButtonFontWeight: number;
 export const TextButtonFontSize: string;
 export const TextButtonLineHeight: string;
-export const TextLabelSmallFontFamily: string;
 export const TextLabelSmallFontWeight: number;
 export const TextLabelSmallFontSize: string;
 export const TextLabelSmallLineHeight: string;
-export const TextLabelMediumFontFamily: string;
 export const TextLabelMediumFontWeight: number;
 export const TextLabelMediumFontSize: string;
 export const TextLabelMediumLineHeight: string;
-export const TextCaptionFontFamily: string;
 export const TextCaptionFontWeight: number;
 export const TextCaptionFontSize: string;
 export const TextCaptionLineHeight: string;
-export const TextCodeFontFamily: string;
 export const TextCodeFontWeight: number;
 export const TextCodeFontSize: string;
 export const TextCodeLineHeight: number;
@@ -470,6 +457,22 @@ export const NavigationDropdownContent: string;
 export const NavigationBorderTop: string;
 /** Bottom border of navigation. */
 export const NavigationBorderBottom: string;
+/** Sidebar widget placeholder background color. */
+export const SidebarBackground: string;
+/** Sidebar widget placeholder border radius. */
+export const SidebarBorderRadius: string;
+/** Sidebar widget placeholder border color. */
+export const SidebarBorderColor: string;
+/** Sidebar widget placeholder border width. */
+export const SidebarBorderWidth: string;
+/** Sidebar widget placeholder box shadow. */
+export const SidebarShadow: string;
+/** Sidebar widget title text color. */
+export const SidebarTitleColor: string;
+/** Sidebar widget title font family. */
+export const SidebarTitleFontFamily: string;
+/** Sidebar widget title font weight. */
+export const SidebarTitleFontWeight: number;
 /** Default widget title color. */
 export const WidgetTitle: string;
 /** Default widget subtitle color. */

package/dist/tokens.js

@@ -110,6 +110,8 @@ export const ColorOverlayInteractivePressed = "#2b334614"; // overlay color appl
 export const ColorSkeletonDefault = "#F4F5F6"; // base color used for loading placeholders while content is being fetched
 export const ColorSkeletonSubtle = "#2b33460a"; // highlight color used in animated skeleton states to simulate loading progress
 export const FontFamilySans = "Roboto";
+export const FontFamilyHeading = "Roboto";
+export const FontFamilyButton = "Roboto";
 export const FontFamilyMono = "Roboto Mono";
 export const FontWeightRegular = 400;
 export const FontWeightMedium = 500;
@@ -163,63 +165,48 @@ export const Elevation2 =
   "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
 export const Elevation3 =
   "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
-export const TextHeroFontFamily = "Roboto";
 export const TextHeroFontWeight = 700;
 export const TextHeroFontSize = "2rem";
 export const TextHeroLineHeight = 1.25;
-export const TextHeadingSmallFontFamily = "Roboto";
 export const TextHeadingSmallFontWeight = 500;
 export const TextHeadingSmallFontSize = "1.25rem";
 export const TextHeadingSmallLineHeight = 1.25;
-export const TextHeadingMediumFontFamily = "Roboto";
 export const TextHeadingMediumFontWeight = 500;
 export const TextHeadingMediumFontSize = "1.5rem";
 export const TextHeadingMediumLineHeight = 1.25;
-export const TextHeadingLargeFontFamily = "Roboto";
 export const TextHeadingLargeFontWeight = 700;
 export const TextHeadingLargeFontSize = "1.75rem";
 export const TextHeadingLargeLineHeight = 1.25;
-export const TextHeadingXlargeFontFamily = "Roboto";
 export const TextHeadingXlargeFontWeight = 700;
 export const TextHeadingXlargeFontSize = "2rem";
 export const TextHeadingXlargeLineHeight = 1.25;
-export const TextBodySmallFontFamily = "Roboto";
 export const TextBodySmallFontWeight = 400;
 export const TextBodySmallFontSize = "0.875rem";
 export const TextBodySmallLineHeight = 1.5;
-export const TextBodyMediumFontFamily = "Roboto";
 export const TextBodyMediumFontWeight = 400;
 export const TextBodyMediumFontSize = "1rem";
 export const TextBodyMediumLineHeight = 1.5;
-export const TextBodyLargeFontFamily = "Roboto";
 export const TextBodyLargeFontWeight = 400;
 export const TextBodyLargeFontSize = "1.25rem";
 export const TextBodyLargeLineHeight = 1.5;
-export const TextNavigationFontFamily = "Roboto";
 export const TextNavigationFontWeight = 400;
 export const TextNavigationFontSize = "0.875rem";
 export const TextNavigationLineHeight = "1.25rem";
-export const TextMenuFontFamily = "Roboto";
 export const TextMenuFontWeight = 400;
 export const TextMenuFontSize = "0.875rem";
 export const TextMenuLineHeight = "1.25rem";
-export const TextButtonFontFamily = "Roboto";
 export const TextButtonFontWeight = 500;
 export const TextButtonFontSize = "0.875rem";
 export const TextButtonLineHeight = "1.25rem";
-export const TextLabelSmallFontFamily = "Roboto";
 export const TextLabelSmallFontWeight = 500;
 export const TextLabelSmallFontSize = "0.875rem";
 export const TextLabelSmallLineHeight = "1.25rem";
-export const TextLabelMediumFontFamily = "Roboto";
 export const TextLabelMediumFontWeight = 500;
 export const TextLabelMediumFontSize = "1rem";
 export const TextLabelMediumLineHeight = "1.5rem";
-export const TextCaptionFontFamily = "Roboto";
 export const TextCaptionFontWeight = 400;
 export const TextCaptionFontSize = "0.75rem";
 export const TextCaptionLineHeight = "1rem";
-export const TextCodeFontFamily = "Roboto Mono";
 export const TextCodeFontWeight = 400;
 export const TextCodeFontSize = "1rem";
 export const TextCodeLineHeight = 1.5;
@@ -332,6 +319,14 @@ export const NavigationDropdownBackground = "#FFFFFF"; // Navigation dropdown ba
 export const NavigationDropdownContent = "#2B3346"; // Navigation dropdown content color.
 export const NavigationBorderTop = "#00000000"; // Top border of navigation (transparent).
 export const NavigationBorderBottom = "#DEDFE2"; // Bottom border of navigation.
+export const SidebarBackground = "#FFFFFF"; // Sidebar widget placeholder background color.
+export const SidebarBorderRadius = "8px"; // Sidebar widget placeholder border radius.
+export const SidebarBorderColor = "#DEDFE2"; // Sidebar widget placeholder border color.
+export const SidebarBorderWidth = "1px"; // Sidebar widget placeholder border width.
+export const SidebarShadow = "none"; // Sidebar widget placeholder box shadow.
+export const SidebarTitleColor = "#2B3346"; // Sidebar widget title text color.
+export const SidebarTitleFontFamily = "Roboto"; // Sidebar widget title font family.
+export const SidebarTitleFontWeight = 500; // Sidebar widget title font weight.
 export const WidgetTitle = "#2B3346"; // Default widget title color.
 export const WidgetSubtitle = "#2B3346"; // Default widget subtitle color.
 export const WidgetBackground = "#FAFAFA"; // Default widget background.

package/dist/tokens.json

@@ -163,6 +163,8 @@
   "font": {
     "family": {
       "sans": "Roboto",
+      "heading": "Roboto",
+      "button": "Roboto",
       "mono": "Roboto Mono"
     },
     "weight": {
@@ -237,7 +239,6 @@
   "text": {
     "hero": {
       "font": {
-        "family": "Roboto",
         "weight": 700,
         "size": "2rem"
       },
@@ -246,7 +247,6 @@
     "heading": {
       "small": {
         "font": {
-          "family": "Roboto",
           "weight": 500,
           "size": "1.25rem"
         },
@@ -254,7 +254,6 @@
       },
       "medium": {
         "font": {
-          "family": "Roboto",
           "weight": 500,
           "size": "1.5rem"
         },
@@ -262,7 +261,6 @@
       },
       "large": {
         "font": {
-          "family": "Roboto",
           "weight": 700,
           "size": "1.75rem"
         },
@@ -270,7 +268,6 @@
       },
       "xlarge": {
         "font": {
-          "family": "Roboto",
           "weight": 700,
           "size": "2rem"
         },
@@ -280,7 +277,6 @@
     "body": {
       "small": {
         "font": {
-          "family": "Roboto",
           "weight": 400,
           "size": "0.875rem"
         },
@@ -288,7 +284,6 @@
       },
       "medium": {
         "font": {
-          "family": "Roboto",
           "weight": 400,
           "size": "1rem"
         },
@@ -296,7 +291,6 @@
       },
       "large": {
         "font": {
-          "family": "Roboto",
           "weight": 400,
           "size": "1.25rem"
         },
@@ -305,7 +299,6 @@
     },
     "navigation": {
       "font": {
-        "family": "Roboto",
         "weight": 400,
         "size": "0.875rem"
       },
@@ -313,7 +306,6 @@
     },
     "menu": {
       "font": {
-        "family": "Roboto",
         "weight": 400,
         "size": "0.875rem"
       },
@@ -321,7 +313,6 @@
     },
     "button": {
       "font": {
-        "family": "Roboto",
         "weight": 500,
         "size": "0.875rem"
       },
@@ -330,7 +321,6 @@
     "label": {
       "small": {
         "font": {
-          "family": "Roboto",
           "weight": 500,
           "size": "0.875rem"
         },
@@ -338,7 +328,6 @@
       },
       "medium": {
         "font": {
-          "family": "Roboto",
           "weight": 500,
           "size": "1rem"
         },
@@ -347,7 +336,6 @@
     },
     "caption": {
       "font": {
-        "family": "Roboto",
         "weight": 400,
         "size": "0.75rem"
       },
@@ -355,7 +343,6 @@
     },
     "code": {
       "font": {
-        "family": "Roboto Mono",
         "weight": 400,
         "size": "1rem"
       },
@@ -557,6 +544,22 @@
       "bottom": "#DEDFE2"
     }
   },
+  "sidebar": {
+    "background": "#FFFFFF",
+    "border": {
+      "radius": "8px",
+      "color": "#DEDFE2",
+      "width": "1px"
+    },
+    "shadow": "none",
+    "title": {
+      "color": "#2B3346",
+      "font": {
+        "family": "Roboto",
+        "weight": 500
+      }
+    }
+  },
   "widget": {
     "title": "#2B3346",
     "subtitle": "#2B3346",

package/dist/tokens.scss

@@ -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;
@@ -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.

package/package.json

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