Log:

yarn run v1.22.18
$ /Users/shyamswaroop/projects/cruxcode/atrilabs-engine/node_modules/.bin/mirrorful
Running Mirrorful version: 2.0.5
Starting Mirrorful in /Users/shyamswaroop/projects/cruxcode/atrilabs-engine/packages/example-atri-app.

Error: ENOENT: no such file or directory, chdir '/Users/shyamswaroop/projects/cruxcode/atrilabs-engine/packages/example-atri-app' -> 'node_modules/mirrorful/editor'
    at process.wrappedChdir [as chdir] (node:internal/bootstrap/switches/does_own_process_state:112:14)
    at /Users/shyamswaroop/projects/cruxcode/atrilabs-engine/node_modules/mirrorful/dist/init.js:35:21
    at Generator.next (<anonymous>)
    at fulfilled (/Users/shyamswaroop/projects/cruxcode/atrilabs-engine/node_modules/mirrorful/dist/init.js:5:58) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'chdir',
  path: '/Users/shyamswaroop/projects/cruxcode/atrilabs-engine/packages/example-atri-app',
  dest: 'node_modules/mirrorful/editor'
}

We should automatically export changes after the following actions:

• Adding a new color
• Editing a color
• Deleting a color

Problem

Currently, if I add a new color to the theme, I have to add it's variants one by one using the mirrorful editor which is a tedious process.

Proposed Solution

Could a feature be added in the editor that allows the user to add multiple variants at once by passing the variants as key-value pairs in a javascript object?

{ 
      "50": "#c8bbf0",
      "100": "#b4a3ea",
      "200": "#a08ae4",
      "300": "#8b71de",
      "400": "#7758d9",
      "500": "#633fd3",
      "600": "#532dc6",
      "700": "#4828ad",
      "800": "#3e2294",
      "900": "#331c7b"
}

Migrate to this NPM package instead of using our own in-house thing: https://www.npmjs.com/package/conf

Let's add a skeleton state of what a color row typically looks like — basically an outline of what a color would look like.

Create an example in https://github.com/Mirrorful/mirrorful/tree/main/examples for Tailwind.

Would love specific feedback on the existing exportable format and whether we want to include a more customized export format for Tailwind repos.

As a user, when I'm naming a color, I'm confused it if must name it primary-blue because I'm used to variables not having spaces.

Solution: add a tooltip or make it more clear in some other way

In this example, 0.75 rem should be first, even if it was added last.

For now, we can just sort by unit. For example, you can sort the rems, then px, then em. Then you can avoid crazy math.

Proposal

Categorize the tokens across relevant theme files.

Why?

Currently, all the tokens stay in the same hierarchy at the root level of the Token object. (both named and unnamed). The issue that arises with this approach is that all the theme colour objects stay at the same level as the fontSizes = {} object. Which causes an issue when we need to override certain components inside our existing theme/design system.

For example, in cases such: tailwind-next, the existing tailwind theme colours of a project are overridden as:

  theme: {
    extend: {
      colors: mirrorful.Tokens,
    },
  },

This approach works fine but the fontSizes = {} object will also be included in the colors object of tailwind, which won't break anything but should not be there. As the project size increases more and more components will be added and I think the categorization process should be done from the very start instead of people having to run migrations at a later stage.

Note: For now, I just added a basic .filter() function to mirrorful.Tokens which excludes the fontSizes object, but I think it's a very hacky approach and would keep getting worse if/when more components are added to the theme files.

Current Structure

exports.Tokens = {
  'acme-inc-purple': {
    50: '#fefeff',
    100: '#ebe4fb',
    200: '#d8c9f7',
    300: '#c5aff2',
    400: '#b294ee',
    500: '#9f7aea',
    600: '#8c60e6',
    700: '#7945e2',
    800: '#662bdd',
    900: '#5820ca',
    base: '#9F7AEA',
  },
  'acme-inc-error-red': {
    50: '#fffefe',
    100: '#fbe4e9',
    200: '#f7c9d3',
    300: '#f2afbd',
    400: '#ee94a8',
    500: '#ea7a92',
    600: '#e6607c',
    700: '#e24567',
    800: '#dd2b51',
    900: '#ca2044',
    base: '#ea7a92',
  },
...
  fontSizes: {
    sm: '1rem',
    md: '1.2rem',
    lg: '1.4rem',
  },
}

Proposed Structure

exports.Tokens = {
  themeColors: {
    'acme-inc-purple': {
      50: '#fefeff',
      100: '#ebe4fb',
      200: '#d8c9f7',
      300: '#c5aff2',
      400: '#b294ee',
      500: '#9f7aea',
      600: '#8c60e6',
      700: '#7945e2',
      800: '#662bdd',
      900: '#5820ca',
      base: '#9F7AEA',
    },
    'acme-inc-error-red': {
      50: '#fffefe',
      100: '#fbe4e9',
      200: '#f7c9d3',
      300: '#f2afbd',
      400: '#ee94a8',
      500: '#ea7a92',
      600: '#e6607c',
      700: '#e24567',
      800: '#dd2b51',
      900: '#ca2044',
      base: '#ea7a92',
    },
  },
  fontSizes: {
    sm: '1rem',
    md: '1.2rem',
    lg: '1.4rem',
  },
  xyzCategory: {
    key1: 'value1',
    key2: 'value2',
  },
  pqrCategory: {
    key3: 'value3',
    key4: 'value4',
  },
}

1. It's unclear what file to put the import statement in:

2. The import statement depends on relative path, we should make that more clear, perhaps clarify it's an example

3. It's unclear that the <Button> referenced in the onboarding is from a UI library, and not a regular HTML <button> which does not have _hover property.

If you have colors defined when you start mirrorful, you don't go through the onboarding process, rather your colors appear in the editor. However, in between opening mirrorful and the colors loading asynchronously, there is no 'loading' indicator, you are merely faced with the "Add new color" button, with no indication that you have colors defined.

Add async loading indicator to editor in non-onboarding mode.

As a user, if I kill mirrorful in my terminal, but then go to my browser, I might be confused mirrorful is still rerunning. We should send a command that it's no longer running.

Should look something closer to this

We need to set up docs

When you export your config, if your second color is named "Brick Red," it will be exported as -brick-red

My concussion turned me into a pseudo-vampire, so this is partly an a11y issue.

Please add darkmode support to both the designer, then dogfood it in your homepage.
TIA

Instead of predefining things like active and hover, we should aim for flexibility instead of guidance —

Objective: Remove any opinions on the variants that users should have, and instead offer the flexibility to define custom variants (e.g. 25, 50)

This ticket is dependent on moving to conf because it will require a database migration.

As a user, I would love to be able to copy paste theses.

Long-term, this would probably live in actual docs.

To reproduce, run

yarn add mirrorful@latest

Any existing .mirrorful data gets wiped.

If you attempt to edit a typography variant, the variant value input won't permit addition of a value containing a decimal place. Furthermore, if the value has been imported with a decimal place and you attempt to delete the digit after the decimal place, the decimal place disappears. If you attempt to type another decimal place in the case of an imported decimal, the input displays NaN.

If you add a new color variant to a color, and add gibberish or an invalid CSS color, there is no warning, and variant appears as white-on-white. Suggest validation error (eg input turning red) on invalid css submission.

Add a new section for border radii

Should allow for variations, such as:

• base
• sm
• md
• lg

npx mirrorful should bubble and surface any errors

Nextjs website in editor should be hosted on demo.mirrorful.com

Adding i18n to the Mirrorful Editor

Adding a new color right now can be intimidating / confusing because of the hover & active options. We should add a "magic wand" icon button that will prefill in a recommended shade. We can just prefill in colorShades['600'] as the hover, and colorShades['700'] as the active

Otherwise, the NPM command itself (which uses the dist folder) will be on a different version.

As an engineer, I'd like to have a way to quickly reference my project's Mirrorful tokens without starting the local editor. It'd be nice to have a VS Code extension that reads the Mirrorful config and displays the tokens, similar to the Mirrorful UI. Having the Mirrorful editor in an extension might also be useful 👀.

Show instructions for importing the theme_cjs file and extending the theme in the tailwind config.

Create an example in https://github.com/Mirrorful/mirrorful/tree/main/examples for Nuxt 3.

If you add a color in the editor, it automatically creates a "500" variant, which when edited shows the "Set as base" flag set. If you delete this variant, because of the flag set, it also deletes the base color. This is not immediately obvious before the fact. Suggest a "500 (BASE)" description in tile to make this clearer, or similar mechanism.

If you add several colors with the same name, initially the first duplicate is named [color name] 2, but the second duplicate is also named [color name] 2, which results in both disappearing if one is deleted.

When the editor is initially loaded, a color picker does not initially appear when you open the color edit modal dialogue. Clicking a color input activates the colour picker, but this perhaps should appear by default.

Loom of issue: https://www.loom.com/share/63055c5daee240f0bca2d368ca62e771

Suggest Polish label

https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry

For example:

blue: #44341
blue-shades: {
   400...
   base: #44341
   600..
}

🌎 We want to let as many people use Mirorrful as possible! Help us translate it! 🚀

Translate our top-level README.

If you have any questions, just shoot them in the comments to this issue or join our Slack.

For new users with no existing theme, let's generate shades for them to show variants

Low priority issue I presume, but when a new color is added, and only the base color is set, if you select an optional color input(such as hover or active) and then click in the color picker, a react warning appears in the console:

Tidy up uncontrolled input required (?)

We should prevent empty fields.

Can use EditFontSizeModal.tsx as a reference. That code has error handling for a very similar form!