frankenstyle 0.1.0-next.1 → 0.1.0-next.11

package/README.md

@@ -1,33 +1,11 @@
-# Frankenstyle
-
-Frankenstyle is the spiritual successor to **Franken UI** — our first project that fused UIkit with Tailwind CSS. This time, we’re rebuilding from the ground up with a sharper focus on simplicity, flexibility, and long-term maintainability.
+[![ Frankenstyle is the spiritual successor to Franken UI.](https://franken.style/images/frankenstyle-banner.png)](https://franken.style)
 
 ## Documentation
 
-The documentation website is still being updated, but you can refer to the **context files** for the most accurate and up-to-date information.
-
-## Roadmap
-
-Here’s the current state of the project and where we’re headed next.
-
-While **Franken UI** relied on mature libraries like Tailwind CSS and UIkit, the goal now is to build a more **granular**, **robust**, and **future-proof** foundation — essentially, our own ecosystem. The project is split into three parts:
-
-* **Frankenstyle** – A no-build, value-driven, fully responsive, utility-first CSS framework.
-* **Headless Web Components (HWC)** – A collection of unstyled, fully accessible, commonly used web components.
-* **FrankenstyleKit** – The fusion of the two, featuring its own opinionated design system inspired by `coss ui`.
-
-Both Frankenstyle and HWC are fully detached and can be used independently — hence the creation of FrankenstyleKit.
-
-## Current Status
-
-* **Frankenstyle** – Development is very active and open to the community.
-* **Franken UI** – Now in Long-Term Support (LTS). No new features will be added, but bug fixes and dependency updates are guaranteed.
+For full documentation, visit [https://franken.style](https://franken.style).
 
 ## Support
 
-Right now, the project is **unsustainable** — it has no commercial backing or paid projects and relies solely on donors, a few sponsors from Franken UI, and, of course, my own boredom and availability.
-
-There’s a lot to do, and I’d love to see this project thrive.
 If you’d like to support the work, you can do so here:
 
 * **GitHub Sponsors:** [https://github.com/sponsors/sveltecult](https://github.com/sponsors/sveltecult)

package/dist/css/chart.css

@@ -0,0 +1,325 @@
+/* ============================================
+     Chart Component (ApexCharts)
+     ============================================ */
+
+/* Chart Tooltip */
+.uk-chart .apexcharts-tooltip {
+  /* Base Variables */
+  --uk-chart-tooltip-radius: var(--uk-global-radius);
+  --uk-chart-tooltip-shadow: var(--uk-global-shadow);
+  --uk-chart-tooltip-font-size: var(--uk-global-font-size-small);
+  --uk-chart-tooltip-leading: var(--uk-global-line-height-small);
+  --uk-chart-tooltip-color: var(--uk-bg-f);
+  --uk-chart-tooltip-color-o: 100%;
+
+  /* Computed value */
+  --uk-chart-tooltip-color-computed: color-mix(
+    in srgb,
+    var(--uk-chart-tooltip-color) var(--uk-chart-tooltip-color-o),
+    transparent
+  );
+
+  border-radius: var(--uk-chart-tooltip-radius);
+  box-shadow: var(--uk-chart-tooltip-shadow);
+  font-size: var(--uk-chart-tooltip-font-size);
+  line-height: var(--uk-chart-tooltip-leading);
+  color: var(--uk-chart-tooltip-color-computed);
+}
+
+.uk-chart .apexcharts-tooltip.apexcharts-theme-light,
+.uk-chart .apexcharts-tooltip.apexcharts-theme-dark {
+  /* Base Variables */
+  --uk-chart-tooltip-border-width: 1px;
+  --uk-chart-tooltip-border-color: var(--uk-border);
+  --uk-chart-tooltip-border-color-o: 10%;
+  --uk-chart-tooltip-bg: var(--uk-bg);
+  --uk-chart-tooltip-bg-o: 100%;
+
+  /* Computed values */
+  --uk-chart-tooltip-border-color-computed: color-mix(
+    in srgb,
+    var(--uk-chart-tooltip-border-color) var(--uk-chart-tooltip-border-color-o),
+    transparent
+  );
+  --uk-chart-tooltip-bg-computed: color-mix(
+    in srgb,
+    var(--uk-chart-tooltip-bg) var(--uk-chart-tooltip-bg-o),
+    transparent
+  );
+
+  border-width: var(--uk-chart-tooltip-border-width);
+  border-style: solid;
+  border-color: var(--uk-chart-tooltip-border-color-computed);
+  background-color: var(--uk-chart-tooltip-bg-computed);
+}
+
+.uk-chart .apexcharts-tooltip-title {
+  /* Base Variables */
+  --uk-chart-tooltip-title-padding: 6px;
+  --uk-chart-tooltip-title-font-size: var(--uk-global-font-size-small);
+  --uk-chart-tooltip-title-leading: var(--uk-global-line-height-small);
+  --uk-chart-tooltip-title-font-weight: 600;
+
+  padding: var(--uk-chart-tooltip-title-padding);
+  font-size: var(--uk-chart-tooltip-title-font-size);
+  line-height: var(--uk-chart-tooltip-title-leading);
+  font-weight: var(--uk-chart-tooltip-title-font-weight);
+}
+
+.uk-chart .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title,
+.uk-chart .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
+  /* Base Variables */
+  --uk-chart-tooltip-title-border-width: 1px;
+  --uk-chart-tooltip-title-bg: var(--uk-bg);
+  --uk-chart-tooltip-title-bg-o: 100%;
+  --uk-chart-tooltip-title-border-color: var(--uk-border);
+  --uk-chart-tooltip-title-border-color-o: 10%;
+
+  /* Computed values */
+  --uk-chart-tooltip-title-bg-computed: color-mix(
+    in srgb,
+    var(--uk-chart-tooltip-title-bg) var(--uk-chart-tooltip-title-bg-o),
+    transparent
+  );
+  --uk-chart-tooltip-title-border-color-computed: color-mix(
+    in srgb,
+    var(--uk-chart-tooltip-title-border-color)
+      var(--uk-chart-tooltip-title-border-color-o),
+    transparent
+  );
+
+  background-color: var(--uk-chart-tooltip-title-bg-computed);
+  border-bottom-width: var(--uk-chart-tooltip-title-border-width);
+  border-bottom-style: solid;
+  border-bottom-color: var(--uk-chart-tooltip-title-border-color-computed);
+}
+
+.uk-chart .apexcharts-tooltip-marker::before {
+  font-size: inherit;
+}
+
+/* Chart Container */
+.uk-chart-container {
+  /* Base Variables */
+  --uk-chart-container-radius: var(--uk-global-radius);
+  --uk-chart-container-shadow: var(--uk-global-shadow);
+  --uk-chart-container-border-color: var(--uk-border);
+  --uk-chart-container-border-color-o: 10%;
+  --uk-chart-container-bg: var(--uk-bg);
+  --uk-chart-container-bg-o: 100%;
+  --uk-chart-container-color: var(--uk-bg-f);
+  --uk-chart-container-color-o: 100%;
+
+  /* Computed values */
+  --uk-chart-container-border-color-computed: color-mix(
+    in srgb,
+    var(--uk-chart-container-border-color)
+      var(--uk-chart-container-border-color-o),
+    transparent
+  );
+  --uk-chart-container-bg-computed: color-mix(
+    in srgb,
+    var(--uk-chart-container-bg) var(--uk-chart-container-bg-o),
+    transparent
+  );
+  --uk-chart-container-color-computed: color-mix(
+    in srgb,
+    var(--uk-chart-container-color) var(--uk-chart-container-color-o),
+    transparent
+  );
+
+  border-radius: var(--uk-chart-container-radius);
+  box-shadow: var(--uk-chart-container-shadow);
+  border: 1px solid var(--uk-chart-container-border-color-computed);
+  background-color: var(--uk-chart-container-bg-computed);
+  color: var(--uk-chart-container-color-computed);
+}
+
+.uk-chart-container .text-muted-foreground {
+  color: var(--uk-muted-f);
+}
+
+/* Chart Series Group */
+.uk-chart .apexcharts-tooltip-series-group.apexcharts-active,
+.uk-chart .apexcharts-tooltip-series-group:last-child {
+  padding-block-end: 0;
+}
+
+.uk-chart .apexcharts-tooltip-series-group {
+  /* Base Variables */
+  --uk-chart-series-group-padding: 0 8px;
+
+  padding: var(--uk-chart-series-group-padding);
+}
+
+/* Chart Legend */
+.uk-chart .apexcharts-legend-text {
+  /* Base Variables */
+  --uk-chart-legend-font-size: var(--uk-global-font-size-small);
+  --uk-chart-legend-leading: var(--uk-global-line-height-small);
+  --uk-chart-legend-padding-inline-start: 18px;
+  --uk-chart-legend-margin-inline-start: -16px;
+  --uk-chart-legend-color: var(--uk-bg-f);
+  --uk-chart-legend-color-o: 100%;
+
+  /* Computed value */
+  --uk-chart-legend-color-computed: color-mix(
+    in srgb,
+    var(--uk-chart-legend-color) var(--uk-chart-legend-color-o),
+    transparent
+  );
+
+  color: var(--uk-chart-legend-color-computed) !important;
+  font-size: var(--uk-chart-legend-font-size);
+  line-height: var(--uk-chart-legend-leading);
+  padding-inline-start: var(--uk-chart-legend-padding-inline-start);
+  margin-inline-start: var(--uk-chart-legend-margin-inline-start);
+}
+
+/* ============================================
+     Chart Color Themes
+     ============================================ */
+
+.uk-theme-red {
+  --uk-chart-1: hsl(0 93.5% 81.8%);
+  --uk-chart-2: hsl(0 84.2% 60.2%);
+  --uk-chart-3: hsl(0 72.2% 50.6%);
+  --uk-chart-4: hsl(0 73.7% 41.8%);
+  --uk-chart-5: hsl(0 70% 35.3%);
+}
+
+.uk-theme-rose {
+  --uk-chart-1: hsl(352.6 95.7% 81.8%);
+  --uk-chart-2: hsl(349.7 89.2% 60.2%);
+  --uk-chart-3: hsl(346.8 77.2% 49.8%);
+  --uk-chart-4: hsl(345.3 82.7% 40.8%);
+  --uk-chart-5: hsl(343.4 79.7% 34.7%);
+}
+
+.uk-theme-orange {
+  --uk-chart-1: hsl(30.7 97.2% 72.4%);
+  --uk-chart-2: hsl(24.6 95% 53.1%);
+  --uk-chart-3: hsl(20.5 90.2% 48.2%);
+  --uk-chart-4: hsl(17.5 88.3% 40.4%);
+  --uk-chart-5: hsl(15 79.1% 33.7%);
+}
+
+.uk-theme-green {
+  --uk-chart-1: hsl(141 78.9% 85.1%);
+  --uk-chart-2: hsl(142.1 70.6% 45.3%);
+  --uk-chart-3: hsl(142.1 76.2% 36.3%);
+  --uk-chart-4: hsl(142.4 71.8% 29.2%);
+  --uk-chart-5: hsl(142.8 64.2% 24.1%);
+}
+
+.uk-theme-yellow {
+  --uk-chart-1: hsl(50.4 97.8% 63.5%);
+  --uk-chart-2: hsl(45.4 93.4% 47.5%);
+  --uk-chart-3: hsl(40.6 96.1% 40.4%);
+  --uk-chart-4: hsl(35.5 91.7% 32.9%);
+  --uk-chart-5: hsl(31.8 81% 28.8%);
+}
+
+.uk-theme-violet {
+  --uk-chart-1: hsl(252.5 94.7% 85.1%);
+  --uk-chart-2: hsl(258.3 89.5% 66.3%);
+  --uk-chart-3: hsl(262.1 83.3% 57.8%);
+  --uk-chart-4: hsl(263.4 70% 50.4%);
+  --uk-chart-5: hsl(263.4 69.3% 42.2%);
+}
+
+.uk-theme-amber {
+  --uk-chart-1: hsl(45.9 96.7% 64.5%);
+  --uk-chart-2: hsl(37.7 92.1% 50.2%);
+  --uk-chart-3: hsl(32.1 94.6% 43.7%);
+  --uk-chart-4: hsl(26 90.5% 37.1%);
+  --uk-chart-5: hsl(22.7 82.5% 31.4%);
+}
+
+.uk-theme-purple {
+  --uk-chart-1: hsl(269.2 97.4% 85.1%);
+  --uk-chart-2: hsl(270.7 91% 65.1%);
+  --uk-chart-3: hsl(271.5 81.3% 55.9%);
+  --uk-chart-4: hsl(272.1 71.7% 47.1%);
+  --uk-chart-5: hsl(272.9 67.2% 39.4%);
+}
+
+.uk-theme-teal {
+  --uk-chart-1: hsl(170.6 76.9% 64.3%);
+  --uk-chart-2: hsl(173.4 80.4% 40%);
+  --uk-chart-3: hsl(174.7 83.9% 31.6%);
+  --uk-chart-4: hsl(175.3 77.4% 26.1%);
+  --uk-chart-5: hsl(176.1 69.4% 21.8%);
+}
+
+.uk-theme-stone {
+  --uk-chart-1: hsl(24 5.7% 82.9%);
+  --uk-chart-2: hsl(25 5.3% 44.7%);
+  --uk-chart-3: hsl(33.3 5.5% 32.4%);
+  --uk-chart-4: hsl(30 6.3% 25.1%);
+  --uk-chart-5: hsl(12 6.5% 15.1%);
+}
+
+.uk-chart-palette {
+  --uk-chart-1: hsl(173 58% 39%);
+  --uk-chart-2: hsl(12 76% 61%);
+  --uk-chart-3: hsl(197 37% 24%);
+  --uk-chart-4: hsl(43 74% 66%);
+  --uk-chart-5: hsl(27 87% 67%);
+}
+
+.dark.uk-chart-palette {
+  --uk-chart-1: hsl(220 70% 50%);
+  --uk-chart-2: hsl(340 75% 55%);
+  --uk-chart-3: hsl(30 80% 55%);
+  --uk-chart-4: hsl(280 65% 60%);
+  --uk-chart-5: hsl(160 60% 45%);
+}
+
+.uk-chart-sapphire {
+  --uk-chart-1: hsl(221.2 83.2% 53.3%);
+  --uk-chart-2: hsl(212 95% 68%);
+  --uk-chart-3: hsl(216 92% 60%);
+  --uk-chart-4: hsl(210 98% 78%);
+  --uk-chart-5: hsl(212 97% 87%);
+}
+
+.dark.uk-chart-sapphire {
+  --uk-chart-1: hsl(221.2 83.2% 53.3%);
+  --uk-chart-2: hsl(212 95% 68%);
+  --uk-chart-3: hsl(216 92% 60%);
+  --uk-chart-4: hsl(210 98% 78%);
+  --uk-chart-5: hsl(212 97% 87%);
+}
+
+.uk-chart-ruby {
+  --uk-chart-1: hsl(347 77% 50%);
+  --uk-chart-2: hsl(352 83% 91%);
+  --uk-chart-3: hsl(350 80% 72%);
+  --uk-chart-4: hsl(351 83% 82%);
+  --uk-chart-5: hsl(349 77% 62%);
+}
+
+.dark.uk-chart-ruby {
+  --uk-chart-1: hsl(347 77% 50%);
+  --uk-chart-2: hsl(349 77% 62%);
+  --uk-chart-3: hsl(350 80% 72%);
+  --uk-chart-4: hsl(351 83% 82%);
+  --uk-chart-5: hsl(352 83% 91%);
+}
+
+.uk-chart-emerald {
+  --uk-chart-1: hsl(139 65% 20%);
+  --uk-chart-2: hsl(140 74% 44%);
+  --uk-chart-3: hsl(142 88% 28%);
+  --uk-chart-4: hsl(137 55% 15%);
+  --uk-chart-5: hsl(141 40% 9%);
+}
+
+.dark.uk-chart-emerald {
+  --uk-chart-1: hsl(142 88% 28%);
+  --uk-chart-2: hsl(139 65% 20%);
+  --uk-chart-3: hsl(140 74% 24%);
+  --uk-chart-4: hsl(137 55% 15%);
+  --uk-chart-5: hsl(141 40% 9%);
+}