Merge pull request #443 from nextui-org/refactor/theme-palette

Refactor/theme palette
nextui-org · May 1, 2022 · 9dc5d41 · 9dc5d41
2 parents 15c0061 + d4f3f81
commit 9dc5d41
Show file tree

Hide file tree

Showing 59 changed files with 741 additions and 399 deletions.
diff --git a/apps/docs/content/components/table/custom-cells.ts b/apps/docs/content/components/table/custom-cells.ts
@@ -18,15 +18,15 @@ export const StyledBadge = styled('span', {
     type: {
       active: {
         bg: '$successLight',
-        color: '$success'
+        color: '$successLightContrast'
       },
       paused: {
         bg: '$errorLight',
-        color: '$error'
+        color: '$errorLightContrast'
       },
       vacation: {
         bg: '$warningLight',
-        color: '$warning'
+        color: '$warningLightContrast'
       }
     }
   },
@@ -431,7 +431,7 @@ export default function App() {
               </Text>
             </Row>
             <Row>
-              <Text b size={13} css={{ tt: "capitalize", color: "$accents3" }}>
+              <Text b size={13} css={{ tt: "capitalize", color: "$accents7" }}>
                 {user.team}
               </Text>
             </Row>
@@ -602,7 +602,7 @@ export default function App() {
               </Text>
             </Row>
             <Row>
-              <Text b size={13} css={{ tt: "capitalize", color: "$accents3" }}>
+              <Text b size={13} css={{ tt: "capitalize", color: "$accents7" }}>
                 {user?.team}
               </Text>
             </Row>

diff --git a/apps/docs/content/components/text/gradient.ts b/apps/docs/content/components/text/gradient.ts
@@ -7,7 +7,7 @@ export default function App() {
         h1
         size={60}
         css={{
-          textGradient: "45deg, $blue500 -20%, $pink500 50%",
+          textGradient: "45deg, $blue600 -20%, $pink600 50%",
         }}
         weight="bold"
       >
@@ -17,7 +17,7 @@ export default function App() {
         h1
         size={60}
         css={{
-          textGradient: "45deg, $purple500 -20%, $pink500 100%",
+          textGradient: "45deg, $purple600 -20%, $pink600 100%",
         }}
         weight="bold"
       >
@@ -27,7 +27,7 @@ export default function App() {
         h1
         size={60}
         css={{
-          textGradient: "45deg, $yellow500 -20%, $red500 100%",
+          textGradient: "45deg, $yellow600 -20%, $red600 100%",
         }}
         weight="bold"
       >

diff --git a/apps/docs/content/components/tooltip/customContent.ts b/apps/docs/content/components/tooltip/customContent.ts
@@ -1,4 +1,3 @@
-
 const DeleteUser = `import React from "react";
 import { useTheme, Text, Button, Grid, Row } from "@nextui-org/react";
 
@@ -32,8 +31,8 @@ export const DeleteUser = () => {
   );
 };`;
 
-const UserTwitterCard = `import React from "react";
-import {Avatar,Row,Col,Text,Button,Spacer,Grid} from "@nextui-org/react";
+const UserTwitterCard = `import React from "react"; 
+import { Avatar, Row, Col, Text, Button, Spacer, Grid } from "@nextui-org/react";
 
 export const UserTwitterCard = ({
   avatarUrl,
@@ -51,7 +50,7 @@ export const UserTwitterCard = ({
         mw: "250px",
         borderRadius: "$lg",
         padding: "$sm",
-        ...css
+        ...css,
       }}
       onClick={onClick}
       {...props}
@@ -91,7 +90,7 @@ export const UserTwitterCard = ({
                 fs: "$tiny",
                 fontWeight: "$semibold",
                 borderColor: following ? "$foreground" : "$primary",
-                color: following ? "$foreground" : "$white"
+                color: following ? "$foreground" : "$white",
               }}
               color="primary"
               bordered={following}
@@ -125,10 +124,11 @@ export const UserTwitterCard = ({
             color="foreground"
             className="user-twitter-card__text"
             size={14}
+            css={{ mr: "$1" }}
           >
             4
           </Text>
-          &nbsp;Following
+          Following
         </Text>
         <Spacer inline x={0.5} />
         <Text className="user-twitter-card__text" size={14} color="#888888">
@@ -137,18 +137,17 @@ export const UserTwitterCard = ({
             color="foreground"
             className="user-twitter-card__text"
             size={14}
+            css={{ mr: "$1" }}
           >
             97.1K
           </Text>
-          &nbsp;Followers
+          Followers
         </Text>
       </Grid.Container>
     </Grid.Container>
   );
 };`;
 
-
-
 const AppJs = `import { Tooltip, Button, Grid, Avatar } from "@nextui-org/react";
 import { UserTwitterCard } from "./UserTwitterCard";
 import { DeleteUser } from "./DeleteUser";
@@ -185,7 +184,6 @@ const react = {
   '/App.js': AppJs
 };
 
-
 export default {
-  ...react,
+  ...react
 };
diff --git a/apps/docs/content/docs/components/button.mdx b/apps/docs/content/docs/components/button.mdx
@@ -74,15 +74,15 @@ import { Button } from '@nextui-org/react';
   title="Flat"
   desc="You can change the full style to a flat button with the `flat` property.
                                         
-**_Note: `gradient` variant is not supported with the `flat` mode._**"
+_Note: `gradient` variant is not supported with the `flat` mode._"
   files={buttonContent.flat}
 />
 
 <Playground
   title="Light"
   desc="You can change the full style to a light button with the `light` property. 
   
-  ***_Note: `gradient` variant is not supported with the `light` mode._***"
+  _Note: `gradient` variant is not supported with the `light` mode._"
   files={buttonContent.light}
 />
 

diff --git a/apps/docs/content/docs/theme/customize-theme.mdx b/apps/docs/content/docs/theme/customize-theme.mdx
@@ -26,13 +26,20 @@ import { createTheme, NextUIProvider, Text } from "@nextui-org/react"
 
 // 2. Call `createTheme` and pass your custom values
 const theme = createTheme({
-  type: "dark",
+  type: "dark", // it could be "light" or "dark"
   theme: {
     colors: {
       // brand colors
       primaryLight: '$green200',
+      primaryLightHover: '$green300',
+      primaryLightActive: '$green400',
+      primaryLightContrast: '$green600',
       primary: '#4ADE7B',
-      primaryDark: '$green600',
+      primaryBorder: '$green500',
+      primaryBorderHover: '$green600',
+      primarySolidHover: '$green700',
+      primarySolidContrast: '$white',
+      primaryShadow: '$green500',
 
       gradient: 'linear-gradient(112deg, $blue100 -25%, $pink500 -10%, $purple500 80%)',
       link: '#5E1DAD',

diff --git a/apps/docs/content/docs/theme/default-theme.mdx b/apps/docs/content/docs/theme/default-theme.mdx
@@ -58,39 +58,25 @@ export default {
     // generic colors
     white: '#ffffff',
     black: '#000000',
-    //semantic colors
-    blue100: '#CBECFE',
+    //semantic colors (light)
+    blue50: '#EDF5FF',
     // ...
-    blue900: '#002074',
+    blue900: '#00254D',
     // ...
 
     // brand colors
-    primaryLight: '$blue200', //  $blue600 on dark mode
-    primary: '$blue500',
-    primaryDark: '$blue600',
-    primaryShadow: '$blue100', // $blue600 on dark mode
-
-    secondaryLight: '$purple200', // $purple600 on dark mode
-    secondary: '$purple500',
-    secondaryDark: '$purple600',
-    secondaryShadow: '$purple100', // $purple600 on dark mode
-
-    successLight: '$green200', // $green600 on dark mode
-    success: '$green500',
-    successDark: '$green600',
-    successShadow: '$green100', // $green600 on dark mode
-
-    warningLight: '$yellow200', // $yellow600 on dark mode
-    warning: '$yellow500',
-    warningDark: '$yellow600',
-    warningShadow: '$yellow100', // $yellow600 on dark mode
-
-    errorLight: '$red200', // $red600 on dark mode
-    error: '$red500',
-    errorDark: '$red600',
-    errorShadow: '$red100' // $red600 on dark mode
-
-    // ... rest of colors
+    primaryLight: '$blue200',
+    primaryLightHover: '$blue300', // commonly used on hover state
+    primaryLightActive: '$blue400', // commonly used on pressed state
+    primaryLightContrast: '$blue600', // commonly used for text inside the component
+    primary: '$blue600',
+    primaryBorder: '$blue500',
+    primaryBorderHover: '$blue600',
+    primarySolidHover: '$blue700',
+    primarySolidContrast: '$white', // commonly used for text inside the component
+    primaryShadow: '$blue500'
+
+    // ... rest of colors (secondary, success, warning, error, etc)
   }
 };
 ```
@@ -99,7 +85,6 @@ export default {
 
 <Playground
   title="Brand"
-  desc="The default theme has a brand color palette, each brand color has its light, dark and shadow variants like `primaryLight`, `primaryDark` and `primaryShadow`."
   showEditor={false}
   code={`
     <Palette colors={[
@@ -113,6 +98,29 @@ export default {
  `}
 />
 
+#### Understanding the Base scale
+
+There are 10 steps in each scale from 50 to 900. Each step was designed for at least one specific use case.
+
+This table is a simple overview of the most common use case for each step. However, there are many exceptions and caveats to factor in, which are covered in further detail below.
+
+| Step    | Use Case                                |
+| ------- | --------------------------------------- |
+| **50**  | UI element background                   |
+| **100** | Hovered UI element background           |
+| **200** | Active / Selected UI element background |
+| **300** | Subtle borders and separators           |
+| **400** | UI element border and focus rings       |
+| **500** | Hovered UI element border               |
+| **600** | Solid backgrounds                       |
+| **700** | Hovered solid backgrounds               |
+| **800** | Low-contrast text                       |
+| **900** | High-contrast text                      |
+
+> **Note**: NextUI uses different colors for each theme type (light, dark). You can check it out by toggling the docs theme on the navbar.
+
+<Spacer y={2} />
+
 <Playground
   title="Base"
   desc="We recommend adding a palette that ranges from 100 to 900. You can use tools like [Eva Design System](https://colors.eva.design/) or [RadixUI Colors](https://www.radix-ui.com/colors) to generate a palette."
@@ -121,6 +129,7 @@ export default {
     <Palette 
       colors={[
         [
+          "blue50",
           "blue100",
           "blue200",
           "blue300",
@@ -132,6 +141,7 @@ export default {
           "blue900",
         ],
         [
+          "purple50",
           "purple100",
           "purple200",
           "purple300",
@@ -143,6 +153,7 @@ export default {
           "purple900",
         ],
         [
+          "green50",
           "green100",
           "green200",
           "green300",
@@ -154,6 +165,7 @@ export default {
           "green900",
         ],
         [
+          "yellow50",
           "yellow100",
           "yellow200",
           "yellow300",
@@ -165,6 +177,7 @@ export default {
           "yellow900",
         ],
         [
+          "red50",
           "red100",
           "red200",
           "red300",
@@ -176,6 +189,7 @@ export default {
           "red900",
         ],
         [
+          "cyan50",
           "cyan100",
           "cyan200",
           "cyan300",
@@ -187,6 +201,7 @@ export default {
           "cyan900",
         ],
         [
+          "pink50",
           "pink100",
           "pink200",
           "pink300",
@@ -198,6 +213,7 @@ export default {
           "pink900",
         ],
         [
+          "gray50",
           "gray100",
           "gray200",
           "gray300",
@@ -218,6 +234,7 @@ export default {
   showEditor={false}
   code={`
     <Palette inverted colors={[
+        "accents0", 
         "accents1", 
         "accents2", 
         "accents3",
@@ -605,5 +622,3 @@ export const darkTheme = {
   ...
 };
 ```
-
-<Spacer y={2} />
diff --git a/apps/docs/content/landing/index.tsx b/apps/docs/content/landing/index.tsx
@@ -334,7 +334,7 @@ const CustomButton = () => {
         boxShadow: '$md',
         position: 'relative',
         overflow: 'visible',
-        color: '$green800',
+        color: '#0F9549',
         px: '$18',
         '&:after': {
           content: '""',

diff --git a/apps/docs/src/components/anchor/index.tsx b/apps/docs/src/components/anchor/index.tsx
@@ -63,7 +63,7 @@ const VirtualAnchor: React.FC<React.PropsWithChildren<Props>> = ({
           font-size: inherit;
           width: 1em;
           height: 1em;
-          color: ${theme?.colors?.accents5?.value};
+          color: ${theme?.colors?.accents7?.value};
           transition: all 0.25s ease;
         }
         .parent:hover > .icon {

diff --git a/apps/docs/src/components/badge/badge.styles.ts b/apps/docs/src/components/badge/badge.styles.ts
@@ -38,11 +38,8 @@ export const StyledBadge = styled('span', {
       },
       disabled: {
         fontSize: '9px',
-        color: '$accents6',
-        bg: 'rgba(255, 255, 255, 0.1)',
-        [`.${lightTheme} &`]: {
-          bg: '$accents1'
-        }
+        color: '$accents8',
+        bg: '$accents0'
       }
     }
   },