@synergy-design-system/tokens 1.14.0 → 1.16.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [@synergy-design-system/tokens-v1.16.0](https://github.com/synergy-design-system/synergy-design-system/compare/tokens/1.15.0...tokens/1.16.0) (2024-05-02)
+
+
+### Features
+
+* ✨ adjust syn opacity token ([#457](https://github.com/synergy-design-system/synergy-design-system/issues/457)) ([0f44c01](https://github.com/synergy-design-system/synergy-design-system/commit/0f44c012d05930d3c01b62756f761563ee24d684))
+
+# [@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.15.0
  * SICK Global UX Foundation
  */
 
@@ -270,9 +270,9 @@ export const SynBorderWidthXLarge: string;
 export const SynFontSansFallback: string;
 
 /**
- * Maps to the css variable `--syn-opacity-medium`
+ * Maps to the css variable `--syn-opacity-50`
  */
-export const SynOpacityMedium: string;
+export const SynOpacity50: string;
 
 /**
  * Maps to the css variable `--syn-button-font-size-small`
@@ -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.15.0
  * SICK Global UX Foundation
  */
 
@@ -271,7 +271,7 @@ export const SynFontSansFallback = 'var(--syn-font-sans-fallback)';
 /**
  * @type {string}
  */
-export const SynOpacityMedium = 'var(--syn-opacity-medium)';
+export const SynOpacity50 = 'var(--syn-opacity-50)';
 
 /**
  * @type {string}
@@ -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.15.0
  * SICK Global UX Foundation
  */
 $SynFontSizeXSmall: var(--syn-font-size-x-small) !default;
@@ -55,7 +55,7 @@ $SynBorderWidthMedium: var(--syn-border-width-medium) !default;
 $SynBorderWidthLarge: var(--syn-border-width-large) !default;
 $SynBorderWidthXLarge: var(--syn-border-width-x-large) !default;
 $SynFontSansFallback: var(--syn-font-sans-fallback) !default;
-$SynOpacityMedium: var(--syn-opacity-medium) !default;
+$SynOpacity50: var(--syn-opacity-50) !default;
 $SynButtonFontSizeSmall: var(--syn-button-font-size-small) !default;
 $SynButtonFontSizeMedium: var(--syn-button-font-size-medium) !default;
 $SynButtonFontSizeLarge: var(--syn-button-font-size-large) !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.15.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Tue, 23 Apr 2024 12:18:10 GMT
+ * Generated on Thu, 02 May 2024 06:39:11 GMT
  */
 
 :root, .syn-theme-dark {
@@ -61,7 +61,7 @@
   --syn-border-width-large: 3px; /* Large */
   --syn-border-width-x-large: 4px; /* X Large */
   --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  --syn-opacity-medium: 0.5; /* 50% */
+  --syn-opacity-50: 0.5; /* 50% */
   --syn-button-font-size-small: var(--syn-font-size-small);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-large: var(--syn-font-size-large);
@@ -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.15.0
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Tue, 23 Apr 2024 12:18:10 GMT
+ * Generated on Thu, 02 May 2024 06:39:11 GMT
  */
 
 :root, .syn-theme-light {
@@ -61,7 +61,7 @@
   --syn-border-width-large: 3px; /* Large */
   --syn-border-width-x-large: 4px; /* X Large */
   --syn-font-sans-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  --syn-opacity-medium: 0.5; /* 50% */
+  --syn-opacity-50: 0.5; /* 50% */
   --syn-button-font-size-small: var(--syn-font-size-small);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-large: var(--syn-font-size-large);
@@ -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.16.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

@@ -429,13 +429,55 @@
       }
     },
     "details": {
-      "description": {
-        "value": "Details show a brief summary and expand to show additional content.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Details show a brief summary and expand to show additional content.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Details",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Details",
-        "type": "text"
+      "disabled": {
+        "title": {
+          "value": "Disabled",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the disable attribute to prevent the details from expanding.",
+          "type": "text"
+        }
+      },
+      "summary-icon": {
+        "title": {
+          "value": "Customizing the Summary Icon",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the expand-icon and collapse-icon slots to change the expand and collapse icons, respectively. To disable the animation, override the rotate property on the summary-icon part as shown below.",
+          "type": "text"
+        }
+      },
+      "grouping": {
+        "title": {
+          "value": "Grouping Details",
+          "type": "text"
+        },
+        "description": {
+          "value": "Details are designed to function independently, but you can simulate a group or “accordion” where only one is shown at a time by listening for the syn-show event.",
+          "type": "text"
+        }
+      },
+      "size": {
+        "title": {
+          "value": "Sizes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the size attribute to change a detail’s size.",
+          "type": "text"
+        }
       }
     },
     "dialog": {
@@ -1982,6 +2024,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": {
@@ -2559,6 +2611,16 @@
         "value": "Z-Index Tokens",
         "type": "text"
       }
+    },
+    "opacity": {
+      "description": {
+        "value": "Opacity tokens apply transparency to an element.",
+        "type": "text"
+      },
+      "title": {
+        "value": "Opacity",
+        "type": "text"
+      }
     }
   },
   "frameworks": {
@@ -2739,4 +2801,4 @@
       }
     }
   }
-}
+}

package/src/figma-tokens/globals.json

@@ -417,7 +417,7 @@
     "type": "other"
   },
   "opacity": {
-    "medium": {
+    "50": {
       "value": "0.5",
       "type": "opacity",
       "description": "50%"

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"
+    }
+  }
+}