diff options
author | Sead Memic <seadmemic@gmail.com> | 2020-10-31 09:21:31 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-10-31 09:21:31 +0300 |
commit | 9cedf5b81ea5ace67556668b408fa43d6856a662 (patch) | |
tree | 2372239de3b9ab1068f948041eecb6af9d91736a /site/content | |
parent | 241f910dc51d164b0049bd1e50a7e85835bc55c5 (diff) |
Contrast colors added to theme-colors (#30044)
* Contrast colors added to theme-colors
* redundant colors removed froms docs, theme-colors refactor
* Add spaces for consistency
* Adapt to the recent changes
Co-authored-by: Sead Memic <sead.memic@intracto.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'site/content')
-rw-r--r-- | site/content/docs/5.0/components/badge.md | 4 | ||||
-rw-r--r-- | site/content/docs/5.0/components/card.md | 4 | ||||
-rw-r--r-- | site/content/docs/5.0/customize/color.md | 2 | ||||
-rw-r--r-- | site/content/docs/5.0/utilities/colors.md | 6 |
4 files changed, 8 insertions, 8 deletions
diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md index 78bc89f5b1..44c85d7179 100644 --- a/site/content/docs/5.0/components/badge.md +++ b/site/content/docs/5.0/components/badge.md @@ -45,7 +45,7 @@ Use our background utility classes to quickly change the appearance of a badge. {{< example >}} {{< badge.inline >}} {{- range (index $.Site.Data "theme-colors") }} -<span class="badge bg-{{ .name }}{{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}} +<span class="badge bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}} {{< /badge.inline >}} {{< /example >}} @@ -60,6 +60,6 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger {{< example >}} {{< badge.inline >}} {{- range (index $.Site.Data "theme-colors") }} -<span class="badge rounded-pill bg-{{ .name }}{{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}} +<span class="badge rounded-pill bg-{{ .name }}{{ with .contrast_color }} text-{{ . }}{{ end }}">{{ .name | title }}</span>{{- end -}} {{< /badge.inline >}} {{< /example >}} diff --git a/site/content/docs/5.0/components/card.md b/site/content/docs/5.0/components/card.md index cb25187bd1..5eeeaf56f7 100644 --- a/site/content/docs/5.0/components/card.md +++ b/site/content/docs/5.0/components/card.md @@ -422,7 +422,7 @@ Use [text and background utilities]({{< docsref "/utilities/colors" >}}) to chan {{< example >}} {{< card.inline >}} {{- range (index $.Site.Data "theme-colors") }} -<div class="card{{ if (eq .name "info") }} text-body{{ else if not (or (eq .name "light") (eq .name "warning") (eq .name "info")) }} text-white{{ end }} bg-{{ .name }} mb-3" style="max-width: 18rem;"> +<div class="card{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }} bg-{{ .name }} mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">{{ .name | title }} card title</h5> @@ -446,7 +446,7 @@ Use [border utilities]({{< docsref "/utilities/borders" >}}) to change just the {{- range (index $.Site.Data "theme-colors") }} <div class="card border-{{ .name }} mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> - <div class="card-body{{ if not (or (eq .name "light") (eq .name "warning") (eq .name "info")) }} text-{{ .name }}{{ end }}"> + <div class="card-body{{ if not .contrast_color }} text-{{ .name }}{{ end }}"> <h5 class="card-title">{{ .name | title }} card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> diff --git a/site/content/docs/5.0/customize/color.md b/site/content/docs/5.0/customize/color.md index 17e41f6e4f..452b3d77cf 100644 --- a/site/content/docs/5.0/customize/color.md +++ b/site/content/docs/5.0/customize/color.md @@ -14,7 +14,7 @@ We use a subset of all colors to create a smaller color palette for generating c {{< theme-colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} <div class="col-md-4"> - <div class="p-3 mb-3 bg-{{ .name }} {{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }}text-dark{{ else if (eq .name "info")}}text-body{{ else }}text-white{{ end }}">{{ .name | title }}</div> + <div class="p-3 mb-3 bg-{{ .name }} {{ if .contrast_color }}text-{{ .contrast_color }}{{ else }}text-white{{ end }}">{{ .name | title }}</div> </div> {{ end -}} {{< /theme-colors.inline >}} diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md index 65cddd75cb..ede13df065 100644 --- a/site/content/docs/5.0/utilities/colors.md +++ b/site/content/docs/5.0/utilities/colors.md @@ -23,7 +23,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t {{< example >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} -<p class="text-{{ .name }}{{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }} bg-dark{{ end }}">.text-{{ .name }}</p> +<p class="text-{{ .name }}{{ with .contrast_color }} bg-{{ . }}{{ end }}">.text-{{ .name }}</p> {{- end -}} {{< /colors.inline >}} <p class="text-body">.text-body</p> @@ -40,7 +40,7 @@ Similar to the contextual text color classes, easily set the background of an el {{< example >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} -<div class="p-3 mb-2 bg-{{ .name }} {{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }}text-dark{{ else if (eq .name "info") }}text-body{{ else }}text-white{{ end }}">.bg-{{ .name }}</div> +<div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div> {{- end -}} {{< /colors.inline >}} <div class="p-3 mb-2 bg-white text-dark">.bg-white</div> @@ -56,7 +56,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs- {{< markdown >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} -<div class="p-3 mb-2 bg-{{ .name }} bg-gradient {{ if or (eq .name "light") (eq .name "warning") (eq .name "info") }}text-dark{{ else }}text-white{{ end }}">.bg-{{ .name }}.bg-gradient</div> +<div class="p-3 mb-2 bg-{{ .name }} bg-gradient{{ with .contrast_color }} text-{{ . }}{{ else }} text-white{{ end }}">.bg-{{ .name }}.bg-gradient</div> {{- end -}} {{< /colors.inline >}} {{< /markdown >}} |