|
| 1 | +/** |
| 2 | + * Customize default theme styling by overriding CSS variables: |
| 3 | + * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css |
| 4 | + */ |
| 5 | + |
| 6 | +/** |
| 7 | + * Colors |
| 8 | + * |
| 9 | + * Each colors have exact same color scale system with 3 levels of solid |
| 10 | + * colors with different brightness, and 1 soft color. |
| 11 | + * |
| 12 | + * - `XXX-1`: The most solid color used mainly for colored text. It must |
| 13 | + * satisfy the contrast ratio against when used on top of `XXX-soft`. |
| 14 | + * |
| 15 | + * - `XXX-2`: The color used mainly for hover state of the button. |
| 16 | + * |
| 17 | + * - `XXX-3`: The color for solid background, such as bg color of the button. |
| 18 | + * It must satisfy the contrast ratio with pure white (#ffffff) text on |
| 19 | + * top of it. |
| 20 | + * |
| 21 | + * - `XXX-soft`: The color used for subtle background such as custom container |
| 22 | + * or badges. It must satisfy the contrast ratio when putting `XXX-1` colors |
| 23 | + * on top of it. |
| 24 | + * |
| 25 | + * The soft color must be semi transparent alpha channel. This is crucial |
| 26 | + * because it allows adding multiple "soft" colors on top of each other |
| 27 | + * to create a accent, such as when having inline code block inside |
| 28 | + * custom containers. |
| 29 | + * |
| 30 | + * - `default`: The color used purely for subtle indication without any |
| 31 | + * special meanings attched to it such as bg color for menu hover state. |
| 32 | + * |
| 33 | + * - `brand`: Used for primary brand colors, such as link text, button with |
| 34 | + * brand theme, etc. |
| 35 | + * |
| 36 | + * - `tip`: Used to indicate useful information. The default theme uses the |
| 37 | + * brand color for this by default. |
| 38 | + * |
| 39 | + * - `warning`: Used to indicate warning to the users. Used in custom |
| 40 | + * container, badges, etc. |
| 41 | + * |
| 42 | + * - `danger`: Used to show error, or dangerous message to the users. Used |
| 43 | + * in custom container, badges, etc. |
| 44 | + * -------------------------------------------------------------------------- */ |
| 45 | + |
| 46 | + :root { |
| 47 | + --vp-c-default-1: var(--vp-c-gray-1); |
| 48 | + --vp-c-default-2: var(--vp-c-gray-2); |
| 49 | + --vp-c-default-3: var(--vp-c-gray-3); |
| 50 | + --vp-c-default-soft: var(--vp-c-gray-soft); |
| 51 | + |
| 52 | + --vp-c-brand-1: var(--vp-c-indigo-1); |
| 53 | + --vp-c-brand-2: var(--vp-c-indigo-2); |
| 54 | + --vp-c-brand-3: var(--vp-c-indigo-3); |
| 55 | + --vp-c-brand-soft: var(--vp-c-indigo-soft); |
| 56 | + |
| 57 | + --vp-c-tip-1: var(--vp-c-brand-1); |
| 58 | + --vp-c-tip-2: var(--vp-c-brand-2); |
| 59 | + --vp-c-tip-3: var(--vp-c-brand-3); |
| 60 | + --vp-c-tip-soft: var(--vp-c-brand-soft); |
| 61 | + |
| 62 | + --vp-c-warning-1: var(--vp-c-yellow-1); |
| 63 | + --vp-c-warning-2: var(--vp-c-yellow-2); |
| 64 | + --vp-c-warning-3: var(--vp-c-yellow-3); |
| 65 | + --vp-c-warning-soft: var(--vp-c-yellow-soft); |
| 66 | + |
| 67 | + --vp-c-danger-1: var(--vp-c-red-1); |
| 68 | + --vp-c-danger-2: var(--vp-c-red-2); |
| 69 | + --vp-c-danger-3: var(--vp-c-red-3); |
| 70 | + --vp-c-danger-soft: var(--vp-c-red-soft); |
| 71 | +} |
| 72 | + |
| 73 | +/** |
| 74 | + * Component: Button |
| 75 | + * -------------------------------------------------------------------------- */ |
| 76 | + |
| 77 | +:root { |
| 78 | + --vp-button-brand-border: transparent; |
| 79 | + --vp-button-brand-text: var(--vp-c-white); |
| 80 | + --vp-button-brand-bg: var(--vp-c-brand-3); |
| 81 | + --vp-button-brand-hover-border: transparent; |
| 82 | + --vp-button-brand-hover-text: var(--vp-c-white); |
| 83 | + --vp-button-brand-hover-bg: var(--vp-c-brand-2); |
| 84 | + --vp-button-brand-active-border: transparent; |
| 85 | + --vp-button-brand-active-text: var(--vp-c-white); |
| 86 | + --vp-button-brand-active-bg: var(--vp-c-brand-1); |
| 87 | +} |
| 88 | + |
| 89 | +/** |
| 90 | + * Component: Home |
| 91 | + * -------------------------------------------------------------------------- */ |
| 92 | + |
| 93 | +:root { |
| 94 | + --vp-home-hero-name-color: transparent; |
| 95 | + --vp-home-hero-name-background: -webkit-linear-gradient( |
| 96 | + 120deg, |
| 97 | + #bd34fe 30%, |
| 98 | + #41d1ff |
| 99 | + ); |
| 100 | + |
| 101 | + --vp-home-hero-image-background-image: linear-gradient( |
| 102 | + -45deg, |
| 103 | + #bd34fe 50%, |
| 104 | + #47caff 50% |
| 105 | + ); |
| 106 | + --vp-home-hero-image-filter: blur(44px); |
| 107 | +} |
| 108 | + |
| 109 | +@media (min-width: 640px) { |
| 110 | + :root { |
| 111 | + --vp-home-hero-image-filter: blur(56px); |
| 112 | + } |
| 113 | +} |
| 114 | + |
| 115 | +@media (min-width: 960px) { |
| 116 | + :root { |
| 117 | + --vp-home-hero-image-filter: blur(68px); |
| 118 | + } |
| 119 | +} |
| 120 | + |
| 121 | +/** |
| 122 | + * Component: Custom Block |
| 123 | + * -------------------------------------------------------------------------- */ |
| 124 | + |
| 125 | +:root { |
| 126 | + --vp-custom-block-tip-border: transparent; |
| 127 | + --vp-custom-block-tip-text: var(--vp-c-text-1); |
| 128 | + --vp-custom-block-tip-bg: var(--vp-c-brand-soft); |
| 129 | + --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft); |
| 130 | +} |
| 131 | + |
| 132 | +/** |
| 133 | + * Component: Algolia |
| 134 | + * -------------------------------------------------------------------------- */ |
| 135 | + |
| 136 | +.DocSearch { |
| 137 | + --docsearch-primary-color: var(--vp-c-brand-1) !important; |
| 138 | +} |
| 139 | + |
0 commit comments