Merge pull request #367 from Infineon/324-rework-update-token-names-t…

…o-the-new-ones 324 rework update token names to the new ones
Infineon · Aug 10, 2023 · fbc5a76 · fbc5a76
2 parents 729d7b6 + db732b6
commit fbc5a76
Show file tree

Hide file tree

Showing 60 changed files with 1,661 additions and 1,393 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components-react/lib/components/stencil-generated/index.ts b/packages/components-react/lib/components/stencil-generated/index.ts
@@ -41,8 +41,6 @@ export const IfxListGroup = /*@__PURE__*/createReactComponent<JSX.IfxListGroup,
 export const IfxListItem = /*@__PURE__*/createReactComponent<JSX.IfxListItem, HTMLIfxListItemElement>('ifx-list-item');
 export const IfxListNotification = /*@__PURE__*/createReactComponent<JSX.IfxListNotification, HTMLIfxListNotificationElement>('ifx-list-notification');
 export const IfxModal = /*@__PURE__*/createReactComponent<JSX.IfxModal, HTMLIfxModalElement>('ifx-modal');
-export const IfxMultiSelectInput = /*@__PURE__*/createReactComponent<JSX.IfxMultiSelectInput, HTMLIfxMultiSelectInputElement>('ifx-multi-select-input');
-export const IfxMultiSelectInputItem = /*@__PURE__*/createReactComponent<JSX.IfxMultiSelectInputItem, HTMLIfxMultiSelectInputItemElement>('ifx-multi-select-input-item');
 export const IfxNavbar = /*@__PURE__*/createReactComponent<JSX.IfxNavbar, HTMLIfxNavbarElement>('ifx-navbar');
 export const IfxNavbarMenuItem = /*@__PURE__*/createReactComponent<JSX.IfxNavbarMenuItem, HTMLIfxNavbarMenuItemElement>('ifx-navbar-menu-item');
 export const IfxNumberIndicator = /*@__PURE__*/createReactComponent<JSX.IfxNumberIndicator, HTMLIfxNumberIndicatorElement>('ifx-number-indicator');

diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
@@ -234,17 +234,6 @@ export const IfxModal = /*@__PURE__*/ defineContainer<JSX.IfxModal>('ifx-modal',
 ]);
 
 
-export const IfxMultiSelectInput = /*@__PURE__*/ defineContainer<JSX.IfxMultiSelectInput>('ifx-multi-select-input', undefined, [
-  'Placeholder'
-]);
-
-
-export const IfxMultiSelectInputItem = /*@__PURE__*/ defineContainer<JSX.IfxMultiSelectInputItem>('ifx-multi-select-input-item', undefined, [
-  'content',
-  'closed'
-]);
-
-
 export const IfxNavbar = /*@__PURE__*/ defineContainer<JSX.IfxNavbar>('ifx-navbar', undefined, [
   'applicationName',
   'fixed',

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -32,7 +32,7 @@
     "dev": "run-p dev:stencil dev:storybook"
   },
   "dependencies": {
-    "@infineon/design-system-tokens": "^2.0.3",
+    "@infineon/design-system-tokens": "^3.0.0",
     "@infineon/infineon-icons": "^1.1.3",
     "@stencil/core": "^3.0.0",
     "@storybook/blocks": "^7.0.23",

diff --git a/packages/components/src/components/accordion/accordion.scss b/packages/components/src/components/accordion/accordion.scss
@@ -9,5 +9,5 @@
 .accordion-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: tokens.$ifxSpace100;
 }
diff --git a/packages/components/src/components/accordion/accordionItem.scss b/packages/components/src/components/accordion/accordionItem.scss
@@ -13,22 +13,22 @@
 }
 
 .accordion-title:hover {
-  border: 1px solid tokens.$color-gray-200;
-  background-color: tokens.$color-gray-200;
+  border: 1px solid tokens.$ifxColorEngineering200;
+  background-color: tokens.$ifxColorEngineering200;
 }
 
 .accordion-title {
   display: flex;
   align-items: center;
   padding: 1rem;
-  color: tokens.$color-default-500;
-  border: 1px solid tokens.$color-gray-200;
+  color: tokens.$ifxColorOcean500;
+  border: 1px solid tokens.$ifxColorEngineering200;
   cursor: pointer;
 }
 
 .accordion-caption {
-  font-weight: tokens.$font-weight-semi-bold;
-  font-size: tokens.$font-size-m;
+  font-weight: tokens.$ifxFontWeightSemibold;
+  font-size: tokens.$ifxFontSizeM;
 }
 
 .accordion-content {

diff --git a/packages/components/src/components/alert/alert.scss b/packages/components/src/components/alert/alert.scss
@@ -3,38 +3,38 @@
 
 .alert {
   display: flex;
-  border: 1px solid tokens.$color-default-500;
-  border-radius: 1px;
-  color: tokens.$color-text-black;
-  background-color: tokens.$color-bg-white;
+  border: 1px solid tokens.$ifxColorOcean500;
+  border-radius: tokens.$ifxBorderRadius12;
+  color: tokens.$ifxColorBaseBlack;
+  background-color: tokens.$ifxColorBaseWhite;
 
   & .close-icon-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
-    min-width: 40px;
-  
+    min-width: tokens.$ifxSize500;
+
     & a {
       line-height: 0;
-      color: tokens.$color-text-black;
+      color: tokens.$ifxColorBaseBlack;
     }
   }
 
   & .icon-wrapper {
     position: relative;
-    min-width: 48px;
+    min-width: tokens.$ifxSize600;
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: tokens.$color-default-500;
+    background-color: tokens.$ifxColorOcean500;
   }
 
   & .alert-text {
     font-size: 16px;
     width: 100%;
     padding: 12px 0px 12px 12px;
-    color: tokens.$color-text-black;
-  
+    color: tokens.$ifxColorBaseBlack;
+
     white-space: pre-wrap;
     /* wraps text at spaces and within words */
     word-wrap: break-word;
@@ -43,48 +43,48 @@
     /* breaks text at arbitrary points when needed */
   }
 
-  &.primary { 
-    border: 1px solid tokens.$color-default-500;
+  &.primary {
+    border: 1px solid tokens.$ifxColorOcean500;
 
     & .icon-wrapper {
-      background-color: tokens.$color-default-500;
-      color: tokens.$color-text-white;
+      background-color: tokens.$ifxColorOcean500;
+      color: tokens.$ifxColorBaseWhite;
     }
   }
 
   &.secondary {
-    border: 1px solid tokens.$color-highlight-500;
+    border: 1px solid tokens.$ifxColorBerry500;
 
     & .icon-wrapper {
-      background-color: tokens.$color-highlight-500;
-      color: tokens.$color-text-white;
+      background-color: tokens.$ifxColorBerry500;
+      color: tokens.$ifxColorBaseWhite;
     }
   }
 
-  &.success { 
-    border: 1px solid tokens.$color-success-500;
+  &.success {
+    border: 1px solid tokens.$ifxColorGreen500;
 
     & .icon-wrapper {
-      background-color: tokens.$color-success-500;
-      color: tokens.$color-text-white;
+      background-color: tokens.$ifxColorGreen500;
+      color: tokens.$ifxColorBaseWhite;
     }
   }
 
   &.danger {
-    border: 1px solid tokens.$color-danger-500;
-  
+    border: 1px solid tokens.$ifxColorRed500;
+
     & .icon-wrapper {
-      background-color: tokens.$color-danger-500;
-      color: tokens.$color-text-white;
+      background-color: tokens.$ifxColorRed500;
+      color: tokens.$ifxColorBaseWhite;
     }
   }
 
   &.warning {
-    border: 1px solid tokens.$color-warning-500;
-  
+    border: 1px solid tokens.$ifxColorOrange500;
+
     & .icon-wrapper {
-      background-color: tokens.$color-warning-500;
-      color: tokens.$color-text-white;
+      background-color: tokens.$ifxColorOrange500;
+      color: tokens.$ifxColorBaseWhite;
     }
   }
-}
+}
diff --git a/packages/components/src/components/badge/badge.scss b/packages/components/src/components/badge/badge.scss
@@ -6,12 +6,12 @@
   justify-content: center;
   align-items: center;
   padding: 4px 8px;
-  gap: 8px;
-  border: 1px solid tokens.$color-gray-200;
-  background-color: tokens.$color-gray-200;
+  gap: tokens.$ifxSpace100;
+  border: 1px solid tokens.$ifxColorEngineering200;
+  background-color: tokens.$ifxColorEngineering200;
   border-radius: 100px;
-  font-size: 14px;
-  line-height: 20px;
+  font-size: tokens.$ifxFontSizeS;
+  line-height: tokens.$ifxLineHeightS;
   font-weight: 400;
-  color: tokens.$color-text-black;
+  color: tokens.$ifxColorBaseBlack;
 }
diff --git a/packages/components/src/components/breadcrumb/breadcrumb-item-label.scss b/packages/components/src/components/breadcrumb/breadcrumb-item-label.scss
@@ -3,9 +3,9 @@
 .breadcrumb-item-label-container {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: tokens.$ifxSpace100;
   text-decoration: none;
-  color: tokens.$color-text-black;
+  color: tokens.$ifxColorBaseBlack;
 
   &.margin {
     margin-left: 16px;
@@ -23,8 +23,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 16px;
-    height: 16px;
+    width: tokens.$ifxSize200;
+    height: tokens.$ifxSize200;
 
     &.hide {
       display: none;

diff --git a/packages/components/src/components/breadcrumb/breadcrumb-item.scss b/packages/components/src/components/breadcrumb/breadcrumb-item.scss
@@ -5,7 +5,7 @@
   flex-direction: row;
   align-items: center;
   padding: 0px;
-  gap: 12px;
+  gap: tokens.$ifxSpace150;
 
   &:hover {
     cursor: pointer;
@@ -16,7 +16,7 @@
     flex-direction: row;
     align-items: center;
     padding: 0px;
-    gap: 8px;
+    gap: tokens.$ifxSpace100;
     position: relative;
 
     & .dropdown-menu {
@@ -31,14 +31,14 @@
 
     & a {
       text-decoration: none;
-      color: tokens.$color-text-black;
+      color: tokens.$ifxColorBaseBlack;
       font-style: normal;
       font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
+      font-size: tokens.$ifxFontSizeS;
+      line-height: tokens.$ifxLineHeightS;
       display: flex;
       align-items: center;
-      color: #1D1D1D;
+      color: tokens.$ifxColorBaseBlack;
       flex-direction: column;
       justify-content: center;
       padding: 0px;
@@ -48,10 +48,10 @@
 
   & .breadcrumb-divider {
     width: 10px;
-    height: 16px;
-    color: tokens.$color-gray-300;
+    height: tokens.$ifxSize200;
+    color: tokens.$ifxColorEngineering300;
     line-height: 13px;
-    font-size: 20px;
+    font-size: tokens.$ifxFontSizeXl;
 
     margin-right: 12px;
   }

diff --git a/packages/components/src/components/breadcrumb/breadcrumb.scss b/packages/components/src/components/breadcrumb/breadcrumb.scss
@@ -6,14 +6,14 @@
   margin: 0px;
   display: flex;
   flex-direction: row;
-  font-family: tokens.$font-family-body;
-  font-size: tokens.$font-size-s;
+  font-family: tokens.$ifxFontFamilyBody;
+  font-size: tokens.$ifxFontSizeS;
   align-items: flex-start;
-  //gap: 16px; //this is where the gap comes from
+  //gap: tokens.$ifxSpace200; //this is where the gap comes from
 
 }
 
 // .separator {
-//   color: tokens.$color-gray-300;
+//   color: tokens.$ifxColorEngineering300;
 //   margin: 0 16px;
 // }