@semanticus/semanticus-css 0.9.0 → 1.0.0

package/src/utilities/borders/_border-style.css

@@ -1,5 +1,7 @@
 .border {
-  border: var(--border-width) var(--border-style) var(--border-color) !important;
+  --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
+
+  border: var(--border-size) var(--border-style) var(--border-color) !important;
 }
 
 .border-0 {
@@ -7,7 +9,9 @@
 }
 
 .border-top {
-  border-top: var(--border-width) var(--border-style) var(--border-color) !important;
+  --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
+
+  border-top: var(--border-size) var(--border-style) var(--border-color) !important;
 }
 
 .border-top-0 {
@@ -15,7 +19,9 @@
 }
 
 .border-end {
-  border-right: var(--border-width) var(--border-style) var(--border-color) !important;
+  --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
+
+  border-right: var(--border-size) var(--border-style) var(--border-color) !important;
 }
 
 .border-end-0 {
@@ -23,7 +29,9 @@
 }
 
 .border-bottom {
-  border-bottom: var(--border-width) var(--border-style) var(--border-color) !important;
+  --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
+
+  border-bottom: var(--border-size) var(--border-style) var(--border-color) !important;
 }
 
 .border-bottom-0 {
@@ -31,7 +39,9 @@
 }
 
 .border-start {
-  border-left: var(--border-width) var(--border-style) var(--border-color) !important;
+  --border-color: oklch(from var(--color-border) l c h / var(--color-border-opacity));
+
+  border-left: var(--border-size) var(--border-style) var(--border-color) !important;
 }
 
 .border-start-0 {

package/src/utilities/borders/_border-width.css

@@ -1,11 +1,3 @@
-.border-0 {
-  border-width: 0 !important;
-}
-
-.border-d {
-  border-width: var(--border-width-default) !important;
-}
-
 .border-1 {
   border-width: var(--border-width-1) !important;
 }
@@ -25,23 +17,3 @@
 .border-5 {
   border-width: var(--border-width-5) !important;
 }
-
-.border-opacity-10 {
-  --border-opacity: 0.1;
-}
-
-.border-opacity-25 {
-  --border-opacity: 0.25;
-}
-
-.border-opacity-50 {
-  --border-opacity: 0.5;
-}
-
-.border-opacity-75 {
-  --border-opacity: 0.75;
-}
-
-.border-opacity-100 {
-  --border-opacity: 1;
-}

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

@@ -0,0 +1,75 @@
+.bg-transparent {
+  --color-background: transparent;
+}
+
+.bg-gradient {
+  background-image: var(--gradient) !important;
+}
+
+.bg-body {
+  --color-background: oklch(from var(--color-background) l c h / var(--color-background-opacity));
+
+  background-color: var(--color-background) !important;
+}
+
+.bg-primary {
+  --color-background: oklch(from var(--color-primary-fill) l c h / var(--color-background-opacity));
+
+  background-color: var(--color-background) !important;
+}
+
+.bg-secondary {
+  --color-background: oklch(from var(--color-secondary-fill) l c h / var(--color-background-opacity));
+
+  background-color: var(--color-background) !important;
+}
+
+.bg-success {
+  --color-background: oklch(from var(--color-success-fill) l c h / var(--color-background-opacity));
+
+  background-color: var(--color-background) !important;
+}
+
+.bg-info {
+  --color-background: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
+
+  background-color: var(--color-background) !important;
+}
+
+.bg-warning {
+  --color-background: oklch(from var(--color-warning-fill) l c h / var(--color-background-opacity));
+
+  background-color: var(--color-background) !important;
+}
+
+.bg-danger {
+  --color-background: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
+
+  background-color: var(--color-background) !important;
+}
+
+.bg-contrast {
+  --color-background: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
+
+  background-color: var(--color-background) !important;
+}
+
+.bg-opacity-10 {
+  --color-background-opacity: 10%;
+}
+
+.bg-opacity-25 {
+  --color-background-opacity: 25%;
+}
+
+.bg-opacity-50 {
+  --color-background-opacity: 50%;
+}
+
+.bg-opacity-75 {
+  --color-background-opacity: 75%;
+}
+
+.bg-opacity-100 {
+  --color-background-opacity: 100%;
+}

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

@@ -1,69 +1,47 @@
 .border-primary {
-  --border-opacity: 1;
-
-  border-color: rgba(var(--color-primary-rgb), var(--border-opacity)) !important;
+  --color-border: var(--color-primary-fill);
 }
 
 .border-secondary {
-  --border-opacity: 1;
-
-  border-color: rgba(var(--color-secondary-rgb), var(--border-opacity)) !important;
+  --color-border: var(--color-secondary-fill);
 }
 
 .border-success {
-  --border-opacity: 1;
-
-  border-color: rgba(var(--color-success-rgb), var(--border-opacity)) !important;
+  --color-border: var(--color-success-fill);
 }
 
 .border-info {
-  --border-opacity: 1;
-
-  border-color: rgba(var(--color-info-rgb), var(--border-opacity)) !important;
+  --color-border: var(--color-info-fill);
 }
 
 .border-warning {
-  --border-opacity: 1;
-
-  border-color: rgba(var(--color-warning-rgb), var(--border-opacity)) !important;
+  --color-border: var(--color-warning-fill);
 }
 
 .border-danger {
-  --border-opacity: 1;
-
-  border-color: rgba(var(--color-danger-rgb), var(--border-opacity)) !important;
+  --color-border: var(--color-danger-fill);
 }
 
 .border-contrast {
-  --border-opacity: 1;
-
-  border-color: rgba(var(--color-contrast-rgb), var(--border-opacity)) !important;
-}
-
-.border-primary-subtle {
-  border-color: var(--color-primary-border-subtle) !important;
-}
-
-.border-secondary-subtle {
-  border-color: var(--color-secondary-border-subtle) !important;
+  --color-border: var(--color-contrast-fill);
 }
 
-.border-success-subtle {
-  border-color: var(--color-success-border-subtle) !important;
+.border-opacity-10 {
+  --color-border-opacity: 10%;
 }
 
-.border-info-subtle {
-  border-color: var(--color-info-border-subtle) !important;
+.border-opacity-25 {
+  --color-border-opacity: 25%;
 }
 
-.border-warning-subtle {
-  border-color: var(--color-warning-border-subtle) !important;
+.border-opacity-50 {
+  --color-border-opacity: 50%;
 }
 
-.border-danger-subtle {
-  border-color: var(--color-danger-border-subtle) !important;
+.border-opacity-75 {
+  --color-border-opacity: 75%;
 }
 
-.border-contrast-subtle {
-  border-color: var(--color-contrast-border-subtle) !important;
+.border-opacity-100 {
+  --color-border-opacity: 100%;
 }

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

@@ -0,0 +1,145 @@
+.bg-primary-subtle,
+.text-bg-primary-subtle {
+  --color-background: oklch(from var(--color-primary-subtle-fill) l c h / var(--color-background-opacity));
+
+  background-color: var(--color-background) !important;
+}
+
+.bg-secondary-subtle,
+.text-bg-secondary-subtle {
+  --color-background: oklch(from var(--color-secondary-subtle-fill) l c h / var(--color-background-opacity));
+
+  background-color: var(--color-background) !important;
+}
+
+.bg-contrast-subtle,
+.text-bg-contrast-subtle {
+  --color-background: oklch(from var(--color-contrast-subtle-fill) l c h / var(--color-background-opacity));
+
+  background-color: var(--color-background) !important;
+}
+
+.bg-success-subtle,
+.text-bg-success-subtle {
+  --color-background: oklch(from var(--color-success-subtle-fill) l c h / var(--color-background-opacity));
+
+  background-color: var(--color-background) !important;
+}
+
+.bg-info-subtle,
+.text-bg-info-subtle {
+  --color-background: oklch(from var(--color-info-subtle-fill) l c h / var(--color-background-opacity));
+
+  background-color: var(--color-background) !important;
+}
+
+.bg-warning-subtle,
+.text-bg-warning-subtle {
+  --color-background: oklch(from var(--color-warning-subtle-fill) l c h / var(--color-background-opacity));
+
+  background-color: var(--color-background) !important;
+}
+
+.bg-danger-subtle,
+.text-bg-danger-subtle {
+  --color-background: oklch(from var(--color-danger-subtle-fill) l c h / var(--color-background-opacity));
+
+  background-color: var(--color-background) !important;
+}
+
+.text-bg-primary-subtle {
+  --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  color: var(--color-text) !important;
+}
+
+.text-bg-secondary-subtle {
+  --color-text: oklch(from var(--color-secondary-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  color: var(--color-text) !important;
+}
+
+.text-bg-contrast-subtle {
+  --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  color: var(--color-text) !important;
+}
+
+.text-bg-success-subtle {
+  --color-text: oklch(from var(--color-success-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  color: var(--color-text) !important;
+}
+
+.text-bg-info-subtle {
+  --color-text: oklch(from var(--color-info-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  color: var(--color-text) !important;
+}
+
+.text-bg-warning-subtle {
+  --color-text: oklch(from var(--color-warning-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  color: var(--color-text) !important;
+}
+
+.text-bg-danger-subtle {
+  --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  color: var(--color-text) !important;
+}
+
+.border-primary-subtle {
+  --border-color: oklch(from var(--color-primary-subtle-fill) l c h / var(--color-border-opacity));
+}
+
+.border-secondary-subtle {
+  --border-color: oklch(from var(--color-secondary-subtle-fill) l c h / var(--color-border-opacity));
+}
+
+.border-contrast-subtle {
+  --border-color: oklch(from var(--color-contrast-subtle-fill) l c h / var(--color-border-opacity));
+}
+
+.border-success-subtle {
+  --border-color: oklch(from var(--color-success-subtle-fill) l c h / var(--color-border-opacity));
+}
+
+.border-info-subtle {
+  --border-color: oklch(from var(--color-info-subtle-fill) l c h / var(--color-border-opacity));
+}
+
+.border-warning-subtle {
+  --border-color: oklch(from var(--color-warning-subtle-fill) l c h / var(--color-border-opacity));
+}
+
+.border-danger-subtle {
+  --border-color: oklch(from var(--color-danger-subtle-fill) l c h / var(--color-border-opacity));
+}
+
+.subtle-opacity-10 {
+  --subtle-opacity: 10%;
+}
+
+.subtle-opacity-25 {
+  --subtle-opacity: 25%;
+}
+
+.subtle-opacity-50 {
+  --subtle-opacity: 50%;
+}
+
+.subtle-opacity-75 {
+  --subtle-opacity: 75%;
+}
+
+.subtle-opacity-100 {
+  --subtle-opacity: 100%;
+}

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

@@ -0,0 +1,62 @@
+.text-bg-primary {
+  --color-background: oklch(from var(--color-primary-fill) l c h / var(--color-background-opacity));
+  --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  color: var(--color-text) !important;
+  background-color: var(--color-background) !important;
+}
+
+.text-bg-secondary {
+  --color-background: oklch(from var(--color-secondary-fill) l c h / var(--color-background-opacity));
+  --color-text: oklch(from var(--color-secondary-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  color: var(--color-text) !important;
+  background-color: var(--color-background) !important;
+}
+
+.text-bg-contrast {
+  --color-background: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
+  --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  color: var(--color-text) !important;
+  background-color: var(--color-background) !important;
+}
+
+.text-bg-success {
+  --color-background: oklch(from var(--color-success-fill) l c h / var(--color-background-opacity));
+  --color-text: oklch(from var(--color-success-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  color: var(--color-text) !important;
+  background-color: var(--color-background) !important;
+}
+
+.text-bg-info {
+  --color-background: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
+  --color-text: oklch(from var(--color-info-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  color: var(--color-text) !important;
+  background-color: var(--color-background) !important;
+}
+
+.text-bg-warning {
+  --color-background: oklch(from var(--color-warning-fill) l c h / var(--color-background-opacity));
+  --color-text: oklch(from var(--color-warning-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  color: var(--color-text) !important;
+  background-color: var(--color-background) !important;
+}
+
+.text-bg-danger {
+  --color-background: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
+  --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
+  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+
+  color: var(--color-text) !important;
+  background-color: var(--color-background) !important;
+}