Upd

deskpro · Jun 19, 2019 · c54d7cd · c54d7cd
1 parent b4ca906
commit c54d7cd
Show file tree

Hide file tree

Showing 26 changed files with 1,277 additions and 427 deletions.
diff --git a/packages/style/dist/fonts.css b/packages/style/dist/fonts.css
diff --git a/packages/style/dist/style.css b/packages/style/dist/style.css
diff --git a/packages/style/docs/components/dp-po-Avatars.md b/packages/style/docs/components/dp-po-Avatars.md
@@ -6,24 +6,24 @@ sidebar_label: Avatars
 
 <h4>avatar</h4>
 <span class="dp-po-Avatar">
-	<img class="dp-po-Avatar-icon" src="/img/docs/avatar.png" alt="">
+	<img class="dp-po-Avatar-icon" src="../../img/docs/avatar.png" alt="">
 </span>
 
 <h4>avatar/medium</h4>
 <span class="dp-po-Avatar Avatar--medium">
-	<img class="dp-po-Avatar-icon" src="/img/docs/avatar.png" alt="">
+	<img class="dp-po-Avatar-icon" src="../../img/docs/avatar.png" alt="">
 	<span class="dp-po-Avatar-name">Name Surname</span>
 </span>
 
 <h4>avatar/small</h4>
 <span class="dp-po-Avatar Avatar--small">
-	<img class="dp-po-Avatar-icon" src="/img/docs/avatar.png" alt="">
+	<img class="dp-po-Avatar-icon" src="../../img/docs/avatar.png" alt="">
 	<span class="dp-po-Avatar-name">Name Surname</span>
 </span>
 
 <h4>avatar/small/caret</h4>
 <span class="dp-po-Avatar Avatar--small">
-	<img class="dp-po-Avatar-icon" src="/img/docs/avatar.png" alt="">
+	<img class="dp-po-Avatar-icon" src="../../img/docs/avatar.png" alt="">
 	<span class="dp-po-Avatar-name">Name Surname</span>
 	<span class="dp-po-arrow arrow--bottom arrow--brand-primary"></span>
 </span>
@@ -32,24 +32,24 @@ sidebar_label: Avatars
 
 <h4>avatar/circular</h4>
 <span class="dp-po-Avatar Avatar--circle">
-	<img class="dp-po-Avatar-icon" src="/img/docs/avatar-circular.png" alt="">
+	<img class="dp-po-Avatar-icon" src="../../img/docs/avatar-circular.png" alt="">
 </span>
 
 <h4>avatar/circular/medium</h4>
 <span class="dp-po-Avatar Avatar--medium Avatar--circle">
-	<img class="dp-po-Avatar-icon" src="/img/docs/avatar-circular.png" alt="">
+	<img class="dp-po-Avatar-icon" src="../../img/docs/avatar-circular.png" alt="">
 	<span class="dp-po-Avatar-name">Name Surname</span>
 </span>
 
 <h4>avatar/circular/small</h4>
 <span class="dp-po-Avatar Avatar--small Avatar--circle">
-	<img class="dp-po-Avatar-icon" src="/img/docs/avatar-circular.png" alt="">
+	<img class="dp-po-Avatar-icon" src="../../img/docs/avatar-circular.png" alt="">
 	<span class="dp-po-Avatar-name">Name Surname</span>
 </span>
 
 <h4>avatar/circular/small/caret</h4>
 <span class="dp-po-Avatar Avatar--small Avatar--circle">
-	<img class="dp-po-Avatar-icon" src="/img/docs/avatar-circular.png" alt="">
+	<img class="dp-po-Avatar-icon" src="../../img/docs/avatar-circular.png" alt="">
 	<span class="dp-po-Avatar-name">Name Surname</span>
 	<span class="dp-po-arrow arrow--bottom arrow--brand-primary"></span>
 </span>
diff --git a/packages/style/docs/components/dp-po-Lists.md b/packages/style/docs/components/dp-po-Lists.md
@@ -8,7 +8,7 @@ sidebar_label: Lists
 <form class="dp-po-list dp-po-title-list-item">
 	<span class="dp-po-title-item">Title</span>
 	<span class="dp-po-subtitle ">
-		<span class="dp-po-Avatar"><img class="dp-po-Avatar-icon" src="/img/docs/avatar.png"></span>
+		<span class="dp-po-Avatar"><img class="dp-po-Avatar-icon" src="../../img/docs/avatar.png"></span>
 		Name Surname
 		<span class="dp-po-Icon Icon--ticket-created"></span>
 		DD MMM YYYY

diff --git a/packages/style/docs/components/dp-po-Tables.md b/packages/style/docs/components/dp-po-Tables.md
@@ -49,8 +49,8 @@ sidebar_label: Tables
 				00 mins ago
 			</div>
 			<div class="dp-po-TableItem">
-				<img class="dp-po-Avatar-icon" src="/img/docs/avatar-circular.png" alt="">
-				<img class="dp-po-Avatar-icon Avatar--smile" src="/img/docs/smile.svg" alt="">
+				<img class="dp-po-Avatar-icon" src="../../img/docs/avatar-circular.png" alt="">
+				<img class="dp-po-Avatar-icon Avatar--smile" src="../../img/docs/smile.svg" alt="">
 			</div>
 		</div>
 		<!-- tables/chat-row -->

diff --git a/packages/style/website/static/css/components/dp-po-Information.css b/packages/style/website/static/css/components/dp-po-Information.css
@@ -1,6 +1,6 @@
 .dp-po-Info {
 	display: flex;
-	font-size: 18px;
+	font: var(--p-1);
 	color: var(--grey-darkest);
 	border: 1px solid var(--brand-primary);
 	border-left: 5px solid var(--brand-primary);
@@ -18,5 +18,4 @@
 .dp-po-Info.Info--danger {
 	border: 1px solid var(--danger);
 	border-left: 5px solid var(--danger);
-	font: var(--p-xxl);
 }
diff --git a/packages/style/website/static/css/components/dp-po-avatars.css b/packages/style/website/static/css/components/dp-po-avatars.css
@@ -9,8 +9,7 @@
 }
 
 .dp-po-Avatar-name {
-	/*font: var(--p-xxl);*/
-	font: var(--h-xl);
+	font: var(--h-6);
 	color: var(--grey-darkest);
 	margin-left: 10px;
 }
@@ -23,8 +22,7 @@
 }
 
 .dp-po-Avatar.Avatar--medium .dp-po-Avatar-name {
-	font-weight: 600;
-	font-size: 17px;
+	font: var(--h-5-medium);
 }
 
 /*Avatar--small*/

diff --git a/packages/style/website/static/css/components/dp-po-breadcrumbs.css b/packages/style/website/static/css/components/dp-po-breadcrumbs.css
@@ -16,7 +16,6 @@
   margin: 0;
   margin-right: 25px;
   position: relative;
-  font: var(--p-xxl-semibold);
   display: flex;
 }
 
@@ -63,11 +62,9 @@
   align-items: center;
   cursor: pointer;
   display: flex;
-  font-size: 15px;
-  line-height: 16px;
   text-decoration: none;
   position: relative;
-  font: var(--p-xxl-semibold);
+  font: var(--p-2-bold);
   color: var(--grey-darkest);
 }
 

diff --git a/packages/style/website/static/css/components/dp-po-buttons.css b/packages/style/website/static/css/components/dp-po-buttons.css
@@ -17,7 +17,7 @@
 /*Button--small*/
 
 .dp-po-Button.Button--small {
-  font: var(--p-xxl-semibold);
+  font: var(--p-2-bold);
   color: var(--white);
   background-color: var(--brand-primary);
   width: 125px;
@@ -43,7 +43,7 @@
 /*Button--medium*/
 
 .dp-po-Button.Button--medium {
-  font-size: 17px;
+  font: var(--h-5);
   width: 240px;
   height: 39px;
   color: var(--grey-darkest);
@@ -57,7 +57,7 @@
 /*Button--large*/
 
 .dp-po-Button.Button--large {
-  font: var(--p-xxl-semibold);
+  font: var(--p-2-bold);
   background: var(--brand-primary);
   color: var(--white);
   max-height: 44px;
@@ -108,8 +108,7 @@
   background-color: var(--white);
   border: 1.5px solid var(--grey-lighter);
   color: var(--grey-dark);
-  font-size: 17px;
-  font-weight: 400;
+  font: var(--h-5);
   justify-content: flex-start;
   padding: 0;
   height: 44px;
@@ -128,7 +127,7 @@
 /*button/icon-text/small*/
 
 .dp-po-Button.Button--small.Button--icon {
-  font: var(--p-xxl);
+  font: var(--font-p1);
   color: var(--grey-dark);
   max-height: 24px;
   border: none;
@@ -145,7 +144,7 @@
 
 .dp-po-Button.Button--texticon {
   background-color: var(--grey-light);
-  font: var(--p-xxl-semibold);
+  font: var(--p-2-bold);
   color: var(--grey-darkest);
   width: max-content;
   height: 44px;
@@ -292,7 +291,7 @@
 .dp-po-RadioWrapper [type="radio"]:checked + label,
 .dp-po-RadioWrapper [type="radio"]:not(:checked) + label {
   cursor: pointer;
-  font: var(--h-xl);
+  font: var(--h-6);
   padding-left: 10px;
   color: var(--grey-darkest);
 }
diff --git a/packages/style/website/static/css/components/dp-po-cards.css b/packages/style/website/static/css/components/dp-po-cards.css
@@ -10,7 +10,7 @@
 }
 
 .dp-po-card-title {
-	font-size: 19px;
+	font: var(--h-3);
 	background-color: var(--grey-lightest);
 	border-bottom: 1px solid var(--grey-light);
 	padding: 15px;
@@ -23,14 +23,13 @@
 }
 
 .dp-po-content-txt {
-	font: var(--p-xxl);
+	font: var(--p-1);
 	color: var(--grey-darkest);
 	margin-bottom: 15px;
 }
 
 .dp-po-content-txt.content-txt--large {
-	font-size: 17px;
-	font-weight: 600;
+	font: var(--h-5-medium);
 }
 
 /*card-atom--long*/

diff --git a/packages/style/website/static/css/components/dp-po-date.css b/packages/style/website/static/css/components/dp-po-date.css
@@ -0,0 +1,23 @@
+
+.dp-calendar {
+    border: 1px solid var(--grey-light);
+    background-color: var(--grey-lighter);
+    border-radius: 4px;
+    display: inline-block;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.dp-calendar li {
+    color: var(--grey-darkest);
+    font: var(--h-3);
+    text-align: center;
+    margin: 0;
+    line-height: 1.2;
+    padding: 5px;
+}
+
+.dp-calendar li:first-child {
+    border-bottom: 1px solid var(--grey-light);
+}
diff --git a/packages/style/website/static/css/components/dp-po-dividers.css b/packages/style/website/static/css/components/dp-po-dividers.css
@@ -8,13 +8,13 @@
 	align-items: center;
 	color: var(--grey-darkest);
 	border-bottom: 2px solid var(--brand-primary);
-	font-size: 23px;
+	font: var(--h-2);
 	margin-bottom: -2px;
 }
 
 .dp-po-divider-link {
 	color: var(--brand-primary);
-	font: var(--h-l-semibold);
+	font: var(--b-1-semibold);
 	display: flex;
 	align-items: flex-end;
 	line-height: 1;

diff --git a/packages/style/website/static/css/components/dp-po-dropdown.css b/packages/style/website/static/css/components/dp-po-dropdown.css
@@ -10,7 +10,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	font: var(--p-xxl);
+	font: var(--p-1);
 	position: relative;
 	background-color: var(--grey-lighter);
 	border-radius: 4px;
@@ -52,6 +52,7 @@
 	margin: 0;
 	padding: 5px 10px;
 	cursor: pointer;
+	font: var(--p-2);
 }
 
 .dp-po-dropdown-menu .dp-po-dropdown-menu-item:hover {

diff --git a/packages/style/website/static/css/components/dp-po-icontext.css b/packages/style/website/static/css/components/dp-po-icontext.css
@@ -5,7 +5,7 @@
 }
 
 .dp-po-Icon-wrapper.Icon--large {
-	font-size: 19px;
+	font: var(--h-3);
 	color: var(--brand-primary);
 }
 
@@ -53,11 +53,11 @@
 }
 
 .dp-po-Icon-wrapper.Icon--medium {
-	font-size: 19px;
+	font: var(--h-3);
 }
 
 .dp-po-Icon-wrapper.Icon--small {
-	font: var(--h-s-semibold);
+	font: var(--p-2-bold);
 }
 
 .dp-po-Icon-wrapper .dp-po-Icon {
@@ -69,3 +69,12 @@
 	flex-direction: column;
 	max-width: max-content;
 }
+
+.dp-po-Icon-wrapper.Icon--centred-stacked.Icon--medium,
+.dp-po-Icon-wrapper.Icon--centred-stacked.Icon--large {
+	font: var(--h-5-medium);
+}
+
+.dp-po-Icon-wrapper.Icon--centred-stacked .dp-po-Icon {
+	margin: 0 0 5px;
+}
diff --git a/packages/style/website/static/css/components/dp-po-labels.css b/packages/style/website/static/css/components/dp-po-labels.css
@@ -6,7 +6,7 @@
 .dp-po-label {
     background: var(--white);
     color: var(--grey-darkest);
-    font: var(--p-n);
+    font: var(--b-3);
     border-radius: 2px;
     cursor: pointer;
     line-height: 1;
@@ -21,19 +21,20 @@
 
 .dp-po-label.label--small {
     height: 15px;
-    font: var(--p-n-semibold);
+    font: var(--b-3-semibold);
     text-transform: uppercase;
 }
 
 .dp-po-label.label--medium {
     height: 22px;
+    font: var(--p-3-semibold);
     padding: 4px 10px;
 }
 
 .dp-po-label.label--large {
     height: 22px;
     padding: 4px 15px;
-    font: var(--h-s-semibold);
+    font: var(--p-3-semibold);
     /*text-transform: uppercase;*/
 }
 
@@ -180,7 +181,7 @@
 
 .dp-po-label.label--time-box {
     background-color: var(--grey-lighter);
-    font: var(--h-l-semibold);
+    font: var(--b-1-semibold);
 }
 
 .label--time .dp-po-Icon,
@@ -189,7 +190,7 @@
 }
 
 .dp-po-label.label--time {
-    font-size: 15px;
+    font: var(--b-2-semibold);
     font-weight: 400;
     padding: 0;
 }
@@ -199,7 +200,7 @@
 .dp-po-filter {
     border: 1px solid var(--grey-light);
     color: var(--grey-dark);
-    font: var(--p-xl);
+    font: var(--b-2);
     cursor: pointer;
     padding: 0 30px 0 20px;
     border-radius: 2px;
@@ -235,14 +236,13 @@
 }
 
 .dp-po-Badge.Badge--large {
-    font-size: 19px;
-    font-weight: 500;
+    font: var(--h-3--medium);
     height: 34px;
     width: 34px;
 }
 
 .dp-po-Badge.Badge--small {
-    font: var(--p-n-semibold);
+    font: var(--b-2-semibold);
     height: 22px;
     width: 22px;
 }