cerebral/classy-ui

An automatically optimized design system

classy-ui

Design tokens at your fingertips

Documentation at https://classy-ui.io.

classy-ui's Issues

Outline missing some tokens and properties

I believe outline may be missing properties that are already available on the border.

outlineRadius, outlineColor, etc. Only outline seems to exist at the moment and its only token is NONE.
https://github.com/cerebral/classy-ui/blob/master/src/config/classnames.ts#L701

Add margin and padding shortcuts

The new direction on the classnames is great, but not having the px, mx, py, my... shortcuts definitely slow down the workflow.

Docs are misleading, instructions install version 1.0 instead of 2.0

I tried out classy-ui, wondering for a while why it didn't seem to work as it did for others, then I looked at the package on npm and noticed that latest points to 1.0.0, and that there's a 2.0 version. I imagine a lot of people are going to come by and just step away from the project entirely because of this, especially since 1.0 has bugs in it that prevent it from working at all.

I suggest either:

• Update the docs to say to install classy-ui@alpha
• Point the latest tag to the latest 2.0 version

Default tokens for classy-ui config

I have been trying to set custom tokens like this in classy-ui.config.js.

const defaultTokens = require('classy-ui/tokens').default
const theme = require('./src/core/theme');
const colors = require('./src/core/colors').classyColors;

module.exports = {
  tokens: {
    ...defaultTokens,
    color: colors
  }
}

But it doesnt seem to work. I also looked into the code, and couldnt find a classy-ui/tokens package

Version 11.0.0 causes 'mobile' to activate on normal screen

I just took my (local) apprun-classyui-spa from classy-ui 10.2.1 to 11.0.0 and noticed that the main margin-left was reduced from 2rem to 1rem; margin-right was also shrunk. This is the start of the generated HTML of the div when I do npm start:

<div class="margin-left__SPACE_70 mobile:margin-left__SPACE_40 margin-right__SPACE_40 mobile:margin-right__SPACE_20

The live result (using 11.0.0) can be seen here: https://apprun-classyui-spa.surge.sh/
The code at https://github.com/jkleiser/apprun-classyui-spa is still using classy-ui 10.2.1.
Attached is a dump from devtools showing 'mobile' active.

NextJS Build Error

Failed to compile.

./components/FirstComponent.tsx
Module not found: Can't resolve 'classy-ui/normalize.css' in '/Users/devchris/Documents/code/nodejs/project/packages/next/components'

I follow the new updated documentation :/

Codesandbox not running basic example

Leaving this issue here to note that the basic setup in the README is not yet working on Codesandbox.

As per discussions with @christianalfoni this is a known issue where Codesandbox does not find the entry points, likely due to the library setup.

Discussion: Add aria-invalid utility | conditional styling based on html attributes

Hey, sorry for reporting so many issues. This one is not a bug but a suggestion where I'd love your input to understand which direction classy-ui wants to go.

I've been using smooth-ui for a while and one thing I really liked about their API is to be able to pass in an aria-invalid HTML attribute that will lead to some custom styles being applied. E.g if the attribute is true, the underlying input will turn red to let all users know that the input is invalid. Combining a11y with styles brings about a very lovely API.

I'm now building an input component and am wondering if something like &[aria-invalid='true'] as seen in the smooth-ui source code would be a useful utility to have, or if this is outside of the scope of classy-ui. Essentially, applying styles based on HTML attributes (and their values).
Alternatively, I will just stick to compose + props.

NextJS Build Error

Hello, I follow the instructions for next in the docs but here's what I got:

$ next build
Creating an optimized production build...
> Using external babel configuration
> Location: "/Users/devchris/Documents/code/nodejs/project/packages/next/.babelrc"

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run build stderr:
warning package.json: No license field
Failed to compile.

./components/Test.tsx
Module not found: Can't resolve 'classy-ui/styles.css' in '/Users/devchris/Documents/code/nodejs/project/packages/next/components'

> Build error occurred
Error: > Build failed because of webpack errors
    at build (/Users/devchris/Documents/code/nodejs/project/node_modules/next/dist/build/index.js:10:900)
error Command failed with exit code 1.

Webkit autofill pseudo selector

I'm trying to style an input field and its default colors when browsers or extensions autofill some values.

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete

How would I do this in classy-ui? Is there a way to extend the pseudo decorators to apply styles based on autofill (or other selectors)?

Documentation doesn't cover how to hookup a Config

The contents of a custom Config file is covered, but not how you hook up in an app.

Unable to customize tokens in a CRA JS app

Hi, thanks for building this amazing library! In a Create React App JS application I tried but failed to follow the documentation to customize the tokens here: https://classy-ui.io/customizing-tokens

I created a classy-ui.config.js file at the root folder like in the docs.
In my react component I use the normal import (or should I import my own tokens but how?):
import { compose, tokens } from 'classy-ui/macro';

When I run npm start it errors that my tokens don't exist, however the default tokens from classy-ui are still there.. Is it a bug or should the documentation be updated to add some more instructions?

letter-spacing doesn't work

Right now the letter spacing property produces the wrong css and doesn't work. Apparently it's due to small a typo, this should fix it: #35

Can classy-ui be used in Meteor environment where .babelrc is the only configuration available?

v3.0.1 of classy-ui for Webpack requires loader configuration as per https://classy-ui.io/install/webpack

Unfortunately Meteor (current v1.9) uses Webpack, but no configuration options for Webpack are available to developers (easily).

I wonder, if there is a way to use v3.0.1 now without the webpack loader configuration? I have a .babelrc file where I have the following set up (and this worked well for @Alpha v2.02):

{
  "env": {
    "dev": {
      "plugins": [
        "classy-ui/plugin",
        ["@babel/plugin-proposal-class-properties", { "loose": true }],
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-optional-chaining",
        [
          "babel-plugin-root-import",
          {
            "rootPathPrefix": "~",
            "rootPathSuffix": "."
          }
        ]
      ],
      "presets": [
        "meteor",
        "@babel/preset-env",
        "@babel/preset-react",
        "@emotion/babel-preset-css-prop"
      ]
    },
    "test": {}
  }
}

I have installed via meteor npm install classy-ui@beta (the meteor prefix is how npm packages are loaded in meteor). I did not install any of the other npm packages in the current v3.0.1 docs because they were all used in the Webpack loader.

I'd like to use classy-ui, but I do have the restriction that all my work is with meteor and react. Maybe that's not in the scope intended for classy-ui. If that's the case, then just let me know.

The last token in a composition should have the highest priority

In a composition like the following

<p className={compose(
  tokens.color.BLUE_10,
  true && tokens.color.RED_90
)}>
  I believe this text should be red
</p>

I'd expect the red color to be applied instead of the blue one. I'm using version 11.0.7.

A reproduction can be found here but you may need to download it and try it locally as classy-ui doesn't work in a Codesandbox at the moment (tracked in #41).

Can we apply styles like classnames

I stumbled upon a use case where I have to override a default library style applied inline to a component.

In this case the following doesn't work as inline styles applied by library have a higher precedence:

import Component from 'library';
import { c } from 'classy-ui';

...

<Component className={c('my-class')} />

...

Is it possible to have something like this where one can apply styles directly on a component instead of classnames:

import Component from 'library';
import { s } from 'classy-ui';

...

<Component style={s('my-class')} />

...

Support Tailwind v1.2.0 release

So last night Adam released v1.2.0 & would love to have it supported :)

Thank you for this awesome library, it’s great not having to visit documentation again & again lol 😂

Site broken after the build

I'm playing with Classy-UI and I can already see the benefit when working with React. However when I build the app, it seems that some classes are ignored. (It works perfectly fine in development).

here is the link of the repo

Possiblity to add global styles

I miss the global styles from Tailwind. It'd be great to have something simple like that:

import React from 'react'
import { base } from 'classy-ui'

export const Layout = ({ children }) => (
    <div className={base()}>{children}</div>
)

Also, I'm not sure I've read that on the docs, but how would you handle custom styling when you want to escape from the design system?

Inherit value support for each property

Since inherit can be used as a value for any property, I'm wondering if classy-ui should support it by default or of this should be done in our custom classy-ui config?

The same question could be asked for initial and other values that can be used on most, if not all the CSS properties.

Lerna support

Hey, thank you so much for this library. I finally decided to use it and am currently setting it up! 😍

I have a project directory like this.

root
├── packages
│   ├── Client
│   ├── DesignSystem

Ideally, I'd like to put the classy-ui.config.js file into the root folder and share it between the Client and the design system. They both will be using classy-ui.

As far as I'm aware, this won't work at the moment but could be supported by either adding three classy-ui config files, extending the two configs of the Client and DesignSystem with the root one, or simply by adding a relative classy-ui config path for the package.json.

What do you think?

Adding hooks for new categories

In my specific situation I need to add gridRows for doing application style css grid layouts. It either not supported or not clear how you go about overriding or upserting new categories and how that could/should generated tokens.

Proposal: Global Styles API

Hi! I would like to open the discussion around global styles. I think it's a very useful feature to be able to add global styles, similarly to styled-components createGlobalStyle. One use-case would be the ability to style tags that are outside the component tree, like the body tag, with values from the theme. I don't think this is possible with the current API.

perhaps the API could look something like this:

composeGlobal('body', tokens.backgroundColor.GRAY_10, ... );

or alternatively:

addGlobal('body', compose(tokens.backgroundColor.GRAY_10, ... ));

What do you guys think?

Codesandbox broken on the site

It gives the following error:

Could not find/install babel plugin ‘classy-ui/plugin’: Could not find path: ‘/node_modules/caniuse-lite/data/features/beacon’.

Here’s the direct link: https://codesandbox.io/s/classy-ui-demo-nbxs6?from-embed=&file=/index.html

Dynamic composition with typed destructured arguments

Example:

const Button = ({ disabled }: { disabled?: boolean }) => (
  <button
    disabled={disabled}
    className={compose(disabled && tokens.color.GRAY_400)}
  ></button>
);

const Buttons = () => (
  <div>
    <Button></Button>
    <Button disabled></Button>
    <Button disabled={true}></Button>
    <Button disabled={false}></Button>
  <div/>
);

Because of the && condition, falsy values are returned immediately instead of a token, leading to the following type error:

Type 'undefined/false' is not assignable to type 'IDecorators | "GROUP" | Themes | "CLASSNAME"'

NextJS/Now Build Clarification

https://classy-ui.io/install/next-js

I think this applies to other environments as well, but is the idea to check the generated classy-ui.css file in to version control? I can get it to build fine locally and when I deploy with now manually the file is present so it works, but the file isn't built in time for the pre-rendering of some pages in NextJS and it fails.

src/pages/_document.js

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {process.env.NODE_ENV === "production" ? (
            <link rel="stylesheet" href="/classy-ui.css" />
          ) : null}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

src/pages/index.js

import React from "react";
import { compose, tokens } from "classy-ui";

const title = compose(tokens.color.RED_200, tokens.fontSize.EXTRA_LARGE);

const Home = ({ posts }) => {
  return (
    <div>
      <h1 className={title}>My Title</h1>
    </div>
  );
};

// Opts in to nextjs static pre-rendering at build time
export const getStaticProps = async () => {
  return {};
};

export default Home;

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [["classy-ui/plugin", { "output": "public" }]]
}

Next.js normalize.css error

I get this error after upgrading to beta.

./node_modules/classy-ui/normalize.css
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global
Location: pages\classy.tsx

Is there a way to configure the plugin not to import normalize.css automatically?