@synergy-design-system/tokens 1.0.0-main.10 → 1.0.0-main.12

package/dist/js/index.js

@@ -1,5 +1,5 @@
 /**
- * @synergy-design-system/tokens version 1.0.0-main.9
+ * @synergy-design-system/tokens version 1.0.0-main.11
  * 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.9
+ * @synergy-design-system/tokens version 1.0.0-main.11
  * 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.9
+ * @synergy-design-system/tokens version 1.0.0-main.11
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Mon, 20 Nov 2023 07:57:45 GMT
+ * Generated on Wed, 29 Nov 2023 08:00:35 GMT
  */
 
 :root {
@@ -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.9
+ * @synergy-design-system/tokens version 1.0.0-main.11
  * SICK Global UX Foundation
  * Do not edit directly
- * Generated on Mon, 20 Nov 2023 07:57:45 GMT
+ * Generated on Wed, 29 Nov 2023 08:00:35 GMT
  */
 
 :root {
@@ -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"
   },
@@ -100,7 +103,8 @@
     ]
   },
   "type": "module",
-  "version": "1.0.0-main.10",
+  "types": "./dist/js/index.d.ts",
+  "version": "1.0.0-main.12",
   "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

@@ -213,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": {
@@ -323,13 +395,55 @@
       }
     },
     "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"
+        }
       }
     },
     "icon": {
@@ -809,13 +923,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": {
@@ -982,12 +1118,62 @@
     },
     "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": "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": "Radios allow the user to select a single option from a group. \nRadios are designed to be used with radio groups.",
+          "value": "To set the initial value and checked state, use the value attribute on the containing radio group.",
           "type": "text"
         }
       }

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

@@ -263,4 +263,4 @@
       }
     }
   }
-}
+}

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