@cryptlex/web-components 1.4.1 → 1.6.0

package/lib/tailwind.preset.css

@@ -5,18 +5,28 @@
 @theme {
     /* Radius */
     --radius: 0.25rem;
-    --radius-lg: var(--radius);
-    --radius-md: calc(var(--radius) - 2px);
     --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
 
     /* Text Sizes */
+    --text-*: initial;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
     --text-base: 1rem;
-    --text-md: 1.125rem;
-    --text-lg: 1.25rem;
-    --text-xl: 1.5rem;
-    --text-2xl: 1.75rem;
-    --text-3xl: 2rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
 
     /* Colors */
     --color-*: initial;
@@ -76,25 +86,25 @@
     --color-success-10: var(--success-10);
 
     --color-background: var(--color-neutral-2);
-    --color-foreground: var(--color-neutral-9);
+    --color-foreground: var(--color-neutral-8);
 
     --color-card: var(--color-neutral-1);
     --color-card-foreground: var(--color-foreground);
-
-    --color-popover: var(--color-card);
+    /* Assuming popovers only show up over cards ??? */
+    --color-popover: var(--color-background);
     --color-popover-foreground: var(--color-foreground);
 
-    --color-primary: var(--color-primary-8);
+    --color-primary: var(--color-primary-7);
     --color-primary-foreground: var(--color-primary-2);
-    --color-secondary: var(--color-secondary-8);
+    --color-secondary: var(--color-secondary-7);
     --color-secondary-foreground: var(--color-secondary-2);
     --color-muted: var(--color-neutral-7);
     --color-muted-foreground: var(--color-neutral-4);
     --color-accent: var(--color-neutral-7);
     --color-accent-foreground: var(--color-neutral-4);
-    --color-destructive: var(--color-destructive-8);
+    --color-destructive: var(--color-destructive-7);
     --color-destructive-foreground: var(--color-destructive-2);
-    --color-success: var(--color-success-8);
+    --color-success: var(--color-success-7);
     --color-success-foreground: var(--color-success-2);
 
     --color-border: var(--color-neutral-3);
@@ -109,6 +119,7 @@
 
     --color-sidebar-background: var(--color-background);
     --color-sidebar-foreground: var(--color-foreground);
+
     /* // TODO */
     --color-sidebar-primary: 240 5.9% 10%;
     --color-sidebar-primary-foreground: 0 0% 98%;
@@ -119,11 +130,8 @@
     --color-sidebar-border: var(--color-border);
     --color-sidebar-ring: var(--color-ring);
 
-    /** TODO Grid Tokens */
-    /* --grid-fluid-min: 16rem;
-    gridTemplateColumns: {
-        fluid: 'repeat(auto-fill, minmax(var(--grid-fluid-min), 1fr))',
-      }, */
+    /* Minimum length for fluid grid containers */
+    --fluid-grid-min: var(--container-3xs);
 
     --animate-accordion-down: accordion-down 0.2s ease-out;
 
@@ -174,47 +182,53 @@
     }
 }
 
-@utility text-caption {
-    @apply text-sm;
+@utility link {
+    @apply text-primary underline hover:underline-offset-2 hover:text-primary/70;
+}
+
+@utility caption {
+    @apply text-xs font-medium;
 }
 
+@utility body {
+    @apply text-sm;
+}
 
-@utility text-body {
-    @apply text-base;
-    /* lineHeight: '1.6', */
+@utility h6 {
+    @apply text-base font-bold;
 }
 
-@utility text-heading-6 {
-    @apply text-base;
-    /* fontWeight: 700, */
-    /* lineHeight: '1.2', */
+@utility h5 {
+    @apply text-lg font-semibold;
+}
 
+@utility h4 {
+    @apply text-xl font-medium;
 }
 
-@utility text-heading-5 {
-    @apply text-md;
-    /* lineHeight: '1.2', */
+@utility h3 {
+    @apply text-2xl font-normal;
 }
 
-@utility text-heading-4 {
-    @apply text-lg;
-    /* lineHeight: '1.2', */
-    /* fontWeight: 500, */
+@utility h2 {
+    @apply text-3xl font-light;
 }
 
-@utlility text-heading-3 {
-    @apply text-xl;
+@utility h1 {
+    @apply text-4xl font-extralight;
 }
 
-@utility text-heading-2 {
-    @apply text-2xl;
-    /* lineHeight: '1', */
-    /* fontWeight: 300, */
+/* Standard height for inputs ~32px  */
+@utility h-input {
+    @apply h-8;
 }
 
-@utility text-heading-1 {
-    @apply text-3xl;
-    /* lineHeight: '1', */
+/* Standard size for icons */
+@utility size-icon {
+    @apply size-4;
 }
 
-@layer components {}
+/* Fluid grid with minimum width */
+@utility grid-fluid {
+    @apply grid grid-cols-[repeat(auto-fill,_minmax(var(--fluid-grid-min),_1fr))] gap-4;
+}

package/lib/tokens.css

@@ -109,15 +109,6 @@
   --neutral-8: var(--xneutral-8);
   --neutral-9: var(--xneutral-9);
   --neutral-10: var(--xneutral-10);
-  /* https://www.fluid-type-scale.com/, https://fluidtypography.com/ */
-  --font-xs: clamp(0.52rem, 0.08vi + 0.5rem, 0.56rem);
-  --font-sm: clamp(0.65rem, 0.18vi + 0.6rem, 0.75rem);
-  --font-base: clamp(0.81rem, 0.34vi + 0.73rem, 1rem);
-  --font-md: clamp(1.02rem, 0.58vi + 0.87rem, 1.33rem);
-  --font-lg: clamp(1.27rem, 0.92vi + 1.04rem, 1.78rem);
-  --font-xl: clamp(1.59rem, 1.42vi + 1.23rem, 2.37rem);
-  --font-2xl: clamp(1.98rem, 2.13vi + 1.45rem, 3.16rem);
-  --font-3xl: clamp(2.48rem, 3.14vi + 1.69rem, 4.21rem);
 }
 
 .dark {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",