Create a list of 'challenges' for the Theme Builder Collaboration Summit (FINOS/GAAD)

[PaulaPaul]

This work supports #774

Potential challenges:

• Install and build Theme Builder locally and open an issue or issues related to any challenges or missing documentation

• Review the backlog and comment on issues that you need more information on in order to contribute

• Use an existing design system such as these and find a way to replicate / incorporate / integrate Theme Builder

• Create a new organism (design/Figma, or work together with a programmer on code) for:

  • Accordion
  • Carousel
  • Header
  • Footer

• Create a landing page using Theme Builder, for a Theme Builder micro site (consider cognitive abilities and creative brainstorming to support autism, WCAG AAA, ADHD, dyslexia

• Create a process for testing an entire web page or web site using open source tooling such as Purple A11y

• Anima and Chromatic exporations?

• Synchronize your work with Storybook

• [Request] Create Theme color selection #541

• Add Netlify badge #716

• [REQUEST] Create an expandable select component #551

[PaulaPaul]

@lwnoble @aaronreed708 @evangk6 @codyzu -

What do you think about giving people at the collaboration summit the challenge areas above?

[codyzu]

I'm thinking of a way to extract the binding between the theme builder generated theme and MUI. This exists, but is kinda coded for purpose within the theme builder.

[PaulaPaul]

I'm thinking of a way to extract the binding between the theme builder generated theme and MUI. This exists, but is kinda coded for purpose within the theme builder.

@codyzu is it possible to create a specific issue for this (like a 'research spike') and we can tag it to the Themebuilder collaboration summit? Let me know if there is already a related issue, or if you can break this out to a separate issue and link it to any related work?

[PaulaPaul]

@aaronreed708 @lwnoble @evangk6 - do you think we could use the 'help wanted tag to identify the issues targeted for the collab summit? That might make things easy when we have the event. We can also create a separate tag but maybe anything tagged 'help wanted' should always be fair game?

If we tag them, we can continue to refine them until the summit-
Let me know what you think (comment) and/or I can raise this on the next call so that I can finish the work on tee-ing up challenge issues.

[aaronreed708]

I don't know much about the storybook bullet so you'll probably need Evan to comment on that one.

I think implementing in organism at 45 minutes would be pretty aggressive. However, a coder paired with a designer might map out the implementation, pretty well, in that timeframe.

I think using the help-wanted tag is a great idea for an isolated, one time event like the Summit.

[PaulaPaul]

Hi @aaronreed708 @evangk6 @codyzu @lwnoble - I've tagged all the 'good first issue' items with a 'help wanted' tag that we can use to guide participants to issues for the upcoming summit, and added a handful of research issues for testing (Chromatic, PurpleA11y, Deque), Anima, and initial research on taking an existing design system and replicating / importing components to Theme Builder.

So far, there are 28 issues tagged this way - please have a look https://github.com/finos/a11y-theme-builder/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22

I would not expect people to complete these during the event, but have asked for comments on the issues to show their thinking and so that we can stay engaged after the event and keep them going...

For the Storybook item, I referenced the existing Storybook issue and created a new issue to ask them to document it, since there is an exiting WIP page in docs for Storybook integration. If there are other things that come up for the summit work, we can just tag them with 'help wanted' going forward until the event.

Let me know what you think (thumbs up if you are ok with this... or set me in a different direction by commenting below)
Thanks!

[aaronreed708]

Hey @PaulaPaul, thanks for you help and drive on this issue!

I see that #529 is on this list. This is one of the issues related to the Mentorship epic and not sure what you had in mind here. I think that maybe this can be closed since the design work here is complete. What do you think @lwnoble?

Otherwise I like your list. Great job!

[lwnoble]

Theme Builder Challenges

Designers

Challeng #1

• Create a Landing Page for Theme Buidler, using existing components and styles or create any new required components
• Copy the V2 Figma File
• Review Resources:
  • Watch the "How Theme Builder Works" video

theme-builder-compressed_2YV6Io1W.mp4

- Getting Started (Review the Getting Started Page in the Figma File)
- Watch the "Creating a new component" video

new-component-2_GCwHIRuC.mp4

• Create a page usign existing components, variables and styles provides.
• Test it works in all modes/platforms/devices
• Share your file with the Theme Builder Team

Challenge # 2

• Create a Landing Page for Theme Buidler, using existing components and create any new required components

• Copy the Figma File

• Review Resources:

  • How Theme Builder works (Lise will provice a video of how Theme Builder works (done - just need upload and provide a link))
  • How to Create a new component
    • Lise will provide a cheet sheat in the figma file for how to use the tokens to build new components
    • Lise will provide a quick demo of a new component beign created

• Create a new component usign existing components, variables and styles provides.

• Sample component

• Test it works in all modes/platforms/devices

• Share your file with the Theme Builder Team, so we can add the component to the library

Developers

1.) Challenge # 1, Create Transforms - converting JSON out of TOkens into CSS that matches our format

• Link to Figma file (coming soon)
• Export Tokens:
  • Open Figma Link
  • Open Tokens Studio Plugin by clicking the Figma Icon in the top left corner of Figma > Plugins > Tokens Studio
  • In the lower left corner of Token studio click Tools > Export File/Folder
  • Deselect the checkbox for "include parent key"
  • Select Multiple Files and then click "Export"
  • You will download a zip file
  • Unzip and remove the following to files:
    • $metadata.json
    • $themes.json
  • Rezip the folder
  • Learn more about style dictionary
  • Joren Broekema is an incredible resource, he is writing the style dictionary documentation
  • Open the configurator with sample filters and transforms
  • "And paste this code in the configuration window":
  • { "source": [ "**/*.json" ], "log": { "verbosity": "verbose" }, "platforms": { "css": { "transformGroup": "tokens-studio", "transforms": [ "name/kebab", "css/boolean-to-display", "attribute/group" ], "buildPath": "build/css/", "files": [ { "destination": "core.css", "format": "custom/css/variables", "filter": "core-filter", "options": { "outputReferences": true } }, { "destination": "aa.css", "format": "custom/css/variables", "filter": "mode-filter", "options": { "outputReferences": true } }, { "destination": "cognative.css", "format": "custom/css/variables", "filter": "cognative-filter", "options": { "outputReferences": true } }, { "destination": "elevations.css", "format": "custom/css/variables", "filter": "elevation-filter", "options": { "outputReferences": true } }, { "destination": "gradients.css", "format": "custom/css/variables", "filter": "gradient-filter", "options": { "outputReferences": true } }, { "destination": "spacing.css", "format": "custom/css/variables", "filter": "spacing-filter", "options": { "outputReferences": true } }, { "destination": "backgrounds.css", "format": "custom/css/variables", "filter": "background-filter", "options": { "outputReferences": true } }, { "destination": "charts.css", "format": "custom/css/variables", "filter": "charts-filter", "options": { "outputReferences": true } }, { "destination": "devices.css", "format": "custom/css/variables", "filter": "device-filter", "options": { "outputReferences": true } }, { "destination": "platforms.css", "format": "custom/css/variables", "filter": "platform-filter", "options": { "outputReferences": true } } ] } } }

Paste this code in the Functions window:
`import StyleDictionary from 'style-dictionary';
import { formattedVariables } from 'style-dictionary/utils';
import { fileHeader } from 'style-dictionary/utils';
import { registerTransforms } from '@tokens-studio/sd-transforms';

// sd-transforms, 2nd parameter for options can be added
// See docs: https://github.com/tokens-studio/sd-transforms
registerTransforms(StyleDictionary);

StyleDictionary.registerFilter({
name: 'core-filter',
matcher: (token) => token.filePath.endsWith('core.json')
});

StyleDictionary.registerFilter({
name: 'mode-filter',
matcher: (token) => token.filePath.includes('mode/')
});

StyleDictionary.registerFilter({
name: 'theme-filter',
matcher: (token) => token.filePath.includes('theme/')
});

StyleDictionary.registerFilter({
name: 'background-filter',
matcher: (token) => token.filePath.includes('my-backgrounds/')
});

StyleDictionary.registerFilter({
name: 'charts-filter',
matcher: (token) => token.filePath.includes('charting/')
});

StyleDictionary.registerFilter({
name: 'device-filter',
matcher: (token) => token.filePath.includes('device/')
});

StyleDictionary.registerFilter({
name: 'platform-filter',
matcher: (token) => token.filePath.includes('platform/')
});

StyleDictionary.registerFilter({
name: 'cognative-filter',
matcher: (token) => token.filePath.includes('cognative/')
});

StyleDictionary.registerFilter({
name: 'spacing-filter',
matcher: (token) => token.filePath.includes('text-spacing/')
});

StyleDictionary.registerFilter({
name: 'elevation-filter',
matcher: (token) => token.filePath.includes('elevation/')
});
StyleDictionary.registerFilter({
name: 'gradient-filter',
matcher: (token) => token.filePath.includes('gradient/')
});

StyleDictionary.registerTransform({
name: 'css/boolean-to-display',
type: 'value',
transformer: (token, _, options) => {
const tokenType = options.usesDtcg ? token.$type : token.type;
const tokenValue = options.usesDtcg ? token.$value : token.value;
if (tokenType === 'boolean') {
return tokenValue === 'true' ? 'block' : 'hidden';
}
return tokenValue;
}
});
const groups = ["font-style", "color-theme", "background"];

StyleDictionary.registerTransform({
name: "attribute/group",
type: 'attribute',
matcher: (token) => token.path[0] === 'background',
transformer: function(prop) {
return {
// Brittle logic, the group is the 3rd level of the object path
group: true,
groupName: prop.path[1]
}
}
});

// Custom CSS format that is basically a copy of the built-in,
// except for the fact that we pass formatting options -> commentPosition
StyleDictionary.registerFormat({
name: 'custom/css/variables',
formatter: async function ({ dictionary, options = {}, file }) {
const selector = options.selector ? options.selector : :root;
const { outputReferences, outputReferenceFallbacks, usesDtcg } = options;
const header = await fileHeader({ file });
return (
header +
${selector} {\n +
formattedVariables({
format: 'css',
dictionary,
outputReferences,
outputReferenceFallbacks,
usesDtcg,
formatting: {
commentPosition: 'above'
}
}) +
\n}\n
);
},
});

StyleDictionary.registerFormat({
name: 'css/group',
formatter: function(dictionary, config) {
const groupMap = dictionary.allTokens.reduce(function(prev,curr) {
if (!prev[curr.attributes.groupName]) {
prev[curr.attributes.groupName] = [];
}
prev[curr.attributes.groupName].push(curr);
return prev;
},{});

return Object.keys(groupMap).map(function(key) {
  let props = groupMap[key];
  return `[data-background="${key}"] {

${props.map(function(prop) {
return ${prop.name}: ${prop.value};
}).join('\n')}
} }).join('\n\n'); } });
- Link to desired output css format (coming from Lise soon)
- We would like for the following tokens to be grouped using the logic provided in this configurator example

        - my-backgrounds
        - themes
        - elevations
        - gradients
        - platforms
        - devices
        - cognative
        - text-spacing
        
    - We would like the light and dark modes to be rendered into one aa.css file with the dark mode wrapped in "@media (prefers-color-scheme: dark) {}"
    - Remove "path[0]" from tokens with spacing, sizing, radius, system-topography and typography so that they are cleaned up - for example the following changes happen
        -  "sizing-sizing-1" becomes "sizing-1"
        -  "spacing-spacing-1" becomes "spacing-1"
        -  "radius-radius-1" becomes "radius-1"
        -  "system-typography-hero-body-text-decoration" becomes "hero-body-text-decoration"
    - Not all of the tokens are gettign transformed
        -  the ones with math need to have calc() added to work 
        -  For numbers, sizes, spacing and fontSizes tokens when there are parentheses we should write js logic to add calc()
        -  colors with opacity/lighteneing/darkeing or mixing are not getting transformed despite the ts/color/modifiers and I am not sure why

• Link Figma to GitHub Repo & Apply Git Hub Actions
  • Once you have the configurator working properly using the transform logic
    • Connect your figma file to gitHub
    • Use gitHub actions to
      • 1.) remove the $theme.json and meta.json files
      • 2.) transform the pushed JSON to css file in new branch - to be provided.

London Challenge, Coming July - Export component or design from Figma into React/Mui app using our css
*Question: Can we set up react project in Git with Mui install and our css?

• Steps:
  • Export Code:
  • Open Figma file
  • Toggle to Dev Mode in Figma. To the right of the blue "Share" button in Figma toggle the "</>" button. You know you are in dev mode when the share button and the toggle turn green.
  • Select a Frame of components and styles in Figma (nothing too big).
  • Click on "Plugins" under the DevMode toggle
  • Search for Anima (install if you do not yet have it)
  • Select Anima
  • Cut and paste the index.js code into the provided repo (coming soon)