diff --git a/README.md b/README.md
index 0e046f7fbc10fa7842013211aa0bb36319e77ccf..a625b375bbdaf8389b71cb601d673d2fe3e737d9 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ Use the component's HTML tag wherever you want:
login-url=""
logout-url=""
session-endpoint=""
- open-right=""
+ open-right
>
</myuw-profile>
```
@@ -32,3 +32,10 @@ Use the component's HTML tag wherever you want:
#### Slots
- **Profile Navigation Item (nav-item):** Add a custom item to the profile button's navigation menu, this slot expects an `<a>` tag
+
+#### CSS Variables
+
+- `--myuw-profile-font`: Set the font stack for this component
+- `--myuw-profile-login-color`: Se the font color for the "Login" button
+
+For more information about CSS variables and how they work with MyUW Web Components, [reference the styles component](https://github.com/myuw-web-components/myuw-app-styles "reference the styles component")
\ No newline at end of file
diff --git a/index.html b/index.html
index 651dfc6607c22dbc75e22b9752a651a69e862600..830c3f94f852b519fd3ba59b82be91ba2cd3a37b 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
margin: 0;
}
</style>
+ <script src="https://unpkg.com/@myuw-web-components/myuw-app-styles/myuw-app-styles.js"></script>
<link rel="import" href="https://unpkg.com/@myuw-web-components/myuw-app-bar@1.0.0/myuw-app-bar.html">
<link rel="import" href="myuw-profile.html">
diff --git a/myuw-profile.html b/myuw-profile.html
index bff2d37a48ec16e7ec9f2a7261a154d3f753362b..5f3eb2c96f43820c30694ebbeb769e51a14ed1e2 100644
--- a/myuw-profile.html
+++ b/myuw-profile.html
@@ -1,11 +1,11 @@
<!DOCTYPE html>
<template id="myuw-profile-template">
<style>
- #myuw-profile-login {
- font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
+ #myuw-profile-login {
+ font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );
text-transform: uppercase;
text-decoration: none;
- color: white;
+ color: var( --myuw-profile-login-color, var(--myuw-primary-color, white) );
padding: 10px 13px;
font-weight: bold;
letter-spacing: 0px;
@@ -35,7 +35,7 @@
margin: 0;
font-weight: 500;
font-size: 18px;
- font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
+ font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );
user-select: none;
color: white;
text-transform: capitalize;
@@ -54,7 +54,6 @@
position: absolute;
top: 45px;
right: 0;
- background-color:white;
min-width: 320px;
color: black;
list-style: none;
@@ -95,7 +94,7 @@
transition: all .3s ease;
position: relative;
font-size: 15px;
- font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
+ font-family: var( --myuw-profile-font, var(--myuw-font, 'Montserrat', 'Roboto', Arial, sans-serif) );
display: block;
padding: 14px 16px;
color: black;