fix: tab color

Jatin794 · Dec 19, 2024 · 7484dd7 · 7484dd7
1 parent ed245bd
commit 7484dd7
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 54 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -862,9 +862,8 @@ html.dark {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.hover\:tw-bg-gray-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+.hover\:tw-bg-bgColor-secondary:hover {
+  background-color: var(--bgColor-secondary);
 }
 
 .hover\:tw-shadow-md:hover {
@@ -877,35 +876,23 @@ html.dark {
   border-bottom-width: 4px;
 }
 
-.aria-selected\:tw-border-doit-blue-light[aria-selected="true"] {
-  --tw-border-opacity: 1;
-  border-color: rgb(45 150 189 / var(--tw-border-opacity));
+.aria-selected\:tw-border-fgColor-link[aria-selected="true"] {
+  border-color: var(--fgColor-link);
 }
 
 .aria-selected\:tw-font-bold[aria-selected="true"] {
   font-weight: 700;
 }
 
-.aria-selected\:tw-text-doit-blue-light[aria-selected="true"] {
-  --tw-text-opacity: 1;
-  color: rgb(45 150 189 / var(--tw-text-opacity));
+.aria-selected\:tw-text-fgColor-link[aria-selected="true"] {
+  color: var(--fgColor-link);
 }
 
 .dark\:tw-border-\[\#363636\]:is(.tw-dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(54 54 54 / var(--tw-border-opacity));
 }
 
-.dark\:hover\:tw-bg-doit-grey-950:hover:is(.tw-dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(32 37 43 / var(--tw-bg-opacity));
-}
-
-.dark\:aria-selected\:tw-text-doit-blue-400[aria-selected="true"]:is(.tw-dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(85 189 226 / var(--tw-text-opacity));
-}
-
 @media print {
   .print\:\!tw-m-0 {
     margin: 0px !important;

diff --git a/exampleSite/content/posts/tests/tab-tests/index.en.md b/exampleSite/content/posts/tests/tab-tests/index.en.md
@@ -216,3 +216,47 @@ Content 2
 
 {{< /tabs >}}
 
+## Tab codeblock
+
+{{< tabs >}}
+
+{{% tab title="HTML" %}}
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Hello World!</title>
+</head>
+<body>
+    <h1>Hello HTML!</h1>
+</body>
+</html>
+```
+
+{{% /tab %}}
+
+{{% tab title="CSS" %}}
+
+```css
+body {
+    background-color: lightblue;
+}
+h1 {
+    color: white;
+    text-align: center;
+}
+```
+
+{{% /tab %}}
+
+{{% tab title="JavaScript" %}}
+
+```javascript
+for (let i = 0; i < 5; i++) {
+    console.log(i);
+}
+```
+{{% /tab %}}
+
+{{< /tabs >}}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,34 +6,6 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        'doit-blue': {
-          '50': '#f2f9fd',
-          '100': '#e4f2fa',
-          '200': '#c2e5f5',
-          '300': '#8cd2ed',
-          '400': '#55bde2',
-          '500': '#28a2cf',
-          '600': '#1a83af',
-          '700': '#16688e',
-          '800': '#165876',
-          '900': '#184a62',
-          '950': '#102f41',
-          'light': '#2d96bd',
-          'dark': '#55bde2',
-        },
-        'doit-grey': {
-          '50': '#f4f6f7',
-          '100': '#e2e8eb',
-          '200': '#c8d3d9',
-          '300': '#a2b3be',
-          '400': '#758c9b',
-          '500': '#5a7180',
-          '600': '#4d5f6d',
-          '700': '#43505b',
-          '800': '#3c454e',
-          '900': '#353c44',
-          '950': '#20252b',
-        },
         'fgColor-default' : 'var(--fgColor-default)',
         'fgColor-secondary' : 'var(--fgColor-secondary)',
         'fgColor-muted' : 'var(--fgColor-muted)',

diff --git a/themes/DoIt/layouts/shortcodes/tabs.html b/themes/DoIt/layouts/shortcodes/tabs.html
@@ -22,23 +22,21 @@
           {{- $tabindex = -1 -}}
       {{- end -}}
       <button class="
+        tab-button  
         tw-transition 
         tw-ease-in-out 
         tw-duration-300
-        tab-button  
         tw-bg-transparent
         tw-px-4 
         tw-py-2
         tw-mr-1
-        hover:tw-bg-gray-200
-        hover:tw-shadow-md
         tw-shadow-black
+        hover:tw-bg-bgColor-secondary
+        hover:tw-shadow-md
         aria-selected:tw-font-bold
         aria-selected:tw-border-b-4
-        aria-selected:tw-text-doit-blue-light
-        aria-selected:tw-border-doit-blue-light
-        dark:hover:tw-bg-doit-grey-950
-        dark:aria-selected:tw-text-doit-blue-400"
+        aria-selected:tw-text-fgColor-link
+        aria-selected:tw-border-fgColor-link"
         type="button" 
         role="tab" 
         id="tab-{{- $id -}}">