design-system-next 1.0.21

package/src/assets/styles/tailwind.css

@@ -0,0 +1,795 @@
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --size-50: 2px;
+    --size-100: 4px;
+    --size-150: 6px;
+    --size-200: 8px;
+    --size-250: 12px;
+    --size-300: 16px;
+    --size-400: 24px;
+    --size-500: 32px;
+    --size-600: 40px;
+    --size-700: 48px;
+    --size-800: 64px;
+    --size-900: 72px;
+    --size-1000: 80px;
+    --size-1100: 96px;
+    --size-1200: 128px;
+  }
+  *::-webkit-scrollbar {
+    @apply tw-h-[8px] tw-w-[8px];
+  }
+
+  *::-webkit-scrollbar-track {
+    @apply tw-bg-white-200;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    @apply tw-rounded-full tw-bg-white-300;
+  }
+}
+
+@layer components {
+  #sidenav-menu-wrapper,
+  #sidenav-submenu-wrapper {
+    @apply tw-background-color tw-max-h-[500px] tw-w-[215px] tw-overflow-y-auto tw-overflow-x-hidden tw-rounded-[12px] tw-drop-shadow-md;
+
+    .v-popper__wrapper {
+      .v-popper__inner {
+        @apply tw-overflow-hidden tw-rounded-none tw-border-none tw-bg-transparent tw-shadow-none;
+
+        .slide-fade-enter-active {
+          @apply tw-duration-300 tw-ease-out;
+        }
+
+        .slide-fade-leave-active {
+          transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
+        }
+
+        .slide-fade-enter-from,
+        .slide-fade-leave-to {
+          @apply tw-translate-x-[-20px] tw-opacity-0;
+        }
+      }
+
+      .v-popper__arrow-container {
+        @apply tw-hidden;
+      }
+    }
+  }
+
+  #sidenav-sub-submenu-wrapper {
+    @apply tw-hidden;
+  }
+
+  #default-tooltip {
+    .v-popper__wrapper {
+      .v-popper__inner {
+        @apply tw-label-xs tw-background-color-inverted tw-rounded-border-radius-md tw-font-main tw-opacity-100;
+      }
+
+      .v-popper__arrow-outer {
+        @apply tw-hidden;
+      }
+    }
+  }
+}
+
+@layer utilities {
+  .tw-hidden-scrolls {
+    &::-webkit-scrollbar {
+      @apply tw-hidden;
+    }
+  }
+
+  /* #region - Headings */
+  .tw-heading-xl {
+    @apply tw-font-size-900 tw-line-height-1000 tw-letter-spacing-densest tw-font-main tw-font-medium;
+  }
+
+  .tw-heading-lg {
+    @apply tw-font-size-800 tw-line-height-900 tw-letter-spacing-denser tw-font-main tw-font-medium;
+  }
+
+  .tw-heading-md {
+    @apply tw-font-size-700 tw-line-height-800 tw-letter-spacing-denser tw-font-main tw-font-medium;
+  }
+
+  .tw-heading-sm {
+    @apply tw-font-size-600 tw-line-height-700 tw-letter-spacing-dense tw-font-main tw-font-medium;
+  }
+
+  .tw-heading-xs {
+    @apply tw-font-size-500 tw-line-height-600 tw-letter-spacing-dense tw-font-main tw-font-medium;
+  }
+  /* #endregion - Headings */
+
+  /* #region - Subheadings */
+  .tw-subheading-sm {
+    @apply tw-font-size-400 tw-line-height-500 tw-letter-spacing-dense tw-font-main tw-font-medium;
+  }
+
+  .tw-subheading-xs {
+    @apply tw-font-size-300 tw-line-height-400 tw-letter-spacing-normal tw-font-main tw-font-medium;
+  }
+  /* #endregion - Subheadings */
+
+  /* #region - Paragraphs */
+  .tw-body-lg {
+    @apply tw-font-size-400 tw-line-height-600 tw-letter-spacing-normal tw-font-main;
+  }
+
+  .tw-body-lg-regular {
+    @apply tw-body-lg tw-font-normal;
+  }
+
+  .tw-body-lg-regular-underline {
+    @apply tw-body-lg tw-font-normal tw-decoration-solid;
+  }
+
+  .tw-body-lg-regular-medium {
+    @apply tw-body-lg tw-font-medium;
+  }
+
+  .tw-body-lg-medium-underline {
+    @apply tw-body-lg tw-font-medium tw-decoration-solid;
+  }
+
+  .tw-body-md {
+    @apply tw-font-size-300 tw-line-height-500 tw-letter-spacing-normal tw-font-main;
+  }
+
+  .tw-body-md-regular {
+    @apply tw-body-md tw-font-normal;
+  }
+
+  .tw-body-md-regular-underline {
+    @apply tw-body-md tw-font-normal tw-decoration-solid;
+  }
+
+  .tw-body-md-regular-medium {
+    @apply tw-body-md tw-font-medium;
+  }
+
+  .tw-body-md-medium-underline {
+    @apply tw-body-md tw-font-medium tw-decoration-solid;
+  }
+
+  .tw-body-sm {
+    @apply tw-font-size-200 tw-line-height-400 tw-letter-spacing-normal tw-font-main;
+  }
+
+  .tw-body-sm-regular {
+    @apply tw-body-sm tw-font-normal;
+  }
+
+  .tw-body-sm-regular-underline {
+    @apply tw-body-sm tw-font-normal tw-decoration-solid;
+  }
+
+  .tw-body-sm-regular-medium {
+    @apply tw-body-sm tw-font-medium;
+  }
+
+  .tw-body-sm-medium-underline {
+    @apply tw-body-sm tw-font-medium tw-decoration-solid;
+  }
+
+  .tw-body-xs {
+    @apply tw-font-size-100 tw-line-height-300 tw-letter-spacing-normal tw-font-main;
+  }
+
+  .tw-body-xs-regular {
+    @apply tw-body-xs tw-font-normal;
+  }
+
+  .tw-body-xs-regular-underline {
+    @apply tw-body-xs tw-font-normal tw-decoration-solid;
+  }
+
+  .tw-body-xs-regular-medium {
+    @apply tw-body-xs tw-font-medium;
+  }
+
+  .tw-body-xs-medium-underline {
+    @apply tw-body-xs tw-font-medium tw-decoration-solid;
+  }
+  /* #endregion - Paragraphs */
+
+  /* #region - Labels */
+  .tw-label-sm {
+    @apply tw-font-size-200 tw-line-height-200 tw-letter-spacing-wide tw-font-main;
+  }
+
+  .tw-label-sm-regular {
+    @apply tw-label-sm tw-font-normal;
+  }
+
+  .tw-label-sm-medium {
+    @apply tw-label-sm tw-font-medium;
+  }
+
+  .tw-label-xs {
+    @apply tw-font-size-100 tw-line-height-100 tw-letter-spacing-wide tw-font-main;
+  }
+
+  .tw-label-xs-regular {
+    @apply tw-label-xs tw-font-normal;
+  }
+
+  .tw-label-xs-medium {
+    @apply tw-label-xs tw-font-medium;
+  }
+  /* #endregion - Labels */
+
+  /* #region - Font Size */
+  .tw-font-size-100 {
+    @apply tw-text-100;
+  }
+
+  .tw-font-size-200 {
+    @apply tw-text-200;
+  }
+
+  .tw-font-size-300 {
+    @apply tw-text-300;
+  }
+
+  .tw-font-size-400 {
+    @apply tw-text-400;
+  }
+
+  .tw-font-size-500 {
+    @apply tw-text-500;
+  }
+
+  .tw-font-size-600 {
+    @apply tw-text-600;
+  }
+
+  .tw-font-size-700 {
+    @apply tw-text-700;
+  }
+
+  .tw-font-size-800 {
+    @apply tw-text-800;
+  }
+
+  .tw-font-size-900 {
+    @apply tw-text-900;
+  }
+
+  .tw-font-size-1000 {
+    @apply tw-text-1000;
+  }
+  /* #endregion - Font Size */
+
+  /* #region - Line Height */
+  .tw-line-height-none {
+    @apply tw-leading-none;
+  }
+
+  .tw-line-height-100 {
+    @apply tw-leading-100;
+  }
+
+  .tw-line-height-200 {
+    @apply tw-leading-200;
+  }
+
+  .tw-line-height-300 {
+    @apply tw-leading-300;
+  }
+
+  .tw-line-height-400 {
+    @apply tw-leading-400;
+  }
+
+  .tw-line-height-500 {
+    @apply tw-leading-500;
+  }
+
+  .tw-line-height-600 {
+    @apply tw-leading-600;
+  }
+
+  .tw-line-height-700 {
+    @apply tw-leading-700;
+  }
+
+  .tw-line-height-800 {
+    @apply tw-leading-800;
+  }
+
+  .tw-line-height-900 {
+    @apply tw-leading-900;
+  }
+
+  .tw-line-height-1000 {
+    @apply tw-leading-1000;
+  }
+  /* #endregion - Line Height */
+
+  /* #region - Letter Spacing */
+  .tw-letter-spacing-none {
+    @apply tw-tracking-spacing-none;
+  }
+
+  .tw-letter-spacing-densest {
+    @apply tw-tracking-spacing-densest;
+  }
+
+  .tw-letter-spacing-denser {
+    @apply tw-tracking-spacing-denser;
+  }
+
+  .tw-letter-spacing-dense {
+    @apply tw-tracking-spacing-dense;
+  }
+
+  .tw-letter-spacing-normal {
+    @apply tw-tracking-spacing-normal;
+  }
+
+  .tw-letter-spacing-wide {
+    @apply tw-tracking-spacing-wide;
+  }
+
+  .tw-letter-spacing-wider {
+    @apply tw-tracking-spacing-wider;
+  }
+
+  .tw-letter-spacing-widest {
+    @apply tw-tracking-spacing-widest;
+  }
+
+  /* #endregion - Letter Spacing */
+
+  /* #region - Text Colors */
+  .tw-text-color-strong {
+    @apply tw-text-mushroom-950;
+  }
+
+  .tw-text-color-supporting {
+    @apply tw-text-mushroom-400;
+  }
+
+  .tw-text-color-base {
+    @apply tw-text-mushroom-600;
+  }
+
+  .tw-text-color-weak {
+    @apply tw-text-mushroom-300;
+  }
+
+  .tw-text-color-disabled {
+    @apply tw-text-white-300;
+  }
+
+  .tw-text-color-on-fill-disabled {
+    @apply tw-text-white-400;
+  }
+
+  .tw-text-color-inverted-strong {
+    @apply tw-text-white-50;
+  }
+
+  .tw-text-color-inverted-base {
+    @apply tw-text-mushroom-200;
+  }
+
+  .tw-text-color-inverted-weak {
+    @apply tw-text-mushroom-400;
+  }
+
+  .tw-text-color-inverted-disabled {
+    @apply tw-text-white-600;
+  }
+
+  .tw-text-color-brand-base {
+    @apply tw-text-kangkong-700;
+  }
+
+  .tw-text-color-brand-hover {
+    @apply tw-text-kangkong-800;
+  }
+
+  .tw-text-color-brand-pressed {
+    @apply tw-text-kangkong-900;
+  }
+
+  .tw-text-color-success-base {
+    @apply tw-text-kangkong-700;
+  }
+
+  .tw-text-color-success-hover {
+    @apply tw-text-kangkong-800;
+  }
+
+  .tw-text-color-success-pressed {
+    @apply tw-text-kangkong-900;
+  }
+
+  .tw-text-color-information-base {
+    @apply tw-text-blueberry-700;
+  }
+
+  .tw-text-color-information-hover {
+    @apply tw-text-blueberry-800;
+  }
+
+  .tw-text-color-information-pressed {
+    @apply tw-text-blueberry-900;
+  }
+
+  .tw-text-color-danger-base {
+    @apply tw-text-tomato-600;
+  }
+
+  .tw-text-color-danger-hover {
+    @apply tw-text-tomato-700;
+  }
+
+  .tw-text-color-danger-pressed {
+    @apply tw-text-tomato-800;
+  }
+
+  .tw-text-color-pending-base {
+    @apply tw-text-mango-700;
+  }
+
+  .tw-text-color-pending-hover {
+    @apply tw-text-mango-800;
+  }
+
+  .tw-text-color-pending-pressed {
+    @apply tw-text-mango-900;
+  }
+
+  .tw-text-color-caution-base {
+    @apply tw-text-carrot-700;
+  }
+
+  .tw-text-color-caution-hover {
+    @apply tw-text-carrot-800;
+  }
+
+  .tw-text-color-caution-pressed {
+    @apply tw-text-carrot-900;
+  }
+
+  .tw-text-color-accent-base {
+    @apply tw-text-wintermelon-700;
+  }
+
+  .tw-text-color-accent-hover {
+    @apply tw-text-wintermelon-800;
+  }
+
+  .tw-text-color-accent-pressed {
+    @apply tw-text-wintermelon-900;
+  }
+  /* #endregion - Text Colors */
+
+  /* #region - Background Colors */
+  .tw-background-color {
+    @apply tw-bg-white-50;
+  }
+
+  .tw-background-color-surface {
+    @apply tw-bg-white-100;
+  }
+
+  .tw-background-color-inverted {
+    @apply tw-bg-mushroom-950;
+  }
+
+  .tw-background-color-inverted-hover {
+    @apply tw-bg-mushroom-900;
+  }
+
+  .tw-background-color-inverted-pressed {
+    @apply tw-bg-mushroom-800;
+  }
+
+  .tw-background-color-base {
+    @apply tw-bg-mushroom-50;
+  }
+
+  .tw-background-color-single-active {
+    @apply tw-bg-kangkong-100;
+  }
+
+  .tw-background-color-multiple-active {
+    @apply tw-bg-kangkong-50;
+  }
+
+  .tw-background-color-hover {
+    @apply tw-bg-mushroom-50;
+  }
+
+  .tw-background-color-pressed {
+    @apply tw-bg-mushroom-100;
+  }
+
+  .tw-background-color-disabled {
+    @apply tw-bg-white-100;
+  }
+
+  .tw-background-color-brand-base {
+    @apply tw-bg-kangkong-700;
+  }
+
+  .tw-background-color-brand-hover {
+    @apply tw-bg-kangkong-800;
+  }
+
+  .tw-background-color-brand-pressed {
+    @apply tw-bg-kangkong-900;
+  }
+
+  .tw-background-color-brand-weak {
+    @apply tw-bg-kangkong-100;
+  }
+
+  .tw-background-color-success-base {
+    @apply tw-bg-kangkong-600;
+  }
+
+  .tw-background-color-success-hover {
+    @apply tw-bg-kangkong-700;
+  }
+
+  .tw-background-color-success-pressed {
+    @apply tw-bg-kangkong-800;
+  }
+
+  .tw-background-color-success-weak {
+    @apply tw-bg-kangkong-100;
+  }
+
+  .tw-background-color-information-base {
+    @apply tw-bg-blueberry-600;
+  }
+
+  .tw-background-color-information-hover {
+    @apply tw-bg-blueberry-700;
+  }
+
+  .tw-background-color-information-pressed {
+    @apply tw-bg-blueberry-800;
+  }
+
+  .tw-background-color-information-weak {
+    @apply tw-bg-blueberry-100;
+  }
+
+  .tw-background-color-pending-base {
+    @apply tw-bg-mango-500;
+  }
+
+  .tw-background-color-pending-hover {
+    @apply tw-bg-mango-600;
+  }
+
+  .tw-background-color-pending-pressed {
+    @apply tw-bg-mango-700;
+  }
+
+  .tw-background-color-pending-weak {
+    @apply tw-bg-mango-100;
+  }
+
+  .tw-background-color-caution-base {
+    @apply tw-bg-carrot-500;
+  }
+
+  .tw-background-color-caution-hover {
+    @apply tw-bg-carrot-600;
+  }
+
+  .tw-background-color-caution-pressed {
+    @apply tw-bg-carrot-700;
+  }
+
+  .tw-background-color-caution-weak {
+    @apply tw-bg-carrot-100;
+  }
+
+  .tw-background-color-accent-base {
+    @apply tw-bg-wintermelon-600;
+  }
+
+  .tw-background-color-accent-hover {
+    @apply tw-bg-wintermelon-700;
+  }
+
+  .tw-background-color-accent-pressed {
+    @apply tw-bg-wintermelon-800;
+  }
+
+  .tw-background-color-accent-weak {
+    @apply tw-bg-wintermelon-100;
+  }
+
+  .tw-background-color-danger-base {
+    @apply tw-bg-tomato-600;
+  }
+
+  .tw-background-color-danger-hover {
+    @apply tw-bg-tomato-700;
+  }
+
+  .tw-background-color-danger-pressed {
+    @apply tw-bg-tomato-800;
+  }
+
+  .tw-background-color-danger-weak {
+    @apply tw-bg-tomato-100;
+  }
+
+  .tw-switch-background-default {
+    @apply tw-bg-mushroom-200;
+  }
+
+  .tw-switch-background-hover {
+    @apply tw-bg-mushroom-300;
+  }
+
+  .tw-switch-background-pressed {
+    @apply tw-bg-mushroom-400;
+  }
+  /* #endregion - Background Colors */
+
+  /* #region - Border Colors */
+  .tw-border-color-strong {
+    @apply tw-border-mushroom-500;
+  }
+
+  .tw-border-color-supporting {
+    @apply tw-border-mushroom-400;
+  }
+
+  .tw-border-color-base {
+    @apply tw-border-mushroom-300;
+  }
+
+  .tw-border-color-hover {
+    @apply tw-border-mushroom-400;
+  }
+
+  .tw-border-color-pressed {
+    @apply tw-border-mushroom-500;
+  }
+
+  .tw-border-color-weak {
+    @apply tw-border-mushroom-200;
+  }
+
+  .tw-border-color-disabled {
+    @apply tw-border-white-100;
+  }
+
+  .tw-border-color-on-fill-disabled {
+    @apply tw-border-white-200;
+  }
+
+  .tw-border-color-brand-base {
+    @apply tw-border-kangkong-700;
+  }
+
+  .tw-border-color-brand-hover {
+    @apply tw-border-kangkong-800;
+  }
+
+  .tw-border-color-brand-pressed {
+    @apply tw-border-kangkong-900;
+  }
+
+  .tw-border-color-success-base {
+    @apply tw-border-kangkong-700;
+  }
+
+  .tw-border-color-success-hover {
+    @apply tw-border-kangkong-800;
+  }
+
+  .tw-border-color-success-pressed {
+    @apply tw-border-kangkong-900;
+  }
+
+  .tw-border-color-information-base {
+    @apply tw-border-blueberry-700;
+  }
+
+  .tw-border-color-information-hover {
+    @apply tw-border-blueberry-800;
+  }
+
+  .tw-border-color-information-pressed {
+    @apply tw-border-blueberry-900;
+  }
+
+  .tw-border-color-danger-base {
+    @apply tw-border-tomato-600;
+  }
+
+  .tw-border-color-danger-hover {
+    @apply tw-border-tomato-700;
+  }
+
+  .tw-border-color-danger-pressed {
+    @apply tw-border-tomato-800;
+  }
+
+  .tw-border-color-pending-base {
+    @apply tw-border-mango-700;
+  }
+
+  .tw-border-color-pending-hover {
+    @apply tw-border-mango-800;
+  }
+
+  .tw-border-color-pending-pressed {
+    @apply tw-border-mango-900;
+  }
+
+  .tw-border-color-caution-base {
+    @apply tw-border-carrot-700;
+  }
+
+  .tw-border-color-caution-hover {
+    @apply tw-border-carrot-800;
+  }
+
+  .tw-border-color-caution-pressed {
+    @apply tw-border-carrot-900;
+  }
+
+  .tw-border-color-accent-base {
+    @apply tw-border-wintermelon-700;
+  }
+
+  .tw-border-color-accent-hover {
+    @apply tw-border-wintermelon-800;
+  }
+
+  .tw-border-color-accent-pressed {
+    @apply tw-border-wintermelon-900;
+  }
+  /* #endregion - Border Colors */
+
+  /* #region - Box Shadows */
+  .drop-shadow-sm {
+    @apply tw-shadow-drop-sm;
+  }
+
+  .drop-shadow {
+    @apply tw-shadow-drop;
+  }
+
+  .drop-shadow-md {
+    @apply tw-shadow-drop-md;
+  }
+
+  .drop-shadow-top-sm {
+    @apply tw-shadow-drop-top-sm;
+  }
+
+  .drop-shadow-top {
+    @apply tw-shadow-drop-top;
+  }
+
+  .drop-shadow-top-md {
+    @apply tw-shadow-drop-top-md;
+  }
+  /* #endregion - Box Shadows */
+}