@semanticus/semanticus-css 0.3.0

package/src/utilities/colors/_background-colors.css

@@ -0,0 +1,209 @@
+.text-bg-primary {
+  --color-text: var(--color-primary-inverse) !important;
+
+  color: var(--color-primary-inverse) !important;
+  background-color: rgba(var(--primary-rgb), var(--bg-opacity, 1)) !important;
+}
+
+.text-bg-secondary {
+  --color-text: var(--color-secondary-inverse) !important;
+
+  color: var(--color-secondary-inverse) !important;
+  background-color: rgba(var(--secondary-rgb), var(--bg-opacity, 1)) !important;
+}
+
+.text-bg-success {
+  --color-text: var(--color-success-inverse) !important;
+
+  color: var(--color-success-inverse) !important;
+  background-color: rgba(var(--success-rgb), var(--bg-opacity, 1)) !important;
+}
+
+.text-bg-info {
+  --color-text: var(--color-info-inverse) !important;
+
+  color: var(--color-info-inverse) !important;
+  background-color: rgba(var(--info-rgb), var(--bg-opacity, 1)) !important;
+}
+
+.text-bg-warning {
+  --color-text: var(--color-warning-inverse) !important;
+
+  color: var(--color-warning-inverse) !important;
+  background-color: rgba(var(--warning-rgb), var(--bg-opacity, 1)) !important;
+}
+
+.text-bg-danger {
+  --color-text: var(--color-danger-inverse) !important;
+
+  color: var(--color-danger-inverse) !important;
+  background-color: rgba(var(--danger-rgb), var(--bg-opacity, 1)) !important;
+}
+
+.text-bg-contrast {
+  --color-text: var(--color-contrast-inverse) !important;
+
+  color: var(--color-contrast-inverse) !important;
+  background-color: rgba(var(--contrast-rgb), var(--bg-opacity, 1)) !important;
+}
+
+.text-bg-primary-subtle {
+  --color-text: var(--primary-text-emphasis) !important;
+
+  color: var(--primary-text-emphasis) !important;
+  background-color: var(--primary-bg-subtle) !important;
+}
+
+.text-bg-secondary-subtle {
+  --color-text: var(--secondary-text-emphasis) !important;
+
+  color: var(--secondary-text-emphasis) !important;
+  background-color: var(--secondary-bg-subtle) !important;
+}
+
+.text-bg-success-subtle {
+  --color-text: var(--success-text-emphasis) !important;
+
+  color: var(--success-text-emphasis) !important;
+  background-color: var(--success-bg-subtle) !important;
+}
+
+.text-bg-info-subtle {
+  --color-text: var(--info-text-emphasis) !important;
+
+  color: var(--info-text-emphasis) !important;
+  background-color: var(--info-bg-subtle) !important;
+}
+
+.text-bg-warning-subtle {
+  --color-text: var(--warning-text-emphasis) !important;
+
+  color: var(--warning-text-emphasis) !important;
+  background-color: var(--warning-bg-subtle) !important;
+}
+
+.text-bg-danger-subtle {
+  --color-text: var(--danger-text-emphasis) !important;
+
+  color: var(--danger-text-emphasis) !important;
+  background-color: var(--danger-bg-subtle) !important;
+}
+
+.text-bg-contrast-subtle {
+  --color-text: var(--contrast-text-emphasis) !important;
+
+  color: var(--contrast-text-emphasis) !important;
+  background-color: var(--contrast-bg-subtle) !important;
+}
+
+.bg-primary {
+  --bg-opacity: 1;
+
+  background-color: rgba(var(--primary-rgb), var(--bg-opacity)) !important;
+}
+
+.bg-secondary {
+  --bg-opacity: 1;
+
+  background-color: rgba(var(--secondary-rgb), var(--bg-opacity)) !important;
+}
+
+.bg-success {
+  --bg-opacity: 1;
+
+  background-color: rgba(var(--success-rgb), var(--bg-opacity)) !important;
+}
+
+.bg-info {
+  --bg-opacity: 1;
+
+  background-color: rgba(var(--info-rgb), var(--bg-opacity)) !important;
+}
+
+.bg-warning {
+  --bg-opacity: 1;
+
+  background-color: rgba(var(--warning-rgb), var(--bg-opacity)) !important;
+}
+
+.bg-danger {
+  --bg-opacity: 1;
+
+  background-color: rgba(var(--danger-rgb), var(--bg-opacity)) !important;
+}
+
+.bg-contrast {
+  --bg-opacity: 1;
+
+  background-color: rgba(var(--contrast-rgb), var(--bg-opacity)) !important;
+}
+
+.bg-body {
+  --bg-opacity: 1;
+
+  background-color: rgba(var(--body-bg-rgb), var(--bg-opacity)) !important;
+}
+
+.bg-transparent {
+  --bg-opacity: 1;
+
+  background-color: transparent !important;
+}
+
+.bg-body-secondary {
+  --bg-opacity: 1;
+
+  background-color: rgba(var(--secondary-bg-rgb), var(--bg-opacity)) !important;
+}
+
+.bg-opacity-10 {
+  --bg-opacity: 0.1;
+}
+
+.bg-opacity-25 {
+  --bg-opacity: 0.25;
+}
+
+.bg-opacity-50 {
+  --bg-opacity: 0.5;
+}
+
+.bg-opacity-75 {
+  --bg-opacity: 0.75;
+}
+
+.bg-opacity-100 {
+  --bg-opacity: 1;
+}
+
+.bg-primary-subtle {
+  background-color: var(--primary-bg-subtle) !important;
+}
+
+.bg-secondary-subtle {
+  background-color: var(--secondary-bg-subtle) !important;
+}
+
+.bg-success-subtle {
+  background-color: var(--success-bg-subtle) !important;
+}
+
+.bg-info-subtle {
+  background-color: var(--info-bg-subtle) !important;
+}
+
+.bg-warning-subtle {
+  background-color: var(--warning-bg-subtle) !important;
+}
+
+.bg-danger-subtle {
+  background-color: var(--danger-bg-subtle) !important;
+}
+
+.bg-contrast-subtle {
+  background-color: var(--contrast-bg-subtle) !important;
+}
+
+.bg-gradient {
+  background-image: var(--gradient) !important;
+}

package/src/utilities/colors/_border-colors.css

@@ -0,0 +1,69 @@
+.border-primary {
+  --border-opacity: 1;
+
+  border-color: rgba(var(--primary-rgb), var(--border-opacity)) !important;
+}
+
+.border-secondary {
+  --border-opacity: 1;
+
+  border-color: rgba(var(--secondary-rgb), var(--border-opacity)) !important;
+}
+
+.border-success {
+  --border-opacity: 1;
+
+  border-color: rgba(var(--success-rgb), var(--border-opacity)) !important;
+}
+
+.border-info {
+  --border-opacity: 1;
+
+  border-color: rgba(var(--info-rgb), var(--border-opacity)) !important;
+}
+
+.border-warning {
+  --border-opacity: 1;
+
+  border-color: rgba(var(--warning-rgb), var(--border-opacity)) !important;
+}
+
+.border-danger {
+  --border-opacity: 1;
+
+  border-color: rgba(var(--danger-rgb), var(--border-opacity)) !important;
+}
+
+.border-contrast {
+  --border-opacity: 1;
+
+  border-color: rgba(var(--contrast-rgb), var(--border-opacity)) !important;
+}
+
+.border-primary-subtle {
+  border-color: var(--primary-border-subtle) !important;
+}
+
+.border-secondary-subtle {
+  border-color: var(--secondary-border-subtle) !important;
+}
+
+.border-success-subtle {
+  border-color: var(--success-border-subtle) !important;
+}
+
+.border-info-subtle {
+  border-color: var(--info-border-subtle) !important;
+}
+
+.border-warning-subtle {
+  border-color: var(--warning-border-subtle) !important;
+}
+
+.border-danger-subtle {
+  border-color: var(--danger-border-subtle) !important;
+}
+
+.border-contrast-subtle {
+  border-color: var(--contrast-border-subtle) !important;
+}

package/src/utilities/colors/_text-colors.css

@@ -0,0 +1,371 @@
+.link-primary {
+  color: rgba(var(--primary-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--primary-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--primary-rgb), var(--link-underline-opacity, 1)) !important;
+}
+.link-primary:hover, .link-primary:focus {
+  color: rgba(var(--link-hover-color-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--link-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--link-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+}
+
+.link-secondary {
+  color: rgba(var(--secondary-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--secondary-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--secondary-rgb), var(--link-underline-opacity, 1)) !important;
+}
+.link-secondary:hover, .link-secondary:focus {
+  color: rgba(var(--secondary-hover-color-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--secondary-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--secondary-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+}
+
+.link-success {
+  color: rgba(var(--success-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--success-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--success-rgb), var(--link-underline-opacity, 1)) !important;
+}
+.link-success:hover, .link-success:focus {
+  color: rgba(var(--success-hover-color-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--success-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--success-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+}
+
+.link-info {
+  color: rgba(var(--info-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--info-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--info-rgb), var(--link-underline-opacity, 1)) !important;
+}
+.link-info:hover, .link-info:focus {
+  color: rgba(var(--info-hover-color-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--info-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--info-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+}
+
+.link-warning {
+  color: rgba(var(--warning-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--warning-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--warning-rgb), var(--link-underline-opacity, 1)) !important;
+}
+.link-warning:hover, .link-warning:focus {
+  color: rgba(var(--warning-hover-color-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--warning-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--warning-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+}
+
+.link-danger {
+  color: rgba(var(--danger-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--danger-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--danger-rgb), var(--link-underline-opacity, 1)) !important;
+}
+.link-danger:hover, .link-danger:focus {
+  color: rgba(var(--danger-hover-color-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--danger-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--danger-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+}
+
+.link-contrast {
+  color: rgba(var(--contrast-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--contrast-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--contrast-rgb), var(--link-underline-opacity, 1)) !important;
+}
+.link-contrast:hover, .link-contrast:focus {
+  color: rgba(var(--contrast-hover-color-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--contrast-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--contrast-hover-color-rgb), var(--link-underline-opacity, 1)) !important;
+}
+
+.link-body-emphasis {
+  color: rgba(var(--emphasis-color-rgb), var(--link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--emphasis-color-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--emphasis-color-rgb), var(--link-underline-opacity, 1)) !important;
+}
+.link-body-emphasis:hover, .link-body-emphasis:focus {
+  color: rgba(var(--emphasis-color-rgb), var(--link-opacity, 0.75)) !important;
+  -webkit-text-decoration-color: rgba(var(--emphasis-color-rgb), var(--link-underline-opacity, 0.75)) !important;
+  text-decoration-color: rgba(var(--emphasis-color-rgb), var(--link-underline-opacity, 0.75)) !important;
+}
+
+.text-primary {
+  --text-opacity: 1;
+
+  color: rgba(var(--primary-rgb), var(--text-opacity)) !important;
+}
+
+.text-secondary {
+  --text-opacity: 1;
+
+  color: rgba(var(--secondary-rgb), var(--text-opacity)) !important;
+}
+
+.text-success {
+  --text-opacity: 1;
+
+  color: rgba(var(--success-rgb), var(--text-opacity)) !important;
+}
+
+.text-info {
+  --text-opacity: 1;
+
+  color: rgba(var(--info-rgb), var(--text-opacity)) !important;
+}
+
+.text-warning {
+  --text-opacity: 1;
+
+  color: rgba(var(--warning-rgb), var(--text-opacity)) !important;
+}
+
+.text-danger {
+  --text-opacity: 1;
+
+  color: rgba(var(--danger-rgb), var(--text-opacity)) !important;
+}
+
+.text-contrast {
+  --text-opacity: 1;
+
+  color: rgba(var(--contrast-rgb), var(--text-opacity)) !important;
+}
+
+.text-body {
+  --text-opacity: 1;
+
+  color: rgba(var(--body-color-rgb), var(--text-opacity)) !important;
+}
+
+.text-muted {
+  --text-opacity: 1;
+
+  color: var(--secondary-color) !important;
+}
+
+.text-body-secondary {
+  --text-opacity: 1;
+
+  color: var(--secondary-color) !important;
+}
+
+.text-body-emphasis {
+  --text-opacity: 1;
+
+  color: var(--emphasis-color) !important;
+}
+
+.text-reset {
+  --text-opacity: 1;
+
+  color: inherit !important;
+}
+
+.text-opacity-25 {
+  --text-opacity: 0.25;
+}
+
+.text-opacity-50 {
+  --text-opacity: 0.5;
+}
+
+.text-opacity-75 {
+  --text-opacity: 0.75;
+}
+
+.text-opacity-100 {
+  --text-opacity: 1;
+}
+
+.text-primary-emphasis {
+  color: var(--primary-text-emphasis) !important;
+}
+
+.text-secondary-emphasis {
+  color: var(--secondary-text-emphasis) !important;
+}
+
+.text-success-emphasis {
+  color: var(--success-text-emphasis) !important;
+}
+
+.text-info-emphasis {
+  color: var(--info-text-emphasis) !important;
+}
+
+.text-warning-emphasis {
+  color: var(--warning-text-emphasis) !important;
+}
+
+.text-danger-emphasis {
+  color: var(--danger-text-emphasis) !important;
+}
+
+.text-contrast-emphasis {
+  color: var(--contrast-text-emphasis) !important;
+}
+
+.link-opacity-10 {
+  --link-opacity: 0.1;
+}
+
+.link-opacity-10-hover:hover {
+  --link-opacity: 0.1;
+}
+
+.link-opacity-25 {
+  --link-opacity: 0.25;
+}
+
+.link-opacity-25-hover:hover {
+  --link-opacity: 0.25;
+}
+
+.link-opacity-50 {
+  --link-opacity: 0.5;
+}
+
+.link-opacity-50-hover:hover {
+  --link-opacity: 0.5;
+}
+
+.link-opacity-75 {
+  --link-opacity: 0.75;
+}
+
+.link-opacity-75-hover:hover {
+  --link-opacity: 0.75;
+}
+
+.link-opacity-100 {
+  --link-opacity: 1;
+}
+
+.link-opacity-100-hover:hover {
+  --link-opacity: 1;
+}
+
+.link-offset-1 {
+  text-underline-offset: 0.125em !important;
+}
+
+.link-offset-1-hover:hover {
+  text-underline-offset: 0.125em !important;
+}
+
+.link-offset-2 {
+  text-underline-offset: 0.25em !important;
+}
+
+.link-offset-2-hover:hover {
+  text-underline-offset: 0.25em !important;
+}
+
+.link-offset-3 {
+  text-underline-offset: 0.375em !important;
+}
+
+.link-offset-3-hover:hover {
+  text-underline-offset: 0.375em !important;
+}
+
+.link-underline-primary {
+  --link-underline-opacity: 1;
+
+  -webkit-text-decoration-color: rgba(var(--primary-rgb), var(--link-underline-opacity)) !important;
+  text-decoration-color: rgba(var(--primary-rgb), var(--link-underline-opacity)) !important;
+}
+
+.link-underline-secondary {
+  --link-underline-opacity: 1;
+
+  -webkit-text-decoration-color: rgba(var(--secondary-rgb), var(--link-underline-opacity)) !important;
+  text-decoration-color: rgba(var(--secondary-rgb), var(--link-underline-opacity)) !important;
+}
+
+.link-underline-success {
+  --link-underline-opacity: 1;
+
+  -webkit-text-decoration-color: rgba(var(--success-rgb), var(--link-underline-opacity)) !important;
+  text-decoration-color: rgba(var(--success-rgb), var(--link-underline-opacity)) !important;
+}
+
+.link-underline-info {
+  --link-underline-opacity: 1;
+
+  -webkit-text-decoration-color: rgba(var(--info-rgb), var(--link-underline-opacity)) !important;
+  text-decoration-color: rgba(var(--info-rgb), var(--link-underline-opacity)) !important;
+}
+
+.link-underline-warning {
+  --link-underline-opacity: 1;
+
+  -webkit-text-decoration-color: rgba(var(--warning-rgb), var(--link-underline-opacity)) !important;
+  text-decoration-color: rgba(var(--warning-rgb), var(--link-underline-opacity)) !important;
+}
+
+.link-underline-danger {
+  --link-underline-opacity: 1;
+
+  -webkit-text-decoration-color: rgba(var(--danger-rgb), var(--link-underline-opacity)) !important;
+  text-decoration-color: rgba(var(--danger-rgb), var(--link-underline-opacity)) !important;
+}
+
+.link-underline-contrast {
+  --link-underline-opacity: 1;
+
+  -webkit-text-decoration-color: rgba(var(--contrast-rgb), var(--link-underline-opacity)) !important;
+  text-decoration-color: rgba(var(--contrast-rgb), var(--link-underline-opacity)) !important;
+}
+
+.link-underline {
+  --link-underline-opacity: 1;
+
+  -webkit-text-decoration-color: rgba(var(--link-color-rgb), var(--link-underline-opacity, 1)) !important;
+  text-decoration-color: rgba(var(--link-color-rgb), var(--link-underline-opacity, 1)) !important;
+}
+
+.link-underline-opacity-0 {
+  --link-underline-opacity: 0;
+}
+
+.link-underline-opacity-0-hover:hover {
+  --link-underline-opacity: 0;
+}
+
+.link-underline-opacity-10 {
+  --link-underline-opacity: 0.1;
+}
+
+.link-underline-opacity-10-hover:hover {
+  --link-underline-opacity: 0.1;
+}
+
+.link-underline-opacity-25 {
+  --link-underline-opacity: 0.25;
+}
+
+.link-underline-opacity-25-hover:hover {
+  --link-underline-opacity: 0.25;
+}
+
+.link-underline-opacity-50 {
+  --link-underline-opacity: 0.5;
+}
+
+.link-underline-opacity-50-hover:hover {
+  --link-underline-opacity: 0.5;
+}
+
+.link-underline-opacity-75 {
+  --link-underline-opacity: 0.75;
+}
+
+.link-underline-opacity-75-hover:hover {
+  --link-underline-opacity: 0.75;
+}
+
+.link-underline-opacity-100 {
+  --link-underline-opacity: 1;
+}
+
+.link-underline-opacity-100-hover:hover {
+  --link-underline-opacity: 1;
+}