@code-coaching/vuetiful 0.24.2 → 0.24.4

package/dist/vuetiful.es.mjs

@@ -50114,10 +50114,10 @@ const themes = [
       surface: { key: "surface", label: "Surface", hex: "#6366F1", rgb: "0 0 0", on: "255 255 255" }
     },
     fonts: {
-      base: "system",
+      base: "system-ui",
       customBase: "Quicksand",
       baseImports: '@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");',
-      headings: "system",
+      headings: "system-ui",
       customHeadings: "Quicksand",
       headingImports: ""
     },
@@ -50154,10 +50154,10 @@ const themes = [
       surface: { key: "surface", label: "Surface", hex: "#64748b", rgb: "0 0 0", on: "255 255 255" }
     },
     fonts: {
-      base: "system",
+      base: "system-ui",
       customBase: "Roboto",
       baseImports: '@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");',
-      headings: "system",
+      headings: "system-ui",
       customHeadings: "Space Grotesk",
       headingImports: '@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");'
     },
@@ -50175,6 +50175,155 @@ const themes = [
   [data-theme='rocket'] h6 {
     font-weight: bold;
   }`
+  },
+  {
+    name: "sahara",
+    gradients: {
+      light: "radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%), radial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%)",
+      dark: "radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%), radial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%)"
+    },
+    colors: {
+      primary: { key: "primary", label: "Primary", hex: "#ecaa36", rgb: "0 0 0", on: "0 0 0" },
+      secondary: { key: "secondary", label: "Secondary", hex: "#3acbba", rgb: "0 0 0", on: "0 0 0" },
+      tertiary: { key: "tertiary", label: "Tertiary", hex: "#bbdf86", rgb: "0 0 0", on: "0 0 0" },
+      success: { key: "success", label: "Success", hex: "#84cc16", rgb: "0 0 0", on: "0 0 0" },
+      warning: { key: "warning", label: "Warning", hex: "#e5c157", rgb: "0 0 0", on: "0 0 0" },
+      error: { key: "error", label: "Error", hex: "#db5c9c", rgb: "0 0 0", on: "255 255 255" },
+      surface: { key: "surface", label: "Surface", hex: "#da4e65", rgb: "0 0 0", on: "255 255 255" }
+    },
+    fonts: {
+      base: "sans-serif",
+      customBase: "Lato",
+      baseImports: '@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");',
+      headings: "sans-serif",
+      customHeadings: "Raleway",
+      headingImports: '@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");'
+    },
+    textColorLight: "0 0 0",
+    textColorDark: "255 255 255",
+    roundedBase: "9999px",
+    roundedContainer: "24px",
+    borderBase: "1px",
+    customCss: `
+[data-theme='sahara'] h1,
+[data-theme='sahara'] h2,
+[data-theme='sahara'] h3,
+[data-theme='sahara'] h4,
+[data-theme='sahara'] h5,
+[data-theme='sahara'] h6 {
+  font-weight: 600;
+}
+[data-theme='sahara'] p {
+  font-weight: 400;
+}`
+  },
+  {
+    name: "seafoam",
+    gradients: {
+      light: "linear-gradient(0deg, rgba(203, 221, 254, 0.75) 0%, rgba(163, 209, 206, 0.75) 100%)",
+      dark: "linear-gradient(0deg, rgba(203, 221, 254, 0.75) 0%, rgba(163, 209, 206, 0.75) 100%)"
+    },
+    colors: {
+      primary: { key: "primary", label: "Primary", hex: "#86d0cb", rgb: "0 0 0", on: "0 0 0" },
+      secondary: { key: "secondary", label: "Secondary", hex: "#213355", rgb: "0 0 0", on: "255 255 255" },
+      tertiary: { key: "tertiary", label: "Tertiary", hex: "#ff3d00", rgb: "0 0 0", on: "255 255 255" },
+      success: { key: "success", label: "Success", hex: "#06e5a2", rgb: "0 0 0", on: "0 0 0" },
+      warning: { key: "warning", label: "Warning", hex: "#eae557", rgb: "0 0 0", on: "0 0 0" },
+      error: { key: "error", label: "Error", hex: "#d24646", rgb: "0 0 0", on: "255 255 255" },
+      surface: { key: "surface", label: "Surface", hex: "#25d1d4", rgb: "0 0 0", on: "0 0 0" }
+    },
+    fonts: {
+      base: "system-ui",
+      customBase: "",
+      baseImports: "",
+      headings: "serif",
+      customHeadings: "Playfair Display",
+      headingImports: '@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");'
+    },
+    textColorLight: "0 0 0",
+    textColorDark: "255 255 255",
+    roundedBase: "16px",
+    roundedContainer: "16px",
+    borderBase: "3px",
+    customCss: `
+[data-theme='seafoam'] h1,
+[data-theme='seafoam'] h2,
+[data-theme='seafoam'] h3,
+[data-theme='seafoam'] h4,
+[data-theme='seafoam'] h5,
+[data-theme='seafoam'] h6 {
+  font-weight: bold;
+  font-style: italic;
+  letter-spacing: 1px;
+}`
+  },
+  {
+    name: "seasonal",
+    gradients: {
+      light: "radial-gradient(at 22% 100%, hsla(39,68%,50%,0.23) 0px, transparent 50%), radial-gradient(at 80% 100%, hsla(189,100%,56%,0.33) 0px, transparent 50%)",
+      dark: "radial-gradient(at 22% 0%, hsla(39,68%,50%,0.15) 0px, transparent 50%), radial-gradient(at 80% 0%, hsla(189,100%,56%,0.15) 0px, transparent 50%)"
+    },
+    colors: {
+      primary: { key: "primary", label: "Primary", hex: "#40b09d", rgb: "0 0 0", on: "0 0 0" },
+      secondary: { key: "secondary", label: "Secondary", hex: "#d7a12d", rgb: "0 0 0", on: "255 255 255" },
+      tertiary: { key: "tertiary", label: "Tertiary", hex: "#411d96", rgb: "0 0 0", on: "255 255 255" },
+      success: { key: "success", label: "Success", hex: "#aad765", rgb: "0 0 0", on: "0 0 0" },
+      warning: { key: "warning", label: "Warning", hex: "#e1ca84", rgb: "0 0 0", on: "0 0 0" },
+      error: { key: "error", label: "Error", hex: "#e1565d", rgb: "0 0 0", on: "255 255 255" },
+      surface: { key: "surface", label: "Surface", hex: "#0f233e", rgb: "0 0 0", on: "255 255 255" }
+    },
+    fonts: {
+      base: "system-ui",
+      customBase: "",
+      baseImports: "",
+      headings: "sans-serif",
+      customHeadings: "Quicksand",
+      headingImports: '@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");'
+    },
+    textColorLight: "0 0 0",
+    textColorDark: "255 255 255",
+    roundedBase: "12px",
+    roundedContainer: "12px",
+    borderBase: "0px",
+    customCss: ""
+  },
+  {
+    name: "skeleton",
+    gradients: {
+      light: "radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%), radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);",
+      dark: "radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%), radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);"
+    },
+    colors: {
+      primary: { key: "primary", label: "Primary", hex: "#0FBA81", rgb: "0 0 0", on: "0 0 0" },
+      secondary: { key: "secondary", label: "Secondary", hex: "#4F46E5", rgb: "0 0 0", on: "255 255 255" },
+      tertiary: { key: "tertiary", label: "Tertiary", hex: "#0EA5E9", rgb: "0 0 0", on: "0 0 0" },
+      success: { key: "success", label: "Success", hex: "#84cc16", rgb: "0 0 0", on: "0 0 0" },
+      warning: { key: "warning", label: "Warning", hex: "#EAB308", rgb: "0 0 0", on: "0 0 0" },
+      error: { key: "error", label: "Error", hex: "#D41976", rgb: "0 0 0", on: "255 255 255" },
+      surface: { key: "surface", label: "Surface", hex: "#495a8f", rgb: "0 0 0", on: "255 255 255" }
+    },
+    fonts: {
+      base: "system-ui",
+      customBase: "",
+      baseImports: "",
+      headings: "system-ui",
+      customHeadings: "",
+      headingImports: ""
+    },
+    textColorLight: "0 0 0",
+    textColorDark: "255 255 255",
+    roundedBase: "9999px",
+    roundedContainer: "8px",
+    borderBase: "px",
+    customCss: `
+[data-theme='skeleton'] h1,
+[data-theme='skeleton'] h2,
+[data-theme='skeleton'] h3,
+[data-theme='skeleton'] h4,
+[data-theme='skeleton'] h5,
+[data-theme='skeleton'] h6 {
+  font-weight: bold;
+}`
   }
 ];
 const THEME = {