diff --git a/assets/css/main.scss b/assets/css/main.scss index 4f91edc7..66964a2c 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -1,61 +1,18 @@ @import "media"; .page { - @apply bg-background bg-rotki-pattern bg-local bg-right-top bg-no-repeat; - scroll-behavior: smooth; overflow-x: hidden; - - @include for-size(phone-only) { - background-size: 4.5rem; - } - - @include for-size(tablet-portrait-up) { - background-size: 5rem; - } - - @include for-size(desktop-up) { - background-size: 7.5rem; - } - - @include for-size(big-desktop-up) { - background-size: 12rem; - } - } .body { - @apply bg-rotki-logo bg-local bg-left-top bg-no-repeat overflow-x-hidden overflow-y-hidden; - - @include for-size(phone-only) { - background-size: 4rem; - } - - @include for-size(tablet-portrait-up) { - background-size: 5rem; - } - - @include for-size(desktop-up) { - background-size: 6.5rem; - } - - @include for-size(big-desktop-up) { - background-size: 11rem; - } - + @apply overflow-x-hidden overflow-y-hidden text-rui-text; } -$mobile-margin: 16px; - -$mobile-font-percentage: 0.7; -$tablet-font-percentage: 0.8; - -$mobile-button-percentage: 0.8; -$mobile-image-percentage: 0.4; - .fade-enter-active, .fade-leave-active { transition: opacity .4s; } + .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } diff --git a/assets/css/media.scss b/assets/css/media.scss index f962c6bb..d536138e 100644 --- a/assets/css/media.scss +++ b/assets/css/media.scss @@ -18,6 +18,9 @@ $tablet-landscape-font-percentage: 0.9; $desktop-up-font-percentage: 0.9; $big-desktop-font-percentage: 1.1; +$mobile-button-percentage: 0.8; +$mobile-image-percentage: 0.4; + @mixin text-size($font-size, $line-height) { font-size: $font-size; line-height: $line-height; @@ -48,6 +51,7 @@ $big-desktop-font-percentage: 1.1; } } +$mobile-margin: 16px; @mixin margin-x($margin) { margin-left: $margin; diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css index eb81c331..a90a793f 100644 --- a/assets/css/tailwind.css +++ b/assets/css/tailwind.css @@ -1,109 +1,5 @@ +@import '@rotki/ui-library/dist/style.css'; + @tailwind base; @tailwind components; @tailwind utilities; - -@layer components { - .rotki-margin { - margin-left: 151px; - margin-right: 151px; - } -} - -/* source-sans-pro-300 - latin */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 300; - src: url('../fonts/source-sans-pro-v14-latin-300.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/source-sans-pro-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/source-sans-pro-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/source-sans-pro-v14-latin-300.woff') format('woff'), /* Modern Browsers */ - url('../fonts/source-sans-pro-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/source-sans-pro-v14-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */ -} - - -/* source-sans-pro-regular - latin */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - src: url('../fonts/source-sans-pro-v14-latin-regular.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/source-sans-pro-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/source-sans-pro-v14-latin-regular.woff') format('woff'), /* Modern Browsers */ - url('../fonts/source-sans-pro-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/source-sans-pro-v14-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */ -} - -/* source-sans-pro-medium - latin */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 600; - src: url('../fonts/source-sans-pro-v14-latin-600.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/source-sans-pro-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/source-sans-pro-v14-latin-600.woff') format('woff'), /* Modern Browsers */ - url('../fonts/source-sans-pro-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/source-sans-pro-v14-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */ -} - -/* maven-pro-regular - latin */ -@font-face { - font-family: 'Maven Pro'; - font-style: normal; - font-weight: 400; - src: url('../fonts/maven-pro-v25-latin-regular.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/maven-pro-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/maven-pro-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/maven-pro-v25-latin-regular.woff') format('woff'), /* Modern Browsers */ - url('../fonts/maven-pro-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/maven-pro-v25-latin-regular.svg#MavenPro') format('svg'); /* Legacy iOS */ -} - -/* maven-pro-500 - latin */ -@font-face { - font-family: 'Maven Pro'; - font-style: normal; - font-weight: 500; - src: url('../fonts/maven-pro-v28-latin-500.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/maven-pro-v28-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/maven-pro-v28-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/maven-pro-v28-latin-500.woff') format('woff'), /* Modern Browsers */ - url('../fonts/maven-pro-v28-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/maven-pro-v28-latin-500.svg#MavenPro') format('svg'); /* Legacy iOS */ -} - -/* maven-pro-700 - latin */ -@font-face { - font-family: 'Maven Pro'; - font-style: normal; - font-weight: 700; - src: url('../fonts/maven-pro-v25-latin-700.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/maven-pro-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/maven-pro-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/maven-pro-v25-latin-700.woff') format('woff'), /* Modern Browsers */ - url('../fonts/maven-pro-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/maven-pro-v25-latin-700.svg#MavenPro') format('svg'); /* Legacy iOS */ -} - -/* source-serif-pro-regular - latin */ -@font-face { - font-family: 'Source Serif Pro'; - font-style: normal; - font-weight: 400; - src: url('../fonts/source-serif-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */ - src: local(''), - url('../fonts/source-serif-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/source-serif-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/source-serif-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */ - url('../fonts/source-serif-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/source-serif-pro-v11-latin-regular.svg#SourceSerifPro') format('svg'); /* Legacy iOS */ -} diff --git a/assets/fonts/maven-pro-v25-latin-700.eot b/assets/fonts/maven-pro-v25-latin-700.eot deleted file mode 100644 index 986cae40..00000000 Binary files a/assets/fonts/maven-pro-v25-latin-700.eot and /dev/null differ diff --git a/assets/fonts/maven-pro-v25-latin-700.svg b/assets/fonts/maven-pro-v25-latin-700.svg deleted file mode 100644 index 228d140b..00000000 --- a/assets/fonts/maven-pro-v25-latin-700.svg +++ /dev/null @@ -1,310 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/fonts/maven-pro-v25-latin-700.ttf b/assets/fonts/maven-pro-v25-latin-700.ttf deleted file mode 100644 index 9719ca87..00000000 Binary files a/assets/fonts/maven-pro-v25-latin-700.ttf and /dev/null differ diff --git a/assets/fonts/maven-pro-v25-latin-700.woff b/assets/fonts/maven-pro-v25-latin-700.woff deleted file mode 100644 index ffad33b4..00000000 Binary files a/assets/fonts/maven-pro-v25-latin-700.woff and /dev/null differ diff --git a/assets/fonts/maven-pro-v25-latin-700.woff2 b/assets/fonts/maven-pro-v25-latin-700.woff2 deleted file mode 100644 index 88557b8c..00000000 Binary files a/assets/fonts/maven-pro-v25-latin-700.woff2 and /dev/null differ diff --git a/assets/fonts/maven-pro-v25-latin-regular.eot b/assets/fonts/maven-pro-v25-latin-regular.eot deleted file mode 100644 index 951d1662..00000000 Binary files a/assets/fonts/maven-pro-v25-latin-regular.eot and /dev/null differ diff --git a/assets/fonts/maven-pro-v25-latin-regular.svg b/assets/fonts/maven-pro-v25-latin-regular.svg deleted file mode 100644 index 4d3b3c00..00000000 --- a/assets/fonts/maven-pro-v25-latin-regular.svg +++ /dev/null @@ -1,309 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/fonts/maven-pro-v25-latin-regular.ttf b/assets/fonts/maven-pro-v25-latin-regular.ttf deleted file mode 100644 index 7ae47250..00000000 Binary files a/assets/fonts/maven-pro-v25-latin-regular.ttf and /dev/null differ diff --git a/assets/fonts/maven-pro-v25-latin-regular.woff b/assets/fonts/maven-pro-v25-latin-regular.woff deleted file mode 100644 index f09894a3..00000000 Binary files a/assets/fonts/maven-pro-v25-latin-regular.woff and /dev/null differ diff --git a/assets/fonts/maven-pro-v25-latin-regular.woff2 b/assets/fonts/maven-pro-v25-latin-regular.woff2 deleted file mode 100644 index a0f7c224..00000000 Binary files a/assets/fonts/maven-pro-v25-latin-regular.woff2 and /dev/null differ diff --git a/assets/fonts/maven-pro-v28-latin-500.eot b/assets/fonts/maven-pro-v28-latin-500.eot deleted file mode 100644 index 2d5f146d..00000000 Binary files a/assets/fonts/maven-pro-v28-latin-500.eot and /dev/null differ diff --git a/assets/fonts/maven-pro-v28-latin-500.svg b/assets/fonts/maven-pro-v28-latin-500.svg deleted file mode 100644 index b7b46345..00000000 --- a/assets/fonts/maven-pro-v28-latin-500.svg +++ /dev/null @@ -1,310 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/fonts/maven-pro-v28-latin-500.ttf b/assets/fonts/maven-pro-v28-latin-500.ttf deleted file mode 100644 index 92b60f16..00000000 Binary files a/assets/fonts/maven-pro-v28-latin-500.ttf and /dev/null differ diff --git a/assets/fonts/maven-pro-v28-latin-500.woff b/assets/fonts/maven-pro-v28-latin-500.woff deleted file mode 100644 index b42a4720..00000000 Binary files a/assets/fonts/maven-pro-v28-latin-500.woff and /dev/null differ diff --git a/assets/fonts/maven-pro-v28-latin-500.woff2 b/assets/fonts/maven-pro-v28-latin-500.woff2 deleted file mode 100644 index d3ff3f7d..00000000 Binary files a/assets/fonts/maven-pro-v28-latin-500.woff2 and /dev/null differ diff --git a/assets/fonts/source-sans-pro-v14-latin-300.eot b/assets/fonts/source-sans-pro-v14-latin-300.eot deleted file mode 100644 index de78cdb4..00000000 Binary files a/assets/fonts/source-sans-pro-v14-latin-300.eot and /dev/null differ diff --git a/assets/fonts/source-sans-pro-v14-latin-300.svg b/assets/fonts/source-sans-pro-v14-latin-300.svg deleted file mode 100644 index 806471c8..00000000 --- a/assets/fonts/source-sans-pro-v14-latin-300.svg +++ /dev/null @@ -1,347 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/fonts/source-sans-pro-v14-latin-300.ttf b/assets/fonts/source-sans-pro-v14-latin-300.ttf deleted file mode 100644 index bc0d4778..00000000 Binary files a/assets/fonts/source-sans-pro-v14-latin-300.ttf and /dev/null differ diff --git a/assets/fonts/source-sans-pro-v14-latin-300.woff b/assets/fonts/source-sans-pro-v14-latin-300.woff deleted file mode 100644 index 98bafe5e..00000000 Binary files a/assets/fonts/source-sans-pro-v14-latin-300.woff and /dev/null differ diff --git a/assets/fonts/source-sans-pro-v14-latin-300.woff2 b/assets/fonts/source-sans-pro-v14-latin-300.woff2 deleted file mode 100644 index af998cac..00000000 Binary files a/assets/fonts/source-sans-pro-v14-latin-300.woff2 and /dev/null differ diff --git a/assets/fonts/source-sans-pro-v14-latin-600.eot b/assets/fonts/source-sans-pro-v14-latin-600.eot deleted file mode 100644 index 33758f7e..00000000 Binary files a/assets/fonts/source-sans-pro-v14-latin-600.eot and /dev/null differ diff --git a/assets/fonts/source-sans-pro-v14-latin-600.svg b/assets/fonts/source-sans-pro-v14-latin-600.svg deleted file mode 100644 index 3fda041c..00000000 --- a/assets/fonts/source-sans-pro-v14-latin-600.svg +++ /dev/null @@ -1,343 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/fonts/source-sans-pro-v14-latin-600.ttf b/assets/fonts/source-sans-pro-v14-latin-600.ttf deleted file mode 100644 index b6a2ca3d..00000000 Binary files a/assets/fonts/source-sans-pro-v14-latin-600.ttf and /dev/null differ diff --git a/assets/fonts/source-sans-pro-v14-latin-600.woff b/assets/fonts/source-sans-pro-v14-latin-600.woff deleted file mode 100644 index 0aba561d..00000000 Binary files a/assets/fonts/source-sans-pro-v14-latin-600.woff and /dev/null differ diff --git a/assets/fonts/source-sans-pro-v14-latin-600.woff2 b/assets/fonts/source-sans-pro-v14-latin-600.woff2 deleted file mode 100644 index cb0ea772..00000000 Binary files a/assets/fonts/source-sans-pro-v14-latin-600.woff2 and /dev/null differ diff --git a/assets/fonts/source-sans-pro-v14-latin-regular.eot b/assets/fonts/source-sans-pro-v14-latin-regular.eot deleted file mode 100644 index b2e2c25f..00000000 Binary files a/assets/fonts/source-sans-pro-v14-latin-regular.eot and /dev/null differ diff --git a/assets/fonts/source-sans-pro-v14-latin-regular.svg b/assets/fonts/source-sans-pro-v14-latin-regular.svg deleted file mode 100644 index 64f90f59..00000000 --- a/assets/fonts/source-sans-pro-v14-latin-regular.svg +++ /dev/null @@ -1,344 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/fonts/source-sans-pro-v14-latin-regular.ttf b/assets/fonts/source-sans-pro-v14-latin-regular.ttf deleted file mode 100644 index 7e73d277..00000000 Binary files a/assets/fonts/source-sans-pro-v14-latin-regular.ttf and /dev/null differ diff --git a/assets/fonts/source-sans-pro-v14-latin-regular.woff b/assets/fonts/source-sans-pro-v14-latin-regular.woff deleted file mode 100644 index 5b6e97be..00000000 Binary files a/assets/fonts/source-sans-pro-v14-latin-regular.woff and /dev/null differ diff --git a/assets/fonts/source-sans-pro-v14-latin-regular.woff2 b/assets/fonts/source-sans-pro-v14-latin-regular.woff2 deleted file mode 100644 index 36bdc0e3..00000000 Binary files a/assets/fonts/source-sans-pro-v14-latin-regular.woff2 and /dev/null differ diff --git a/assets/fonts/source-serif-pro-v11-latin-regular.eot b/assets/fonts/source-serif-pro-v11-latin-regular.eot deleted file mode 100644 index bc8b2694..00000000 Binary files a/assets/fonts/source-serif-pro-v11-latin-regular.eot and /dev/null differ diff --git a/assets/fonts/source-serif-pro-v11-latin-regular.svg b/assets/fonts/source-serif-pro-v11-latin-regular.svg deleted file mode 100644 index 755859f0..00000000 --- a/assets/fonts/source-serif-pro-v11-latin-regular.svg +++ /dev/null @@ -1,399 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/fonts/source-serif-pro-v11-latin-regular.ttf b/assets/fonts/source-serif-pro-v11-latin-regular.ttf deleted file mode 100644 index 5d236875..00000000 Binary files a/assets/fonts/source-serif-pro-v11-latin-regular.ttf and /dev/null differ diff --git a/assets/fonts/source-serif-pro-v11-latin-regular.woff b/assets/fonts/source-serif-pro-v11-latin-regular.woff deleted file mode 100644 index a8bf02f0..00000000 Binary files a/assets/fonts/source-serif-pro-v11-latin-regular.woff and /dev/null differ diff --git a/assets/fonts/source-serif-pro-v11-latin-regular.woff2 b/assets/fonts/source-serif-pro-v11-latin-regular.woff2 deleted file mode 100644 index 21093ec9..00000000 Binary files a/assets/fonts/source-serif-pro-v11-latin-regular.woff2 and /dev/null differ diff --git a/components/HeaderArea.vue b/components/HeaderArea.vue deleted file mode 100644 index 0ea88ab9..00000000 --- a/components/HeaderArea.vue +++ /dev/null @@ -1,62 +0,0 @@ - - - - - diff --git a/components/HeroArea.vue b/components/HeroArea.vue index 402e634c..ea67571f 100644 --- a/components/HeroArea.vue +++ b/components/HeroArea.vue @@ -67,7 +67,7 @@ $subtitle-line-height: 42px; } .title { - @apply flex flex-row justify-center font-serif text-primary2 font-bold; + @apply flex flex-row justify-center text-rui-text font-bold; @include text-size(66px, 84px); @include for-size(phone-only) { @@ -76,7 +76,7 @@ $subtitle-line-height: 42px; } .subtitle { - @apply flex flex-row justify-center font-sans font-light text-primary2; + @apply flex flex-row justify-center font-light text-rui-text; margin-top: 36px; diff --git a/components/LinksArea.vue b/components/LinksArea.vue deleted file mode 100644 index 78c56f41..00000000 --- a/components/LinksArea.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - - - diff --git a/components/account/CountrySelect.vue b/components/account/CountrySelect.vue index 995843bd..05394312 100644 --- a/components/account/CountrySelect.vue +++ b/components/account/CountrySelect.vue @@ -204,7 +204,7 @@ const css = useCssModule(); } .input { - @apply block border-shade10 box-border border-solid focus:outline-none focus:border-primary pr-2 px-3 appearance-none w-full bg-white; + @apply block border-rui-grey-300 box-border border-solid focus:outline-none focus:border-rui-primary pr-2 px-3 appearance-none w-full bg-white; margin-top: 8px; border-width: 1px; @@ -219,7 +219,7 @@ const css = useCssModule(); } &:focus-within ~ label { - @apply transform scale-75 -translate-y-4 text-primary3 duration-300; + @apply transform scale-75 -translate-y-4 text-rui-primary-darker duration-300; } &:not(.empty) { @@ -227,7 +227,7 @@ const css = useCssModule(); } &:not(.empty):not(:focus-within) ~ label { - @apply transform scale-75 -translate-y-4 text-label duration-300; + @apply transform scale-75 -translate-y-4 text-rui-text-secondary duration-300; } &:disabled { @@ -236,7 +236,7 @@ const css = useCssModule(); } .label { - @apply font-sans absolute top-4 text-label text-sm; + @apply absolute top-4 text-rui-text-secondary text-sm; } .dropdown { @@ -248,14 +248,14 @@ const css = useCssModule(); } .content { - @apply absolute bg-white max-h-60 border border-solid border-shade2 shadow-md overflow-auto z-10; + @apply absolute bg-white max-h-60 border border-solid border-rui-grey-200 shadow-md overflow-auto z-10; min-width: 280px; max-width: 280px; } .item { - @apply font-sans text-base text-shade11 p-2 block cursor-pointer; + @apply text-base text-rui-grey-800 p-2 block cursor-pointer; text-decoration: none; diff --git a/components/account/InputField.vue b/components/account/InputField.vue index 64895c34..172dc9c1 100644 --- a/components/account/InputField.vue +++ b/components/account/InputField.vue @@ -124,7 +124,7 @@ const slots = useSlots(); } .input:not(.filled) { - @apply block border-shade10 box-border border-solid focus:outline-none focus:border-primary py-2 px-3 appearance-none w-full bg-white; + @apply block border-rui-grey-300 box-border border-solid focus:outline-none focus:border-rui-primary py-2 px-3 appearance-none w-full bg-white; margin-top: 8px; border-width: 1px; @@ -139,11 +139,11 @@ const slots = useSlots(); } &:focus-within ~ label { - @apply transform scale-75 -translate-y-4 text-primary3 duration-300; + @apply transform scale-75 -translate-y-4 text-rui-primary-darker duration-300; } &:not(.empty):not(:focus-within) ~ label { - @apply transform scale-75 -translate-y-4 text-label duration-300; + @apply transform scale-75 -translate-y-4 text-rui-text-secondary duration-300; } @include for-size(phone-only) { @@ -161,11 +161,11 @@ const slots = useSlots(); } &:focus-within ~ label { - @apply transform scale-75 -translate-y-4 text-primary3 duration-300; + @apply transform scale-75 -translate-y-4 text-rui-primary-darker duration-300; } &:not(.empty):not(:focus-within) ~ label { - @apply transform scale-75 -translate-y-4 text-label duration-300; + @apply transform scale-75 -translate-y-4 text-rui-text-secondary duration-300; } } @@ -181,7 +181,7 @@ const slots = useSlots(); &::before, &::after { - @apply absolute bottom-0 w-0 bg-primary3 transition-all ease-in-out; + @apply absolute bottom-0 w-0 bg-rui-primary-darker transition-all ease-in-out; content: ''; height: 2px; @@ -231,7 +231,7 @@ const slots = useSlots(); } .label { - @apply font-sans absolute top-4 text-label text-sm; + @apply absolute top-4 text-rui-text-secondary text-sm; } .only-text label { diff --git a/components/account/home/CancelSubscription.vue b/components/account/home/CancelSubscription.vue index eacf2d6a..3de6770f 100644 --- a/components/account/home/CancelSubscription.vue +++ b/components/account/home/CancelSubscription.vue @@ -92,15 +92,15 @@ const css = useCssModule(); @import '@/assets/css/media.scss'; .actionButton { - @apply text-primary hover:text-yellow-500 focus:outline-none; + @apply text-rui-primary hover:text-yellow-500 focus:outline-none; } .title { - @apply font-sans text-primary2 font-bold text-xl; + @apply text-rui-text font-bold text-xl; } .text { - @apply font-sans text-primary2 whitespace-normal mt-4; + @apply text-rui-text whitespace-normal mt-4; @include text-size(16px, 24px); } diff --git a/components/account/home/ChangePassword.vue b/components/account/home/ChangePassword.vue index 09de73e3..6aba131b 100644 --- a/components/account/home/ChangePassword.vue +++ b/components/account/home/ChangePassword.vue @@ -141,6 +141,6 @@ const css = useCssModule(); } .success { - @apply flex flex-row ml-4 mt-6 text-shade11 transition duration-300 ease-in-out; + @apply flex flex-row ml-4 mt-6 text-rui-grey-800 transition duration-300 ease-in-out; } diff --git a/components/account/home/DangerZone.vue b/components/account/home/DangerZone.vue index e014f94d..7cdd2d19 100644 --- a/components/account/home/DangerZone.vue +++ b/components/account/home/DangerZone.vue @@ -109,10 +109,10 @@ const css = useCssModule(); } .warning { - @apply mb-2 text-shade11 font-bold; + @apply mb-2 text-rui-grey-800 font-bold; } .title { - @apply font-sans text-primary2 font-bold text-xl; + @apply text-rui-text font-bold text-xl; } diff --git a/components/account/home/ErrorNotification.vue b/components/account/home/ErrorNotification.vue index 636af211..f3c7564d 100644 --- a/components/account/home/ErrorNotification.vue +++ b/components/account/home/ErrorNotification.vue @@ -32,10 +32,10 @@ const css = useCssModule(); } .errorTitle { - @apply font-sans font-bold; + @apply font-bold; } .errorDescription { - @apply font-sans text-shade11; + @apply text-rui-grey-800; } diff --git a/components/account/home/PaymentsTable.vue b/components/account/home/PaymentsTable.vue index 428aed81..10b61ea4 100644 --- a/components/account/home/PaymentsTable.vue +++ b/components/account/home/PaymentsTable.vue @@ -89,6 +89,6 @@ const css = useCssModule(); } .actionButton { - @apply text-primary hover:text-yellow-600; + @apply text-rui-primary hover:text-yellow-600; } diff --git a/components/account/home/PremiumPlaceholder.vue b/components/account/home/PremiumPlaceholder.vue index ff897aee..e78dce67 100644 --- a/components/account/home/PremiumPlaceholder.vue +++ b/components/account/home/PremiumPlaceholder.vue @@ -37,6 +37,6 @@ const css = useCssModule(); } .link { - @apply hover:text-shade8 text-primary; + @apply hover:text-rui-text-secondary text-rui-primary; } diff --git a/components/account/login/LoginForm.vue b/components/account/login/LoginForm.vue index 0e6dfe52..26f5ca70 100644 --- a/components/account/login/LoginForm.vue +++ b/components/account/login/LoginForm.vue @@ -123,7 +123,7 @@ const css = useCssModule(); } .reset { - @apply flex flex-row justify-center text-primary focus:text-yellow-800 my-6; + @apply flex flex-row justify-center text-rui-primary focus:text-yellow-800 my-6; width: 100%; @@ -152,7 +152,7 @@ const css = useCssModule(); } .divider { - @apply border border-solid border-typography opacity-20; + @apply border border-solid border-rui-text opacity-20; width: 328px; } @@ -166,7 +166,7 @@ const css = useCssModule(); } .error { - @apply text-error text-xs tracking-tight; + @apply text-rui-error text-xs tracking-tight; } .errorWrapper { diff --git a/components/account/password/PasswordReset.vue b/components/account/password/PasswordReset.vue index b541609d..740dcbec 100644 --- a/components/account/password/PasswordReset.vue +++ b/components/account/password/PasswordReset.vue @@ -177,11 +177,11 @@ const css = useCssModule(); } .subtitle { - @apply font-sans text-primary2 font-medium text-center uppercase text-xs; + @apply text-rui-text font-medium text-center uppercase text-xs; } .list { - @apply text-xs list-disc pl-6 text-shade8; + @apply text-xs list-disc pl-6 text-rui-text-secondary; } .box { @@ -189,7 +189,7 @@ const css = useCssModule(); } .label { - @apply text-shade11 font-serif mb-4 text-lg; + @apply text-rui-grey-800 mb-4 text-lg; } .confirmation { diff --git a/components/account/signup/SignupForm.vue b/components/account/signup/SignupForm.vue index 313af20c..2da8738e 100644 --- a/components/account/signup/SignupForm.vue +++ b/components/account/signup/SignupForm.vue @@ -385,7 +385,7 @@ const css = useCssModule(); } .checkbox { - @apply h-5 w-5 text-primary; + @apply h-5 w-5 text-rui-primary; } .termsCheck { @@ -393,7 +393,7 @@ const css = useCssModule(); } .terms { - @apply ml-2 text-primary2; + @apply ml-2 text-rui-text; } .list { diff --git a/components/checkout/SelectionButton.vue b/components/checkout/SelectionButton.vue index feb96bb0..7968af1d 100644 --- a/components/checkout/SelectionButton.vue +++ b/components/checkout/SelectionButton.vue @@ -42,7 +42,7 @@ const css = useCssModule(); $color: #da4e24; .text { - @apply font-sans font-bold; + @apply font-bold; line-height: 19px; font-size: 16px; diff --git a/components/checkout/common/CheckoutDescription.vue b/components/checkout/common/CheckoutDescription.vue index 4912117c..09bd3c8c 100644 --- a/components/checkout/common/CheckoutDescription.vue +++ b/components/checkout/common/CheckoutDescription.vue @@ -10,7 +10,7 @@ const css = useCssModule(); diff --git a/components/checkout/common/PaymentFrame.vue b/components/checkout/common/PaymentFrame.vue index 7acddbb9..b143084b 100644 --- a/components/checkout/common/PaymentFrame.vue +++ b/components/checkout/common/PaymentFrame.vue @@ -116,7 +116,7 @@ const css = useCssModule(); } .action { - @apply text-primary3 text-center mt-3 mb-1; + @apply text-rui-primary-darker text-center mt-3 mb-1; } .action-wrapper { diff --git a/components/checkout/pay/AcceptRefundPolicy.vue b/components/checkout/pay/AcceptRefundPolicy.vue index 4bd8fc79..bbee1e64 100644 --- a/components/checkout/pay/AcceptRefundPolicy.vue +++ b/components/checkout/pay/AcceptRefundPolicy.vue @@ -22,6 +22,6 @@ const css = useCssModule(); diff --git a/components/checkout/pay/CryptoPaymentForm.vue b/components/checkout/pay/CryptoPaymentForm.vue index 004d658e..94df80cb 100644 --- a/components/checkout/pay/CryptoPaymentForm.vue +++ b/components/checkout/pay/CryptoPaymentForm.vue @@ -168,10 +168,10 @@ const css = useCssModule(); } .hint { - @apply text-shade8 mt-4 mb-4; + @apply text-rui-text-secondary mt-4 mb-4; } .info { - @apply font-bold mt-3 text-shade12; + @apply font-bold mt-3 text-rui-primary; } diff --git a/components/checkout/pay/HostedField.vue b/components/checkout/pay/HostedField.vue index ca0ba951..a889730e 100644 --- a/components/checkout/pay/HostedField.vue +++ b/components/checkout/pay/HostedField.vue @@ -63,7 +63,7 @@ const css = useCssModule(); } &.error ~ label { - @apply text-error; + @apply text-rui-error; } &.focused ~ label { @@ -71,7 +71,7 @@ const css = useCssModule(); } &.focused:not(.error) ~ label { - @apply text-primary3; + @apply text-rui-primary-darker; } &:not(.empty):not(.focused) ~ label { @@ -79,7 +79,7 @@ const css = useCssModule(); } &:not(.empty):not(.focused):not(.error) ~ label { - @apply text-label; + @apply text-rui-text-secondary; } } @@ -92,13 +92,13 @@ const css = useCssModule(); &.error { &::before, &::after { - @apply bg-error w-1/2; + @apply bg-rui-error w-1/2; } } &::before, &::after { - @apply absolute bottom-0 w-0 bg-primary3 transition-all ease-in-out; + @apply absolute bottom-0 w-0 bg-rui-primary-darker transition-all ease-in-out; content: ''; height: 2px; @@ -119,7 +119,7 @@ const css = useCssModule(); } .label { - @apply font-sans absolute top-3.5 text-label; + @apply absolute top-3.5 text-rui-text-secondary; font-size: 16px; line-height: 24px; diff --git a/components/checkout/pay/PlanOverview.vue b/components/checkout/pay/PlanOverview.vue index 3a897198..e086c95c 100644 --- a/components/checkout/pay/PlanOverview.vue +++ b/components/checkout/pay/PlanOverview.vue @@ -24,7 +24,7 @@ const css = useCssModule(); } .title { - @apply text-typography; + @apply text-rui-text; font-size: 18px; line-height: 21px; @@ -32,7 +32,7 @@ const css = useCssModule(); } .description { - @apply text-typography; + @apply text-rui-text; padding-top: 8px; font-size: 15px; diff --git a/components/checkout/payment-method/PaymentMethodItem.vue b/components/checkout/payment-method/PaymentMethodItem.vue index f2a2d079..a8a669a7 100644 --- a/components/checkout/payment-method/PaymentMethodItem.vue +++ b/components/checkout/payment-method/PaymentMethodItem.vue @@ -54,7 +54,7 @@ const css = useCssModule(); } .text { - @apply font-bold font-sans mt-2; + @apply font-bold mt-2; line-height: 28px; font-size: 24px; diff --git a/components/checkout/plan/ChangePlanDialog.vue b/components/checkout/plan/ChangePlanDialog.vue index 63502f2e..dd03110d 100644 --- a/components/checkout/plan/ChangePlanDialog.vue +++ b/components/checkout/plan/ChangePlanDialog.vue @@ -93,7 +93,7 @@ const css = useCssModule(); } .plan { - @apply font-sans rounded focus:outline-none px-4 py-2 my-2 border-primary3 border-2; + @apply rounded focus:outline-none px-4 py-2 my-2 border-rui-primary-darker border-2; background-position: center; transition: background 0.8s; @@ -105,7 +105,7 @@ const css = useCssModule(); } &:not(.disabled):active { - @apply bg-primary3; + @apply bg-rui-primary-darker; background-size: 100%; transition: background 0s; diff --git a/components/checkout/plan/PlanSelection.vue b/components/checkout/plan/PlanSelection.vue index 299e5f1d..41f2b5c2 100644 --- a/components/checkout/plan/PlanSelection.vue +++ b/components/checkout/plan/PlanSelection.vue @@ -105,7 +105,7 @@ const css = useCssModule(); } .hint { - @apply mt-4 text-base italic h-5 text-typography; + @apply mt-4 text-base italic h-5 text-rui-text; } .continue { diff --git a/components/checkout/plan/SelectablePlan.vue b/components/checkout/plan/SelectablePlan.vue index 091eec76..fb665e83 100644 --- a/components/checkout/plan/SelectablePlan.vue +++ b/components/checkout/plan/SelectablePlan.vue @@ -97,7 +97,7 @@ const css = useCssModule(); } .emphasis { - @apply font-sans font-bold; + @apply font-bold; font-size: 28px; line-height: 33px; diff --git a/components/common/ActionButton.vue b/components/common/ActionButton.vue index 557c1e42..c163c46c 100644 --- a/components/common/ActionButton.vue +++ b/components/common/ActionButton.vue @@ -57,7 +57,7 @@ const css = useCssModule(); @import '@/assets/css/main.scss'; .button { - @apply relative overflow-hidden transition transform hover:scale-110; + @apply relative overflow-hidden transition transform hover:scale-110 font-bold; &::after { content: ''; @@ -80,7 +80,7 @@ const css = useCssModule(); } .small { - @apply font-sans rounded focus:outline-none px-4 bg-primary3 font-bold; + @apply rounded focus:outline-none px-4 bg-rui-primary-darker font-bold; $button-height: 48px; @@ -94,7 +94,7 @@ const css = useCssModule(); } .large { - @apply font-serif uppercase rounded-full border-2 focus:outline-none focus:ring-1 focus:ring-shade12 focus:ring-opacity-75; + @apply uppercase rounded-full border-2 focus:outline-none focus:ring-1 focus:ring-rui-primary focus:ring-opacity-75; $button-height: 65px; $button-width: 275px; @@ -111,12 +111,12 @@ const css = useCssModule(); .large:disabled, .small:disabled { - @apply bg-shade5 hover:bg-shade5; + @apply bg-rui-grey-400 hover:bg-rui-grey-400; } .loading:disabled, .primary { - @apply text-white bg-primary font-bold; + @apply text-white bg-rui-primary; } .warning { @@ -124,11 +124,11 @@ const css = useCssModule(); } .secondary { - @apply text-primary border-primary hover:bg-shade1 font-bold; + @apply text-rui-primary border-rui-primary hover:bg-rui-grey-100; } .filled { - @apply text-primary border-transparent hover:bg-shade1 bg-white; + @apply text-rui-primary border-transparent hover:bg-rui-grey-100 bg-white; } .row { diff --git a/components/common/BoxContainer.vue b/components/common/BoxContainer.vue index 99023674..b65ed317 100644 --- a/components/common/BoxContainer.vue +++ b/components/common/BoxContainer.vue @@ -27,6 +27,6 @@ const css = useCssModule(); } .label { - @apply text-typography font-serif mb-6 font-bold text-2xl; + @apply text-rui-text mb-6 font-bold text-2xl; } diff --git a/components/common/CopyButton.vue b/components/common/CopyButton.vue index b7161ac3..83ee1714 100644 --- a/components/common/CopyButton.vue +++ b/components/common/CopyButton.vue @@ -33,7 +33,7 @@ const css = useCssModule(); diff --git a/components/common/LinkText.vue b/components/common/LinkText.vue index a991981e..c18c7d45 100644 --- a/components/common/LinkText.vue +++ b/components/common/LinkText.vue @@ -14,7 +14,7 @@ const css = useCssModule(); @import '@/assets/css/media.scss'; .column { - @apply flex flex-col font-sans uppercase justify-center text-primary2; + @apply flex flex-col uppercase justify-center text-rui-text; margin-left: 16px; margin-right: 16px; @@ -26,6 +26,6 @@ const css = useCssModule(); } .link { - @apply hover:text-shade8; + @apply hover:text-rui-text-secondary; } diff --git a/components/common/PageContainer.vue b/components/common/PageContainer.vue index 39cfc318..0fd61248 100644 --- a/components/common/PageContainer.vue +++ b/components/common/PageContainer.vue @@ -18,15 +18,6 @@ const slots = useSlots(); @@ -61,7 +50,7 @@ const slots = useSlots(); } .subtitle { - @apply font-sans text-primary2 font-medium text-center uppercase text-base; + @apply text-rui-text font-medium text-center uppercase text-base; } .content.center-vertically { @@ -93,7 +82,7 @@ const slots = useSlots(); } .hint { - @apply items-center text-justify w-full bottom-10 text-shade8 text-sm sm:p-2 sm:bottom-2; + @apply items-center text-justify w-full bottom-10 text-rui-text-secondary text-sm sm:p-2 sm:bottom-2; div { @apply ml-auto mr-auto max-w-lg; diff --git a/components/common/Recaptcha.client.vue b/components/common/Recaptcha.client.vue index 1e14914d..bd6fb129 100644 --- a/components/common/Recaptcha.client.vue +++ b/components/common/Recaptcha.client.vue @@ -98,6 +98,6 @@ onMounted(() => { } .error { - @apply text-xs font-sans text-[#e53935] mt-2; + @apply text-xs text-[#e53935] mt-2; } diff --git a/components/common/TextHeading.vue b/components/common/TextHeading.vue index ae73d528..48007d8d 100644 --- a/components/common/TextHeading.vue +++ b/components/common/TextHeading.vue @@ -33,7 +33,7 @@ const css = useCssModule(); @import '@/assets/css/main.scss'; .heading { - @apply font-serif text-primary2 font-bold text-2xl; + @apply text-rui-text font-bold text-2xl; &:not(.no-margin) { @apply mt-6; @@ -41,7 +41,7 @@ const css = useCssModule(); } .secondary { - @apply font-serif text-primary2 font-bold text-xl; + @apply text-rui-text font-bold text-xl; &:not(.no-margin) { @apply mt-6; @@ -51,7 +51,7 @@ const css = useCssModule(); } .subheading { - @apply font-serif text-primary2 font-medium text-lg; + @apply text-rui-text font-medium text-lg; &:not(.no-margin) { @apply mt-4; diff --git a/components/common/TextParagraph.vue b/components/common/TextParagraph.vue index 1be7cc01..f29ce517 100644 --- a/components/common/TextParagraph.vue +++ b/components/common/TextParagraph.vue @@ -27,7 +27,7 @@ const css = useCssModule(); @import '@/assets/css/main.scss'; .text { - @apply font-sans text-shade11 text-justify; + @apply text-rui-grey-800 text-justify; margin-top: 16px; diff --git a/components/common/UserActionMessage.vue b/components/common/UserActionMessage.vue index beaa6201..c3c10499 100644 --- a/components/common/UserActionMessage.vue +++ b/components/common/UserActionMessage.vue @@ -13,10 +13,10 @@ const css = useCssModule(); diff --git a/components/common/VisibilityButton.vue b/components/common/VisibilityButton.vue index f0bccd81..69143767 100644 --- a/components/common/VisibilityButton.vue +++ b/components/common/VisibilityButton.vue @@ -49,6 +49,6 @@ const css = useCssModule(); .button { @apply focus:outline-none flex items-center justify-center; - @apply w-10 h-10 rounded-full hover:bg-shade1 transition disabled:text-gray-400 disabled:cursor-not-allowed; + @apply w-10 h-10 rounded-full hover:bg-rui-grey-100 transition disabled:text-gray-400 disabled:cursor-not-allowed; } diff --git a/components/common/status/BaseDisplay.vue b/components/common/status/BaseDisplay.vue index fb37eb4e..7198e3ad 100644 --- a/components/common/status/BaseDisplay.vue +++ b/components/common/status/BaseDisplay.vue @@ -74,12 +74,12 @@ const css = useCssModule(); } .title { - @apply font-sans font-bold flex flex-row justify-center mb-4 text-2xl leading-7; + @apply font-bold flex flex-row justify-center mb-4 text-2xl leading-7; letter-spacing: 0; } .message { - @apply font-sans break-words leading-5 text-lg font-medium; + @apply break-words leading-5 text-lg font-medium; } diff --git a/components/content/ProseA.vue b/components/content/ProseA.vue index 3fc2636a..b9e696ba 100644 --- a/components/content/ProseA.vue +++ b/components/content/ProseA.vue @@ -23,6 +23,6 @@ const css = useCssModule(); diff --git a/components/content/ProseAddress.vue b/components/content/ProseAddress.vue index 73fd7e3a..96016bf3 100644 --- a/components/content/ProseAddress.vue +++ b/components/content/ProseAddress.vue @@ -11,6 +11,6 @@ const slots = useSlots(); diff --git a/components/content/ProseH2.vue b/components/content/ProseH2.vue index 72bafd16..89d7e420 100644 --- a/components/content/ProseH2.vue +++ b/components/content/ProseH2.vue @@ -28,7 +28,7 @@ const css = useCssModule(); diff --git a/components/footer/FooterIconLinks.vue b/components/footer/FooterIconLinks.vue index 51e8260d..61221cd0 100644 --- a/components/footer/FooterIconLinks.vue +++ b/components/footer/FooterIconLinks.vue @@ -1,49 +1,45 @@ - - diff --git a/components/footer/FooterLegalese.vue b/components/footer/FooterLegalese.vue index d72908a6..f3a59610 100644 --- a/components/footer/FooterLegalese.vue +++ b/components/footer/FooterLegalese.vue @@ -1,30 +1,32 @@ - - - - diff --git a/components/footer/PageFooter.vue b/components/footer/PageFooter.vue index b12eccd1..fc6a6756 100644 --- a/components/footer/PageFooter.vue +++ b/components/footer/PageFooter.vue @@ -1,79 +1,20 @@ - - diff --git a/components/header/HeaderLinks.vue b/components/header/HeaderLinks.vue new file mode 100644 index 00000000..3327a1de --- /dev/null +++ b/components/header/HeaderLinks.vue @@ -0,0 +1,53 @@ + + + diff --git a/components/header/PageHeader.vue b/components/header/PageHeader.vue new file mode 100644 index 00000000..177d575f --- /dev/null +++ b/components/header/PageHeader.vue @@ -0,0 +1,21 @@ + + + diff --git a/components/hero/UseApp.vue b/components/hero/UseApp.vue index 1cf654ef..8f12487e 100644 --- a/components/hero/UseApp.vue +++ b/components/hero/UseApp.vue @@ -95,7 +95,7 @@ const css = useCssModule(); } .text { - @apply flex-col text-shade8 font-regular align-middle; + @apply flex-col text-rui-text-secondary align-middle; @include text-size(32px, 50px); } diff --git a/components/hero/blocks/InfoBox.vue b/components/hero/blocks/InfoBox.vue index 553f6486..3abd9099 100644 --- a/components/hero/blocks/InfoBox.vue +++ b/components/hero/blocks/InfoBox.vue @@ -26,7 +26,7 @@ const css = useCssModule(); } .title { - @apply flex-col font-serif text-primary2 text-4xl font-bold; + @apply flex-col text-rui-text text-4xl font-bold; letter-spacing: -0.01em; @@ -34,7 +34,7 @@ const css = useCssModule(); } .subtitle { - @apply flex-col font-sans text-primary2 text-center; + @apply flex-col text-rui-text text-center; @include text-size(24px, 30px); } diff --git a/components/plans/AvailablePlans.vue b/components/plans/AvailablePlans.vue index b5530fa7..c3d6b6c8 100644 --- a/components/plans/AvailablePlans.vue +++ b/components/plans/AvailablePlans.vue @@ -30,7 +30,7 @@ const css = useCssModule(); } .header { - @apply font-bold font-serif text-primary2; + @apply font-bold text-rui-text; text-align: center; letter-spacing: -0.03em; diff --git a/components/plans/blocks/PlanBox.vue b/components/plans/blocks/PlanBox.vue index 6da98e8b..cd821c5a 100644 --- a/components/plans/blocks/PlanBox.vue +++ b/components/plans/blocks/PlanBox.vue @@ -52,7 +52,7 @@ const css = useCssModule(); } .title { - @apply font-bold text-primary2 font-serif text-center; + @apply font-bold text-rui-text text-center; letter-spacing: -0.01em; @@ -60,7 +60,7 @@ const css = useCssModule(); } .description { - @apply font-sans text-center text-primary2 flex flex-col self-center; + @apply text-center text-rui-text flex flex-col self-center; margin-top: 45px; max-width: 370px; diff --git a/components/plans/details/CustomPlan.vue b/components/plans/details/CustomPlan.vue index 01fdabca..29e62a34 100644 --- a/components/plans/details/CustomPlan.vue +++ b/components/plans/details/CustomPlan.vue @@ -45,7 +45,7 @@ const css = useCssModule(); } .title { - @apply font-bold font-serif text-shade11; + @apply font-bold text-rui-grey-800; letter-spacing: -0.03em; @@ -53,7 +53,7 @@ const css = useCssModule(); } .description { - @apply font-sans text-primary2 flex flex-col; + @apply text-rui-text flex flex-col; margin-top: 22px; diff --git a/components/premium/PremiumFeatures.vue b/components/premium/PremiumFeatures.vue index ce32f51e..32040fc7 100644 --- a/components/premium/PremiumFeatures.vue +++ b/components/premium/PremiumFeatures.vue @@ -46,7 +46,7 @@ const css = useCssModule(); } .wrapper { - @apply bg-primary2 bg-repeat; + @apply bg-rui-primary-darker; padding-bottom: 100px; @@ -60,7 +60,7 @@ const css = useCssModule(); } .title { - @apply text-primary font-serif font-bold; + @apply text-rui-primary-lighter font-bold; padding-top: 91px; margin-bottom: 10px; diff --git a/components/premium/blocks/PremiumFeature.vue b/components/premium/blocks/PremiumFeature.vue index 1d616a51..541a96dc 100644 --- a/components/premium/blocks/PremiumFeature.vue +++ b/components/premium/blocks/PremiumFeature.vue @@ -50,7 +50,7 @@ const css = useCssModule(); } .title { - @apply font-bold font-serif text-white; + @apply font-bold text-white; margin-bottom: 38px; letter-spacing: -0.01em; @@ -59,7 +59,7 @@ const css = useCssModule(); } .description { - @apply font-sans font-light text-white; + @apply font-light text-white; @include text-size(24px, 30px); } diff --git a/components/products/ProductDescription.vue b/components/products/ProductDescription.vue index a0e146ce..1bc73bcf 100644 --- a/components/products/ProductDescription.vue +++ b/components/products/ProductDescription.vue @@ -59,10 +59,10 @@ const slots = useSlots(); } .title { - @apply font-serif text-3xl text-typography font-medium mt-4 lg:mt-0; + @apply text-3xl text-rui-text font-medium mt-4 lg:mt-0; } .description { - @apply font-sans text-typography text-base mt-4 text-justify; + @apply text-rui-text text-base mt-4 text-justify; } diff --git a/components/products/ProductDetailDescription.vue b/components/products/ProductDetailDescription.vue index 17fcedf9..1ef70d98 100644 --- a/components/products/ProductDetailDescription.vue +++ b/components/products/ProductDetailDescription.vue @@ -35,10 +35,10 @@ const css = useCssModule(); } .title { - @apply font-serif text-xl text-typography font-medium mt-4 lg:mt-0; + @apply text-xl text-rui-text font-medium mt-4 lg:mt-0; } .description { - @apply font-sans text-typography text-base mt-4 text-justify; + @apply text-rui-text text-base mt-4 text-justify; } diff --git a/components/products/ProductsDetailPage.vue b/components/products/ProductsDetailPage.vue index 42147d0d..b388c989 100644 --- a/components/products/ProductsDetailPage.vue +++ b/components/products/ProductsDetailPage.vue @@ -233,7 +233,7 @@ const css = useCssModule(); @import '@/assets/css/main.scss'; .title { - @apply font-serif font-bold text-3xl text-typography; + @apply font-bold text-3xl text-rui-text; } .details { @@ -245,7 +245,7 @@ const css = useCssModule(); &::before { content: ''; - @apply absolute w-16 h-1 bg-primary left-1/2 top-full transform -translate-x-1/2; + @apply absolute w-16 h-1 bg-rui-primary left-1/2 top-full transform -translate-x-1/2; } } diff --git a/components/products/ProductsPage.vue b/components/products/ProductsPage.vue index bad470eb..544628a2 100644 --- a/components/products/ProductsPage.vue +++ b/components/products/ProductsPage.vue @@ -95,7 +95,7 @@ const css = useCssModule(); @import '@/assets/css/main.scss'; .title { - @apply font-serif font-bold text-3xl text-typography; + @apply font-bold text-3xl text-rui-text; } .details { diff --git a/error.vue b/error.vue index 3ddf782c..74e93a4a 100644 --- a/error.vue +++ b/error.vue @@ -41,10 +41,10 @@ useHead(() => ({ @apply text-center my-24; } .title { - @apply block font-serif text-red-500 font-bold text-6xl; + @apply block text-red-500 font-bold text-6xl; } .subtitle { - @apply block font-sans font-light text-primary2 my-8 text-3xl; + @apply block font-light text-rui-text my-8 text-3xl; } diff --git a/layouts/default.vue b/layouts/default.vue index 56a8b72d..faed4911 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,5 +1,5 @@ diff --git a/layouts/jobs.vue b/layouts/jobs.vue index 587e1ed1..e2e17b67 100644 --- a/layouts/jobs.vue +++ b/layouts/jobs.vue @@ -42,10 +42,10 @@ await loadJobs(); } .link { - @apply text-xs font-bold uppercase px-5 py-3 border-primary border rounded block leading-normal text-primary; + @apply text-xs font-bold uppercase px-5 py-3 border-rui-primary border rounded block leading-normal text-rui-primary; } .active { - @apply text-white bg-primary; + @apply text-white bg-rui-primary; } diff --git a/nuxt.config.ts b/nuxt.config.ts index 4595c0ed..e9d677d8 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -80,7 +80,6 @@ export default defineNuxtConfig({ }, }, - css: [], ssr: true, components: [{ path: '~/components', pathPrefix: false }], diff --git a/package.json b/package.json index 70b9c442..a8699462 100644 --- a/package.json +++ b/package.json @@ -45,10 +45,12 @@ "devDependencies": { "@commitlint/cli": "17.6.6", "@commitlint/config-conventional": "17.6.6", + "@fontsource/roboto": "5.0.5", "@nuxt/content": "2.7.0", "@nuxt/devtools": "0.6.7", "@nuxtjs/i18n": "8.0.0-beta.12", "@rotki/eslint-config": "1.1.0", + "@rotki/ui-library": "file:/Users/lukicenturi/Sites/ui-library", "@types/braintree-web": "3.75.23", "@types/paypal-checkout-components": "4.0.5", "@types/qrcode": "1.5.1", diff --git a/pages/index.vue b/pages/index.vue index b6093dbe..34d2cbfb 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -26,12 +26,10 @@ const { visible } = useOverflow(); diff --git a/pages/maintenance.vue b/pages/maintenance.vue index 3cf11fb2..7b1e2836 100644 --- a/pages/maintenance.vue +++ b/pages/maintenance.vue @@ -55,7 +55,7 @@ const css = useCssModule(); } .link { - @apply text-primary hover:text-primary3 font-bold; + @apply text-rui-primary hover:text-rui-primary-darker font-bold; } .heading { @@ -63,6 +63,6 @@ const css = useCssModule(); } .description { - @apply font-sans text-typography text-base mt-8 text-center text-xl; + @apply text-rui-text text-base mt-8 text-center text-xl; } diff --git a/plugins/ui-library.ts b/plugins/ui-library.ts new file mode 100644 index 00000000..352a7e7b --- /dev/null +++ b/plugins/ui-library.ts @@ -0,0 +1,21 @@ +import { + RiDiscordLine, + RiExternalLinkLine, + RiGithubLine, + RiMailSendLine, + RiTwitterLine, + RuiPlugin, +} from '@rotki/ui-library'; + +export default defineNuxtPlugin((nuxtApp) => { + nuxtApp.vueApp.use(RuiPlugin, { + mode: 'light', + icons: [ + RiExternalLinkLine, + RiGithubLine, + RiTwitterLine, + RiDiscordLine, + RiMailSendLine, + ], + }); +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8508a41d..144863a6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -67,6 +67,9 @@ devDependencies: '@commitlint/config-conventional': specifier: 17.6.6 version: 17.6.6 + '@fontsource/roboto': + specifier: 5.0.5 + version: 5.0.5 '@nuxt/content': specifier: 2.7.0 version: 2.7.0 @@ -79,6 +82,9 @@ devDependencies: '@rotki/eslint-config': specifier: 1.1.0 version: 1.1.0(eslint@8.45.0)(vue@3.3.4) + '@rotki/ui-library': + specifier: file:/Users/lukicenturi/Sites/ui-library + version: file:../ui-library(@fontsource/roboto@5.0.5)(vue@3.3.4) '@types/braintree-web': specifier: 3.75.23 version: 3.75.23 @@ -1188,6 +1194,10 @@ packages: resolution: {integrity: sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + /@fontsource/roboto@5.0.5: + resolution: {integrity: sha512-IMXFq5AMgGx0sgNLfwWsmPuy3qa7lmDmQcXXihqwF4mT2UpD725cbxZj93ERY793OWon+6V1ANax02I3nt9+4w==} + dev: true + /@hapi/hoek@9.3.0: resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==} dev: true @@ -12846,3 +12856,17 @@ packages: /zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} dev: true + + file:../ui-library(@fontsource/roboto@5.0.5)(vue@3.3.4): + resolution: {directory: ../ui-library, type: directory} + id: file:../ui-library + name: '@rotki/ui-library' + engines: {pnpm: '>=8 <9'} + requiresBuild: true + peerDependencies: + '@fontsource/roboto': '>=5.0.5' + vue: '>=3.3.4' + dependencies: + '@fontsource/roboto': 5.0.5 + vue: 3.3.4 + dev: true diff --git a/public/img/background.svg b/public/img/background.svg deleted file mode 100644 index a3ab8672..00000000 --- a/public/img/background.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/tailwind.config.cjs b/tailwind.config.cjs index a20ecc14..d53daeac 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,4 +1,5 @@ module.exports = { + presets: [require('@rotki/ui-library/dist/tailwind.config.cjs')], content: [ './components/**/*.{vue,js,ts}', './layouts/**/*.vue', @@ -10,40 +11,6 @@ module.exports = { container: { center: true, }, - extend: { - zIndex: { - '-1': '-1', - }, - colors: { - background: '#F9FAFB', - shade1: '#edf0f3', - shade2: '#E6E6E6', - shade5: '#BFBFBF', - shade8: '#808080', - shade7: '#7E7E91', - shade10: '#B6B6D1', - shade11: '#404040', - shade12: '#E36039', - title: '#3d3d46', - typography: '#212529', - primary: '#D65C36', - primary2: '#3D3D46', - primary3: '#da4e24', - label: '#878787', - error: '#B00020', - }, - backgroundImage: () => ({ - 'rotki-pattern': "url('/img/background.svg')", - 'rotki-logo': "url('/img/rotki.svg')", - 'crypto-pattern': "url('/img/crypto.svg')", - }), - fontFamily: { - sans: ['Source Sans Pro', 'sans-serif'], - serif: ['Maven Pro', 'serif'], - regular: ['Maven Pro', 'serif'], - source: ['Source Serif Pro', 'serif'], - }, - }, }, variants: { extend: {},