@synergy-design-system/tokens 1.0.0-main.8 → 1.0.0

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.0.0-main.7
+ * @synergy-design-system/tokens version 1.0.0-main.14
  * SICK Global UX Foundation
  */
 
@@ -581,17 +581,17 @@ export const SynInputFontSizeLarge = 'var(--syn-input-font-size-large)';
 /**
  * @type {string}
  */
-export const SynSizeSmall = 'var(--syn-size-small)';
+export const SynToggleSizeSmall = 'var(--syn-toggle-size-small)';
 
 /**
  * @type {string}
  */
-export const SynSizeMedium = 'var(--syn-size-medium)';
+export const SynToggleSizeMedium = 'var(--syn-toggle-size-medium)';
 
 /**
  * @type {string}
  */
-export const SynSizeLarge = 'var(--syn-size-large)';
+export const SynToggleSizeLarge = 'var(--syn-toggle-size-large)';
 
 /**
  * @type {string}

package/dist/scss/_tokens.scss

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.0.0-main.7
+ * @synergy-design-system/tokens version 1.0.0-main.14
  * SICK Global UX Foundation
  */
 $SynFontSize2xSmall: var(--syn-font-size-2x-small) !default;
@@ -117,9 +117,9 @@ $SynInputReadonlyColorFocus: var(--syn-input-readonly-color-focus) !default;
 $SynInputFontSizeSmall: var(--syn-input-font-size-small) !default;
 $SynInputFontSizeMedium: var(--syn-input-font-size-medium) !default;
 $SynInputFontSizeLarge: var(--syn-input-font-size-large) !default;
-$SynSizeSmall: var(--syn-size-small) !default;
-$SynSizeMedium: var(--syn-size-medium) !default;
-$SynSizeLarge: var(--syn-size-large) !default;
+$SynToggleSizeSmall: var(--syn-toggle-size-small) !default;
+$SynToggleSizeMedium: var(--syn-toggle-size-medium) !default;
+$SynToggleSizeLarge: var(--syn-toggle-size-large) !default;
 $SynColorPrimary50: var(--syn-color-primary-50) !default;
 $SynColorPrimary100: var(--syn-color-primary-100) !default;
 $SynColorPrimary200: var(--syn-color-primary-200) !default;

package/dist/themes/dark.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.0.0-main.7
+ * @synergy-design-system/tokens version 1.0.0-main.14
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Thu, 16 Nov 2023 11:44:53 GMT
+ * Generated on Wed, 06 Dec 2023 07:43:47 GMT
  */
 
 :root {
@@ -62,9 +62,9 @@
   --syn-button-font-size-small: var(--syn-font-size-x-small);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-large: var(--syn-font-size-large);
-  --syn-focus-ring-color: var(--syn-color-primary-600);
+  --syn-focus-ring-color: var(--syn-color-primary-400);
   --syn-focus-ring-width: var(--syn-border-width-medium);
-  --syn-focus-ring-offset: 0;
+  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
   --syn-input-color: var(--syn-color-neutral-950);
   --syn-input-color-hover: var(--syn-color-neutral-950);
   --syn-input-color-focus: var(--syn-color-neutral-950);
@@ -122,9 +122,9 @@
   --syn-input-font-size-small: var(--syn-font-size-small);
   --syn-input-font-size-medium: var(--syn-font-size-medium);
   --syn-input-font-size-large: var(--syn-font-size-large);
-  --syn-size-small: 14px;
-  --syn-size-medium: var(--syn-spacing-medium);
-  --syn-size-large: var(--syn-spacing-large);
+  --syn-toggle-size-small: 14px;
+  --syn-toggle-size-medium: var(--syn-spacing-medium);
+  --syn-toggle-size-large: var(--syn-spacing-large);
   --syn-color-primary-50: #072E4A;
   --syn-color-primary-100: #0B486F;
   --syn-color-primary-200: #065786;
@@ -230,9 +230,6 @@
   --syn-input-filled-color-hover: var(--syn-color-neutral-800);
   --syn-input-filled-color-focus: var(--syn-color-neutral-700);
   --syn-input-filled-color-disabled: var(--syn-color-neutral-800);
-  --syn-toggle-size-small: 0.875rem;
-  --syn-toggle-size-medium: 1.125rem;
-  --syn-toggle-size-large: 1.375rem;
   --syn-overlay-background-color: hsl(0 0% 0% / 43%);
   --syn-panel-background-color: var(--syn-color-neutral-50);
   --syn-panel-border-color: var(--syn-color-neutral-200);

package/dist/themes/light.css

@@ -1,8 +1,8 @@
 /**
- * @synergy-design-system/tokens version 1.0.0-main.7
+ * @synergy-design-system/tokens version 1.0.0-main.14
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Thu, 16 Nov 2023 11:44:53 GMT
+ * Generated on Wed, 06 Dec 2023 07:43:47 GMT
  */
 
 :root {
@@ -62,9 +62,9 @@
   --syn-button-font-size-small: var(--syn-font-size-x-small);
   --syn-button-font-size-medium: var(--syn-font-size-medium);
   --syn-button-font-size-large: var(--syn-font-size-large);
-  --syn-focus-ring-color: var(--syn-color-primary-600);
+  --syn-focus-ring-color: var(--syn-color-primary-400);
   --syn-focus-ring-width: var(--syn-border-width-medium);
-  --syn-focus-ring-offset: 0;
+  --syn-focus-ring-offset: var(--syn-spacing-3x-small);
   --syn-input-color: var(--syn-color-neutral-950);
   --syn-input-color-hover: var(--syn-color-neutral-950);
   --syn-input-color-focus: var(--syn-color-neutral-950);
@@ -122,9 +122,9 @@
   --syn-input-font-size-small: var(--syn-font-size-small);
   --syn-input-font-size-medium: var(--syn-font-size-medium);
   --syn-input-font-size-large: var(--syn-font-size-large);
-  --syn-size-small: 14px;
-  --syn-size-medium: var(--syn-spacing-medium);
-  --syn-size-large: var(--syn-spacing-large);
+  --syn-toggle-size-small: 14px;
+  --syn-toggle-size-medium: var(--syn-spacing-medium);
+  --syn-toggle-size-large: var(--syn-spacing-large);
   --syn-color-primary-50: #f0f9ff;
   --syn-color-primary-100: #e0f1FE;
   --syn-color-primary-200: #b9e5fe;
@@ -230,9 +230,6 @@
   --syn-input-filled-color-hover: var(--syn-color-neutral-800);
   --syn-input-filled-color-focus: var(--syn-color-neutral-700);
   --syn-input-filled-color-disabled: var(--syn-color-neutral-800);
-  --syn-toggle-size-small: 0.875rem;
-  --syn-toggle-size-medium: 1.125rem;
-  --syn-toggle-size-large: 1.375rem;
   --syn-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
   --syn-panel-background-color: var(--syn-color-neutral-0);
   --syn-panel-border-color: var(--syn-color-neutral-200);

package/package.json

@@ -20,7 +20,10 @@
     "@synergy-design-system/eslint-config-syn": "0.1.0"
   },
   "exports": {
-    ".": "./dist/js/index.js",
+    ".": {
+      "types": "./dist/js/index.d.ts",
+      "import": "./dist/js/index.js"
+    },
     "./themes/*": "./dist/themes/*",
     "./scss": "./dist/scss/_tokens.scss"
   },
@@ -29,27 +32,23 @@
     "CHANGELOG.md",
     "src/figma-tokens"
   ],
-  "homepage": "https://github.com/SickDesignSystem/synergy/tree/main/packages/tokens",
+  "homepage": "https://github.com/synergy-design-system/synergy-design-system/tree/main/packages/tokens",
   "keywords": [
     "SDS",
     "SICK",
     "Synergy Design System",
     "Design Tokens"
   ],
-  "license": "BSD-3-Clause",
+  "license": "MIT",
   "name": "@synergy-design-system/tokens",
   "repository": {
     "type": "git",
-    "url": "https://github.com/SickDesignSystem/synergy.git",
+    "url": "https://github.com/synergy-design-system/synergy-design-system.git",
     "directory": "packages/tokens"
   },
   "release": {
     "branches": [
-      "+([0-9])?(.{+([0-9]),x}).x",
-      {
-        "name": "main",
-        "prerelease": true
-      },
+      "main",
       {
         "name": "beta",
         "prerelease": true
@@ -57,8 +56,7 @@
       {
         "name": "alpha",
         "prerelease": true
-      },
-      "release-fallback"
+      }
     ],
     "plugins": [
       "@semantic-release/commit-analyzer",
@@ -100,7 +98,8 @@
     ]
   },
   "type": "module",
-  "version": "1.0.0-main.8",
+  "types": "./dist/js/index.d.ts",
+  "version": "1.0.0",
   "scripts": {
     "build": "pnpm clean && node scripts/build.js",
     "clean": "rimraf build",

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

@@ -7,7 +7,7 @@
     "semantic/focus-ring",
     "semantic/input",
     "semantic/button",
-    "semantic/toggles",
+    "semantic/toggle",
     "_docs"
   ]
 }

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

@@ -317,7 +317,7 @@
       "color/primitives": "source",
       "semantic/input": "enabled",
       "semantic/button": "enabled",
-      "semantic/toggles": "enabled"
+      "semantic/toggle": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:790:67393",
     "$figmaModeId": "790:0",

package/src/figma-tokens/_docs.json

@@ -160,6 +160,16 @@
           "value": "Use the disabled attribute to disable a button.",
           "type": "text"
         }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus",
+          "type": "text"
+        },
+        "description": {
+          "value": "The focus event gives the user feedback that the Button has been focused by the keyboard interaction and that the button component is ready for use.",
+          "type": "text"
+        }
       }
     },
     "button-group": {
@@ -203,13 +213,85 @@
       }
     },
     "checkbox": {
-      "description": {
-        "value": "Checkboxes allow the user to toggle an option on or off.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Checkboxes allow the user to toggle an option on or off.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Checkbox",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Checkbox",
-        "type": "text"
+      "checked": {
+        "title": {
+          "value": "Checked",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the checked attribute to activate the checkbox.",
+          "type": "text"
+        }
+      },
+      "indeterminate": {
+        "title": {
+          "value": "Indeterminate",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the indeterminate attribute to make the checkbox indeterminate.",
+          "type": "text"
+        }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus",
+          "type": "text"
+        },
+        "description": {
+          "value": "The focus event gives the user feedback that the Checkbox has been focused by the keyboard interaction.",
+          "type": "text"
+        }
+      },
+      "disabled": {
+        "title": {
+          "value": "Disabled",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the disabled attribute to disable the checkbox.",
+          "type": "text"
+        }
+      },
+      "sizes": {
+        "title": {
+          "value": "Sizes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the size attribute to change a checkbox’s size.",
+          "type": "text"
+        }
+      },
+      "invalid": {
+        "title": {
+          "value": "Invalid",
+          "type": "text"
+        },
+        "description": {
+          "value": "The invalid status is used to warn the user that the Checkbox is invalid. For example, if the check is mandatory and nothing has been checked.",
+          "type": "text"
+        }
+      },
+      "validity": {
+        "title": {
+          "value": "Custom Validity",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the setCustomValidity() method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.",
+          "type": "text"
+        }
       }
     },
     "color-picker": {
@@ -313,13 +395,65 @@
       }
     },
     "icon-button": {
-      "description": {
-        "value": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n\nFor a full list of icons that come bundled with Synergy, refer to the Assets.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Icon Button",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Icon Button",
-        "type": "text"
+      "sizes": {
+        "title": {
+          "value": "Sizes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the size attribute to change a icon-button size.",
+          "type": "text"
+        }
+      },
+      "disabled": {
+        "title": {
+          "value": "Disabled",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the disabled attribute to disable the icon button.",
+          "type": "text"
+        }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus",
+          "type": "text"
+        },
+        "description": {
+          "value": "The focus event gives the user feedback that the icon-button has been focused by the keyboard interaction.",
+          "type": "text"
+        }
+      },
+      "color": {
+        "title": {
+          "value": "Color",
+          "type": "text"
+        },
+        "description": {
+          "value": "The Icon button can have two color variants, Primary or Neutral Color.",
+          "type": "text"
+        }
+      },
+      "label": {
+        "titel": {
+          "value": "Accessibility Label",
+          "type": "text"
+        },
+        "description": {
+          "value": "A description that gets read by assistive devices. For optimal accessibility, you have to include a label that describes what the icon button does.",
+          "type": "text"
+        }
       }
     },
     "icon": {
@@ -445,11 +579,11 @@
       },
       "prefix-suffix": {
         "title": {
-          "value": "Prefix Suffix Icons",
+          "value": "Prefix Suffix Text and Icons",
           "type": "text"
         },
         "description": {
-          "value": "Use the prefix and suffix slots to add icons.",
+          "value": "Use the prefix and suffix slots to add text and icons.",
           "type": "text"
         }
       },
@@ -585,6 +719,16 @@
           "type": "text"
         }
       },
+      "labels": {
+        "title": {
+          "value": "Labels",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the label attribute to give the radio-group an accessible label. For labels that contain HTML, use the label slot instead.",
+          "type": "text"
+        }
+      },
       "help-text": {
         "title": {
           "value": "Help Text",
@@ -634,6 +778,26 @@
           "value": "Use the setCustomValidity() method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.",
           "type": "text"
         }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus",
+          "type": "text"
+        },
+        "description": {
+          "value": "The focus event gives the user feedback that one of the Checkboxes has been focused by the keyboard interaction.",
+          "type": "text"
+        }
+      },
+      "invalid": {
+        "title": {
+          "value": "Invalid",
+          "type": "text"
+        },
+        "description": {
+          "value": "The invalid status is used to warn the user that the Radio Group is invalid. For example, if the radio is mandatory and nothing has been checked.",
+          "type": "text"
+        }
       }
     },
     "range": {
@@ -756,6 +920,26 @@
           "value": "Use the size attribute to change a switch’s size.",
           "type": "text"
         }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus",
+          "type": "text"
+        },
+        "description": {
+          "value": "The focus event gives the user feedback that the Switch has been focused by the keyboard interaction.",
+          "type": "text"
+        }
+      },
+      "invalid": {
+        "title": {
+          "value": "Invalid",
+          "type": "text"
+        },
+        "description": {
+          "value": "The invalid status is used to warn the user that the Switch is invalid.",
+          "type": "text"
+        }
       }
     },
     "tab-group": {
@@ -789,13 +973,35 @@
       }
     },
     "tag": {
-      "description": {
-        "value": "Tags are used as labels to organize things or to indicate a selection.",
-        "type": "text"
+      "default": {
+        "description": {
+          "value": "Tags are used as labels to organize things or to indicate a selection.",
+          "type": "text"
+        },
+        "title": {
+          "value": "Tag",
+          "type": "text"
+        }
       },
-      "title": {
-        "value": "Tag",
-        "type": "text"
+      "size": {
+        "title": {
+          "value": "Sizes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the size attribute to change a tab’s size.",
+          "type": "text"
+        }
+      },
+      "removable": {
+        "title": {
+          "value": "Removable",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the removable attribute to add a remove button to the tag.",
+          "type": "text"
+        }
       }
     },
     "textarea": {
@@ -962,15 +1168,66 @@
     },
     "radio": {
       "default": {
+        "description": {
+          "value": "Radios allow the user to select a single option from a group. \\nRadios are designed to be used with radio groups.",
+          "type": "text"
+        },
         "title": {
           "value": "Radio",
           "type": "text"
+        }
+      },
+      "focus": {
+        "title": {
+          "value": "Focus",
+          "type": "text"
         },
         "description": {
-          "value": "Radios allow the user to select a single option from a group. \nRadios are designed to be used with radio groups.",
+          "value": "The focus event gives the user feedback that the Radio has been focused by the keyboard interaction.",
           "type": "text"
         }
-      }
+      },
+      "disabled": {
+        "title": {
+          "value": "Disabled",
+          "type": "text"
+        },
+        "description": {
+          "value": "Use the disabled attribute to disable a radio.",
+          "type": "text"
+        }
+      },
+      "sizes": {
+        "title": {
+          "value": "Sizes",
+          "type": "text"
+        },
+        "description": {
+          "value": "Add the size attribute to the Radio Group to change the radios’ size.",
+          "type": "text"
+        }
+      },
+      "invalid": {
+        "title": {
+          "value": "Invalid",
+          "type": "text"
+        },
+        "description": {
+          "value": "The invalid status is used to warn the user that the Radio is invalid. For example, if the radio is mandatory and nothing has been checked.",
+          "type": "text"
+        }
+      },
+      "value": {
+        "title": {
+          "value": "Initial Value",
+          "type": "text"
+        },
+        "description": {
+          "value": "To set the initial value and checked state, use the value attribute on the containing radio group.",
+          "type": "text"
+        }
+      },
+      "type": "other"
     }
   },
   "frameworks": {
@@ -1233,4 +1490,4 @@
       }
     }
   }
-}
+}

package/src/figma-tokens/semantic/focus-ring.json

@@ -1,7 +1,7 @@
 {
   "focus-ring": {
     "color": {
-      "value": "{primary.600}",
+      "value": "{primary.400}",
       "type": "color"
     },
     "width": {
@@ -9,8 +9,8 @@
       "type": "borderWidth"
     },
     "offset": {
-      "value": "{spacing.4x-small}",
+      "value": "{spacing.3x-small}",
       "type": "spacing"
     }
   }
-}
+}

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

@@ -262,11 +262,5 @@
         "type": "fontSizes"
       }
     }
-  },
-  "focus-ring": {
-    "offset": {
-      "value": "0",
-      "type": "spacing"
-    }
   }
 }

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

@@ -0,0 +1,18 @@
+{
+  "toggle": {
+    "size": {
+      "small": {
+        "value": "14px",
+        "type": "spacing"
+      },
+      "medium": {
+        "value": "{spacing.medium}",
+        "type": "spacing"
+      },
+      "large": {
+        "value": "{spacing.large}",
+        "type": "spacing"
+      }
+    }
+  }
+}

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

@@ -1,16 +0,0 @@
-{
-  "size": {
-    "small": {
-      "value": "14px",
-      "type": "spacing"
-    },
-    "medium": {
-      "value": "{spacing.medium}",
-      "type": "spacing"
-    },
-    "large": {
-      "value": "{spacing.large}",
-      "type": "spacing"
-    }
-  }
-}