@jackcrane/ui 0.1.7 → 0.1.8

package/dist/jcui.cjs.js

@@ -209,7 +209,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: rotate(360deg);
   }
 }
-._card_1u4j4_1 {
+._card_et6fi_1 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -218,64 +218,70 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   display: flex;
   flex-direction: column;
 }
-._card_1u4j4_1 ._title_1u4j4_11 {
+._pageBackground_et6fi_11 {
+  --card-bg: var(--body-bg);
+  --button-bg: var(--body-bg);
+  --card-color: var(--body-color);
+  background-color: var(--body-bg);
+}
+._card_et6fi_1 ._title_et6fi_18 {
   font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-bottom: var(--border-thickness) solid var(--border-color);
   background-color: var(--card-bg);
 }
-._card_1u4j4_1 ._body_1u4j4_18 {
+._card_et6fi_1 ._body_et6fi_25 {
   padding: 0.5rem 1rem;
   width: 100%;
 }
-._card_1u4j4_1 ._footer_1u4j4_23 {
+._card_et6fi_1 ._footer_et6fi_30 {
   border-top: var(--border-thickness) solid var(--border-color);
   flex: 1;
   background-color: var(--card-bg);
   padding: 0.5rem 1rem;
 }
-._large_1u4j4_30 ._body_1u4j4_18,
-._large_1u4j4_30 ._title_1u4j4_11 {
+._large_et6fi_37 ._body_et6fi_25,
+._large_et6fi_37 ._title_et6fi_18 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1u4j4_36 ._body_1u4j4_18,
-._small_1u4j4_36 ._title_1u4j4_11 {
+._small_et6fi_43 ._body_et6fi_25,
+._small_et6fi_43 ._title_et6fi_18 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
 /* Variants */
-._primary_1u4j4_44 {
+._primary_et6fi_51 {
   --card-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --border-accent-color: var(--primary-color-600);
   --card-color: var(--primary-color-800);
 }
-._success_1u4j4_51 {
+._success_et6fi_58 {
   --card-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --border-accent-color: var(--success-color-600);
   --card-color: var(--success-color-800);
 }
-._warning_1u4j4_58 {
+._warning_et6fi_65 {
   --card-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --border-accent-color: var(--warning-color-600);
   --card-color: var(--warning-color-800);
 }
-._danger_1u4j4_65 {
+._danger_et6fi_72 {
   --card-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --border-accent-color: var(--danger-color-600);
   --card-color: var(--danger-color-800);
 }
-._info_1u4j4_72 {
+._info_et6fi_79 {
   --card-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --border-accent-color: var(--info-color-600);
   --card-color: var(--info-color-800);
 }
-._secondary_1u4j4_79 {
+._secondary_et6fi_86 {
   --card-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
@@ -1925,7 +1931,7 @@ function clsx() {
   return n2;
 }
 const button = "_button_105y0_7";
-const pageBackground$1 = "_pageBackground_105y0_24";
+const pageBackground$2 = "_pageBackground_105y0_24";
 const large$6 = "_large_105y0_34";
 const small$6 = "_small_105y0_39";
 const disabled$6 = "_disabled_105y0_44";
@@ -1937,7 +1943,7 @@ const info$8 = "_info_105y0_103";
 const secondary$8 = "_secondary_105y0_116";
 const styles$b = {
   button,
-  pageBackground: pageBackground$1,
+  pageBackground: pageBackground$2,
   large: large$6,
   small: small$6,
   disabled: disabled$6,
@@ -2101,20 +2107,22 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const card = "_card_1u4j4_1";
-const title$1 = "_title_1u4j4_11";
-const body$1 = "_body_1u4j4_18";
-const footer$1 = "_footer_1u4j4_23";
-const large$5 = "_large_1u4j4_30";
-const small$5 = "_small_1u4j4_36";
-const primary$7 = "_primary_1u4j4_44";
-const success$7 = "_success_1u4j4_51";
-const warning$7 = "_warning_1u4j4_58";
-const danger$7 = "_danger_1u4j4_65";
-const info$7 = "_info_1u4j4_72";
-const secondary$7 = "_secondary_1u4j4_79";
+const card = "_card_et6fi_1";
+const pageBackground$1 = "_pageBackground_et6fi_11";
+const title$1 = "_title_et6fi_18";
+const body$1 = "_body_et6fi_25";
+const footer$1 = "_footer_et6fi_30";
+const large$5 = "_large_et6fi_37";
+const small$5 = "_small_et6fi_43";
+const primary$7 = "_primary_et6fi_51";
+const success$7 = "_success_et6fi_58";
+const warning$7 = "_warning_et6fi_65";
+const danger$7 = "_danger_et6fi_72";
+const info$7 = "_info_et6fi_79";
+const secondary$7 = "_secondary_et6fi_86";
 const styles$9 = {
   card,
+  pageBackground: pageBackground$1,
   title: title$1,
   body: body$1,
   footer: footer$1,
@@ -2143,6 +2151,7 @@ function Card({
     {
       className: classNames(
         styles$9.card,
+        !variant && styles$9.pageBackground,
         styles$9[variant],
         chamfer2 && chamferStyles.chamfer,
         size2 === "large" && styles$9.large,

package/dist/jcui.es.js

@@ -209,7 +209,7 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
     transform: rotate(360deg);
   }
 }
-._card_1u4j4_1 {
+._card_et6fi_1 {
   border-width: var(--border-thickness);
   border-style: solid;
   font-size: 1rem;
@@ -218,64 +218,70 @@ div._chamfer_1o5rm_1:not(._disabled_1o5rm_15):focus-within {
   display: flex;
   flex-direction: column;
 }
-._card_1u4j4_1 ._title_1u4j4_11 {
+._pageBackground_et6fi_11 {
+  --card-bg: var(--body-bg);
+  --button-bg: var(--body-bg);
+  --card-color: var(--body-color);
+  background-color: var(--body-bg);
+}
+._card_et6fi_1 ._title_et6fi_18 {
   font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-bottom: var(--border-thickness) solid var(--border-color);
   background-color: var(--card-bg);
 }
-._card_1u4j4_1 ._body_1u4j4_18 {
+._card_et6fi_1 ._body_et6fi_25 {
   padding: 0.5rem 1rem;
   width: 100%;
 }
-._card_1u4j4_1 ._footer_1u4j4_23 {
+._card_et6fi_1 ._footer_et6fi_30 {
   border-top: var(--border-thickness) solid var(--border-color);
   flex: 1;
   background-color: var(--card-bg);
   padding: 0.5rem 1rem;
 }
-._large_1u4j4_30 ._body_1u4j4_18,
-._large_1u4j4_30 ._title_1u4j4_11 {
+._large_et6fi_37 ._body_et6fi_25,
+._large_et6fi_37 ._title_et6fi_18 {
   font-size: 1.25rem;
   padding: 0.75rem 1.25rem;
 }
-._small_1u4j4_36 ._body_1u4j4_18,
-._small_1u4j4_36 ._title_1u4j4_11 {
+._small_et6fi_43 ._body_et6fi_25,
+._small_et6fi_43 ._title_et6fi_18 {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
 }
 /* Variants */
-._primary_1u4j4_44 {
+._primary_et6fi_51 {
   --card-bg: var(--primary-color-100);
   --border-color: var(--primary-color-300);
   --border-accent-color: var(--primary-color-600);
   --card-color: var(--primary-color-800);
 }
-._success_1u4j4_51 {
+._success_et6fi_58 {
   --card-bg: var(--success-color-100);
   --border-color: var(--success-color-300);
   --border-accent-color: var(--success-color-600);
   --card-color: var(--success-color-800);
 }
-._warning_1u4j4_58 {
+._warning_et6fi_65 {
   --card-bg: var(--warning-color-100);
   --border-color: var(--warning-color-300);
   --border-accent-color: var(--warning-color-600);
   --card-color: var(--warning-color-800);
 }
-._danger_1u4j4_65 {
+._danger_et6fi_72 {
   --card-bg: var(--danger-color-100);
   --border-color: var(--danger-color-300);
   --border-accent-color: var(--danger-color-600);
   --card-color: var(--danger-color-800);
 }
-._info_1u4j4_72 {
+._info_et6fi_79 {
   --card-bg: var(--info-color-100);
   --border-color: var(--info-color-300);
   --border-accent-color: var(--info-color-600);
   --card-color: var(--info-color-800);
 }
-._secondary_1u4j4_79 {
+._secondary_et6fi_86 {
   --card-bg: var(--secondary-color-100);
   --border-color: var(--secondary-color-300);
   --border-accent-color: var(--secondary-color-600);
@@ -1907,7 +1913,7 @@ function clsx() {
   return n2;
 }
 const button = "_button_105y0_7";
-const pageBackground$1 = "_pageBackground_105y0_24";
+const pageBackground$2 = "_pageBackground_105y0_24";
 const large$6 = "_large_105y0_34";
 const small$6 = "_small_105y0_39";
 const disabled$6 = "_disabled_105y0_44";
@@ -1919,7 +1925,7 @@ const info$8 = "_info_105y0_103";
 const secondary$8 = "_secondary_105y0_116";
 const styles$b = {
   button,
-  pageBackground: pageBackground$1,
+  pageBackground: pageBackground$2,
   large: large$6,
   small: small$6,
   disabled: disabled$6,
@@ -2083,20 +2089,22 @@ function requireClassnames() {
 }
 var classnamesExports = requireClassnames();
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const card = "_card_1u4j4_1";
-const title$1 = "_title_1u4j4_11";
-const body$1 = "_body_1u4j4_18";
-const footer$1 = "_footer_1u4j4_23";
-const large$5 = "_large_1u4j4_30";
-const small$5 = "_small_1u4j4_36";
-const primary$7 = "_primary_1u4j4_44";
-const success$7 = "_success_1u4j4_51";
-const warning$7 = "_warning_1u4j4_58";
-const danger$7 = "_danger_1u4j4_65";
-const info$7 = "_info_1u4j4_72";
-const secondary$7 = "_secondary_1u4j4_79";
+const card = "_card_et6fi_1";
+const pageBackground$1 = "_pageBackground_et6fi_11";
+const title$1 = "_title_et6fi_18";
+const body$1 = "_body_et6fi_25";
+const footer$1 = "_footer_et6fi_30";
+const large$5 = "_large_et6fi_37";
+const small$5 = "_small_et6fi_43";
+const primary$7 = "_primary_et6fi_51";
+const success$7 = "_success_et6fi_58";
+const warning$7 = "_warning_et6fi_65";
+const danger$7 = "_danger_et6fi_72";
+const info$7 = "_info_et6fi_79";
+const secondary$7 = "_secondary_et6fi_86";
 const styles$9 = {
   card,
+  pageBackground: pageBackground$1,
   title: title$1,
   body: body$1,
   footer: footer$1,
@@ -2125,6 +2133,7 @@ function Card({
     {
       className: classNames(
         styles$9.card,
+        !variant && styles$9.pageBackground,
         styles$9[variant],
         chamfer2 && chamferStyles.chamfer,
         size2 === "large" && styles$9.large,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackcrane/ui",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "sideEffects": false,
   "main": "dist/jcui.cjs.js",