frankenstyle 0.0.11 → 0.1.0-aardvark.0

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 [Franken UI contributors](https://github.com/franken-ui/style/graphs/contributors)
+Copyright (c) 2025 FRNKN
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,137 +1,16 @@
-> If you’re already happy with Tailwind CSS, there’s no reason for you to be here.
+[![ Frankenstyle is the spiritual successor to Franken UI.](https://franken.style/images/frankenstyle-banner.png)](https://franken.style)
 
-# Frankenstyle
+## Documentation
 
-Frankenstyle is a no-build, value-driven, fully responsive, utility-first CSS framework. It’s designed to be lightweight, production-ready, and to strike a balance between developer ergonomics and build size.
+For full documentation, visit [https://franken.style](https://franken.style).
 
-For full documentation, visit [franken.style](https://franken.style).
+## Support
 
-## Installation
+If you’d like to support the work, you can do so here:
 
-Frankenstyle can be used via CDN or downloaded and referenced locally.
-
-### CDN
-
-```html
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/frankenstyle@latest/dist/css/frankenstyle.min.css"
-/>
-```
-
-### NPM
-
-```bash
-npm i frankenstyle@latest
-```
-
-Then import it in your `main.css`:
-
-```css
-@import "frankenstyle/css/frankenstyle.css";
-```
-
-### JavaScript
-
-JavaScript is optional, but important for interactive states:
-
-```html
-<script src="https://unpkg.com/frankenstyle@latest/dist/js/frankenstyle.min.js"></script>
-```
-
-## Core Concepts & Usage
-
-Think of Frankenstyle as _Tailwind CSS, but de-valued_. Frankenstyle provides the class, you provide the value.
-
-```html
-<div class="m sm:m md:m" style="--m: 4; --sm-m: 8; --md-m: 16"></div>
-```
-
-Behind the scenes, values are multiplied by a base spacing variable (e.g., `var(--spacing)`).
-
-Need arbitrary values? Wrap in brackets:
-
-```html
-<div class="[m]" style="--m: 4px;"></div>
-```
-
-You don’t need to memorize odd variable names — just drop special characters from the class.
-
-- `sm:m` → `--sm-m`
-- `dark:sm:bg:hover` → `--dark-sm-bg-hover`
-
-### States
-
-Interactive states (e.g., hover) are generated on demand. Mark an element with `data-fs-interactive`, and the runtime will generate the necessary pseudo-state CSS.
-
-```html
-<button
-    type="button"
-    class="color bg dark:bg bg:hover dark:bg:hover font-medium rounded-lg text-sm px py"
-    style="
-        --color: var(--color-white);
-        --bg: var(--color-blue-700);
-        --dark-bg: var(--color-pink-600);
-        --bg-hover: var(--color-blue-800);
-        --dark-bg-hover: var(--color-pink-700);
-        --px: 5;
-        --py: 2.5;
-    "
-    data-fs-interactive
->
-    Default
-</button>
-```
-
-This avoids shipping huge CSS files for states up front — everything is generated at runtime when needed.
-
-### Dark Mode
-
-Prefix color utilities with `dark:`:
-
-- `bg` → `dark:bg`
-- `color` → `dark:color`
-- `border` → `dark:border`
-- `fill` → `dark:fill`
-
-### Opacity
-
-Suffix color utilities with `/o`. These require two variables (base + opacity) to avoid inheritance issues:
-
-```html
-<div
-  class="bg/o dark:bg/o"
-  style="
-    --bg: var(--color-blue-800);
-    --bg-o: 80%;
-    --dark-bg: var(--color-green-800);
-    --dark-bg-o: 80%;
-  "
-></div>
-```
-
-### Responsiveness
-
-Prefix classes with breakpoints:
-
-- `sm:`
-- `md:`
-- `lg:`
-- `xl:`
-- `2xl:`
-
-```html
-<div class="p sm:p md:p" style="--p: 4; --sm-p: 8; --md-p: 16"></div>
-```
-
-## Key Differences from Tailwind
-
-- **No config, no file watchers** → everything is statically pre-built.
-- **Value-driven utilities** → use `m` + `--m: 8` or `[m]` for arbitrary values, not `m-8` or `m-[8px]`.
-- **State syntax is reversed** → `bg:hover` instead of `hover:bg-blue-600`.
-- **Runtime state generation** → hover/active CSS is created on the fly, keeping static builds small.
-- **Familiar patterns** → utilities, responsive prefixes, and naming feel similar to Tailwind.
+* **GitHub Sponsors:** [https://github.com/sponsors/sveltecult](https://github.com/sponsors/sveltecult)
+* **Ko-fi:** [https://ko-fi.com/sveltecult](https://ko-fi.com/sveltecult)
 
 ## License
 
-Licensed under the [MIT license](https://github.com/franken-ui/ui/blob/master/LICENSE.md).
+Licensed under the [MIT License](https://codeberg.org/FRNKN/style/src/branch/master/LICENSE.md).

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%);
+}