diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 3be23461..523e0cbe 100644 --- 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 index 51f416fd..c1990f81 100644 --- 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 index 8619ee28..c1420460 100644 --- 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); +} diff --git a/site/assets/scss/_root.scss b/site/assets/scss/_root.scss new file mode 100644 index 00000000..7e5b613f --- /dev/null +++ b/site/assets/scss/_root.scss @@ -0,0 +1,322 @@ +$lime-100: #eefbda; +$lime-200: #d3f1a7; +$lime-300: #b3df72; +$lime-400: #94c748; +$lime-500: #82b536; +$lime-600: #6a9a23; +$lime-700: #5b7f24; +$lime-800: #4c6b1f; +$lime-900: #37471f; +$lime-1000: #2a3818; + +$blue-100: #e9f2ff; +$blue-200: #cce0ff; +$blue-300: #85b8ff; +$blue-400: #579dff; +$blue-500: #388bff; +$blue-600: #1d7afc; +$blue-700: #0c66e4; +$blue-800: #0055cc; +$blue-900: #09326c; +$blue-1000: #092957; + +$purple-100: #f3f0ff; +$purple-200: #dfd8fd; +$purple-300: #b8acf6; +$purple-400: #9f8fef; +$purple-500: #8f7ee7; +$purple-600: #8270db; +$purple-700: #6e5dc6; +$purple-800: #5e4db2; +$purple-900: #352c63; +$purple-1000: #2b2451; + +$red-100: #ffedeb; +$red-200: #ffd2cc; +$red-300: #ff9c8f; +$red-400: #f87462; +$red-500: #ef5c48; +$red-600: #e34935; +$red-700: #ca3521; +$red-800: #ae2a19; +$red-900: #601e16; +$red-1000: #4f1c16; + +$orange-100: #fff4e5; +$orange-200: #ffe2bd; +$orange-300: #fec57b; +$orange-400: #faa53d; +$orange-500: #f18d13; +$orange-600: #d97008; +$orange-700: #b65c02; +$orange-800: #974f0c; +$orange-900: #5f3811; +$orange-1000: #4a2b0f; + +$yellow-100: #fff7d6; +$yellow-200: #f8e6a0; +$yellow-300: #f5cd47; +$yellow-400: #e2b203; +$yellow-500: #cf9f02; +$yellow-600: #b38600; +$yellow-700: #946f00; +$yellow-800: #7f5f01; +$yellow-900: #533f04; +$yellow-1000: #3f3102; + +$green-100: #dffcf0; +$green-200: #baf3db; +$green-300: #7ee2b8; +$green-400: #4bce97; +$green-500: #2abb7f; +$green-600: #22a06b; +$green-700: #1f845a; +$green-800: #216e4e; +$green-900: #164b35; +$green-1000: #143c2b; + +$teal-100: #e3fafc; +$teal-200: #c1f0f5; +$teal-300: #8bdbe5; +$teal-400: #60c6d2; +$teal-500: #37b4c3; +$teal-600: #1d9aaa; +$teal-700: #1d7f8c; +$teal-800: #206b74; +$teal-900: #1d474c; +$teal-1000: #15373b; + +$magenta-100: #ffecf8; +$magenta-200: #fdd0ec; +$magenta-300: #f797d2; +$magenta-400: #e774bb; +$magenta-500: #da62ac; +$magenta-600: #cd519d; +$magenta-700: #ae4787; +$magenta-800: #943d73; +$magenta-900: #50253f; +$magenta-1000: #421f34; + +$neutral-0: #ffffff; +$neutral-100: #f7f8f9; +$neutral-200: #f1f2f4; +$neutral-300: #dcdfe4; +$neutral-400: #b3b9c4; +$neutral-500: #8590a2; +$neutral-600: #758195; +$neutral-700: #626f86; +$neutral-800: #44546f; +$neutral-900: #2c3e5d; +$neutral-1000: #172b4d; +$neutral-1100: #091e42; +$neutral-100a: rgba(9, 30, 66, 0.03); +$neutral-200a: rgba(9, 30, 66, 0.06); +$neutral-300a: rgba(9, 30, 66, 0.14); +$neutral-400a: rgba(9, 30, 66, 0.31); +$neutral-500a: rgba(9, 30, 66, 0.49); + +$dark-neutral-n100: #101214; +$dark-neutral-0: #161a1d; +$dark-neutral-100: #1d2125; +$dark-neutral-200: #22272b; +$dark-neutral-250: #282e33; +$dark-neutral-300: #2c333a; +$dark-neutral-350: #38414a; +$dark-neutral-400: #454f59; +$dark-neutral-500: #596773; +$dark-neutral-600: #738496; +$dark-neutral-700: #8c9bab; +$dark-neutral-800: #9fadbc; +$dark-neutral-900: #b6c2cf; +$dark-neutral-1000: #c7d1db; +$dark-neutral-1100: #dee4ea; +$dark-neutral-n100a: rgba(3, 4, 4, 0.26); +$dark-neutral-100a: rgba(188, 214, 240, 0.04); +$dark-neutral-200a: rgba(161, 189, 217, 0.08); +$dark-neutral-250a: rgba(200, 225, 249, 0.1); +$dark-neutral-300a: rgba(166, 197, 226, 0.16); +$dark-neutral-350a: rgba(195, 222, 254, 0.2); +$dark-neutral-400a: rgba(191, 219, 248, 0.28); +$dark-neutral-500a: rgba(155, 180, 202, 0.5); + +$neutrals: ( + "neutral-100": $neutral-100, + "neutral-200": $neutral-200, + "neutral-300": $neutral-300, + "neutral-400": $neutral-400, + "neutral-500": $neutral-500, + "neutral-600": $neutral-600, + "neutral-700": $neutral-700, + "neutral-800": $neutral-800, + "neutral-900": $neutral-900, + "neutral-1000": $neutral-1000, + "neutral-1100": $neutral-1100, + "neutral-100a": $neutral-100a, + "neutral-200a": $neutral-200a, + "neutral-300a": $neutral-300a, + "neutral-400a": $neutral-400a, + "neutral-500a": $neutral-500a, +); + +$dark-neutrals: ( + "dark-neutral-n100": $dark-neutral-n100, + "dark-neutral-0": $dark-neutral-0, + "dark-neutral-100": $dark-neutral-100, + "dark-neutral-200": $dark-neutral-200, + "dark-neutral-250": $dark-neutral-250, + "dark-neutral-300": $dark-neutral-300, + "dark-neutral-350": $dark-neutral-350, + "dark-neutral-400": $dark-neutral-400, + "dark-neutral-500": $dark-neutral-500, + "dark-neutral-600": $dark-neutral-600, + "dark-neutral-700": $dark-neutral-700, + "dark-neutral-800": $dark-neutral-800, + "dark-neutral-900": $dark-neutral-900, + "dark-neutral-1000": $dark-neutral-1000, + "dark-neutral-1100": $dark-neutral-1100, + "dark-neutral-n100a": $dark-neutral-n100a, + "dark-neutral-100a": $dark-neutral-100a, + "dark-neutral-200a": $dark-neutral-200a, + "dark-neutral-250a": $dark-neutral-250a, + "dark-neutral-300a": $dark-neutral-300a, + "dark-neutral-350a": $dark-neutral-350a, + "dark-neutral-400a": $dark-neutral-400a, + "dark-neutral-500a": $dark-neutral-500a, +); + +$blues: ( + "blue-100": $blue-100, + "blue-200": $blue-200, + "blue-300": $blue-300, + "blue-400": $blue-400, + "blue-500": $blue-500, + "blue-600": $blue-600, + "blue-700": $blue-700, + "blue-800": $blue-800, + "blue-900": $blue-900, + "blue-1000": $blue-1000, +); + +$yellows: ( + "yellow-100": $yellow-100, + "yellow-200": $yellow-200, + "yellow-300": $yellow-300, + "yellow-400": $yellow-400, + "yellow-500": $yellow-500, + "yellow-600": $yellow-600, + "yellow-700": $yellow-700, + "yellow-800": $yellow-800, + "yellow-900": $yellow-900, + "yellow-1000": $yellow-1000, +); + +$greens: ( + "green-100": $green-100, + "green-200": $green-200, + "green-300": $green-300, + "green-400": $green-400, + "green-500": $green-500, + "green-600": $green-600, + "green-700": $green-700, + "green-800": $green-800, + "green-900": $green-900, + "green-1000": $green-1000, +); + +$purples: ( + "purple-100": $purple-100, + "purple-200": $purple-200, + "purple-300": $purple-300, + "purple-400": $purple-400, + "purple-500": $purple-500, + "purple-600": $purple-600, + "purple-700": $purple-700, + "purple-800": $purple-800, + "purple-900": $purple-900, + "purple-1000": $purple-1000, +); + +$teals: ( + "teal-100": $teal-100, + "teal-200": $teal-200, + "teal-300": $teal-300, + "teal-400": $teal-400, + "teal-500": $teal-500, + "teal-600": $teal-600, + "teal-700": $teal-700, + "teal-800": $teal-800, + "teal-900": $teal-900, + "teal-1000": $teal-1000, +); + +$reds: ( + "red-100": $red-100, + "red-200": $red-200, + "red-300": $red-300, + "red-400": $red-400, + "red-500": $red-500, + "red-600": $red-600, + "red-700": $red-700, + "red-800": $red-800, + "red-900": $red-900, + "red-1000": $red-1000, +); + +$limes: ( + "lime-100": $lime-100, + "lime-200": $lime-200, + "lime-300": $lime-300, + "lime-400": $lime-400, + "lime-500": $lime-500, + "lime-600": $lime-600, + "lime-700": $lime-700, + "lime-800": $lime-800, + "lime-900": $lime-900, + "lime-1000": $lime-1000, +); + +$magentas: ( + "magenta-100": $magenta-100, + "magenta-200": $magenta-200, + "magenta-300": $magenta-300, + "magenta-400": $magenta-400, + "magenta-500": $magenta-500, + "magenta-600": $magenta-600, + "magenta-700": $magenta-700, + "magenta-800": $magenta-800, + "magenta-900": $magenta-900, + "magenta-1000": $magenta-1000, +); + +$oranges: ( + "orange-100": $orange-100, + "orange-200": $orange-200, + "orange-300": $orange-300, + "orange-400": $orange-400, + "orange-500": $orange-500, + "orange-600": $orange-600, + "orange-700": $orange-700, + "orange-800": $orange-800, + "orange-900": $orange-900, + "orange-1000": $orange-1000, +); + +$all-colors: map-merge-multiple( + $neutrals, + $dark-neutrals, + $blues, + $yellows, + $greens, + $purples, + $teals, + $reds, + $limes, + $magentas, + $oranges +); + +:root { + @each $color, $value in $all-colors { + --color-#{$color}: #{$value}; + } +} diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index 4fdf5792..3b4cb29f 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -1,3 +1,4 @@ +$navbar-height: 56px; .sidebar { position: relative; display: flex; diff --git a/site/assets/scss/_utilities.scss b/site/assets/scss/_utilities.scss index 4d02cfce..ea118832 100644 --- a/site/assets/scss/_utilities.scss +++ b/site/assets/scss/_utilities.scss @@ -81,4 +81,45 @@ $utilities: ( 96: 24rem, ), ), + "max-width": ( + property: width, + class: bd-max-w, + values: ( + 0: 0, + px: 1px, + 0.5: 0.125rem, + 1: 0.25rem, + 1.5: 0.375rem, + 2: 0.5rem, + 2.5: 0.625rem, + 3: 0.75rem, + 3.5: 0.875rem, + 4: 1rem, + 5: 1.25rem, + 6: 1.5rem, + 7: 1.75rem, + 8: 2rem, + 9: 2.25rem, + 10: 2.5rem, + 11: 2.75rem, + 12: 3rem, + 14: 3.5rem, + 16: 4rem, + 20: 5rem, + 24: 6rem, + 28: 7rem, + 32: 8rem, + 36: 9rem, + 40: 10rem, + 44: 11rem, + 48: 12rem, + 52: 13rem, + 56: 14rem, + 60: 15rem, + 64: 16rem, + 72: 18rem, + 80: 20rem, + 96: 24rem, + ), + ), ); diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss deleted file mode 100644 index 8c38d4d0..00000000 --- a/site/assets/scss/_variables.scss +++ /dev/null @@ -1,2 +0,0 @@ -$brand-color: #0065ff; -$navbar-height: 56px; diff --git a/site/assets/scss/site.scss b/site/assets/scss/site.scss index 39d414ae..40aa295c 100644 --- a/site/assets/scss/site.scss +++ b/site/assets/scss/site.scss @@ -8,7 +8,7 @@ $enable-cssgrid: true; @import "node_modules/bootstrap/scss/grid"; // Load docs components -@import "variables"; +@import "root"; @import "navbar"; @import "sidebar"; @import "codebox"; diff --git a/site/content/404.md b/site/content/404.md index 2dcfbafd..060e1c11 100644 --- a/site/content/404.md +++ b/site/content/404.md @@ -1,5 +1,5 @@ --- -title: "Page not found" +title: "404 - Page not found" url: /404.html layout: 404 noindex: true @@ -7,127 +7,13 @@ sitemap_exclude: true ---
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Error 404

-

The page you requested was not found

+
+
+ +
+

Error 404

+

The page you requested was not found

+
Back to home
diff --git a/site/content/components/button-group/index.md b/site/content/components/button-group/index.md index 7237bb80..f144dbcb 100644 --- a/site/content/components/button-group/index.md +++ b/site/content/components/button-group/index.md @@ -49,10 +49,10 @@ In addition, groups and toolbars should be given an explicit label, as most assi New Feature -Use a `.btn-group-segmented` instead of `.btn-group` to sets of two or more buttons into a one group. The spacing will be compacted between each of group button unlike `.btn-group` styles. +Add a `.btn-group-narrow` to sets of two or more buttons into a one group. The spacing will be compacted between each of group button without no spacing. {{< example >}} -
+
@@ -67,7 +67,7 @@ The Segmented buttons have 2 types of segmented buttons: `Single-select` and `Mu Use a single-select segmented button with [Radio toggle button]({{< docsref "radio#radio-button-group" >}}) to select one option from a set, switch between views, or sort elements from up to five options. {{< example >}} -
+
@@ -84,7 +84,7 @@ Use a single-select segmented button with [Radio toggle button]({{< docsref "rad Use a multi-select segmented button with [Checkbox toggle button]({{< docsref "checkbox#checkbox-button-group" >}}) to select or sort from two to five options. {{< example >}} -
+
@@ -102,14 +102,14 @@ Use a multi-select segmented button with [Checkbox toggle button]({{< docsref "c Use `.btn-outline-*` to remove all background images, shows colors only for the border of the element. {{< example class="d-grid justify-content-start gap-4" >}} -
+
-
+
@@ -149,18 +149,18 @@ Combine sets of button groups into button toolbars for more complex components. {{< example >}}