feat: create design system

Rule-34 · May 19, 2023 · 2fb38c8 · 2fb38c8
1 parent 111174a
commit 2fb38c8
Show file tree

Hide file tree

Showing 2 changed files with 131 additions and 151 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1,120 +1,112 @@
-/* #region Tailwind */
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* #endregion */
-
 @layer base {
   /* html {
   scroll-behavior: smooth;
     } */
 }
 
 @layer components {
-  /* #region Utils */
-  .focus-util {
-    /*
-    * NOT TO BE USED DIRECTLY AS CSS
-    * IN CLASSES IT SHOULD BE USED AS `focus-visible:focus-util`
-    */
-    @apply outline-none ring-4 ring-primary-400;
-  }
-
-  /*  */
-  .border-util {
-    @apply rounded border border-darkGray-100;
-  }
-
-  /*  */
-  .link {
-    @apply text-primary-500 transition-colors duration-300;
-  }
-
-  .link:hover {
-    @apply text-primary-400;
-  }
-
-  .link:focus {
-    @apply focus-util;
-  }
-
-  /* #endregion */
-  /* #region Components */
-  /*  */
-  .icon {
-    stroke-width: 1.6;
-    /* Align middle is necessary for some reason for mobile devices */
-    @apply overflow-visible align-middle text-white;
-  }
 
-  /*  */
-  .material-container {
-    @apply border-util overflow-hidden rounded-lg bg-darkGray-300;
-  }
+}
 
-  /*  */
-  .tag-container {
-    @apply flex flex-wrap content-start items-start gap-2 overflow-hidden bg-darkGray-700 px-2 py-3;
+@layer utilities {
+  /*
+  * NOT TO BE USED DIRECTLY AS CSS
+  * IN CLASSES IT SHOULD BE USED AS `focus-visible:focus-util`
+  */
+  .focus-util {
+    @apply outline-none ring-2 ring-base-content-highlight;
   }
 
-  /*  */
-  .tag {
-    /*
-    * NOT TO BE USED DIRECTLY AS CSS
-    * IN CLASSES IT SHOULD BE USED WITH `.link`
-    */
-    @apply select-none overflow-hidden rounded-none px-2.5 py-0.5 text-gray-300 leading-normal bg-darkGray-100 rounded-full;
+  /*
+  * NOT TO BE USED DIRECTLY AS CSS
+  * IN CLASSES IT SHOULD BE USED AS `hover:hover-text-util`
+  */
+  .hover-text-util {
+    @apply text-base-content-hover;
   }
 
-  /* Active tags */
-  .tag.nuxt-link-exact-active {
-    @apply border-primary-700 bg-primary-700 font-normal text-primary-100 hover:border-primary-600 hover:bg-primary-600 hover:text-primary-100;
+  /*
+  * NOT TO BE USED DIRECTLY AS CSS
+  * IN CLASSES IT SHOULD BE USED AS `hover:hover-bg-util`
+   */
+  .hover-bg-util {
+    @apply hover:bg-base-0/20;
   }
-
-  /* #endregion */
 }
 
-/* ===== CSS that will not be purged ===== */
-
-/* #region Toast theme */
-
-.toasted-container {
-  @apply gap-3;
+/**
+  * Custom Tippy.js theme
+  **/
+.tippy-box[data-theme~=custom] {
+  @apply bg-base-900 border border-base-0/20 rounded-lg shadow-2xl px-1.5 py-1.5 text-base-content-highlight text-sm;
 }
 
-.toasted-custom-theme {
-  @apply border-2 border-b-4 border-darkGray-100 border-b-accent-300 bg-darkGray-300 text-white sm:gap-2 sm:border-2 !important;
+.tippy-box[data-theme~=custom][data-placement^=top] > .tippy-arrow:before {
+  border-width: 0.5rem 0.5rem 0;
+  @apply border-t-base-900;
+}
 
-  @apply px-4 py-2 sm:rounded-lg !important;
+.tippy-box[data-theme~=custom][data-placement^=bottom] > .tippy-arrow:before {
+  border-width: 0 0.5rem 0.5rem;
+  @apply border-b-base-900;
 }
 
-/*.toasted-custom-theme.error {*/
-/*  @apply border-red-500 !important;*/
-/*}*/
+.tippy-box[data-theme~=custom][data-placement^=left] > .tippy-arrow:before {
+  border-width: 0.5rem 0 0.5rem 0.5rem;
+  @apply border-l-base-900;
+}
 
-.toasted-custom-theme .action {
-  @apply text-center focus-visible:focus-util m-0 rounded-full border-0 bg-darkGray-100 px-2 py-1 !important;
+.tippy-box[data-theme~=custom][data-placement^=right] > .tippy-arrow:before {
+  border-width: 0.5rem 0.5rem 0.5rem 0;
+  @apply border-r-base-900;
 }
 
-/* #endregion */
 
-/* #region Transitions and animations */
+/* ----------------------------------------------
+ * Generated by Animista on 2023-5-18 15:26:26
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
 
-.nuxt-link-exact-active {
-  @apply font-bold text-primary-400;
+.flip-vertical-fwd {
+  animation: flip-vertical-fwd 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
 }
 
-/* Page Transition */
-.page-enter-active,
-.page-leave-active {
-  @apply transition-opacity duration-300;
+.slide-in-blurred-top {
+  animation: slide-in-blurred-top 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
 }
 
-.page-enter,
-.page-leave-to {
-  @apply opacity-0;
+/**
+ * ----------------------------------------
+ * animation flip-vertical-fwd
+ * ----------------------------------------
+ */
+
+@keyframes flip-vertical-fwd {
+  0% {
+    transform: translateZ(0) rotateY(0);
+  }
+  100% {
+    transform: translateZ(160px) rotateY(180deg);
+  }
 }
 
-/* #endregion */
+@keyframes slide-in-blurred-top {
+  0% {
+    transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
+    transform-origin: 50% 0%;
+    filter: blur(40px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0) scaleY(1) scaleX(1);
+    transform-origin: 50% 50%;
+    filter: blur(0);
+    opacity: 1;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,71 +2,59 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 const defaultColors = require('tailwindcss/colors')
 
 module.exports = {
-  safelist: [
-    'nuxt-link-exact-active',
-    'toasted-container',
-    'toasted-custom-theme',
-    'toasted-custom-action'
-  ],
-
-  content: [
-    './components/**/*.{js,vue,ts}',
-    './layouts/**/*.vue',
-    './pages/**/*.vue',
-    './plugins/**/*.{js,ts}',
-    './nuxt.config.{js,ts}'
-  ],
-
-  theme: {
-    extend: {
-      colors: {
-        primary: defaultColors.sky,
-
-        accent: defaultColors.violet,
-
-        // --- Default colors for text --- \\
-        // Icons: black or white
-        // Text: text-gray-200 | text-gray-800
-        // Muted: text-gray-300 | text-gray-700
-
-        darkGray: {
-          100: ' hsl(209, 15%, 20%)', // Borders
-
-          300: ' hsl(209, 15%, 9%)', // Elevation
-
-          500: 'hsl(209, 10%, 13%)',
-
-          700: 'hsl(0, 0%, 7%)' // Background
-        },
-
-        ...defaultColors
-      },
-
-      maxHeight: {
-        0: '0px',
-        '1/4': '25%',
-        '2/5': '40%',
-        '1/2': '50%',
-        '3/4': '75%'
-      },
-
-      minHeight: {
-        0: '0px',
-        '1/4': '25%',
-        '2/5': '40%',
-        '1/2': '50%',
-        '3/4': '75%'
-      },
-
-      fontFamily: {
-        sans: ['Inter var', ...defaultTheme.fontFamily.sans]
-      }
-    }
-  },
-
-  plugins: [
-    require('@tailwindcss/forms')({
-      strategy: 'class'
-    })
-  ]
+	content: [
+		'./components/**/*.{js,vue,ts}',
+		'./layouts/**/*.vue',
+		'./pages/**/*.vue',
+		'./plugins/**/*.{js,ts}',
+		'./nuxt.config.{js,ts}',
+		'./app.vue'
+	],
+
+	theme: {
+		extend: {
+			colors: {
+				primary: defaultColors.sky,
+
+				accent: defaultColors.violet,
+
+				/**
+				 * Used for the background
+				 */
+				base: {
+					// TODO: remember that borders, and backgrounds use 20% opacity: border-base-0/20
+					// TODO: E.g: border-base-0/20 & bg-base-0/20
+					// TODO: Maybe create a specific attribute?
+					0: defaultColors.white,
+
+					...defaultColors.gray,
+
+					1000: defaultColors.black
+				},
+
+				/**
+				 * Used for text and icons on the background
+				 */
+				'base-content': {
+					highlight: defaultColors.gray[200],
+
+					DEFAULT: defaultColors.gray[400],
+
+					hover: defaultColors.white
+				}
+			},
+
+			fontFamily: {
+				sans: ['Inter var', ...defaultTheme.fontFamily.sans]
+			}
+		}
+	},
+
+	plugins: [
+		require('@tailwindcss/forms')({
+			strategy: 'class'
+		}),
+
+		require('@headlessui/tailwindcss')
+	]
 }