react-lib-tools 0.0.12 → 0.0.13

package/dist/react-lib-tools.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BiL6y7tb.cjs");exports.AppRoot=e.AppRoot;exports.Block=e.Block;exports.Box=e.Box;exports.Button=e.Button;exports.Callout=e.Callout;exports.Checkbox=e.Checkbox;exports.Code=e.Code;exports.ComponentProps=e.ComponentProps;exports.ComponentPropsSection=e.ComponentPropsSection;exports.DocsSection=e.DocsSection;exports.ErrorBoundary=e.ErrorBoundary;exports.ExternalLink=e.ExternalLink;exports.Header=e.Header;exports.ImperativeHandle=e.ImperativeHandle;exports.Input=e.Input;exports.Link=e.Link;exports.LoadingSpinner=e.LoadingSpinner;exports.NavLink=e.NavLink;exports.NavSection=e.NavSection;exports.Radio=e.Radio;exports.Select=e.Select;exports.assert=e.assert;exports.cn=e.cn;exports.getIntentClassNames=e.getIntentClassNames;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BpfFWZm4.cjs");exports.AppRoot=e.AppRoot;exports.Block=e.Block;exports.Box=e.Box;exports.Button=e.Button;exports.Callout=e.Callout;exports.Checkbox=e.Checkbox;exports.Code=e.Code;exports.ComponentProps=e.ComponentProps;exports.ComponentPropsSection=e.ComponentPropsSection;exports.DocsSection=e.DocsSection;exports.ErrorBoundary=e.ErrorBoundary;exports.ExternalLink=e.ExternalLink;exports.Header=e.Header;exports.ImperativeHandle=e.ImperativeHandle;exports.Input=e.Input;exports.Link=e.Link;exports.LoadingSpinner=e.LoadingSpinner;exports.NavLink=e.NavLink;exports.NavSection=e.NavSection;exports.Radio=e.Radio;exports.Select=e.Select;exports.assert=e.assert;exports.cn=e.cn;exports.getIntentClassNames=e.getIntentClassNames;
 //# sourceMappingURL=react-lib-tools.cjs.map

package/dist/react-lib-tools.js

@@ -1,4 +1,4 @@
-import { A as o, a as e, B as n, b as t, C as r, c as i, d as p, i as c, j as l, D as d, e as C, E as k, H as m, I as S, f as B, L, g as u, N as x, h as I, R as N, S as g, k as v, l as E, m as H } from "./index-CUStiGoe.js";
+import { A as o, a as e, B as n, b as t, C as r, c as i, d as p, i as c, j as l, D as d, e as C, E as k, H as m, I as S, f as B, L, g as u, N as x, h as I, R as N, S as g, k as v, l as E, m as H } from "./index-DdaUFzS-.js";
 export {
   o as AppRoot,
   e as Block,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-lib-tools",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [

package/styles.css

@@ -27,15 +27,28 @@
   }
 }
 
+@theme {
+  --color-background-gradient-1: var(--color-fuchsia-500);
+  --color-background-gradient-2: var(--color-violet-500);
+  --color-background-gradient-3: var(--color-fuchsia-700);
+
+  --color-focus-1: var(--color-sky-300);
+  --color-focus-2: var(--color-sky-400);
+  --color-focus-3: var(--color-sky-600);
+
+  --color-nav-active: var(--color-fuchsia-400);
+  --color-nav-hover: var(--color-fuchsia-200);
+}
+
 #root {
   width: 100dvw;
   height: 100dvh;
   overflow: auto;
   background: linear-gradient(
     -45deg,
-    var(--template-gradient-color-1),
-    var(--template-gradient-color-2),
-    var(--template-gradient-color-3)
+    var(--color-background-gradient-1),
+    var(--color-background-gradient-2),
+    var(--color-background-gradient-3)
   );
   background-size: 400% 400%;
   animation: background-gradient-animation 20s ease infinite;
@@ -57,9 +70,9 @@ main {
   [data-link],
   a {
     cursor: pointer;
-    color: var(--template-focus-color-400);
+    color: var(--color-focus-2);
     &:hover {
-      color: var(--template-focus-color-300);
+      color: var(--color-focus-1);
     }
   }
 }
@@ -67,20 +80,20 @@ main {
 *[data-focus] {
   border: 2px solid transparent;
   &:focus {
-    border: 2px solid var(--template-focus-color-300);
+    border: 2px solid var(--color-focus-1);
   }
 }
 
 *[data-focus-within] {
   border: 2px solid transparent;
   &:focus-within {
-    border: 2px solid var(--template-focus-color-300);
+    border: 2px solid var(--color-focus-1);
   }
 
   &[data-focus-within="bold"] {
-    border-color: var(--template-focus-color-600);
+    border-color: var(--color-focus-3);
     &:focus-within {
-      border: 2px solid var(--template-focus-color-300);
+      border: 2px solid var(--color-focus-1);
     }
   }
 }