@solid-design-system/tokens 5.1.0 → 5.2.0

package/README.md

@@ -2,34 +2,9 @@
   ![MIT License](https://img.shields.io/badge/License-MIT-green.svg)
   ![NPM Version](https://img.shields.io/npm/v/%40solid-design-system%2Ftokens)
 </div>
-# Tokens
+
+# @solid-design-system/tokens
 
 The Solid Design System Tokens package provides a collection of design tokens for colors, typography and spacing. It ensures design consistency and collaboration between our designers and developers when building components for the Solid Design System.
 
 Check out the [full documentation](https://solid-design-system.fe.union-investment.de/docs/) for detailed information.
-
-### Handling tokens (for Figma maintainers ONLY)
-
-Any changes in the token set in Token Studio plugin must be in a new branch branched from `main`with these information:
-
-Branch Name:
-
-feat/title
-
-fix/title
-
-Description: closes #123 (Write ticket number if it exists, automatically closes linked ticket when merged)
-
-![Screen Shot 2024-01-19 at 11 22 24](https://github.com/solid-design-system/solid/assets/118520877/4b7ce66c-a5c7-44f3-86d4-2ae0ab4a902b)
-
-![Screen Shot 2024-01-19 at 11 23 08](https://github.com/solid-design-system/solid/assets/118520877/82e1fd88-ce70-4de9-931b-764e228f0d22)
-
-> Note: If the token is related to Figma native style i.e.: color, choose "create styles" so Figma style and token are in sync
-
-Then push with a commit message according to the development standards and create a PR ticket to hand over
-
-![Screen Shot 2024-01-19 at 11 28 40](https://github.com/solid-design-system/solid/assets/118520877/6f7f1ca0-6b96-4ff6-bcab-cb66d9ef3adc)
-
-![Screen Shot 2024-01-19 at 11 41 01](https://github.com/solid-design-system/solid/assets/118520877/56a27bce-5cd1-40ee-85b8-731196a66b66)
-
-After front-end's approval and all tests are passed (quality gate, Chromatic tests etc.) hit `Squash and Merge` button, write a message (especially if there's any changes in token naming or deprecating note "BREAKING CHANGE: ..."

package/dist/tokens.scss

@@ -40,6 +40,7 @@ $sd-borderColor-primary-800: (rgb(var(--sd-color-primary-800, 5 21 48)) /* Used
 $sd-borderColor-primary-DEFAULT: (rgb(var(--sd-color-primary, 0 53 142)) /* Used for buttons, select field, focus state */);
 $sd-borderColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Used for buttons, inverted focus state */);
 $sd-borderColor-accent-550: (rgb(var(--sd-color-accent-550, 54 123 40)) /* Used for hover interaction */);
+$sd-borderColor-accent-700: (rgb(var(--sd-color-accent-700, 33 87 37)) /* Used for motion design only */);
 $sd-borderColor-accent-DEFAULT: (rgb(var(--sd-color-accent, 45 157 0)) /* Used to highlight active/selected elements
  */);
 $sd-borderColor-neutral-400: (rgb(var(--sd-color-neutral-400, 195 195 195)) /* Default border color. 

package/dist/tokens.tailwind.json

@@ -85,6 +85,7 @@
     "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons, inverted focus state */",
     "accent": {
       "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
+      "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for motion design only */",
       "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used to highlight active/selected elements\n */"
     },
     "neutral": {
@@ -374,6 +375,7 @@
     "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons, inverted focus state */",
     "accent": {
       "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
+      "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for motion design only */",
       "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used to highlight active/selected elements\n */"
     },
     "neutral": {
@@ -442,6 +444,7 @@
     "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons, inverted focus state */",
     "accent": {
       "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
+      "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for motion design only */",
       "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used to highlight active/selected elements\n */"
     },
     "neutral": {
@@ -566,6 +569,7 @@
     "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Used for buttons, inverted focus state */",
     "accent": {
       "550": "rgb(var(--sd-color-accent-550, 54 123 40) / <alpha-value>) /* Used for hover interaction */",
+      "700": "rgb(var(--sd-color-accent-700, 33 87 37) / <alpha-value>) /* Used for motion design only */",
       "DEFAULT": "rgb(var(--sd-color-accent, 45 157 0) / <alpha-value>) /* Used to highlight active/selected elements\n */"
     },
     "neutral": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solid-design-system/tokens",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Solid Design System: Tokens",
   "publishConfig": {
     "access": "public",