@synergy-design-system/tokens 1.14.0 → 1.15.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@synergy-design-system/tokens-v1.15.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.14.0...tokens/1.15.0) (2024-04-26)
+
+
+### Features
+
+* ✨ tooltip ([#451](https://github.com/synergy-design-system/synergy-design-system/issues/451)) ([b6f3958](https://github.com/synergy-design-system/synergy-design-system/commit/b6f395846b00598273d0287daa98a64f82b75699))
+
 # [@synergy-design-system/tokens-v1.14.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.13.0...tokens/1.14.0) (2024-04-23)
 
 

package/dist/js/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.13.0
+ * @synergy-design-system/tokens version 1.14.0
  * SICK Global UX Foundation
  */
 
@@ -629,6 +629,51 @@ export const SynToggleSizeMedium: string;
  */
 export const SynToggleSizeLarge: string;
 
+/**
+ * Maps to the css variable `--syn-tooltip-border-radius`
+ */
+export const SynTooltipBorderRadius: string;
+
+/**
+ * Maps to the css variable `--syn-tooltip-background-color`
+ */
+export const SynTooltipBackgroundColor: string;
+
+/**
+ * Maps to the css variable `--syn-tooltip-color`
+ */
+export const SynTooltipColor: string;
+
+/**
+ * Maps to the css variable `--syn-tooltip-font-family`
+ */
+export const SynTooltipFontFamily: string;
+
+/**
+ * Maps to the css variable `--syn-tooltip-font-weight`
+ */
+export const SynTooltipFontWeight: string;
+
+/**
+ * Maps to the css variable `--syn-tooltip-font-size`
+ */
+export const SynTooltipFontSize: string;
+
+/**
+ * Maps to the css variable `--syn-tooltip-line-height`
+ */
+export const SynTooltipLineHeight: string;
+
+/**
+ * Maps to the css variable `--syn-tooltip-padding`
+ */
+export const SynTooltipPadding: string;
+
+/**
+ * Maps to the css variable `--syn-tooltip-arrow-size`
+ */
+export const SynTooltipArrowSize: string;
+
 /**
  * Maps to the css variable `--syn-body-x-small-regular`
  */

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.13.0
+ * @synergy-design-system/tokens version 1.14.0
  * SICK Global UX Foundation
  */
 
@@ -628,6 +628,51 @@ export const SynToggleSizeMedium = 'var(--syn-toggle-size-medium)';
  */
 export const SynToggleSizeLarge = 'var(--syn-toggle-size-large)';
 
+/**
+ * @type {string}
+ */
+export const SynTooltipBorderRadius = 'var(--syn-tooltip-border-radius)';
+
+/**
+ * @type {string}
+ */
+export const SynTooltipBackgroundColor = 'var(--syn-tooltip-background-color)';
+
+/**
+ * @type {string}
+ */
+export const SynTooltipColor = 'var(--syn-tooltip-color)';
+
+/**
+ * @type {string}
+ */
+export const SynTooltipFontFamily = 'var(--syn-tooltip-font-family)';
+
+/**
+ * @type {string}
+ */
+export const SynTooltipFontWeight = 'var(--syn-tooltip-font-weight)';
+
+/**
+ * @type {string}
+ */
+export const SynTooltipFontSize = 'var(--syn-tooltip-font-size)';
+
+/**
+ * @type {string}
+ */
+export const SynTooltipLineHeight = 'var(--syn-tooltip-line-height)';
+
+/**
+ * @type {string}
+ */
+export const SynTooltipPadding = 'var(--syn-tooltip-padding)';
+
+/**
+ * @type {string}
+ */
+export const SynTooltipArrowSize = 'var(--syn-tooltip-arrow-size)';
+
 /**
  * @type {string}
  */

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.13.0
+ * @synergy-design-system/tokens version 1.14.0
  * SICK Global UX Foundation
  */
 $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
@@ -127,6 +127,15 @@ $SynPanelBorderWidth: var(--syn-panel-border-width) !default;
 $SynToggleSizeSmall: var(--syn-toggle-size-small) !default;
 $SynToggleSizeMedium: var(--syn-toggle-size-medium) !default;
 $SynToggleSizeLarge: var(--syn-toggle-size-large) !default;
+$SynTooltipBorderRadius: var(--syn-tooltip-border-radius) !default;
+$SynTooltipBackgroundColor: var(--syn-tooltip-background-color) !default;
+$SynTooltipColor: var(--syn-tooltip-color) !default;
+$SynTooltipFontFamily: var(--syn-tooltip-font-family) !default;
+$SynTooltipFontWeight: var(--syn-tooltip-font-weight) !default;
+$SynTooltipFontSize: var(--syn-tooltip-font-size) !default;
+$SynTooltipLineHeight: var(--syn-tooltip-line-height) !default;
+$SynTooltipPadding: var(--syn-tooltip-padding) !default;
+$SynTooltipArrowSize: var(--syn-tooltip-arrow-size) !default;
 $SynBodyXSmallRegular: var(--syn-body-x-small-regular) !default;
 $SynBodyXSmallSemibold: var(--syn-body-x-small-semibold) !default;
 $SynBodyXSmallBold: var(--syn-body-x-small-bold) !default;

package/dist/themes/dark.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.13.0
+ * @synergy-design-system/tokens version 1.14.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Tue, 23 Apr 2024 12:18:10 GMT
+ * Generated on Fri, 26 Apr 2024 10:46:36 GMT
  */
 
 :root, .syn-theme-dark {
@@ -133,6 +133,15 @@
   --syn-toggle-size-small: 14px;
   --syn-toggle-size-medium: var(--syn-spacing-medium);
   --syn-toggle-size-large: var(--syn-spacing-large);
+  --syn-tooltip-border-radius: var(--syn-border-radius-small);
+  --syn-tooltip-background-color: var(--syn-color-neutral-950);
+  --syn-tooltip-color: var(--syn-typography-color-text-inverted);
+  --syn-tooltip-font-family: var(--syn-font-sans);
+  --syn-tooltip-font-weight: var(--syn-font-weight-normal);
+  --syn-tooltip-font-size: var(--syn-button-font-size-small);
+  --syn-tooltip-line-height: var(--syn-line-height-normal);
+  --syn-tooltip-padding: var(--syn-spacing-small);
+  --syn-tooltip-arrow-size: 9px;
   --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-x-small-semibold: 600 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-x-small-bold: 700 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@@ -246,15 +255,6 @@
   --syn-input-font-family: var(--syn-font-sans);
   --syn-input-font-weight: var(--syn-font-weight-normal);
   --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
-  --syn-tooltip-border-radius: var(--syn-border-radius-medium);
-  --syn-tooltip-background-color: var(--syn-color-neutral-800);
-  --syn-tooltip-color: var(--syn-color-neutral-0);
-  --syn-tooltip-font-family: var(--syn-font-sans);
-  --syn-tooltip-font-weight: var(--syn-font-weight-normal);
-  --syn-tooltip-font-size: var(--syn-font-size-small);
-  --syn-tooltip-line-height: var(--syn-line-height-dense);
-  --syn-tooltip-padding: var(--syn-spacing-2x-small) var(--syn-spacing-x-small);
-  --syn-tooltip-arrow-size: 6px;
   --syn-z-index-drawer: 700;
   --syn-z-index-dialog: 800;
   --syn-z-index-dropdown: 900;

package/dist/themes/light.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.13.0
+ * @synergy-design-system/tokens version 1.14.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Tue, 23 Apr 2024 12:18:10 GMT
+ * Generated on Fri, 26 Apr 2024 10:46:36 GMT
  */
 
 :root, .syn-theme-light {
@@ -133,6 +133,15 @@
   --syn-toggle-size-small: 14px;
   --syn-toggle-size-medium: var(--syn-spacing-medium);
   --syn-toggle-size-large: var(--syn-spacing-large);
+  --syn-tooltip-border-radius: var(--syn-border-radius-small);
+  --syn-tooltip-background-color: var(--syn-color-neutral-950);
+  --syn-tooltip-color: var(--syn-typography-color-text-inverted);
+  --syn-tooltip-font-family: var(--syn-font-sans);
+  --syn-tooltip-font-weight: var(--syn-font-weight-normal);
+  --syn-tooltip-font-size: var(--syn-button-font-size-small);
+  --syn-tooltip-line-height: var(--syn-line-height-normal);
+  --syn-tooltip-padding: var(--syn-spacing-small);
+  --syn-tooltip-arrow-size: 9px;
   --syn-body-x-small-regular: 400 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-x-small-semibold: 600 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --syn-body-x-small-bold: 700 12px/1.4 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@@ -246,15 +255,6 @@
   --syn-input-font-family: var(--syn-font-sans);
   --syn-input-font-weight: var(--syn-font-weight-normal);
   --syn-input-letter-spacing: var(--syn-letter-spacing-normal);
-  --syn-tooltip-border-radius: var(--syn-border-radius-medium);
-  --syn-tooltip-background-color: var(--syn-color-neutral-800);
-  --syn-tooltip-color: var(--syn-color-neutral-0);
-  --syn-tooltip-font-family: var(--syn-font-sans);
-  --syn-tooltip-font-weight: var(--syn-font-weight-normal);
-  --syn-tooltip-font-size: var(--syn-font-size-small);
-  --syn-tooltip-line-height: var(--syn-line-height-dense);
-  --syn-tooltip-padding: var(--syn-spacing-2x-small) var(--syn-spacing-x-small);
-  --syn-tooltip-arrow-size: 6px;
   --syn-z-index-drawer: 700;
   --syn-z-index-dialog: 800;
   --syn-z-index-dropdown: 900;

package/package.json

@@ -18,8 +18,8 @@
     "semantic-release-monorepo": "7.0.5",
     "style-dictionary": "^3.9.2",
     "stylelint": "^16.3.1",
-    "@synergy-design-system/eslint-config-syn": "0.1.0",
-    "@synergy-design-system/stylelint-config-syn": "0.1.0"
+    "@synergy-design-system/stylelint-config-syn": "0.1.0",
+    "@synergy-design-system/eslint-config-syn": "0.1.0"
   },
   "exports": {
     ".": {
@@ -101,7 +101,7 @@
   },
   "type": "module",
   "types": "./dist/js/index.d.ts",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",

package/src/figma-tokens/$metadata.json

@@ -11,6 +11,7 @@
     "semantic/typography",
     "semantic/overlays",
     "semantic/panels",
+    "semantic/tooltip",
     "_docs"
   ]
 }

package/src/figma-tokens/_docs.json

@@ -1982,6 +1982,16 @@
           "value": "Use the --max-width custom property to change the width the tooltip can grow to before wrapping occurs.",
           "type": "text"
         }
+      },
+      "hoisting": {
+        "title": {
+          "value": "Hoisting",
+          "type": "text"
+        },
+        "description": {
+          "value": "Tooltips will be clipped if they’re inside a container that has overflow: auto|hidden|scroll. The hoist attribute forces the tooltip to use a fixed positioning strategy, allowing it to break out of the container. In this case, the tooltip will be positioned relative to its containing block, which is usually the viewport unless an ancestor uses a transform, perspective, or filter.",
+          "type": "text"
+        }
       }
     },
     "tree-item": {
@@ -2739,4 +2749,4 @@
       }
     }
   }
-}
+}

package/src/figma-tokens/semantic/tooltip.json

@@ -0,0 +1,42 @@
+{
+  "tooltip": {
+    "border": {
+      "radius": {
+        "value": "{border-radius.small}",
+        "type": "borderRadius"
+      }
+    },
+    "background-color": {
+      "value": "{neutral.950}",
+      "type": "color"
+    },
+    "color": {
+      "value": "{typography.color.text-inverted}",
+      "type": "color"
+    },
+    "font-family": {
+      "value": "{font.sans}",
+      "type": "fontFamilies"
+    },
+    "font-weight": {
+      "value": "{font-weight.normal}",
+      "type": "fontWeights"
+    },
+    "font-size": {
+      "value": "{button.font-size.small}",
+      "type": "fontSizes"
+    },
+    "line-height": {
+      "value": "{line-height.normal}",
+      "type": "lineHeights"
+    },
+    "padding": {
+      "value": "{spacing.small}",
+      "type": "spacing"
+    },
+    "arrow-size": {
+      "value": "9px",
+      "type": "spacing"
+    }
+  }
+}