From 01d3f4f988fa9f93c4b4634618a0d5fbdb53ad1d Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Thu, 24 Aug 2023 22:01:23 +0530 Subject: [PATCH 1/2] chore: custom shadow variables added --- apps/app/styles/globals.css | 39 +++++++++++++++++++++++++++++++++++++ apps/app/tailwind.config.js | 25 ++++++++++++++++++++---- 2 files changed, 60 insertions(+), 4 deletions(-) diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css index b8f662902ee..949b5794cd6 100644 --- a/apps/app/styles/globals.css +++ b/apps/app/styles/globals.css @@ -58,6 +58,25 @@ --color-border-300: 212, 212, 212; /* strong border- 1 */ --color-border-400: 185, 185, 185; /* strong border- 2 */ + --color-shadow-xxs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06), + 0px 1px 2px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.14); + --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12), + 0px 1px 8px -1px rgba(16, 24, 40, 0.1); + --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), + 0px 1px 12px 0px rgba(0, 0, 0, 0.12); + --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08), + 0px 1px 12px 0px rgba(16, 24, 40, 0.04); + --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), + 0px 1px 16px 0px rgba(16, 24, 40, 0.12); + --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12), + 0px 1px 24px 0px rgba(16, 24, 40, 0.12); + --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16), + 0px 0px 52px 0px rgba(16, 24, 40, 0.16); + --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12), + 0px 12px 24px 0px rgba(16, 24, 40, 0.12), 0px 1px 32px 0px rgba(16, 24, 40, 0.12); + --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12), + 0px 1px 48px 0px rgba(16, 24, 40, 0.12); + --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */ --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */ --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */ @@ -71,6 +90,16 @@ --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */ --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */ --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */ + + --color-sidebar-shadow-xxs: var(--color-shadow-xxs); + --color-sidebar-shadow-xs: var(--color-shadow-xs); + --color-sidebar-shadow-sm: var(--color-shadow-sm); + --color-sidebar-shadow-rg: var(--color-shadow-rg); + --color-sidebar-shadow-md: var(--color-shadow-md); + --color-sidebar-shadow-lg: var(--color-shadow-lg); + --color-sidebar-shadow-xl: var(--color-shadow-xl); + --color-sidebar-shadow-2xl: var(--color-shadow-2xl); + --color-sidebar-shadow-3xl: var(--color-shadow-3xl); } [data-theme="light"], @@ -113,6 +142,16 @@ --color-background-100: 7, 7, 7; /* primary bg */ --color-background-90: 11, 11, 11; /* secondary bg */ --color-background-80: 23, 23, 23; /* tertiary bg */ + + --color-shadow-xxs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5); + --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5); + --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5); + --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5); + --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5); + --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55); + --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55); + --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6); + --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65); } [data-theme="dark"] { diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js index 11e1946a5aa..c54082f0551 100644 --- a/apps/app/tailwind.config.js +++ b/apps/app/tailwind.config.js @@ -5,6 +5,26 @@ module.exports = { content: ["./pages/**/*.tsx", "./components/**/*.tsx", "./layouts/**/*.tsx", "./ui/**/*.tsx"], theme: { extend: { + boxShadow: { + "custom-shadow-xxs": "var(--color-shadow-xxs)", + "custom-shadow-xs": "var(--color-shadow-xs)", + "custom-shadow-sm": "var(--color-shadow-sm)", + "custom-shadow-rg": "var(--color-shadow-rg)", + "custom-shadow-md": "var(--color-shadow-md)", + "custom-shadow-lg": "var(--color-shadow-lg)", + "custom-shadow-xl": "var(--color-shadow-xl)", + "custom-shadow-2xl": "var(--color-shadow-2xl)", + "custom-shadow-3xl": "var(--color-shadow-3xl)", + "custom-sidebar-shadow-xxs": "var(--color-sidebar-shadow-xxs)", + "custom-sidebar-shadow-xs": "var(--color-sidebar-shadow-xs)", + "custom-sidebar-shadow-sm": "var(--color-sidebar-shadow-sm)", + "custom-sidebar-shadow-rg": "var(--color-sidebar-shadow-rg)", + "custom-sidebar-shadow-md": "var(--color-sidebar-shadow-md)", + "custom-sidebar-shadow-lg": "var(--color-sidebar-shadow-lg)", + "custom-sidebar-shadow-xl": "var(--color-sidebar-shadow-xl)", + "custom-sidebar-shadow-2xl": "var(--color-sidebar-shadow-2xl)", + "custom-sidebar-shadow-3xl": "var(--color-sidebar-shadow-3xl)", + }, colors: { custom: { primary: { @@ -182,8 +202,5 @@ module.exports = { custom: ["Inter", "sans-serif"], }, }, - plugins: [ - require("tailwindcss-animate"), - require("@tailwindcss/typography") - ], + plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")], }; From 2896837e0efd5faaa7a0f26a4da2390682ea3236 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Thu, 24 Aug 2023 22:34:34 +0530 Subject: [PATCH 2/2] fix: 2xs shade --- apps/app/styles/globals.css | 6 +++--- apps/app/tailwind.config.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css index 949b5794cd6..cdb67cbc5f7 100644 --- a/apps/app/styles/globals.css +++ b/apps/app/styles/globals.css @@ -58,7 +58,7 @@ --color-border-300: 212, 212, 212; /* strong border- 1 */ --color-border-400: 185, 185, 185; /* strong border- 2 */ - --color-shadow-xxs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06), + --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.14); --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12), 0px 1px 8px -1px rgba(16, 24, 40, 0.1); @@ -91,7 +91,7 @@ --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */ --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */ - --color-sidebar-shadow-xxs: var(--color-shadow-xxs); + --color-sidebar-shadow-2xs: var(--color-shadow-2xs); --color-sidebar-shadow-xs: var(--color-shadow-xs); --color-sidebar-shadow-sm: var(--color-shadow-sm); --color-sidebar-shadow-rg: var(--color-shadow-rg); @@ -143,7 +143,7 @@ --color-background-90: 11, 11, 11; /* secondary bg */ --color-background-80: 23, 23, 23; /* tertiary bg */ - --color-shadow-xxs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5); + --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5); --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5); --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5); --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5); diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js index c54082f0551..0b7b5861aeb 100644 --- a/apps/app/tailwind.config.js +++ b/apps/app/tailwind.config.js @@ -6,7 +6,7 @@ module.exports = { theme: { extend: { boxShadow: { - "custom-shadow-xxs": "var(--color-shadow-xxs)", + "custom-shadow-2xs": "var(--color-shadow-2xs)", "custom-shadow-xs": "var(--color-shadow-xs)", "custom-shadow-sm": "var(--color-shadow-sm)", "custom-shadow-rg": "var(--color-shadow-rg)", @@ -15,7 +15,7 @@ module.exports = { "custom-shadow-xl": "var(--color-shadow-xl)", "custom-shadow-2xl": "var(--color-shadow-2xl)", "custom-shadow-3xl": "var(--color-shadow-3xl)", - "custom-sidebar-shadow-xxs": "var(--color-sidebar-shadow-xxs)", + "custom-sidebar-shadow-2xs": "var(--color-sidebar-shadow-2xs)", "custom-sidebar-shadow-xs": "var(--color-sidebar-shadow-xs)", "custom-sidebar-shadow-sm": "var(--color-sidebar-shadow-sm)", "custom-sidebar-shadow-rg": "var(--color-sidebar-shadow-rg)",