refactor: update color palette

mickasmt · Mar 13, 2024 · a1efecc · a1efecc
1 parent 60388ec
commit a1efecc
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 42 deletions.
diff --git a/src/components/example-grid.astro b/src/components/example-grid.astro
@@ -10,7 +10,7 @@ const { title, items } = Astro.props;
 ---
 
 <div id="" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
-  <h3 class="text-gray-900 font-semibold col-span-3 xl:col-span-1">{title}</h3>
+  <h3 class="text-foreground font-semibold col-span-3 xl:col-span-1">{title}</h3>
   <div
     class="col-span-3 grid sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-y-8 lg:gap-x-8"
   >
@@ -19,10 +19,10 @@ const { title, items } = Astro.props;
         items.map((item) => (
           <a
             href={item.disabled ? "#" : item.href}
-            class="group relative bg-background rounded-lg shadow-sm overflow-hidden ring-1 ring-black ring-opacity-5"
+            class="group relative bg-background rounded-xl overflow-hidden border"
           >
             <div class="relative bg-gray-100 pt-[50%] overflow-hidden">
-              <div class="absolute inset-0 w-full h-full rounded-t-lg overflow-hidden">
+              <div class="absolute inset-0 w-full h-full rounded-t-xl overflow-hidden">
                 <img
                   src="/images/examples/blog.svg"
                   alt=""

diff --git a/src/components/main-navigation-menu.tsx b/src/components/main-navigation-menu.tsx
@@ -33,8 +33,10 @@ export function MainNavigationMenu() {
                   <Icons.logo className="size-8" />
                   <div className="mb-2 mt-3 text-lg font-medium">Astronomy</div>
                   <p className="text-sm leading-tight text-muted-foreground">
-                    Modern application with differents sections examples built
-                    using shadcn/ui.
+                    Pages and examples apps built with Astro v4.5,
+                    shadcn/ui & react js.
+                    <br />
+                    Open Source.
                   </p>
                 </a>
               </li>
@@ -59,7 +61,11 @@ export function MainNavigationMenu() {
 
         <NavigationMenuItem>
           {navMenuConfig.links.map((link) => (
-            <a key={link.href} href={link.href} className={navigationMenuTriggerStyle()}>
+            <a
+              key={link.href}
+              href={link.href}
+              className={navigationMenuTriggerStyle()}
+            >
               {link.title}
             </a>
           ))}
@@ -75,7 +81,7 @@ const ListItem: React.FC<MenuItem> = ({
   description,
   launched,
   disabled,
-  external
+  external,
 }) => {
   const target = external ? "_blank" : undefined;
 
@@ -94,7 +100,11 @@ const ListItem: React.FC<MenuItem> = ({
         <div className="text-sm font-medium leading-none">
           <span className="mr-2">{title}</span>
           {disabled ? (
-            <Badge variant="secondary" radius="sm" className="h-5 px-1.5 text-xs font-medium">
+            <Badge
+              variant="secondary"
+              radius="sm"
+              className="h-5 px-1.5 text-xs font-medium"
+            >
               SOON
             </Badge>
           ) : null}

diff --git a/src/pages/landing/index.astro b/src/pages/landing/index.astro
@@ -59,7 +59,7 @@ import { Icon } from "astro-icon/components";
 
   <section
     id="features"
-    class="container space-y-6 bg-slate-50 py-8 dark:bg-transparent md:py-12 lg:py-24"
+    class="container space-y-6 bg-background-200 py-8 md:py-12 lg:py-24"
   >
     <div
       class="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center"

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -7,28 +7,30 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
+    --background-200: 0 0% 98%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --foreground: 0 0% 9%;
+
+    --muted: 0 0% 92%;
+    --muted-foreground: 0 0% 40%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
+    --popover-foreground: 0 0% 9%;
 
-    --border: 214.3 31.8% 91.4%;
+    --border: 0 0% 92%;
     --input: 214.3 31.8% 91.4%;
 
     --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
+    --card-foreground: 0 0% 9%;
 
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 0 0% 9%;
     --primary-foreground: 210 40% 98%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 0 0% 92%;
+    --secondary-foreground: 0 0% 9%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 0, 0%, 0%, 0.08;
+    --accent-foreground: 0 0% 9%;
 
     --destructive: 0 100% 50%;
     --destructive-foreground: 210 40% 98%;
@@ -39,32 +41,34 @@
   }
 
   .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
+    --background: 0 0% 4%;
+    --background-200: 0 170% 0%;
+
+    --foreground: 0 0% 93%;
 
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
+    --muted: 0 0% 12%;
+    --muted-foreground: 0 0% 80%;
 
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
+    --accent: 0, 0%, 100%, .09;
+    --accent-foreground: 0 0% 93%;
 
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
+    --popover: 0 0% 4%;
+    --popover-foreground: 0 0% 93%;
 
-    --border: 216 34% 17%;
+    --border: 0 0% 12%;
     --input: 216 34% 17%;
 
     --card: 224 71% 4%;
     --card-foreground: 213 31% 91%;
 
-    --primary: 210 40% 98%;
+    --primary: 0 0% 93%;
     --primary-foreground: 222.2 47.4% 1.2%;
 
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary: 0 0% 12%;
+    --secondary-foreground: 0 0% 93%;
 
     --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive-foreground: 0 0% 93%;
 
     --ring: 216 34% 17%;
 
@@ -128,22 +132,22 @@
     @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-4;
   }
 
-  .callout > * {
+  .callout>* {
     @apply my-0 !important;
   }
-  
+
   .font-icon-callout {
     font-family: Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   }
 
   /* MdxComponent: For <code></code> with no parent <pre></pre> */
-  :not(pre) > code {
+  :not(pre)>code {
     @apply relative rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm bg-background text-foreground;
   }
 }
 
 .text-gradient_indigo-purple {
-  background: linear-gradient(90deg, #6366f1 0%, rgb(168 85 247 / 0.9) 100%);
+  background: linear-gradient(90deg, #6366f1 0%, rgba(168 85 247 / 0.9) 100%);
   /* background: linear-gradient(83.21deg,#3245ff 0%,#bc52ee 100%); */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -7,7 +7,7 @@ module.exports = {
   theme: {
     container: {
       center: true,
-      padding: "1rem",
+      padding: "1.25rem",
       screens: {
         "2xl": "1400px",
       },
@@ -18,16 +18,19 @@ module.exports = {
         heading: ["CalSans Semibold", ...fontFamily.sans],
       },
       height: {
-        "18": "4.5rem",
+        18: "4.5rem",
       },
       spacing: {
-        "18": "4.5rem",
+        18: "4.5rem",
       },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
+        background: {
+          DEFAULT: "hsl(var(--background))",
+          200: "hsl(var(--background-200))",
+        },
         foreground: "hsl(var(--foreground))",
         primary: {
           DEFAULT: "hsl(var(--primary))",
@@ -46,7 +49,7 @@ module.exports = {
           foreground: "hsl(var(--muted-foreground))",
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
+          DEFAULT: "hsla(var(--accent))",
           foreground: "hsl(var(--accent-foreground))",
         },
         popover: {