npm - @semanticus/semanticus-css - Versions diffs - 0.5.1 → 0.8.0 - Mend

@semanticus/semanticus-css 0.5.1 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

package/README.md +8 -10
package/dist/semanticus-semantics.css +11 -1
package/dist/semanticus.css +13 -1
package/dist/semanticus.palette.amber.css +1 -1
package/dist/semanticus.palette.blue.css +1 -1
package/dist/semanticus.palette.cyan.css +1 -1
package/dist/semanticus.palette.fuchsia.css +1 -1
package/dist/semanticus.palette.green.css +1 -1
package/dist/semanticus.palette.grey.css +1 -1
package/dist/semanticus.palette.indigo.css +1 -1
package/dist/semanticus.palette.jade.css +1 -1
package/dist/semanticus.palette.lime.css +1 -1
package/dist/semanticus.palette.orange.css +1 -1
package/dist/semanticus.palette.pink.css +1 -1
package/dist/semanticus.palette.pumpkin.css +1 -1
package/dist/semanticus.palette.purple.css +1 -1
package/dist/semanticus.palette.red.css +1 -1
package/dist/semanticus.palette.sand.css +1 -1
package/dist/semanticus.palette.slate.css +1 -1
package/dist/semanticus.palette.violet.css +1 -1
package/dist/semanticus.palette.yellow.css +1 -1
package/dist/semanticus.palette.zinc.css +1 -1
package/dist/semanticus.size.pico.css +1 -0
package/package.json +3 -7
package/src/index.css +11 -4
package/src/palettes/amber.css +3 -3
package/src/palettes/blue.css +3 -3
package/src/palettes/cyan.css +3 -3
package/src/palettes/fuchsia.css +3 -3
package/src/palettes/green.css +3 -3
package/src/palettes/grey.css +3 -3
package/src/palettes/indigo.css +3 -3
package/src/palettes/jade.css +3 -3
package/src/palettes/lime.css +3 -3
package/src/palettes/orange.css +3 -3
package/src/palettes/pink.css +3 -3
package/src/palettes/pumpkin.css +3 -3
package/src/palettes/purple.css +3 -3
package/src/palettes/red.css +3 -3
package/src/palettes/sand.css +3 -3
package/src/palettes/slate.css +3 -3
package/src/palettes/violet.css +3 -3
package/src/palettes/yellow.css +3 -3
package/src/palettes/zinc.css +3 -3
package/src/semantics/_aside.css +2 -2
package/src/semantics/_details.css +1 -1
package/src/semantics/_input.css +2 -2
package/src/semantics/_links.css +1 -1
package/src/semantics/_progress.css +1 -1
package/src/semantics/_typography.css +18 -9
package/src/semantics/index.css +9 -4
package/src/sizes/pico.css +95 -0
package/src/utilities/_variables.css +19 -214
package/src/utilities/borders/_border-radius.css +24 -0
package/src/utilities/borders/_border-width.css +8 -0
package/src/utilities/colors/_background-colors.css +90 -51
package/src/utilities/colors/_border-colors.css +14 -14
package/src/utilities/colors/_text-colors.css +172 -82
package/src/utilities/effects/_shadows.css +10 -10
package/src/utilities/layout/_flexbox.css +16 -1
package/src/utilities/layout/_misc.css +2 -2
package/src/utilities/modules.css +6 -0
package/src/utilities/spacing/_gap.css +63 -0
package/src/utilities/spacing/_margin.css +145 -0
package/src/utilities/spacing/_padding.css +145 -0
package/src/utilities/typography/_font-sizes.css +0 -15
package/src/variables/_all.css +15 -754
package/src/variables/_breakpoints.css +10 -0
package/src/variables/_colors.css +366 -0
package/src/variables/_components.css +318 -0
package/src/variables/_elements.css +199 -0
package/src/variables/_icons.css +43 -0
package/src/variables/{_shared.css → _layout.css} +71 -64
package/src/variants/_contrast.css +1 -1
package/src/variants/_ghost.css +8 -8
package/src/variants/_secondary.css +1 -1
package/src/variants/modules.css +0 -1
package/dist/semanticus-utilities.css +0 -7
package/dist/semanticus-variants.css +0 -1
package/dist/semanticus.size.slim.css +0 -1
package/src/sizes/slim.css +0 -41
package/src/utilities/index.css +0 -14
package/src/variants/_frame.css +0 -15
package/src/variants/index.css +0 -9

package/src/utilities/borders/_border-radius.css CHANGED Viewed

@@ -6,6 +6,10 @@
   border-radius: 0 !important;
 }
+.rounded-d {
+  border-radius: var(--border-radius-default) !important;
+}
 .rounded-1 {
   border-radius: var(--border-radius-sm) !important;
 }
@@ -44,6 +48,11 @@
   border-top-right-radius: 0 !important;
 }
+.rounded-top-d {
+  border-top-left-radius: var(--border-radius-default) !important;
+  border-top-right-radius: var(--border-radius-default) !important;
+}
 .rounded-top-1 {
   border-top-left-radius: var(--border-radius-sm) !important;
   border-top-right-radius: var(--border-radius-sm) !important;
@@ -89,6 +98,11 @@
   border-bottom-right-radius: 0 !important;
 }
+.rounded-end-d {
+  border-top-right-radius: var(--border-radius-default) !important;
+  border-bottom-right-radius: var(--border-radius-default) !important;
+}
 .rounded-end-1 {
   border-top-right-radius: var(--border-radius-sm) !important;
   border-bottom-right-radius: var(--border-radius-sm) !important;
@@ -134,6 +148,11 @@
   border-bottom-left-radius: 0 !important;
 }
+.rounded-bottom-d {
+  border-bottom-right-radius: var(--border-radius-default) !important;
+  border-bottom-left-radius: var(--border-radius-default) !important;
+}
 .rounded-bottom-1 {
   border-bottom-right-radius: var(--border-radius-sm) !important;
   border-bottom-left-radius: var(--border-radius-sm) !important;
@@ -179,6 +198,11 @@
   border-top-left-radius: 0 !important;
 }
+.rounded-start-d {
+  border-bottom-left-radius: var(--border-radius-default) !important;
+  border-top-left-radius: var(--border-radius-default) !important;
+}
 .rounded-start-1 {
   border-bottom-left-radius: var(--border-radius-sm) !important;
   border-top-left-radius: var(--border-radius-sm) !important;

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

@@ -1,3 +1,11 @@
+.border-0 {
+  border-width: 0 !important;
+}
+.border-d {
+  border-width: var(--border-width-default) !important;
+}
 .border-1 {
   border-width: var(--border-width-1) !important;
 }

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

@@ -1,147 +1,161 @@
 .text-bg-primary {
   --color-text: var(--color-primary-inverse) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-  color: var(--color-primary-inverse) !important;
-  background-color: rgba(var(--primary-rgb), var(--bg-opacity, 1)) !important;
+  color: var(--color-text) !important;
+  background-color: rgba(var(--color-primary-rgb), var(--bg-opacity, 1)) !important;
 }
 .text-bg-secondary {
   --color-text: var(--color-secondary-inverse) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-  color: var(--color-secondary-inverse) !important;
-  background-color: rgba(var(--secondary-rgb), var(--bg-opacity, 1)) !important;
+  color: var(--color-text) !important;
+  background-color: rgba(var(--color-secondary-rgb), var(--bg-opacity, 1)) !important;
 }
 .text-bg-success {
   --color-text: var(--color-success-inverse) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-  color: var(--color-success-inverse) !important;
-  background-color: rgba(var(--success-rgb), var(--bg-opacity, 1)) !important;
+  color: var(--color-text) !important;
+  background-color: rgba(var(--color-success-rgb), var(--bg-opacity, 1)) !important;
 }
 .text-bg-info {
   --color-text: var(--color-info-inverse) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-  color: var(--color-info-inverse) !important;
-  background-color: rgba(var(--info-rgb), var(--bg-opacity, 1)) !important;
+  color: var(--color-text) !important;
+  background-color: rgba(var(--color-info-rgb), var(--bg-opacity, 1)) !important;
 }
 .text-bg-warning {
   --color-text: var(--color-warning-inverse) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-  color: var(--color-warning-inverse) !important;
-  background-color: rgba(var(--warning-rgb), var(--bg-opacity, 1)) !important;
+  color: var(--color-text) !important;
+  background-color: rgba(var(--color-warning-rgb), var(--bg-opacity, 1)) !important;
 }
 .text-bg-danger {
   --color-text: var(--color-danger-inverse) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-  color: var(--color-danger-inverse) !important;
-  background-color: rgba(var(--danger-rgb), var(--bg-opacity, 1)) !important;
+  color: var(--color-text) !important;
+  background-color: rgba(var(--color-danger-rgb), var(--bg-opacity, 1)) !important;
 }
 .text-bg-contrast {
   --color-text: var(--color-contrast-inverse) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-  color: var(--color-contrast-inverse) !important;
-  background-color: rgba(var(--contrast-rgb), var(--bg-opacity, 1)) !important;
+  color: var(--color-text) !important;
+  background-color: rgba(var(--color-contrast-rgb), var(--bg-opacity, 1)) !important;
 }
 .text-bg-primary-subtle {
-  --color-text: var(--primary-text-emphasis) !important;
+  --color-text: rgb(var(--color-primary-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-  color: var(--primary-text-emphasis) !important;
-  background-color: var(--primary-bg-subtle) !important;
+  color: rgb(var(--color-primary-emphasis-rgb)) !important;
+  background-color: var(--color-primary-bg-subtle) !important;
 }
 .text-bg-secondary-subtle {
-  --color-text: var(--secondary-text-emphasis) !important;
+  --color-text: rgb(var(--color-secondary-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-  color: var(--secondary-text-emphasis) !important;
-  background-color: var(--secondary-bg-subtle) !important;
+  color: rgb(var(--color-secondary-emphasis-rgb)) !important;
+  background-color: var(--color-secondary-bg-subtle) !important;
 }
 .text-bg-success-subtle {
-  --color-text: var(--success-text-emphasis) !important;
+  --color-text: rgb(var(--color-success-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-  color: var(--success-text-emphasis) !important;
-  background-color: var(--success-bg-subtle) !important;
+  color: rgb(var(--color-success-emphasis-rgb)) !important;
+  background-color: var(--color-success-bg-subtle) !important;
 }
 .text-bg-info-subtle {
-  --color-text: var(--info-text-emphasis) !important;
+  --color-text: rgb(var(--color-info-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-  color: var(--info-text-emphasis) !important;
-  background-color: var(--info-bg-subtle) !important;
+  color: rgb(var(--color-info-emphasis-rgb)) !important;
+  background-color: var(--color-info-bg-subtle) !important;
 }
 .text-bg-warning-subtle {
-  --color-text: var(--warning-text-emphasis) !important;
+  --color-text: rgb(var(--color-warning-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-  color: var(--warning-text-emphasis) !important;
-  background-color: var(--warning-bg-subtle) !important;
+  color: rgb(var(--color-warning-emphasis-rgb)) !important;
+  background-color: var(--color-warning-bg-subtle) !important;
 }
 .text-bg-danger-subtle {
-  --color-text: var(--danger-text-emphasis) !important;
+  --color-text: rgb(var(--color-danger-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-  color: var(--danger-text-emphasis) !important;
-  background-color: var(--danger-bg-subtle) !important;
+  color: rgb(var(--color-danger-emphasis-rgb)) !important;
+  background-color: var(--color-danger-bg-subtle) !important;
 }
 .text-bg-contrast-subtle {
-  --color-text: var(--contrast-text-emphasis) !important;
+  --color-text: rgb(var(--color-contrast-emphasis-rgb)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-  color: var(--contrast-text-emphasis) !important;
-  background-color: var(--contrast-bg-subtle) !important;
+  color: rgb(var(--color-contrast-emphasis-rgb)) !important;
+  background-color: var(--color-contrast-bg-subtle) !important;
 }
 .bg-primary {
   --bg-opacity: 1;
-  background-color: rgba(var(--primary-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-primary-rgb), var(--bg-opacity)) !important;
 }
 .bg-secondary {
   --bg-opacity: 1;
-  background-color: rgba(var(--secondary-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-secondary-rgb), var(--bg-opacity)) !important;
 }
 .bg-success {
   --bg-opacity: 1;
-  background-color: rgba(var(--success-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-success-rgb), var(--bg-opacity)) !important;
 }
 .bg-info {
   --bg-opacity: 1;
-  background-color: rgba(var(--info-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-info-rgb), var(--bg-opacity)) !important;
 }
 .bg-warning {
   --bg-opacity: 1;
-  background-color: rgba(var(--warning-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-warning-rgb), var(--bg-opacity)) !important;
 }
 .bg-danger {
   --bg-opacity: 1;
-  background-color: rgba(var(--danger-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-danger-rgb), var(--bg-opacity)) !important;
 }
 .bg-contrast {
   --bg-opacity: 1;
-  background-color: rgba(var(--contrast-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-contrast-rgb), var(--bg-opacity)) !important;
 }
 .bg-body {
   --bg-opacity: 1;
-  background-color: rgba(var(--body-bg-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-body-bg-rgb), var(--bg-opacity)) !important;
 }
 .bg-transparent {
@@ -153,7 +167,7 @@
 .bg-body-secondary {
   --bg-opacity: 1;
-  background-color: rgba(var(--secondary-bg-rgb), var(--bg-opacity)) !important;
+  background-color: rgba(var(--color-secondary-bg-rgb), var(--bg-opacity)) !important;
 }
 .bg-opacity-10 {
@@ -177,33 +191,58 @@
 }
 .bg-primary-subtle {
-  background-color: var(--primary-bg-subtle) !important;
+  background-color: var(--color-primary-bg-subtle) !important;
 }
 .bg-secondary-subtle {
-  background-color: var(--secondary-bg-subtle) !important;
+  background-color: var(--color-secondary-bg-subtle) !important;
 }
 .bg-success-subtle {
-  background-color: var(--success-bg-subtle) !important;
+  background-color: var(--color-success-bg-subtle) !important;
 }
 .bg-info-subtle {
-  background-color: var(--info-bg-subtle) !important;
+  background-color: var(--color-info-bg-subtle) !important;
 }
 .bg-warning-subtle {
-  background-color: var(--warning-bg-subtle) !important;
+  background-color: var(--color-warning-bg-subtle) !important;
 }
 .bg-danger-subtle {
-  background-color: var(--danger-bg-subtle) !important;
+  background-color: var(--color-danger-bg-subtle) !important;
 }
 .bg-contrast-subtle {
-  background-color: var(--contrast-bg-subtle) !important;
+  background-color: var(--color-contrast-bg-subtle) !important;
 }
 .bg-gradient {
   background-image: var(--gradient) !important;
 }
+/* Dark mode: headings should be lighter than inverse text (mix in white) */
+@media (prefers-color-scheme: dark) {
+  .text-bg-primary,
+  .text-bg-secondary,
+  .text-bg-success,
+  .text-bg-info,
+  .text-bg-warning,
+  .text-bg-danger,
+  .text-bg-contrast {
+    --color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
+  }
+}
+[data-theme="dark"] {
+  .text-bg-primary,
+  .text-bg-secondary,
+  .text-bg-success,
+  .text-bg-info,
+  .text-bg-warning,
+  .text-bg-danger,
+  .text-bg-contrast {
+    --color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
+  }
+}

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

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