You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Replace removed palette and brand colors, scales, and tokens
Search for any hardcoded hex,rgb(a),hsl(a), or named colors such as 'white' and theme them instead
Visually check places that use existing palette and adjust scale. You may need to increase scale as many colors are lighter.
If you use generateGlobalStyles that generates background color for <body> and use grey.v_100 in some components to match the background color, you may need to update the components to grey.v_50.
You may also see if there are any useful updates to be done in regards to new tokens, e.g. replacing a palette color with a new token that describes a function of a color better
Regexes and migration overview from the Kolibri migration pull request may help. See the "Upgrade process" section of the PR description.
useKResponsiveWindow
🚩BREAKING🚩 Moves useKResponsiveWindow from /lib to /lib/composables
Guidance: Update import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow'; to import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
What's Changed
Rebranding
🚩BREAKING🚩 Updates
brand
colors,palette
colors, andtoken
s:palette
colors:purple
,deeppurple
,indigo
,brown
,cyan
,teal
,lightgreen
,lime
,amber
,deeporange
,bluegrey
palette.grey
scales:v_300
,v_500
,v_700
,v_900
brand
andpalette
scales (exceptpalette.grey
):v_50
,v_100
,v_300
,v_500
,v_700
,v_900
exercise
,video
,audio
,document
,html5
,slideshow
appBarFullscreen
,appBarFullscreenDark
,linkDark
palette
colors look differently<body>
background color changed fromgrey.v_100
to lightergrey.v_50
Guidance:
generateGlobalStyles
that generates background color for<body>
and usegrey.v_100
in some components to match the background color, you may need to update the components togrey.v_50
.palette
color with a newtoken
that describes a function of a color betteruseKResponsiveWindow
useKResponsiveWindow
from/lib
to/lib/composables
import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
toimport useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
KResponsiveWindow
KResponsiveWindow
mixin's documentation page in favor of the newuseKResponsiveWindow
documentation pageDependencies
Full Changelog: v3.1.0...v4.0.0
This discussion was created from the release v4.0.0.
Beta Was this translation helpful? Give feedback.
All reactions