Introduce new UIKit theme with light and dark variants, including
comprehensive color tokens for both themes. Update relevant components
and styles to accommodate the new theme architecture.
This commit introduces a comprehensive update to the theme tokens in the
Cunningham package. The previous color definitions have been replaced
with a new structure that includes global color tokens for branding and
contextual elements. Additionally, the SCSS and JS files have been
refactored to align with this new token architecture, enhancing
maintainability and ensuring a cohesive design system across the
application. The TypeScript configuration has also been updated to
support JSX syntax.
This new demo aims to take advantage of all the new Cunningham's
components. The old demo was kind of a draft, this new one gives
a better overview of what Cunningham is capable of.
Previously, when using the cunningham bin to build tokens, the CSS
file always included utility classes, resulting in duplicated CSS
utility classes on the consumer side if no specific CSS optimizer
is defined ( its local cunningham-tokens.css + the one from the
react package ). Now, this new feature introduces a param named
--utility-classes that must be provided to generate those classes.
This params is henceforth only provided to the bin inside the tokens
package.
These were the missing parts in order to use every design tokens
of Cunningham. Including: spacing, font weight, size, family, and
colors. In order to be really versatile and to allow users to
define new design tokens I had to re-organize the way those tokens
are sub divided in sub objects in cunningham.ts file. That's why
sub division are created for theme.typ.sizes for instance.
This demo is useful to test in the real usage of the design system as a real
user that will generate its own customized design tokens, implements the design
system's components, etc ...
