@rokkit/themes 1.0.0-next.121 → 1.0.0-next.122

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.121",
+  "version": "1.0.0-next.122",
   "description": "Themes for use with rokkit components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",

package/src/base/atoms.css

@@ -54,5 +54,5 @@ rk-summary p {
 
 /* Overlay styles */
 rk-overlay {
-  @apply bg-neutral-inset bg-opacity-50;
+  @apply bg-neutral-50 bg-opacity-50;
 }

package/src/base/input.css

@@ -0,0 +1,79 @@
+/* Layout Styles for InputField (base/input.css)
+   - Only structure, spacing, sizing, flex, and layout-related properties
+   - No colors, gradients, or theme tokens here
+   - Uses data-attribute selectors, not tag or class names
+*/
+
+/* Root container: vertical stack, spacing, border radius, border width */
+[data-field-root] {
+  @apply box-border flex flex-col gap-1 rounded-md border p-2;
+}
+
+/* Disabled state: layout only (theme handles color/cursor) */
+[data-field-root][data-field-disabled] {
+  /* No layout changes needed for disabled in base */
+}
+
+/* Error state: layout only (theme handles color/bg) */
+[data-field-root][data-field-state='fail'] {
+  /* No layout changes needed for error in base */
+}
+
+/* Label: spacing and font size */
+[data-field-root] > label,
+[data-field] > label {
+  @apply mb-1 text-xs leading-tight;
+  display: block;
+}
+
+/* Input wrapper: horizontal layout for input and icon */
+[data-field] {
+  @apply flex min-h-8 items-center gap-2;
+}
+
+/* Icon inside input: size and alignment */
+[data-field] [data-icon] {
+  @apply h-5 w-5 flex-shrink-0;
+}
+
+/* Input element: fill available width, spacing */
+[data-field] input,
+[data-field] textarea,
+[data-field] select {
+  @apply box-border min-w-0 flex-1;
+}
+
+/* Description below input */
+[data-description] {
+  @apply mt-1 text-xs leading-snug;
+}
+
+/* Message below input (validation, info, etc.) */
+[data-message] {
+  @apply mt-1 text-xs leading-snug;
+}
+[data-field-root] > [data-field] {
+  @apply flex flex-col gap-2;
+}
+
+/* Checkbox and switch inline with input */
+[data-field-root][data-field-type='switch'] > [data-field] {
+  @applyf flex-row items-center;
+}
+[data-field-root][data-field-type='checkbox'] > [data-field] {
+  @applyf flex-row-reverse items-center;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  [data-field-root] {
+    @apply p-1;
+  }
+  [data-field] {
+    @apply min-h-7 gap-1;
+  }
+  [data-description],
+  [data-message] {
+    @apply text-[11px];
+  }
+}

package/src/base/progress.css

@@ -4,7 +4,7 @@ rk-progress {
 }
 
 rk-progress {
-  @apply bg-neutral-muted border-neutral-subtle border;
+  @apply border border-neutral-100 bg-neutral-200 dark:border-neutral-800 dark:bg-neutral-900;
 }
 rk-progress value-bar {
   @apply bg-primary;

package/src/index.js

@@ -1,3 +1,2 @@
-export { iconShortcuts, themeColors, themeRules } from '@rokkit/core'
-// skipcq: JS-E1004 - Needed for exposing all constants
-export * from './constants.js'
+export { iconShortcuts, Theme } from '@rokkit/core'
+export { defaultStateIcons, defaultIcons } from '@rokkit/core'

package/src/palette.css

@@ -1,25 +1,7 @@
 @layer base {
   :root {
     --scroll-width: 0.5rem;
-  }
-  /* light theme colors */
-  [data-mode='light'] {
-    @apply rokkit-mode-light;
-  }
-  @media (prefers-color-scheme: dark) {
-    body:not([data-mode='light']) {
-      @apply rokkit-mode-dark;
-    }
-  }
-
-  /* dark theme colors */
-  [data-mode='dark'] {
-    @apply rokkit-mode-dark;
-  }
-
-  @media (prefers-color-scheme: light) {
-    body:not([data-mode='dark']) {
-      @apply rokkit-mode-light;
-    }
+    --tab-size: 2;
+    @apply skin-default;
   }
 }

package/src/rokkit/atoms.css

@@ -14,7 +14,7 @@
 }
 
 [data-style='rokkit'] rk-progress-bar rk-value-bar {
-  @apply from-primary to-secondary text-neutral-subtle bg-gradient-to-r dark:text-neutral-800;
+  @apply from-primary-500 to-secondary-500 bg-gradient-to-r text-neutral-100 dark:text-neutral-800;
 }
 
 /* Styles for 'searchable' class */

package/src/rokkit/input.css

@@ -1,52 +0,0 @@
-/* Styles for 'rk-input-field' class */
-
-[data-style='rokkit'] rk-input-select select {
-  @apply border-none;
-}
-[data-style='rokkit'] rk-input-field rk-field,
-[data-style='rokkit'] rk-input-select {
-  @apply p-2px border-neutral-muted box-border rounded border;
-}
-[data-style='rokkit'] rk-input-select {
-  @apply flex h-8 items-center px-2;
-}
-[data-style='rokkit'] rk-input-field input,
-[data-style='rokkit'] rk-input-field textarea,
-[data-style='rokkit'] rk-input-field select {
-  @apply rounded-sm border-0;
-}
-[data-style='rokkit'] rk-checkbox {
-  @apply outline-none;
-}
-[data-style='rokkit'] rk-input-field > label {
-  @apply text-secondary-600;
-}
-[data-style='rokkit'] rk-input-field rk-field > label {
-  @apply text-secondary-600 flex h-full w-full items-center text-xs uppercase;
-}
-[data-style='rokkit'] rk-input-field:not(.disabled) rk-field:focus-within {
-  @apply border-neutral-base from-primary to-secondary bg-gradient-to-r;
-}
-[data-style='rokkit'] rk-input-field.disabled label {
-  @apply text-neutral-500;
-}
-/* [data-style="rokkit"] rk-input-field.disabled rk-field:focus-within {
-  @apply bg-gradient-to-r from-neutral-subtle to-neutral-subtle;
-} */
-[data-style='rokkit'] rk-input-field > span {
-  @apply border-neutral-muted bg-neutral-base aspect-square h-full border-r px-1;
-}
-[data-style='rokkit'] rk-input-field message {
-  @apply bg-neutral-base rounded px-2 py-1;
-}
-[data-style='rokkit'] rk-input-field.fail {
-  @apply bg-error rounded px-2;
-}
-
-[data-style='rokkit'] rk-select {
-  @apply border-neutral-subtle box-border h-9 rounded-md border;
-}
-
-[data-style='rokkit'] rk-select > select {
-  @apply bg-neutral-subtle text-on-neutral-subtle h-full;
-}

package/src/constants.js

@@ -1,8 +0,0 @@
-import { themeColors, themeRules } from '@rokkit/core'
-export { defaultStateIcons, defaultIcons } from '@rokkit/core'
-export const defaultThemeColors = themeColors()
-
-export const palettes = {
-	rokkit: themeRules(),
-	'sea-green': themeRules('sea-green', { primary: 'teal', secondary: 'sky', accent: 'lime' })
-}