aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/css/itcss/settings
diff options
context:
space:
mode:
authorChi Kei Chan <chikeichan@gmail.com>2019-04-17 03:35:22 +0800
committerDan J Miller <danjm.com@gmail.com>2019-04-17 03:35:22 +0800
commit92c03bdff2281b5901151ad0840b83e40dad73bc (patch)
treebec5a94c8dd191269d927523b6495e5fe37e6235 /ui/app/css/itcss/settings
parentfb22fb12cafec238a2143df6e94218c890e4ba4e (diff)
downloadtangerine-wallet-browser-92c03bdff2281b5901151ad0840b83e40dad73bc.tar.gz
tangerine-wallet-browser-92c03bdff2281b5901151ad0840b83e40dad73bc.tar.zst
tangerine-wallet-browser-92c03bdff2281b5901151ad0840b83e40dad73bc.zip
Update buttons & colors to match design system (#6446)
* Refactoring button styles * renaming buttons * Add Link and Button styles * Update new btn styles and storybook * Fix tests * Change font weight; Update storybook * Fix linter
Diffstat (limited to 'ui/app/css/itcss/settings')
-rw-r--r--ui/app/css/itcss/settings/typography.scss37
-rw-r--r--ui/app/css/itcss/settings/variables.scss18
2 files changed, 54 insertions, 1 deletions
diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss
index 18c444c8a..93107a106 100644
--- a/ui/app/css/itcss/settings/typography.scss
+++ b/ui/app/css/itcss/settings/typography.scss
@@ -403,3 +403,40 @@
font-weight: 400;
font-style: normal;
}
+
+@mixin fontScale($weight: 400, $size: 1rem) {
+ font-weight: $weight;
+ font-size: $size;
+}
+
+@mixin h1($weight: 400, $size: 2.5rem){
+ @include fontScale($weight, $size);
+}
+
+@mixin h2($weight: 400, $size: 2rem){
+ @include fontScale($weight, $size);
+}
+
+@mixin h3($weight: 400, $size: 1.5rem){
+ @include fontScale($weight, $size);
+}
+
+@mixin h4($weight: 400, $size: 1.125rem){
+ @include fontScale($weight, $size);
+}
+
+@mixin h5($weight: 400, $size: 1rem){
+ @include fontScale($weight, $size);
+}
+
+@mixin h6($weight: 400, $size: .875rem){
+ @include fontScale($weight, $size);
+}
+
+@mixin h7($weight: 400, $size: .75rem){
+ @include fontScale($weight, $size);
+}
+
+@mixin paragraph($weight: 400, $size: 1rem){
+ @include fontScale($weight, $size);
+}
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 89bd8b96a..f7003b1f4 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -26,7 +26,7 @@ $dusty-gray: #9b9b9b;
$alto: #dedede;
$alabaster: #fafafa;
$silver-chalice: #aeaeae;
-$curious-blue: #2f9ae0;
+$curious-blue: #037DD6;
$concrete: #f3f3f3;
$tundora: #4d4d4d;
$nile-blue: #1b344d;
@@ -93,3 +93,19 @@ $break-large: 576px;
$primary-font-type: Roboto;
+$Blue-000: #eaf6ff;
+$Blue-400: #1098fc;
+$Blue-500: #037DD6;
+$Blue-600: #0260a4;
+
+$Grey-000: #f2f3f4;
+$Grey-500: #6A737D;
+
+$Red-000: #fcf2f3;
+$Red-500: #D73A49;
+$Red-600: #b92534;
+
+$Orange-000: #fef5ef;
+$Orange-500: #F66A0A;
+
+