update site docs & design tokens

fastbootstrap · Oct 20, 2023 · 190c581 · 190c581
1 parent 7187be7
commit 190c581
Show file tree

Hide file tree

Showing 64 changed files with 3,770 additions and 1,390 deletions.
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -10,6 +10,11 @@
   @include media-breakpoint-up(lg) {
     padding: 1.5rem;
   }
+
+  code {
+    background-color: var(--ds-background-accent-blue-subtler);
+    font-weight: 600;
+  }
 }
 
 .bd-code-snippet {
@@ -37,17 +42,19 @@
   }
 }
 
-.bd-example-grid [class^="col"] {
-  border: 1px solid var(--ds-border-accent-purple);
-  padding: 0.75rem;
+%block-box {
+  border: 1px solid var(--ds-background-accent-purple-subtlest);
+  padding: var(--ds-space-150);
   background-color: var(--ds-background-accent-purple-subtle);
 }
 
+.bd-example-grid [class^="col"] {
+  @extend %block-box;
+}
+
 .bd-example-row {
   [class^="col"] {
-    border: 1px solid var(--ds-border-accent-purple);
-    padding: 0.75rem;
-    background-color: var(--ds-background-accent-purple-subtle);
+    @extend %block-box;
   }
 
   .row + .row {
@@ -61,37 +68,6 @@
   }
 }
 
-.bd-example-cssgrid {
-  .grid > * {
-    border: 1px solid var(--ds-border-accent-purple);
-    padding: 0.75rem;
-    background-color: var(--ds-background-accent-purple-subtle);
-  }
-}
-
-.bd-example-flex {
-  div {
-    border: 1px solid var(--ds-border-accent-purple);
-    background-color: var(--ds-background-accent-purple-subtle);
-  }
-}
-
-.bd-example-position-utils {
-  position: relative;
-  padding: 2rem;
-
-  .position-relative {
-    height: 200px;
-    background-color: var(--ds-background-accent-purple-subtle);
-  }
-
-  .position-absolute {
-    width: 2rem;
-    height: 2rem;
-    background-color: #091e42;
-    border-radius: 0.375rem;
-  }
-}
 
 .bd-placeholder-img {
   font-size: 1.125rem;

diff --git a/site/assets/scss/_docs.scss b/site/assets/scss/_docs.scss
@@ -173,3 +173,83 @@ code {
     color: var(--ds-text-discovery);
   }
 }
+
+.api-class-table {
+  code {
+    background-color: var(--ds-background-discovery);
+    color: var(--ds-text-discovery);
+  }
+
+  .desc {
+    color: var(--ds-text-accent-teal);
+    font-family: var(--bs-font-monospace);
+    letter-spacing: -0.15px;
+  }
+}
+
+.bg-striped-purple {
+  background-color: var(--ds-background-accent-gray-subtlest);
+  background-image: linear-gradient(
+    135deg,
+    var(--ds-background-discovery-bold) 10%,
+    #0000 0,
+    #0000 50%,
+    var(--ds-background-discovery-bold) 0,
+    var(--ds-background-discovery-bold) 60%,
+    #0000 0,
+    #0000
+  );
+  background-size: 7.07px 7.07px;
+}
+
+.bg-striped-teal {
+  background-color: var(--ds-background-accent-gray-subtlest);
+  background-image: linear-gradient(
+    135deg,
+    var(--ds-background-accent-teal-bolder) 10%,
+    #0000 0,
+    #0000 50%,
+    var(--ds-background-accent-teal-bolder) 0,
+    var(--ds-background-accent-teal-bolder) 60%,
+    #0000 0,
+    #0000
+  );
+  background-size: 7.07px 7.07px;
+}
+
+.bg-striped-white {
+  background-image: linear-gradient(135deg, #fff 10%, #0000 0, #0000 50%, #fff 0, #fff 60%, #0000 0, #0000);
+  background-size: 7.07px 7.07px;
+}
+
+.bg-grid-slate-100 {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%23F3F0FF'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
+}
+
+[data-bs-theme="dark"] {
+  .bg-grid-slate-100 {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%232B273F'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
+  }
+}
+
+.bg-neutral-subtler {
+  background-color: #091e4208;
+}
+
+[data-bs-theme="dark"] {
+  .bg-neutral-subtler {
+    background-color: #03040442;
+  }
+}
+
+.bg-purple-subtler {
+  background-color: var(--ds-background-accent-purple-subtler);
+}
+
+.bg-purple-subtle {
+  background-color: var(--ds-background-accent-purple-subtle);
+}
+
+.bg-blue-subtle {
+  background-color: var(--ds-background-accent-blue-subtle);
+}
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
@@ -1,9 +1,11 @@
 .bd-navbar {
-  .brand-img {
-    fill: $brand-color;
-  }
+
   .navbar-nav {
     --bs-nav-underline-link-hover-color: transparent;
     --bs-nav-link-active-bg: transparent;
   }
 }
+
+.brand-img {
+  fill: var(--ds-text-brand);
+}