css changes

playbook.yml

@@ -19,7 +19,7 @@ content:
     - url: https://github.com/aragon/admin-plugin
       branches: feat/docs
       start_path: packages/contracts/docs
-    - url: https://github.com/aragon/osx
+    - url: /Users/giorgilagidze/Desktop/work/osx
       branches: feat/docs-add-missing-pages
       start_path: packages/contracts/docs
     - url: https://github.com/aragon/osx-commons

ui/src/css/article.scss

@@ -118,10 +118,11 @@
   border-radius: var(--guk-border-rounded);
   max-width: 90vw;
   padding: var(--guk-space-6);
-  background-color: var(--guk-color-neutral-50);
+  background-color: #f8f8fa;
   margin-top: var(--guk-space-4);
   margin-bottom: var(--guk-space-4);
   word-wrap: break-word;
+  color: var(--color-text);
 
   ul {
     list-style: none;
@@ -174,17 +175,18 @@
 }
 
 .contract-item {
-  border-radius: var(--guk-border-rounded);
-  border: solid 1px var(--guk-color-neutral-300);
+  border-radius: var(--border-radius);
+  border: solid 1px #ddd;
   max-width: 90vw;
   padding: 0;
-  margin-top: var(--guk-space-4);
-  margin-bottom: var(--guk-space-4);
+  margin-top: 1em;
+  margin-bottom: 1em;
+  $spacing: 1em;
   word-wrap: break-word;
 
   > * {
-    margin-right: var(--guk-space-4);
-    margin-left: var(--guk-space-4);
+    margin-right: $spacing;
+    margin-left: $spacing;
   }
 
   h4 {
@@ -193,35 +195,35 @@
     justify-content: space-between;
     align-content: flex-start;
     padding: 0;
-    margin: var(--guk-space-4);
-    margin-bottom: var(--guk-space-8);
+    margin: $spacing;
+    margin-bottom: 2 * $spacing;
     position: relative;
     font-size: inherit;
 
     code {
       flex-grow: 1;
       color: inherit;
-      font-weight: var(--guk-font-weight-normal);
+      font-weight: var(--weight-normal);
       background-color: transparent;
       padding: 0;
 
       .contract-item-name {
-        font-weight: var(--guk-font-weight-semibold);
+        font-weight: var(--weight-medium);
       }
     }
 
     .anchor {
       order: 10;
-      font-size: var(--guk-font-size-base);
+      font-size: var(--md);
       font-weight: normal;
       margin-top: 0;
     }
 
     .item-kind {
-      font-family: var(--guk-font-family);
-      font-size: var(--guk-font-size-base);
+      font-family: var(--sans-serif);
+      font-size: var(--md);
       font-weight: 300;
-      opacity: 0.8;
+      opacity: .8;
     }
 
     &::before {
@@ -231,20 +233,20 @@
       height: 100%;
       width: 100%;
       box-sizing: content-box;
-      padding: var(--guk-space-4);
-      margin: calc(-1 * var(--guk-space-4));
+      padding: $spacing;
+      margin: -$spacing;
       z-index: -10;
-      border-top-left-radius: var(--guk-border-rounded);
-      border-top-right-radius: var(--guk-border-rounded);
-      background-color: var(--guk-color-neutral-50);
-      border-bottom: solid 1px var(--guk-color-neutral-300);
+      border-top-left-radius: var(--border-radius);
+      border-top-right-radius: var(--border-radius);
+      background-color: #f9f9fa;
+      border-bottom: solid 1px #ddd;
     }
   }
 
   .admonitionblock {
-    font-family: var(--guk-font-family);
-    margin-right: var(--guk-space-4);
-    margin-left: var(--guk-space-4);
+    font-family: var(--sans-serif);
+    margin-right: $spacing;
+    margin-left: $spacing;
   }
 }
 
@@ -281,4 +283,4 @@
   border-radius: var(--guk-border-rounded);
   padding: var(--guk-space-2-5);
   margin: 0 calc(-1 * var(--guk-space-2-5));
-}
+}

ui/src/css/globals/_global.scss

@@ -1,5 +1,5 @@
 body {
-  background: var(--guk-color-neutral-50);
+  background: var(--guk-color-neutral-0);
 }
 
 .filter-active-icon {

ui/src/css/globals/_typography.scss

@@ -87,7 +87,6 @@ h6 {
 code {
   background-color: var(--guk-color-neutral-100); /* #f5f7fa */
   border-radius: var(--guk-border-rounded); /* 4px */
-  border: 1px solid var(--guk-color-neutral-200);
   font-family: var(--guk-font-family-monospace, monospace);
   font-size: 0.95em;
   padding: 2px 4px;