feat: update to 12-tint color palette

apps/demo/app/custom-ui/[...puckPath]/client.tsx

@@ -124,10 +124,10 @@ const Tabs = ({
                 fontSize: 16,
                 padding: "16px 16px",
                 paddingTop: 19,
-                color: isCurrentTab ? "var(--puck-color-azure-3)" : "black",
+                color: isCurrentTab ? "var(--puck-color-azure-04)" : "black",
                 border: "none",
                 borderBottom: isCurrentTab
-                  ? "3px solid var(--puck-color-azure-3)"
+                  ? "3px solid var(--puck-color-azure-04)"
                   : "3px solid transparent",
                 background: "white",
                 cursor: "pointer",
@@ -304,7 +304,7 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
                     display: "flex",
                     pointerEvents: "all",
                     padding: "16px",
-                    background: "var(--puck-color-grey-11)",
+                    background: "var(--puck-color-grey-12)",
                   }}
                 >
                   {Object.keys(config.components).map(

apps/demo/config/blocks/Card/styles.module.css

@@ -23,8 +23,8 @@
 
 .Card-icon {
   border-radius: 256px;
-  background: var(--puck-color-azure-8);
-  color: var(--puck-color-azure-5);
+  background: var(--puck-color-azure-09);
+  color: var(--puck-color-azure-06);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -44,7 +44,7 @@
 .Card-description {
   font-size: 16px;
   line-height: 1.5;
-  color: var(--puck-color-grey-4);
+  color: var(--puck-color-grey-05);
   text-align: center;
   font-weight: 300;
 }

apps/demo/config/blocks/FeatureList/styles.module.css

@@ -42,8 +42,8 @@
 
 .FeatureList-icon {
   border-radius: 256px;
-  background: var(--puck-color-azure-8);
-  color: var(--puck-color-azure-5);
+  background: var(--puck-color-azure-09);
+  color: var(--puck-color-azure-06);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -63,7 +63,7 @@
 .FeatureList-description {
   font-size: 16px;
   line-height: 1.5;
-  color: var(--puck-color-grey-4);
+  color: var(--puck-color-grey-05);
   text-align: center;
   font-weight: 300;
 }

apps/demo/config/blocks/Hero/styles.module.css

@@ -36,7 +36,7 @@
 }
 
 .Hero-subtitle {
-  color: var(--puck-color-grey-4);
+  color: var(--puck-color-grey-05);
   font-size: var(--puck-font-size-m);
   line-height: 1.5;
   margin: 0;
@@ -45,7 +45,7 @@
 }
 
 .Hero--hasImageBackground .Hero-subtitle {
-  color: var(--puck-color-grey-2);
+  color: var(--puck-color-grey-03);
 }
 
 .Hero-image {

apps/demo/config/blocks/Logos/styles.module.css

@@ -1,5 +1,5 @@
 .Logos {
-  background-color: var(--puck-color-grey-1);
+  background-color: var(--puck-color-grey-02);
 }
 
 .Logos-items {

apps/demo/config/blocks/Stats/styles.module.css

@@ -1,8 +1,8 @@
 .Stats-items {
   background-image: linear-gradient(
     120deg,
-    var(--puck-color-azure-2) 0%,
-    var(--puck-color-azure-4) 100%
+    var(--puck-color-azure-03) 0%,
+    var(--puck-color-azure-05) 100%
   );
   border-radius: 24px;
   display: grid;
@@ -40,8 +40,8 @@
 
 .Stats-icon {
   border-radius: 256px;
-  background: var(--puck-color-azure-8);
-  color: var(--puck-color-azure-5);
+  background: var(--puck-color-azure-09);
+  color: var(--puck-color-azure-06);
   display: flex;
   justify-content: center;
   align-items: center;

apps/demo/config/blocks/Text/index.tsx

@@ -52,7 +52,8 @@ export const Text: ComponentConfig<TextProps> = {
       <Section padding={padding} maxWidth={maxWidth}>
         <span
           style={{
-            color: color === "default" ? "inherit" : "var(--puck-color-grey-4)",
+            color:
+              color === "default" ? "inherit" : "var(--puck-color-grey-05)",
             display: "flex",
             textAlign: align,
             width: "100%",

apps/demo/config/components/Footer/index.tsx

@@ -9,7 +9,7 @@ const FooterLink = ({ children, href }: { children: string; href: string }) => {
         style={{
           textDecoration: "none",
           fontSize: "14px",
-          color: "var(--puck-color-grey-4)",
+          color: "var(--puck-color-grey-05)",
         }}
       >
         {children}
@@ -33,7 +33,7 @@ const FooterList = ({
           padding: 0,
           fontSize: "inherit",
           fontWeight: "600",
-          color: "var(--puck-color-grey-2)",
+          color: "var(--puck-color-grey-03)",
         }}
       >
         {title}
@@ -54,7 +54,7 @@ const FooterList = ({
 
 const Footer = ({ children }: { children: ReactNode }) => {
   return (
-    <footer style={{ background: "var(--puck-color-grey-11)" }}>
+    <footer style={{ background: "var(--puck-color-grey-12)" }}>
       <h2 style={{ visibility: "hidden", height: 0 }}>Footer</h2>
       <Section padding="32px">
         <div
@@ -73,8 +73,8 @@ const Footer = ({ children }: { children: ReactNode }) => {
         style={{
           padding: 64,
           textAlign: "center",
-          color: "var(--puck-color-grey-2)",
-          background: "var(--puck-color-grey-10)",
+          color: "var(--puck-color-grey-03)",
+          background: "var(--puck-color-grey-11)",
         }}
       >
         Made by{" "}

apps/demo/config/components/Header/index.tsx

@@ -15,8 +15,8 @@ const NavItem = ({ label, href }: { label: string; href: string }) => {
       style={{
         textDecoration: "none",
         color: isActive
-          ? "var(--puck-color-grey-1)"
-          : "var(--puck-color-grey-5)",
+          ? "var(--puck-color-grey-02)"
+          : "var(--puck-color-grey-06)",
         fontWeight: isActive ? "600" : "400",
       }}
     >

apps/docs/components/Preview/styles.module.css

@@ -1,21 +1,21 @@
 .PreviewFrame {
   background: white;
-  border: 1px solid var(--puck-color-grey-8);
+  border: 1px solid var(--puck-color-grey-09);
   color: black;
   border-radius: 16px;
   margin-top: 32px;
   overflow: hidden;
 }
 
 .PreviewFrame-header {
-  background: var(--puck-color-azure-9);
+  background: var(--puck-color-azure-11);
   gap: 8px;
-  color: var(--puck-color-azure-4);
+  color: var(--puck-color-azure-05);
   font-weight: 0;
   padding: 12px 16px;
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
-  border-bottom: 1px solid var(--puck-color-grey-8);
+  border-bottom: 1px solid var(--puck-color-grey-09);
   align-items: center;
 }
 
@@ -36,7 +36,7 @@
 .ConfigPreview {
   display: flex;
   flex-wrap: wrap;
-  background: var(--puck-color-grey-8);
+  background: var(--puck-color-grey-09);
   gap: 1px;
 }
 
@@ -49,7 +49,7 @@
 }
 
 .ConfigPreview-preview {
-  color: var(--puck-color-grey-2);
+  color: var(--puck-color-grey-03);
   flex-grow: 1;
   flex-basis: 49%;
   min-width: 256px;
@@ -59,6 +59,6 @@
 
 .ConfigPreview-preview > * {
   color: var(
-    --puck-color-grey-2
+    --puck-color-grey-03
   ) !important; /* Override any injected Nextra/Tailwind styles */
 }

apps/docs/components/ReleaseSwitcher/styles.module.css

@@ -5,7 +5,7 @@
   background-size: 12px;
   background-position: calc(100% - 12px) calc(50% + 3px);
   background-repeat: no-repeat;
-  background-color: var(--puck-color-grey-10);
+  background-color: var(--puck-color-grey-11);
   border-radius: 100px;
   color: black;
   padding-left: 16px;
@@ -16,5 +16,5 @@
 
 .ReleaseSwitcher--light {
   background-color: white;
-  border: 1px solid var(--puck-color-grey-9);
+  border: 1px solid var(--puck-color-grey-10);
 }

apps/docs/styles.css

@@ -3,18 +3,18 @@
 article p a,
 article li a,
 article td a {
-  color: var(--puck-color-azure-4) !important;
+  color: var(--puck-color-azure-05) !important;
 }
 
 article p a:hover,
 article li a:hover,
 article td a:hover {
-  color: var(--puck-color-azure-2) !important;
+  color: var(--puck-color-azure-03) !important;
 }
 
 html.dark p a:hover,
 html.dark li a:hover {
-  color: var(--puck-color-azure-6) !important;
+  color: var(--puck-color-azure-07) !important;
 }
 
 li > a {

packages/core/components/Button/Button.module.css

@@ -56,7 +56,7 @@
 }
 
 .Button--secondary:hover {
-  background-color: var(--puck-color-grey-10);
+  background-color: var(--puck-color-grey-11);
   color: black;
   opacity: 0.7;
 }
@@ -66,7 +66,7 @@
 }
 
 .Button--disabled {
-  background: var(--puck-color-grey-10);
+  background: var(--puck-color-grey-11);
   color: black;
   cursor: not-allowed;
 }

packages/core/components/ComponentList/styles.module.css

@@ -15,7 +15,7 @@
 }
 
 .ComponentList-title {
-  color: var(--puck-color-grey-4);
+  color: var(--puck-color-grey-05);
   display: flex;
   font-size: var(--puck-font-size-xxxs);
   list-style: none;
@@ -30,8 +30,8 @@
 }
 
 .ComponentList-title:hover {
-  background-color: var(--puck-color-azure-9);
-  color: var(--puck-color-azure-4);
+  background-color: var(--puck-color-azure-11);
+  color: var(--puck-color-azure-05);
   cursor: pointer;
 }
 

packages/core/components/DragIcon/styles.module.css

@@ -1,10 +1,10 @@
 .DragIcon {
-  color: var(--puck-color-grey-4);
+  color: var(--puck-color-grey-05);
   padding: 4px;
   border-radius: 4px;
 }
 
 .DragIcon:hover {
   cursor: grab;
-  background: var(--puck-color-grey-9);
+  background: var(--puck-color-grey-10);
 }

packages/core/components/DraggableComponent/styles.module.css

@@ -5,7 +5,7 @@
 
 .DraggableComponent--isDragging {
   background: #abc7e510;
-  outline: 2px var(--puck-color-azure-8) solid !important;
+  outline: 2px var(--puck-color-azure-09) solid !important;
   overflow: hidden;
 }
 
@@ -37,7 +37,7 @@
 
 .DraggableComponent-loadingOverlay {
   background: var(--puck-color-white);
-  color: var(--puck-color-grey-2);
+  color: var(--puck-color-grey-03);
   border-radius: 4px;
   display: flex;
   padding: 8px;
@@ -64,7 +64,7 @@
 
 .DraggableComponent:not(.DraggableComponent--isSelected)
   > .DraggableComponent-overlay {
-  outline: 2px var(--puck-color-azure-8) solid !important;
+  outline: 2px var(--puck-color-azure-09) solid !important;
 }
 
 .DraggableComponent--indicativeHover > .DraggableComponent-overlay {
@@ -82,7 +82,7 @@
 }
 
 .DraggableComponent--isSelected {
-  outline: 2px var(--puck-color-azure-6) solid !important;
+  outline: 2px var(--puck-color-azure-07) solid !important;
 }
 
 .DraggableComponent--isSelected > .DraggableComponent-overlay {
@@ -102,7 +102,7 @@
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   border-radius: 8px;
-  background: var(--puck-color-grey-0);
+  background: var(--puck-color-grey-01);
   color: white;
   display: none;
   font-family: var(--puck-font-family);
@@ -118,7 +118,7 @@
 }
 
 .DraggableComponent-actionsLabel {
-  color: var(--puck-color-grey-7);
+  color: var(--puck-color-grey-08);
   display: flex;
   font-size: var(--puck-font-size-xxxs);
   font-weight: 500;
@@ -127,22 +127,22 @@
   padding-left: 8px;
   padding-right: 16px;
   margin-right: 8px;
-  border-right: 1px solid var(--puck-color-grey-4);
+  border-right: 1px solid var(--puck-color-grey-05);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .DraggableComponent-action {
   background: transparent;
   border: none;
-  color: var(--puck-color-grey-7);
+  color: var(--puck-color-grey-08);
   padding: 6px 8px;
   border-radius: 4px;
   overflow: hidden;
 }
 
 .DraggableComponent-action:hover {
-  background: var(--puck-color-grey-2);
-  color: var(--puck-color-azure-5);
+  background: var(--puck-color-grey-03);
+  color: var(--puck-color-azure-06);
   cursor: pointer;
 }