Skip to content
This repository was archived by the owner on Oct 27, 2025. It is now read-only.

Migration from Disainipesa

Jump to bottom
Airike Jaska edited this page Sep 25, 2024 · 11 revisions

TEDI vs Disainipesa

Disainipesa is discontinued and it is moved completely inside TEDI community components. Basically TEDI community development will be as same as it was in Disainipesa and react-components lib. TEDI components part is new and will follow TEDI management rules. Please see here for more information: Architecture

Project migration

Project, that uses old react-components lib you need to follow these steps:

  1. Remove old dependency from package.json: @tehik/react-components
  2. Install TEDI component library npm i @tehik-ee/tedi-design-system
  3. Find and replace from all files in project: from '@tehik/react-components' and replace from '@tehik-ee/tedi-design-system/community' (from is important to replace only import statements)
  4. In addition you need to change style location as well: import '@tehik/react-components/index.css' and replace import '@tehik-ee/tedi-design-system/index.css'
  5. Repeat the steps for every NPM project.

How to use TEDI components

  1. When adding new features to your project, first thing is to see Storybook if TEDI provides required component. If yes, then you should use it. TEDI components in storybook is located under TEDI-READY section. https://tehik-ee.github.io/tedi-design-system/main
  2. If TEDI doesn't provide component, then developer should see if the community provides it. Community components are located in Storybook under COMMUNITY Section.
  3. If nether sections doesn't have required component, then you can always as in Slack and probably have to create the component on your own.
  4. If there is both Community and TEDI-Ready component with the same name, you should look for Deprecated badge on Community component and a reference for TEDI-Ready component.

TEDI team continuously adds new components. Majority of them will be converted from community components. You should refactor your project to reflect latest changes in the component lib.

Migrating from Community to TEDI colors

Figma color map

Brand/Base Colors Neutrals Alphas
TEDI Community TEDI Community TEDI Community
primary-800
#003662 		- neutral-50
#FFF 		white
#FFF 		alpha-white-80
rgba(255 255 255 / 0.8) 		-
primary-700
#004277 		primary-active
#004277 		neutral-100
#F9F9F9 		gray-10
#F9F9F9 		alpha-white-50
rgba(255 255 255 / 0.5) 		-
primary-600
#005AA3 		primary-main
#005AA3 		neutral-150
#F0F0F2 		gray-20
#F0F0F2 		alpha-white-30
rgba(255 255 255 / 0.3) 		-
primary-500
#337BB5 		- neutral-200
#e1e2e5 		gray-30
#e1e2e5 		alpha-white-10
rgba(255 255 255 / 0.1) 		-
primary-400
#4587bc 		primary-active-subtle
#4587bc 		neutral-300
#D2D3D8 		gray-40
#D2D3D8 		alpha-01
rgba(0 0 0 / 0) 		-
primary-300
#99BDDA 		- neutral-400
#9293A4 		gray-50
#9293A4 		alpha-20
rgba(0 0 0 / 0.2) 		-
primary-200
#D0E1EE 		primary-highlight
#D0E1EE 		neutral-500
#5D6071 		gray-60
#5D6071 		alpha-40
rgba(23 23 23 / 0.4) 		-
primary-100
#E7F0F6 		primary-highlight-subtle
#E7F0F6 		neutral-550
#4B4E62 		gray-70
#4B4E62 		alpha-80
rgba(34 35 43 / 0.8) 		-
accent-800
#663300 		- neutral-600
#34394C 		gray-80
#34394C 		alpha-primary-20
rgba(0 90 163 / 0.08) 		-
accent-700
#994D00 		accent-active
#994D00 		neutral-700
#262B3B 		gray-85
#262B3B 		alpha-primary-08
rgba(0 90 163 / 0.2) 		-
accent-600
#FF8000 		accent-main
#FFDCB8 -> #FF8000 		neutral-800
#151926 		gray-90
#151926
accent-500
#FF9933 		- neutral-900
#000 		black
#000
accent-400
#FFB366 		-
accent-300
#FFCC99 		-
accent-200
#FFE6CC 		accent-highlight
#FFE6CC
accent-100
#FFF2E6 		-
green-800
#1D5032 		-
green-700
#266B42 		positive-active
#006728 -> #266B42
green-600
#308653 		positive-main
#2C7A4C -> #308653
green-500
#599E75 		-
green-400
#83B698 		-
green-300
#ACCFBA 		-
green-200
#D6E7DD 		-
green-100
#EAF3EE 		positive-highlight
#ECF4EF -> #EAF3EE
yellow-800
#664807 		warning-active
#664807
yellow-700
#94690D 		warning-main
#8C630A -> #94690D
yellow-600
#BA830D 		-
yellow-500
#FFB511 		-
yellow-400
#FFD370 		-
yellow-300
#FFE1A0 		-
yellow-200
#FFF0CF 		warning-highlight
#FFF1D3 -> #FFF0CF
yellow-100
#FFF8E7 		-
red-800
#812525 		-
red-700
#AC3232 		important-active
#B50000 -> #AC3232
red-600
#D73E3E 		important-main
#C43939 -> #D73E3E
red-500
#DF6565 		-
red-400
#E78B8B 		-
red-300
#EFB2B2 		-
red-200
#F7D8D8 		-
red-100
#FBECEC 		important-highlight
#FCEEEE -> #FBECEC

Clone this wiki locally