Design tokens at your fingertips
Documentation at https://classy-ui.io.
An automatically optimized design system
License: MIT License
Design tokens at your fingertips
Documentation at https://classy-ui.io.
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
The new direction on the classnames is great, but not having the px, mx, py, my... shortcuts definitely slow down the workflow.
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:
classy-ui@alpha
latest
tag to the latest 2.0 versionI 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
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.
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 :/
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.
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.
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.
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)?
The contents of a custom Config file is covered, but not how you hook up in an 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?
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
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.
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).
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')} />
...
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 π
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
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?
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.
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?
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.
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?
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
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"'
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" }]]
}
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.