@developer_tribe/react-builder 1.0.5 → 1.0.7

package/src/styles/components/_attributes-editor.scss

@@ -1,3 +1,4 @@
+@use '../foundation/colors' as colors;
 @use '../foundation/sizes' as sizes;
 
 .attributes-editor {
@@ -5,8 +6,8 @@
     margin-bottom: sizes.$spaceRelaxed;
     padding: sizes.$spaceCozy sizes.$spaceComfy;
     border-radius: sizes.$radiusRounded;
-    border: sizes.$borderWidthHairline solid #eee;
-    background: #f8f8f8;
+    border: sizes.$borderWidthHairline solid colors.$borderColor;
+    background: colors.$canvasColor;
   }
 
   &__component-title,
@@ -23,7 +24,7 @@
   &__component-description {
     margin: sizes.$spaceSnug 0 0;
     font-size: sizes.$fontSizeBase;
-    color: #555;
+    color: colors.$mutedTextColor;
   }
 
   &__tabs {
@@ -36,9 +37,9 @@
   &__tab-button {
     padding: sizes.$spaceSnug sizes.$spaceCozy;
     border-radius: sizes.$radiusMid;
-    border: sizes.$borderWidthHairline solid #ddd;
-    background: #fff;
-    color: #222;
+    border: sizes.$borderWidthHairline solid colors.$borderColor;
+    background: colors.$surfaceColor;
+    color: colors.$textColor;
     cursor: pointer;
     font-weight: 600;
     transition:
@@ -51,8 +52,8 @@
     }
 
     &--active {
-      background: #222;
-      color: #fff;
+      background: colors.$textColor;
+      color: colors.$surfaceColor;
     }
   }
 
@@ -120,8 +121,8 @@
     margin-bottom: sizes.$spaceComfy;
     padding: sizes.$spaceCozy sizes.$spaceComfy;
     border-radius: sizes.$radiusRounded;
-    border: sizes.$borderWidthHairline solid #eee;
-    background: #fff;
+    border: sizes.$borderWidthHairline solid colors.$borderColor;
+    background: colors.$surfaceColor;
   }
 
   &__mockable-title {
@@ -135,7 +136,7 @@
   }
 
   &__mockable-row + &__mockable-row {
-    border-top: sizes.$borderWidthHairline solid #eee;
+    border-top: sizes.$borderWidthHairline solid colors.$borderColor;
   }
 
   &__mockable-name {
@@ -159,7 +160,7 @@
     right: 0;
     font-size: sizes.$fontSizeXs;
     line-height: 1.2;
-    color: #666;
+    color: colors.$mutedTextColor;
     cursor: pointer;
     font-weight: 600;
     white-space: nowrap;
@@ -175,7 +176,8 @@
   }
 
   &__trigger:focus-visible {
-    outline: sizes.$outlineWidthFocus solid rgba(17, 24, 39, 0.4);
+    outline: sizes.$outlineWidthFocus solid
+      hsl(var(--foreground, 220.9 39.3% 11%) / 0.4);
     outline-offset: sizes.$outlineWidthFocus;
   }
 
@@ -184,8 +186,8 @@
     top: 50%;
     right: 100%;
     transform: translate(calc(-1 * sizes.$spaceCompact), -50%);
-    background: #111;
-    color: #fff;
+    background: colors.$textColor;
+    color: colors.$surfaceColor;
     padding: sizes.$spaceSnug sizes.$spaceInset;
     border-radius: sizes.$radiusSoft;
     font-size: sizes.$fontSizeSm;
@@ -208,11 +210,11 @@
 }
 
 .special-category-section {
-  border: sizes.$borderWidthHairline solid #e0e0e0;
+  border: sizes.$borderWidthHairline solid colors.$borderColor;
   border-radius: sizes.$radiusRounded;
   padding: sizes.$spaceCozy;
   margin-bottom: sizes.$spaceComfy;
-  background: #fdfdfd;
+  background: colors.$surfaceColor;
 
   &__header {
     display: flex;
@@ -227,9 +229,9 @@
   }
 
   &__toggle {
-    border: sizes.$borderWidthHairline solid #ddd;
-    background: #fff;
-    color: #222;
+    border: sizes.$borderWidthHairline solid colors.$borderColor;
+    background: colors.$surfaceColor;
+    color: colors.$textColor;
     border-radius: sizes.$radiusSoft;
     padding: sizes.$spaceTight sizes.$spaceInset;
     cursor: pointer;
@@ -240,15 +242,15 @@
       border-color 0.15s ease;
 
     &[data-active='true'] {
-      background: #222;
-      color: #fff;
-      border-color: #222;
+      background: colors.$textColor;
+      color: colors.$surfaceColor;
+      border-color: colors.$textColor;
     }
   }
 
   &__description {
     margin: sizes.$spaceCompact 0 0;
-    color: #666;
+    color: colors.$mutedTextColor;
     font-size: sizes.$fontSizeSmPlus;
     padding-bottom: sizes.$spaceComfy;
   }

package/src/styles/components/_bottom-bar.scss

@@ -0,0 +1,101 @@
+@use '../foundation/colors' as colors;
+
+.rb-bottom-bar {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-66%);
+  bottom: 10px;
+  z-index: 200;
+
+  height: 50px;
+  border-radius: 24px;
+
+  background-color: colors.$surfaceColor;
+  color: colors.$textColor;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+
+  padding: 0 10px;
+  gap: 10px;
+
+  border: 1px solid colors.$borderColor;
+  box-shadow: 0 8px 20px hsl(var(--foreground, 220.9 39.3% 11%) / 0.08);
+}
+
+.rb-bottom-bar__button {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 8px;
+  /* lighter icon color */
+  color: colors.$mutedTextColor;
+  cursor: pointer;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rb-bottom-bar__button.is-active {
+  color: colors.$accentColor;
+  background: colors.$accentColor; /* Fallback */
+  background: color-mix(in srgb, #{colors.$accentColor}, transparent 92%);
+  box-shadow: 0 0 10px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.18);
+}
+
+/* border between each tool button */
+.rb-bottom-bar__button + .rb-bottom-bar__button {
+  border-left: 1px solid colors.$borderColor;
+  padding-left: 14px;
+  margin-left: 4px;
+}
+
+.rb-bottom-bar__button--rtl {
+  gap: 6px;
+  padding-right: 10px;
+}
+
+.rb-bottom-bar__rtl-text {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  color: colors.$textColor;
+}
+
+.rb-bottom-bar__spacer {
+  flex: 1 1 auto;
+}
+
+.rb-bottom-bar__langs {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  color: colors.$textColor;
+}
+
+.rb-bottom-bar__lang {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 6px 6px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: lowercase;
+  color: inherit;
+}
+
+.rb-bottom-bar__lang.is-active {
+  color: colors.$accentColor;
+  text-shadow: 0 0 12px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.25);
+}
+
+/* border between each language button */
+.rb-bottom-bar__lang + .rb-bottom-bar__lang {
+  border-left: 1px solid colors.$borderColor;
+  margin-left: 8px;
+  padding-left: 14px;
+}

package/src/styles/components/_editor-shell.scss

@@ -5,7 +5,7 @@
 .editor-tabs {
   display: flex;
   gap: 8px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid colors.$borderColor;
 }
 
 .editor-tab {
@@ -29,8 +29,9 @@
 }
 
 .editor-tab--active {
-  background: #fff;
-  border-color: #e5e7eb #e5e7eb #fff #e5e7eb;
+  background: colors.$surfaceColor;
+  border-color: colors.$borderColor colors.$borderColor colors.$surfaceColor
+    colors.$borderColor;
 }
 
 .editor-panels {
@@ -89,7 +90,7 @@
   cursor: pointer;
   font-size: 12px;
   &.editor-device-button--selected {
-    border-color: #000;
+    border-color: colors.$textColor;
   }
 }
 
@@ -129,14 +130,14 @@
   font-size: 12px;
   line-height: 1.2;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.95);
-  border-color: rgba(15, 23, 42, 0.15);
-  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
+  background: hsl(var(--card, 0 0% 100%) / 0.95);
+  border-color: hsl(var(--foreground, 220.9 39.3% 11%) / 0.15);
+  box-shadow: 0 2px 4px hsl(var(--foreground, 220.9 39.3% 11%) / 0.08);
 }
 
 .debug-button:hover {
-  background: #fff;
-  border-color: rgba(15, 23, 42, 0.3);
+  background: colors.$surfaceColor;
+  border-color: hsl(var(--foreground, 220.9 39.3% 11%) / 0.3);
 }
 
 .editor-button:disabled {
@@ -147,7 +148,7 @@
 /* Specific hooks for save buttons (kept empty for now) */
 .editor-save-button,
 .editor-save-previewconfig-button {
-  color: #000;
+  color: colors.$textColor;
   font-weight: 600;
   font-size: 12px;
 }
@@ -158,9 +159,9 @@
   margin-top: 12px;
   min-height: 52px;
   border-style: dashed;
-  border-color: #cbd5f5;
-  background: #f8fafc;
-  color: #0f172a;
+  border-color: colors.$borderColor;
+  background: colors.$canvasColor;
+  color: colors.$textColor;
   font-weight: 600;
   gap: 10px;
   transition:
@@ -176,16 +177,16 @@
   border-radius: 999px;
   align-items: center;
   justify-content: center;
-  background: #2563eb;
-  color: #fff;
+  background: colors.$accentColor;
+  color: colors.$surfaceColor;
   font-size: 18px;
   line-height: 1;
 }
 
 .builder__add-button:hover {
-  border-color: #94a3b8;
-  background: #eef2ff;
-  color: #111827;
+  border-color: colors.$borderColor;
+  background: colors.$canvasColor;
+  color: colors.$textColor;
 }
 
 .side-tool-container {

package/src/styles/components/_mockos-router.scss

@@ -1,3 +1,5 @@
+@use '../foundation/colors' as colors;
+
 .mockos-router {
   width: 100%;
   height: 100%;
@@ -18,35 +20,35 @@
 }
 
 .mockos-screen--launchscreen {
-  background-color: #000000;
+  background-color: colors.$textColor;
 }
 
 .mockos-screen--home {
   padding: 20px;
-  background-color: #f5f5f5;
+  background-color: colors.$canvasColor;
 }
 
 .mockos-screen--onboard {
   padding: 20px;
-  background-color: #ffffff;
+  background-color: colors.$surfaceColor;
 }
 
 .mockos-screen--subscription {
   padding: 20px;
-  background-color: #ffffff;
+  background-color: colors.$surfaceColor;
 }
 
 // Screen Content
 .mockos-screen__title {
   font-size: 32px;
   font-weight: bold;
-  color: #000;
+  color: colors.$textColor;
   margin-bottom: 16px;
 }
 
 .mockos-screen__subtitle {
   font-size: 16px;
-  color: #666;
+  color: colors.$mutedTextColor;
 }
 
 .mockos-screen__heading {
@@ -57,7 +59,7 @@
 
 .mockos-screen__text {
   font-size: 16px;
-  color: #333;
+  color: colors.$textColor;
   margin-bottom: 12px;
 }
 
@@ -68,13 +70,13 @@
   margin-bottom: 12px;
 
   &--premium {
-    background-color: #007aff;
-    color: #fff;
+    background-color: colors.$accentColor;
+    color: colors.$surfaceColor;
   }
 
   &--basic {
-    background-color: #e5e5e5;
-    color: #333;
+    background-color: colors.$canvasColor;
+    color: colors.$textColor;
   }
 }
 
@@ -107,7 +109,7 @@
   transition: background-color 0.2s;
 
   &:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: hsl(var(--card, 0 0% 100%) / 0.1);
   }
 
   &:active {
@@ -120,7 +122,7 @@
   height: 60px;
   border-radius: 13px;
   overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 8px hsl(var(--foreground, 220.9 39.3% 11%) / 0.3);
 
   svg {
     width: 100%;
@@ -131,7 +133,7 @@
 
 .mockos-launcher__app-name {
   font-size: 12px;
-  color: #ffffff;
+  color: colors.$surfaceColor;
   text-align: center;
   max-width: 70px;
   overflow: hidden;

package/src/styles/components/_ui-components.scss

@@ -1,7 +1,6 @@
 @use '../foundation/colors' as colors;
 @use '../foundation/sizes' as sizes;
 @use '../foundation/mixins' as *;
-@use 'sass:color';
 
 .editor-controls {
   display: grid;
@@ -11,7 +10,7 @@
 }
 
 .editor-section {
-  background: #fff;
+  background: colors.$surfaceColor;
   border: 1px solid colors.$borderColor;
   border-radius: sizes.$radiusRounded;
   padding: sizes.$spaceComfy;
@@ -35,15 +34,15 @@
   padding: 8px 12px;
   border-radius: 8px;
   border: 1px solid colors.$borderColor;
-  background: #fff;
+  background: colors.$surfaceColor;
   cursor: pointer;
   transition:
     background 0.2s ease,
     box-shadow 0.2s ease;
 
   &:hover {
-    background: #f9fafb;
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
+    background: colors.$canvasColor;
+    box-shadow: 0 6px 16px hsl(var(--foreground, 220.9 39.3% 11%) / 0.06);
   }
 }
 
@@ -55,7 +54,7 @@
   padding: 0 8px;
   border: 1px solid colors.$borderColor;
   border-radius: sizes.$radiusRounded;
-  background: #fff;
+  background: colors.$surfaceColor;
   color: colors.$textColor;
   font: inherit;
   outline: none;
@@ -64,8 +63,8 @@
     box-shadow 0.15s ease;
 
   &:focus {
-    border-color: color.adjust(colors.$borderColor, $lightness: -8%);
-    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
+    border-color: colors.$borderColor;
+    box-shadow: 0 0 0 3px hsl(var(--foreground, 220.9 39.3% 11%) / 0.04);
   }
 }
 
@@ -120,7 +119,7 @@
   height: 20px;
   border-radius: 6px;
   border: 2px solid colors.$borderColor;
-  background: #fff;
+  background: colors.$surfaceColor;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -129,7 +128,7 @@
     border-color 0.2s ease,
     box-shadow 0.2s ease,
     transform 0.2s ease;
-  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
+  box-shadow: 0 2px 6px hsl(var(--foreground, 220.9 39.3% 11%) / 0.12);
 
   &::after {
     content: '';
@@ -150,17 +149,17 @@
 }
 
 .builder-checkbox__native:focus-visible + .builder-checkbox__control {
-  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
+  box-shadow: 0 0 0 3px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.3);
 }
 
 .builder-checkbox__native:checked + .builder-checkbox__control {
-  background: linear-gradient(135deg, #1f2937, #4f46e5);
+  background: linear-gradient(135deg, colors.$textColor, colors.$accentColor);
   border-color: transparent;
-  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35);
+  box-shadow: 0 6px 14px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.35);
 }
 
 .builder-checkbox__native:checked + .builder-checkbox__control::after {
-  border-color: #fff;
+  border-color: colors.$surfaceColor;
   transform: rotate(45deg) scale(1);
 }
 
@@ -171,7 +170,7 @@
 
 .builder-checkbox__helper {
   font-size: 12px;
-  color: #6b7280;
+  color: colors.$mutedTextColor;
   margin-left: 30px;
 }
 

package/src/styles/foundation/_colors.scss

@@ -1,8 +1,28 @@
-/* Library color tokens live in a single place for easy discovery. */
-$textColor: #111827;
-$mutedTextColor: #6b7280;
-$surfaceColor: #ffffff;
-$canvasColor: #f3f4f6;
-$borderColor: #e5e7eb;
-$accentColor: #2563eb;
-$dangerColor: #ef4444;
+/* Library color tokens live in a single place for easy discovery.
+ *
+ * TribeHub theming (shadcn/ui style):
+ * - Host app defines HSL channels as CSS variables (without the `hsl()` wrapper).
+ * - Builder consumes them as `hsl(var(--token))`.
+ * - If the host doesn't define a token, we fall back to the builder defaults.
+ */
+
+$background: hsl(var(--background, 220 14.3% 95.9%));
+$foreground: hsl(var(--foreground, 220.9 39.3% 11%));
+$card: hsl(var(--card, 0 0% 100%));
+$cardForeground: hsl(var(--card-foreground, 220.9 39.3% 11%));
+$muted: hsl(var(--muted, 220 14.3% 95.9%));
+$mutedForeground: hsl(var(--muted-foreground, 220 8.9% 46.1%));
+$primary: hsl(var(--primary, 221.2 83.2% 53.3%));
+$primaryForeground: hsl(var(--primary-foreground, 0 0% 100%));
+$destructive: hsl(var(--destructive, 0 84.2% 60.2%));
+$destructiveForeground: hsl(var(--destructive-foreground, 0 0% 100%));
+$border: hsl(var(--border, 220 13% 91%));
+
+/* Back-compat aliases used by the existing SCSS. */
+$textColor: $foreground;
+$mutedTextColor: $mutedForeground;
+$surfaceColor: $card;
+$canvasColor: $background;
+$borderColor: $border;
+$accentColor: $primary;
+$dangerColor: $destructive;

package/src/styles/foundation/_mixins.scss

@@ -14,7 +14,7 @@
 
 @mixin thin-scrollbar {
   scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+  scrollbar-color: hsl(var(--foreground, 220.9 39.3% 11%) / 0.25) transparent;
   &::-webkit-scrollbar {
     width: 8px;
     height: 4px;

package/src/styles/foundation/_sizes.scss

@@ -1,4 +1,6 @@
 /* Library sizing scale (spacing, radii, shadow) stays centralized. */
+@use './colors' as colors;
+
 $spaceTight: 4px;
 $spaceSnug: 6px;
 $spaceCompact: 8px;
@@ -16,8 +18,8 @@ $radiusPill: 12px;
 $borderWidthHairline: 1px;
 $outlineWidthFocus: 2px;
 
-$cardShadow: 0 10px 30px rgba(0, 0, 0, 0.12);
-$shadowTooltip: 0 6px 16px rgba(0, 0, 0, 0.2);
+$cardShadow: 0 10px 30px hsl(var(--foreground, 220.9 39.3% 11%) / 0.12);
+$shadowTooltip: 0 6px 16px hsl(var(--foreground, 220.9 39.3% 11%) / 0.2);
 
 $fontSizeXs: 11px;
 $fontSizeSm: 12px;

package/src/styles/index.scss

@@ -13,6 +13,7 @@
 @use './components/editor-shell';
 @use './components/attributes-editor';
 @use './components/mockos-router';
+@use './components/bottom-bar';
 
 @use './modals/modal-shell';
 @use './modals/add-component';

package/src/styles/layout/_builder.scss

@@ -49,7 +49,7 @@
     padding: 0 sizes.$spaceTight;
     margin: 0;
     background: colors.$accentColor;
-    color: #fff;
+    color: colors.$surfaceColor;
     font-size: clamp(sizes.$fontSizeXs, 1.3vw, sizes.$fontSizeSmPlus);
     white-space: nowrap;
     overflow: hidden;

package/src/styles/modals/_add-component.scss

@@ -49,7 +49,7 @@
   border-radius: 12px;
   padding: sizes.$spaceComfy;
   margin-bottom: sizes.$spaceCozy;
-  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.05);
+  box-shadow: 0 10px 20px hsl(var(--foreground, 220.9 39.3% 11%) / 0.05);
 }
 
 .add-component-modal__group-title {
@@ -86,7 +86,7 @@
 
 .add-component-modal__card:hover {
   border-color: colors.$accentColor;
-  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);
+  box-shadow: 0 10px 25px hsl(var(--primary, 221.2 83.2% 53.3%) / 0.15);
   transform: translateY(-2px);
 }
 

package/src/styles/modals/_color-modal.scss

@@ -30,7 +30,7 @@
   width: 32px;
   height: 32px;
   border-radius: 6px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid hsl(var(--foreground, 220.9 39.3% 11%) / 0.1);
 }
 
 .color-modal__selected-label {
@@ -158,7 +158,7 @@
 }
 
 .color-modal__swatch-preview--light {
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid hsl(var(--foreground, 220.9 39.3% 11%) / 0.1);
 }
 
 .color-modal__swatch-label {

package/src/styles/modals/_modal-shell.scss

@@ -10,7 +10,7 @@
 .modal__overlay {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: hsl(var(--foreground, 220.9 39.3% 11%) / 0.4);
   z-index: 0;
 }