docs: adapt links; add chart colors; rename tiles (#868)

Co-authored-by: Lukas Maurer <[email protected]>

packages/documentation/docs/getting-started-for-designers.md

@@ -11,7 +11,7 @@ import {Card, CardList} from '@site/src/components/Card';
   <Card label="iX design kits" isPrimary={true} size="big" link="design-kit" icon="disk" />
   <Card label="iX for developers" link="getting-started" icon="rocket"/>
   <Card label="Industrial icon system" link="icon-library/icons" icon="language" />
-  <Card label="Theming and styling" link="theming/colors" icon="bulb"/>
+  <Card label="Color palette" link="theming/colors" icon="bulb"/>
   <Card label="Font System" link="theming/fonts" icon="book"/>
   <Card label="Components" link="controls/navigation/basic-navigation" icon="configuration" />
 </CardList>

packages/documentation/docs/getting-started.md

@@ -11,6 +11,6 @@ import {Card, CardList} from '@site/src/components/Card';
   <Card label="Installation" isPrimary={true} size="big" link="installation" icon="disk" />
   <Card label="iX for designers" link="getting-started-for-designers" icon="tulip"/>
   <Card label="Industrial icon system" link="icon-library/icons" icon="language" />
-  <Card label="Theming and styling" link="theming/colors" icon="bulb"/>
+  <Card label="Theming" link="guidelines/theme" icon="bulb"/>
   <Card label="Components" link="controls/navigation/basic-navigation" icon="configuration" />
 </CardList>

packages/documentation/docs/guidelines/theme.md

@@ -48,7 +48,7 @@ If this step is done you can set the theme name class on the body tag:
 
 The Siemens AG Corporate Brand Theme is exclusively available to official Siemens AG products where it should always be used as the default theme to reflect the latest Siemens AG Corporate Brand guidelines.
 
-Siemens AG employees can access the Corporate Brand Theme [here](https://code.siemens.com/siemens-ix/ix-brand-theme).
+Siemens AG employees can access the Corporate Brand Theme at [**https://code.siemens.com/siemens-ix/ix-brand-theme**](https://code.siemens.com/siemens-ix/ix-brand-theme).
 
 </div>
 

packages/documentation/src/components/ThemeColors/resolve-colors.ts

@@ -123,6 +123,40 @@ export const themeColors = [
   '--theme-color-lightbox',
   '--theme-color-backdrop',
   '--theme-color-backdrop-3',
+  '--theme-chart-1',
+  '--theme-chart-1-40',
+  '--theme-chart-2',
+  '--theme-chart-2-40',
+  '--theme-chart-3',
+  '--theme-chart-3-40',
+  '--theme-chart-4',
+  '--theme-chart-4-40',
+  '--theme-chart-5',
+  '--theme-chart-5-40',
+  '--theme-chart-6',
+  '--theme-chart-6-40',
+  '--theme-chart-7',
+  '--theme-chart-7-40',
+  '--theme-chart-8',
+  '--theme-chart-8-40',
+  '--theme-chart-9',
+  '--theme-chart-9-40',
+  '--theme-chart-10',
+  '--theme-chart-10-40',
+  '--theme-chart-11',
+  '--theme-chart-11-40',
+  '--theme-chart-12',
+  '--theme-chart-12-40',
+  '--theme-chart-13',
+  '--theme-chart-13-40',
+  '--theme-chart-14',
+  '--theme-chart-14-40',
+  '--theme-chart-15',
+  '--theme-chart-15-40',
+  '--theme-chart-16',
+  '--theme-chart-16-40',
+  '--theme-chart-17',
+  '--theme-chart-17-40',
 ];
 
 export const resolveColorValue = (name: string) => {