docs: update theme

2023-10-06 23:39:02 +02:00
parent be70047e48
commit 28fd4955f4
11 changed files with 260 additions and 134 deletions
@@ -6,10 +6,10 @@ import '@vue-flow/core/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
 import '@vue-flow/controls/dist/style.css'
 import '@vue-flow/minimap/dist/style.css'
-import './../../assets/index.css'

 import Theme from 'vitepress/theme'
 import Layout from './layouts/default.vue'
+import './style.css'

 export default {
  extends: Theme,
@@ -0,0 +1,202 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: #42B983;
+  --vp-c-brand-2: #339066;
+  --vp-c-brand-3: #246648;
+  --vp-c-brand-soft: #35495E;
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #bd34fe 30%,
+    #41d1ff
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #bd34fe 50%,
+    #47caff 50%
+  );
+  --vp-home-hero-image-filter: blur(40px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --primary: #42B983;
+  --secondary: #35495E;
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: white;
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+
+.VPHome {
+  padding-bottom: 0 !important;
+}
+
+.VPNavBar.has-sidebar .content, .VPNav {
+  background-color: rgba(var(--vp-c-bg), 0.75);
+  backdrop-filter: blur(1px);
+}
+
+.examples .VPDoc {
+  @apply !px-8 !py-6;
+}
+
+.examples .content-container {
+  @apply !w-full !max-w-7xl;
+}
+
+.examples .aside {
+  @apply !hidden;
+}
+
+html, body {
+  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
+}
+
+ul li {
+  @apply mt-2;
+}
+
+.docs-button {
+  @apply mt-4 z-1 shadow-lg transition-colors duration-200 text-white font-semibold text-lg px-4 py-3 rounded-lg bg-accent dark:shadow-white/10;
+}
+
+.examples-button {
+  @apply z-1 shadow-lg transition-colors duration-200 font-semibold text-lg text-white px-4 py-3 rounded-lg bg-primary dark:shadow-white/10;
+}
+
+.slider {
+  --color: red;
+  @apply bg-gray-200 w-full h-[10px] outline-none rounded-full;
+  -webkit-appearance: none;
+  appearance: none;
+
+  &::-moz-range-thumb {
+    @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
+    -webkit-appearance: none;
+    background: var(--color);
+  }
+  &::-webkit-slider-thumb {
+    @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
+    -webkit-appearance: none;
+    background: var(--color);
+  }
+}
+
+.vue-repl pre, .vue-repl pre[class*=language-] {
+  padding: unset;
+  margin: unset;
+  border-radius: unset;
+  line-height: unset;
+}
@@ -29,43 +29,46 @@ export default defineConfig({
    extend: {
      colors: {
        primary: {
-          '50': '#fcf9ff',
-          '100': '#f8f3ff',
-          '200': '#eee1fe',
-          '300': '#e4cffe',
-          '400': '#cfaafd',
-          '500': '#BB86FC',
-          '600': '#a879e3',
-          '700': '#8c65bd',
-          '800': '#705097',
-          '900': '#5c427b',
-          'DEFAULT': '#BB86FC',
+          DEFAULT: '#42B983',
+          50: '#C7EBDB',
+          100: '#B8E6D1',
+          200: '#9ADBBE',
+          300: '#7CD0AA',
+          400: '#5EC697',
+          500: '#42B983',
+          600: '#339066',
+          700: '#246648',
+          800: '#163D2B',
+          900: '#07140E',
+          950: '#000000',
        },
        secondary: {
-          '50': '#c4fef9',
-          '100': '#9df7ef',
-          '200': '#77f0e4',
-          '300': '#50e8da',
-          '400': '#2ae1cf',
-          '500': '#03dac5',
-          '600': '#03ae9d',
-          '700': '#028276',
-          '800': '#02564e',
-          '900': '#012a26',
-          'DEFAULT': '#03dac5',
+          DEFAULT: '#35495E',
+          50: '#8CA5BE',
+          100: '#7F9AB7',
+          200: '#6586A8',
+          300: '#527292',
+          400: '#445D78',
+          500: '#35495E',
+          600: '#212D3A',
+          700: '#0D1116',
+          800: '#000000',
+          900: '#000000',
+          950: '#000000',
        },
        accent: {
-          '50': '#e6d4ff',
-          '100': '#ccaafc',
-          '200': '#b17ff8',
-          '300': '#9755f5',
-          '400': '#7c2af1',
-          '500': '#6200ee',
-          '600': '#5000c1',
-          '700': '#3d0095',
-          '800': '#2b0068',
-          '900': '#18003b',
-          'DEFAULT': '#6200ee',
+          DEFAULT: '#F15A16',
+          50: '#FBD5C3',
+          100: '#FAC7B0',
+          200: '#F8AC89',
+          300: '#F69163',
+          400: '#F3753C',
+          500: '#F15A16',
+          600: '#C3450C',
+          700: '#8E3209',
+          800: '#591F05',
+          900: '#240D02',
+          950: '#0A0401',
        },
      },
    },
@@ -1,64 +0,0 @@
-:root {
-  --primary: #BB86FC;
-  --secondary: #03dac5;
-  --vp-c-brand: #10b981;
-  --vp-c-accent: #BB86FC;
-}
-
-.VPHome {
-  padding-bottom: 0 !important;
-}
-
-.VPNavBar.has-sidebar .content, .VPNav {
-  background-color: rgba(var(--vp-c-bg), 0.75);
-  backdrop-filter: blur(1px);
-}
-
-.examples .VPDoc {
-  @apply !px-8 !py-6;
-}
-
-.examples .content-container {
-  @apply !w-full !max-w-7xl;
-}
-
-.examples .aside {
-  @apply !hidden;
-}
-
-html, body {
-  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
-}
-
-ul li {
-  @apply mt-2;
-}
-
-.docs-button {
-  @apply z-1 shadow-lg transition-colors duration-200 text-white font-semibold text-lg mt-4 px-5 py-3 rounded-lg bg-green-500;
-}
-
-.slider {
-  --color: red;
-  @apply bg-gray-200 w-full h-[10px] outline-none rounded-full;
-  -webkit-appearance: none;
-  appearance: none;
-
-  &::-moz-range-thumb {
-     @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
-     -webkit-appearance: none;
-     background: var(--color);
-   }
-  &::-webkit-slider-thumb {
-     @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
-     -webkit-appearance: none;
-     background: var(--color);
-   }
-}
-
-.vue-repl pre, .vue-repl pre[class*=language-] {
-  padding: unset;
-  margin: unset;
-  border-radius: unset;
-  line-height: unset;
-}