@rokkit/themes 1.0.0-next.153 → 1.0.0-next.154

package/dist/base.css

@@ -13,6 +13,38 @@
  * Import individual files for tree-shaking, or this file for all base styles.
  */
 
+/**
+ * Typography & Shape Tokens
+ *
+ * CSS custom properties for font families and border-radius scale.
+ * Override these in your application stylesheet to customize typography and shape.
+ *
+ * @example
+ * :root {
+ *   --font-sans: 'Inter', system-ui, sans-serif;
+ *   --font-mono: 'JetBrains Mono', monospace;
+ *   --font-heading: 'Cal Sans', 'Inter', sans-serif;
+ *
+ *   --radius-sm: 0;        --* sharp corners *--
+ *   --radius-md: 0;
+ *   --radius-lg: 0;
+ * }
+ */
+
+:root {
+  /* Font families */
+  --font-sans: 'Open Sans', -apple-system, system-ui, 'Segoe UI', ui-serif, sans-serif;
+  --font-mono: 'Victor Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  --font-heading: 'Open Sans', sans-serif;
+
+  /* Border-radius scale */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+}
+
 /**
  * Density System — CSS Custom Property Scale
  *
@@ -393,7 +425,7 @@
   flex-shrink: 0;
   margin-left: auto;
   padding: 0.125rem 0.375rem;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.75em;
   font-weight: 500;
   border-radius: 0.25rem;
@@ -511,6 +543,7 @@
   min-width: 200px;
   max-height: 400px;
   overflow-y: auto;
+  overscroll-behavior: contain;
   border-radius: 0.5rem;
 }
 
@@ -1025,7 +1058,9 @@
   position: absolute;
   z-index: 50;
   min-width: 100%;
+  max-height: var(--select-dropdown-max-height, 200px);
   overflow-y: auto;
+  overscroll-behavior: contain;
   border-radius: 0.5rem;
 }
 
@@ -5076,6 +5111,16 @@ a[data-card] {
   user-select: none;
 }
 
+[data-upload-target][data-size='small'] {
+  min-height: 4rem;
+  padding: 0.75rem;
+  gap: 0;
+}
+
+[data-upload-target][data-size='small'] [data-upload-icon] {
+  font-size: 1.25rem;
+}
+
 [data-upload-target]:focus {
   outline: none;
 }
@@ -6006,3 +6051,68 @@ button[data-step-number] {
   right: -0.125rem;
 }
 
+/**
+ * Tooltip - Base Structural Styles
+ *
+ * Positions the tooltip bubble relative to its trigger via CSS.
+ * Visibility driven by data-tooltip-visible — never display:none,
+ * preserving layout anchor and allowing CSS transitions.
+ */
+
+[data-tooltip-root] {
+  position: relative;
+  display: inline-flex;
+}
+
+[data-tooltip-content] {
+  position: absolute;
+  z-index: 100;
+  max-width: 16rem;
+  width: max-content;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  pointer-events: none;
+  white-space: normal;
+  transition:
+    opacity 120ms ease,
+    visibility 120ms ease;
+}
+
+/* Position variants */
+[data-tooltip-content][data-tooltip-position='top'] {
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[data-tooltip-content][data-tooltip-position='bottom'] {
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[data-tooltip-content][data-tooltip-position='left'] {
+  right: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+[data-tooltip-content][data-tooltip-position='right'] {
+  left: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Visibility */
+[data-tooltip-content][data-tooltip-visible='false'] {
+  visibility: hidden;
+  opacity: 0;
+}
+
+[data-tooltip-content][data-tooltip-visible='true'] {
+  visibility: visible;
+  opacity: 1;
+}
+

package/dist/index.css

@@ -13,6 +13,38 @@
  * Import individual files for tree-shaking, or this file for all base styles.
  */
 
+/**
+ * Typography & Shape Tokens
+ *
+ * CSS custom properties for font families and border-radius scale.
+ * Override these in your application stylesheet to customize typography and shape.
+ *
+ * @example
+ * :root {
+ *   --font-sans: 'Inter', system-ui, sans-serif;
+ *   --font-mono: 'JetBrains Mono', monospace;
+ *   --font-heading: 'Cal Sans', 'Inter', sans-serif;
+ *
+ *   --radius-sm: 0;        --* sharp corners *--
+ *   --radius-md: 0;
+ *   --radius-lg: 0;
+ * }
+ */
+
+:root {
+  /* Font families */
+  --font-sans: 'Open Sans', -apple-system, system-ui, 'Segoe UI', ui-serif, sans-serif;
+  --font-mono: 'Victor Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  --font-heading: 'Open Sans', sans-serif;
+
+  /* Border-radius scale */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+}
+
 /**
  * Density System — CSS Custom Property Scale
  *
@@ -393,7 +425,7 @@
   flex-shrink: 0;
   margin-left: auto;
   padding: 0.125rem 0.375rem;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.75em;
   font-weight: 500;
   border-radius: 0.25rem;
@@ -511,6 +543,7 @@
   min-width: 200px;
   max-height: 400px;
   overflow-y: auto;
+  overscroll-behavior: contain;
   border-radius: 0.5rem;
 }
 
@@ -1025,7 +1058,9 @@
   position: absolute;
   z-index: 50;
   min-width: 100%;
+  max-height: var(--select-dropdown-max-height, 200px);
   overflow-y: auto;
+  overscroll-behavior: contain;
   border-radius: 0.5rem;
 }
 
@@ -5076,6 +5111,16 @@ a[data-card] {
   user-select: none;
 }
 
+[data-upload-target][data-size='small'] {
+  min-height: 4rem;
+  padding: 0.75rem;
+  gap: 0;
+}
+
+[data-upload-target][data-size='small'] [data-upload-icon] {
+  font-size: 1.25rem;
+}
+
 [data-upload-target]:focus {
   outline: none;
 }
@@ -6006,6 +6051,71 @@ button[data-step-number] {
   right: -0.125rem;
 }
 
+/**
+ * Tooltip - Base Structural Styles
+ *
+ * Positions the tooltip bubble relative to its trigger via CSS.
+ * Visibility driven by data-tooltip-visible — never display:none,
+ * preserving layout anchor and allowing CSS transitions.
+ */
+
+[data-tooltip-root] {
+  position: relative;
+  display: inline-flex;
+}
+
+[data-tooltip-content] {
+  position: absolute;
+  z-index: 100;
+  max-width: 16rem;
+  width: max-content;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  pointer-events: none;
+  white-space: normal;
+  transition:
+    opacity 120ms ease,
+    visibility 120ms ease;
+}
+
+/* Position variants */
+[data-tooltip-content][data-tooltip-position='top'] {
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[data-tooltip-content][data-tooltip-position='bottom'] {
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[data-tooltip-content][data-tooltip-position='left'] {
+  right: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+[data-tooltip-content][data-tooltip-position='right'] {
+  left: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Visibility */
+[data-tooltip-content][data-tooltip-visible='false'] {
+  visibility: hidden;
+  opacity: 0;
+}
+
+[data-tooltip-content][data-tooltip-visible='true'] {
+  visibility: visible;
+  opacity: 1;
+}
+
 
 /**
  * @rokkit/themes - Rokkit Theme
@@ -6029,7 +6139,7 @@ button[data-step-number] {
 [data-style='rokkit'] [data-button]:not([data-style])[data-variant='default'],
 [data-style='rokkit'] [data-button][data-style='default']:not([data-variant]),
 [data-style='rokkit'] [data-button]:not([data-style]):not([data-variant]) {
-  border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
+  border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="default"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="default"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="default"],[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style])[data-variant="default"],[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"]:not([data-variant]),[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"]:not([data-variant]),[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style]):not([data-variant]),[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style]):not([data-variant]){--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
 
 /* Primary variant */
@@ -8470,6 +8580,14 @@ button[data-step-number] {
   --un-border-opacity:1;border-color:rgba(var(--color-surface-100),var(--un-border-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-avatar-status],[data-mode="dark"] [data-style="rokkit"] [data-avatar-status]{--un-border-opacity:1;border-color:rgba(var(--color-surface-900),var(--un-border-opacity));}
 
+/**
+ * Tooltip - Rokkit Theme Styles
+ */
+
+[data-style='rokkit'] [data-tooltip-content] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-tooltip-content],[data-mode="dark"] [data-style="rokkit"] [data-tooltip-content]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));}
+
 
 /**
  * @rokkit/themes - Minimal Theme

package/dist/rokkit.css

@@ -20,7 +20,7 @@
 [data-style='rokkit'] [data-button]:not([data-style])[data-variant='default'],
 [data-style='rokkit'] [data-button][data-style='default']:not([data-variant]),
 [data-style='rokkit'] [data-button]:not([data-style]):not([data-variant]) {
-  border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
+  border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="default"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="default"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="default"],[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style])[data-variant="default"],[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"]:not([data-variant]),[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"]:not([data-variant]),[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style]):not([data-variant]),[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style]):not([data-variant]){--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-200),var(--un-text-opacity));}
 
 /* Primary variant */
@@ -2461,3 +2461,11 @@
   --un-border-opacity:1;border-color:rgba(var(--color-surface-100),var(--un-border-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-avatar-status],[data-mode="dark"] [data-style="rokkit"] [data-avatar-status]{--un-border-opacity:1;border-color:rgba(var(--color-surface-900),var(--un-border-opacity));}
 
+/**
+ * Tooltip - Rokkit Theme Styles
+ */
+
+[data-style='rokkit'] [data-tooltip-content] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-tooltip-content],[data-mode="dark"] [data-style="rokkit"] [data-tooltip-content]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.153",
+  "version": "1.0.0-next.154",
   "description": "Theme styles for @rokkit/ui components",
   "repository": {
     "type": "git",

package/src/base/index.css

@@ -5,6 +5,7 @@
  * Import individual files for tree-shaking, or this file for all base styles.
  */
 
+@import './typography.css';
 @import './density.css';
 @import './button.css';
 @import './item.css';
@@ -51,3 +52,4 @@
 @import './stack.css';
 @import './badge.css';
 @import './avatar.css';
+@import './tooltip.css';

package/src/base/item.css

@@ -71,7 +71,7 @@
   flex-shrink: 0;
   margin-left: auto;
   padding: 0.125rem 0.375rem;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.75em;
   font-weight: 500;
   border-radius: 0.25rem;

package/src/base/menu.css

@@ -110,6 +110,7 @@
   min-width: 200px;
   max-height: 400px;
   overflow-y: auto;
+  overscroll-behavior: contain;
   border-radius: 0.5rem;
 }
 

package/src/base/select.css

@@ -179,7 +179,9 @@
   position: absolute;
   z-index: 50;
   min-width: 100%;
+  max-height: var(--select-dropdown-max-height, 200px);
   overflow-y: auto;
+  overscroll-behavior: contain;
   border-radius: 0.5rem;
 }
 

package/src/base/tooltip.css

@@ -0,0 +1,64 @@
+/**
+ * Tooltip - Base Structural Styles
+ *
+ * Positions the tooltip bubble relative to its trigger via CSS.
+ * Visibility driven by data-tooltip-visible — never display:none,
+ * preserving layout anchor and allowing CSS transitions.
+ */
+
+[data-tooltip-root] {
+  position: relative;
+  display: inline-flex;
+}
+
+[data-tooltip-content] {
+  position: absolute;
+  z-index: 100;
+  max-width: 16rem;
+  width: max-content;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  pointer-events: none;
+  white-space: normal;
+  transition:
+    opacity 120ms ease,
+    visibility 120ms ease;
+}
+
+/* Position variants */
+[data-tooltip-content][data-tooltip-position='top'] {
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[data-tooltip-content][data-tooltip-position='bottom'] {
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[data-tooltip-content][data-tooltip-position='left'] {
+  right: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+[data-tooltip-content][data-tooltip-position='right'] {
+  left: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Visibility */
+[data-tooltip-content][data-tooltip-visible='false'] {
+  visibility: hidden;
+  opacity: 0;
+}
+
+[data-tooltip-content][data-tooltip-visible='true'] {
+  visibility: visible;
+  opacity: 1;
+}

package/src/base/typography.css

@@ -0,0 +1,31 @@
+/**
+ * Typography & Shape Tokens
+ *
+ * CSS custom properties for font families and border-radius scale.
+ * Override these in your application stylesheet to customize typography and shape.
+ *
+ * @example
+ * :root {
+ *   --font-sans: 'Inter', system-ui, sans-serif;
+ *   --font-mono: 'JetBrains Mono', monospace;
+ *   --font-heading: 'Cal Sans', 'Inter', sans-serif;
+ *
+ *   --radius-sm: 0;        --* sharp corners *--
+ *   --radius-md: 0;
+ *   --radius-lg: 0;
+ * }
+ */
+
+:root {
+  /* Font families */
+  --font-sans: 'Open Sans', -apple-system, system-ui, 'Segoe UI', ui-serif, sans-serif;
+  --font-mono: 'Victor Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+  --font-heading: 'Open Sans', sans-serif;
+
+  /* Border-radius scale */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+}

package/src/base/upload-target.css

@@ -26,6 +26,16 @@
   user-select: none;
 }
 
+[data-upload-target][data-size='small'] {
+  min-height: 4rem;
+  padding: 0.75rem;
+  gap: 0;
+}
+
+[data-upload-target][data-size='small'] [data-upload-icon] {
+  font-size: 1.25rem;
+}
+
 [data-upload-target]:focus {
   outline: none;
 }

package/src/rokkit/button.css

@@ -13,7 +13,7 @@
 [data-style='rokkit'] [data-button]:not([data-style])[data-variant='default'],
 [data-style='rokkit'] [data-button][data-style='default']:not([data-variant]),
 [data-style='rokkit'] [data-button]:not([data-style]):not([data-variant]) {
-  @apply from-surface-z3 to-surface-z2 border-surface-z4 text-surface-z8 border bg-gradient-to-b;
+  @apply from-surface-z3 to-surface-z2 border-surface-z4 text-surface-z8 border bg-gradient-to-r;
 }
 
 /* Primary variant */

package/src/rokkit/index.css

@@ -37,3 +37,4 @@
 @import './stack.css';
 @import './badge.css';
 @import './avatar.css';
+@import './tooltip.css';

package/src/rokkit/tooltip.css

@@ -0,0 +1,7 @@
+/**
+ * Tooltip - Rokkit Theme Styles
+ */
+
+[data-style='rokkit'] [data-tooltip-content] {
+  @apply bg-surface-z8 text-surface-z1;
+}