@rendra-ui/web 2.1.0

package/dist/tokens.css

@@ -0,0 +1,732 @@
+/*! Rendra Design System v2.1.0 | MIT | © 2026 Bruno Magalhaes | brunomagalhaes.me */
+
+@layer theme, base, rendra.base, components, rendra.components, utilities;
+@layer theme, base, components, utilities;
+
+@property --tw-animation-delay {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0s;
+}
+@property --tw-animation-direction {
+  syntax: '*';
+  inherits: false;
+  initial-value: normal;
+}
+@property --tw-animation-duration {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-animation-fill-mode {
+  syntax: '*';
+  inherits: false;
+  initial-value: none;
+}
+@property --tw-animation-iteration-count {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-blur {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-opacity {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-rotate {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-scale {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-translate-x {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-translate-y {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-blur {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-opacity {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-rotate {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-scale {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-translate-x {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-translate-y {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+:root {
+  color-scheme: light;
+  --rendra-brand-font: ui-sans-serif, system-ui, sans-serif;
+  --rendra-radius: 0.625rem;
+  --rendra-background: #f5f6f7;
+  --rendra-background-image: none;
+  --rendra-foreground: #0b1d37;
+  --rendra-card: #ffffff;
+  --rendra-card-foreground: #0b1d37;
+  --rendra-popover: #ffffff;
+  --rendra-popover-foreground: #0b1d37;
+  --rendra-muted: #eaeff5;
+  --rendra-muted-foreground: #4f5f76;
+  --rendra-border: #dbe2eb;
+  --rendra-input: #808fa4;
+  --rendra-field: #f5f6f7;
+  --rendra-overlay: rgb(7 20 42 / 0.55);
+  --rendra-label-color: #5f6f82;
+  --rendra-destructive: #b72c05;
+  --rendra-destructive-hover: #962404;
+  --rendra-destructive-foreground: #ffffff;
+  --rendra-destructive-soft: #fcebe6;
+  --rendra-destructive-soft-foreground: #962404;
+  --rendra-success: #157a3c;
+  --rendra-success-foreground: #ffffff;
+  --rendra-success-soft: #e6f5eb;
+  --rendra-success-soft-foreground: #14632f;
+  --rendra-warning: #b45309;
+  --rendra-warning-foreground: #ffffff;
+  --rendra-warning-soft: #fdf2e1;
+  --rendra-warning-soft-foreground: #8a3d06;
+  --rendra-info: #0e6cdb;
+  --rendra-info-foreground: #ffffff;
+  --rendra-info-soft: #e7f0fc;
+  --rendra-info-soft-foreground: #0b58b5;
+  --rendra-elevation-sm: 0 1px 2px rgb(var(--rendra-shadow-color) / 0.06);
+  --rendra-elevation-md:
+    0 2px 8px -2px rgb(var(--rendra-shadow-color) / 0.1),
+    0 1px 2px rgb(var(--rendra-shadow-color) / 0.06);
+  --rendra-elevation-lg:
+    0 12px 32px -8px rgb(var(--rendra-shadow-color) / 0.18),
+    0 2px 6px rgb(var(--rendra-shadow-color) / 0.06);
+}
+.dark {
+  color-scheme: dark;
+  --rendra-label-color: #94a3b8;
+  --rendra-destructive: #b72c05;
+  --rendra-destructive-hover: #cf3b0e;
+  --rendra-destructive-foreground: #ffffff;
+  --rendra-destructive-soft: #3a1a10;
+  --rendra-destructive-soft-foreground: #f5a48c;
+  --rendra-success: #4fcb80;
+  --rendra-success-foreground: #04200f;
+  --rendra-success-soft: #0f3326;
+  --rendra-success-soft-foreground: #86e0a8;
+  --rendra-warning: #f2b04f;
+  --rendra-warning-foreground: #2a1702;
+  --rendra-warning-soft: #362612;
+  --rendra-warning-soft-foreground: #f7c77e;
+  --rendra-info: #0b6fe0;
+  --rendra-info-foreground: #ffffff;
+  --rendra-info-soft: #11305a;
+  --rendra-info-soft-foreground: #7fb4ef;
+  --rendra-elevation-sm: 0 1px 2px rgb(var(--rendra-shadow-color) / 0.3);
+  --rendra-elevation-md: 0 4px 12px -2px rgb(var(--rendra-shadow-color) / 0.35);
+  --rendra-elevation-lg: 0 16px 40px -8px rgb(var(--rendra-shadow-color) / 0.5);
+}
+:root:not([data-palette]),
+:root[data-palette='safira'] {
+  --rendra-primary: #0b6fe0;
+  --rendra-primary-foreground: #ffffff;
+  --rendra-primary-hover: #98d10a;
+  --rendra-primary-hover-foreground: #0b1d37;
+  --rendra-secondary: #98d10a;
+  --rendra-secondary-foreground: #0b1d37;
+  --rendra-secondary-hover: #0b6fe0;
+  --rendra-secondary-hover-foreground: #ffffff;
+  --rendra-primary-soft: #e7f1fc;
+  --rendra-primary-soft-foreground: #0a68d3;
+  --rendra-primary-text: #0b6ddc;
+  --rendra-ring: #0b6ddc;
+  --rendra-accent: #f0f6fd;
+  --rendra-accent-foreground: #0b1d37;
+  --rendra-sidebar: #0b1d37;
+  --rendra-sidebar-image: radial-gradient(
+    120% 120% at 80% 0%,
+    #034889 0%,
+    #0b1d37 45%,
+    #07142a 100%
+  );
+  --rendra-sidebar-foreground: #f0f4f8;
+  --rendra-sidebar-muted-foreground: #aeb7c1;
+  --rendra-sidebar-border: rgb(255 255 255 / 0.14);
+  --rendra-sidebar-accent: rgb(255 255 255 / 0.08);
+  --rendra-sidebar-active: rgb(11 111 224 / 0.24);
+  --rendra-sidebar-active-foreground: #ffffff;
+  --rendra-sidebar-indicator: #98d10a;
+  --rendra-gradient-brand: radial-gradient(
+    120% 120% at 80% 0%,
+    #034889 0%,
+    #0b1d37 45%,
+    #07142a 100%
+  );
+  --rendra-gradient-brand-foreground: #ffffff;
+  --rendra-gradient-accent: linear-gradient(90deg, #0b6fe0 0%, #98d10a 100%);
+  --rendra-gradient-soft: linear-gradient(135deg, #e7f1fc 0%, #ffffff 65%);
+  --rendra-chart-1: #0b6fe0;
+  --rendra-chart-2: #98d10a;
+  --rendra-chart-3: #79b0ee;
+  --rendra-chart-4: #074892;
+  --rendra-chart-5: #6a9207;
+  --rendra-shadow-color: 7 20 42;
+}
+:root:not([data-palette]).dark,
+:root[data-palette='safira'].dark {
+  --rendra-background: #07142a;
+  --rendra-background-image: radial-gradient(
+    120% 80% at 80% 0%,
+    #05315e 0%,
+    #091932 40%,
+    #07142a 100%
+  );
+  --rendra-foreground: #e8eff8;
+  --rendra-card: #061b37;
+  --rendra-card-foreground: #e8eff8;
+  --rendra-popover: #061e3d;
+  --rendra-popover-foreground: #e8eff8;
+  --rendra-muted: #062243;
+  --rendra-muted-foreground: #99a7b9;
+  --rendra-border: #24364f;
+  --rendra-input: #5d6a7c;
+  --rendra-field: #061226;
+  --rendra-overlay: rgb(3 8 17 / 0.7);
+  --rendra-primary: #0b6fe0;
+  --rendra-primary-foreground: #ffffff;
+  --rendra-primary-hover: #98d10a;
+  --rendra-primary-hover-foreground: #0b1d37;
+  --rendra-secondary: #98d10a;
+  --rendra-secondary-foreground: #0b1d37;
+  --rendra-secondary-hover: #0b6fe0;
+  --rendra-secondary-hover-foreground: #ffffff;
+  --rendra-primary-soft: #073366;
+  --rendra-primary-soft-foreground: #79b0ee;
+  --rendra-primary-text: #3c8ce6;
+  --rendra-ring: #3c8ce6;
+  --rendra-accent: #152943;
+  --rendra-accent-foreground: #e8eff8;
+  --rendra-sidebar: #061226;
+  --rendra-sidebar-image: radial-gradient(
+    120% 120% at 80% 0%,
+    #034889 0%,
+    #0b1d37 45%,
+    #07142a 100%
+  );
+  --rendra-sidebar-foreground: #f0f4f8;
+  --rendra-sidebar-muted-foreground: #aeb7c1;
+  --rendra-sidebar-border: rgb(255 255 255 / 0.14);
+  --rendra-sidebar-accent: rgb(255 255 255 / 0.08);
+  --rendra-sidebar-active: rgb(11 111 224 / 0.24);
+  --rendra-sidebar-active-foreground: #ffffff;
+  --rendra-sidebar-indicator: #98d10a;
+  --rendra-gradient-brand: radial-gradient(
+    120% 120% at 80% 0%,
+    #034889 0%,
+    #0b1d37 45%,
+    #07142a 100%
+  );
+  --rendra-gradient-brand-foreground: #ffffff;
+  --rendra-gradient-accent: linear-gradient(90deg, #0b6fe0 0%, #98d10a 100%);
+  --rendra-gradient-soft: linear-gradient(135deg, #073366 0%, #061b37 65%);
+  --rendra-chart-1: #0b6fe0;
+  --rendra-chart-2: #98d10a;
+  --rendra-chart-3: #79b0ee;
+  --rendra-chart-4: #bbd7f6;
+  --rendra-chart-5: #b7df54;
+  --rendra-shadow-color: 0 0 0;
+}
+:root,
+[data-rendra-root] {
+  --rendra-label-size: 0.6875rem;
+  --rendra-label-leading: 1rem;
+  --rendra-label-weight: 500;
+  --rendra-label-transform: uppercase;
+  --rendra-label-tracking: 0.08em;
+  --rendra-help-size: 0.75rem;
+  --rendra-help-leading: 1rem;
+  --rendra-help-color: var(--rendra-muted-foreground);
+}
+:root[data-label='normal'],
+[data-rendra-root][data-label='normal'] {
+  --rendra-label-size: 0.875rem;
+  --rendra-label-leading: 1.25rem;
+  --rendra-label-weight: 500;
+  --rendra-label-transform: none;
+  --rendra-label-tracking: 0em;
+  --rendra-label-color: var(--rendra-foreground);
+}
+:root,
+[data-rendra-root],
+[data-shape='rounded'] {
+  --rendra-shape-control: calc(var(--rendra-radius) - 2px);
+  --rendra-shape-surface: var(--rendra-radius);
+  --rendra-shape-item: calc(var(--rendra-radius) - 4px);
+  --rendra-shape-block: calc(var(--rendra-radius) - 4px);
+  --rendra-shape-avatar: 9999px;
+}
+[data-shape='square'] {
+  --rendra-shape-control: 0px;
+  --rendra-shape-surface: 0px;
+  --rendra-shape-item: 0px;
+  --rendra-shape-block: 0px;
+  --rendra-shape-avatar: 0px;
+}
+[data-shape='pill'] {
+  --rendra-shape-control: 1.75rem;
+  --rendra-shape-surface: calc(var(--rendra-radius) + 0.75rem);
+  --rendra-shape-item: 1.75rem;
+  --rendra-shape-block: var(--rendra-radius);
+  --rendra-shape-avatar: 9999px;
+}
+@media (width >= 48rem) {
+  :root,
+  [data-rendra-root] {
+    --rendra-spacing-control-sm: 2rem;
+    --rendra-spacing-control-md: 2.5rem;
+    --rendra-spacing-control-lg: 3rem;
+    --rendra-spacing-header: 4rem;
+    --rendra-text-xl: 1.25rem;
+    --rendra-text-xl--line-height: 1.75rem;
+    --rendra-text-2xl: 1.5rem;
+    --rendra-text-2xl--line-height: 2rem;
+    --rendra-text-3xl: 1.875rem;
+    --rendra-text-3xl--line-height: 2.375rem;
+  }
+}
+
+@keyframes rd-progress-slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+:root {
+  --rendra-swatch-check-light: #ffffff;
+  --rendra-swatch-check-dark: #0b1d37;
+}
+
+:root,
+[data-rendra-root] {
+  --rendra-meter-low: #dc2626;
+  --rendra-meter-mid: #f5b400;
+  --rendra-meter-high: #16a34a;
+}
+.dark,
+[data-rendra-root].dark {
+  --rendra-meter-low: #f05252;
+  --rendra-meter-mid: #facc15;
+  --rendra-meter-high: #34d399;
+}
+
+@keyframes rd-wave {
+  0%,
+  100% {
+    transform: scaleY(0.25);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+}
+@property --tw-translate-x {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-scale-x {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-pan-x {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-pan-y {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-pinch-zoom {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-space-x-reverse {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-divide-x-reverse {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: '*';
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-divide-y-reverse {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-leading {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-ordinal {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: '*';
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-outline-style {
+  syntax: '*';
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-duration {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-content {
+  syntax: '*';
+  initial-value: '';
+  inherits: false;
+}
+@property --tw-blur {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: '*';
+  inherits: false;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
+      scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
+      rotate(var(--tw-enter-rotate, 0));
+    filter: blur(var(--tw-enter-blur, 0));
+  }
+}
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
+      scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
+      rotate(var(--tw-exit-rotate, 0));
+    filter: blur(var(--tw-exit-blur, 0));
+  }
+}
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(
+      --radix-accordion-content-height,
+      var(
+        --bits-accordion-content-height,
+        var(
+          --reka-accordion-content-height,
+          var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))
+        )
+      )
+    );
+  }
+}
+@keyframes accordion-up {
+  from {
+    height: var(
+      --radix-accordion-content-height,
+      var(
+        --bits-accordion-content-height,
+        var(
+          --reka-accordion-content-height,
+          var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))
+        )
+      )
+    );
+  }
+  to {
+    height: 0;
+  }
+}
+@keyframes collapsible-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(
+      --radix-collapsible-content-height,
+      var(
+        --bits-collapsible-content-height,
+        var(--reka-collapsible-content-height, var(--kb-collapsible-content-height, auto))
+      )
+    );
+  }
+}
+@keyframes collapsible-up {
+  from {
+    height: var(
+      --radix-collapsible-content-height,
+      var(
+        --bits-collapsible-content-height,
+        var(--reka-collapsible-content-height, var(--kb-collapsible-content-height, auto))
+      )
+    );
+  }
+  to {
+    height: 0;
+  }
+}
+@keyframes rd-draw {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes rd-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  60% {
+    opacity: 1;
+    transform: scale(1.12);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes rd-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  20%,
+  60% {
+    transform: translateX(-8%);
+  }
+  40%,
+  80% {
+    transform: translateX(8%);
+  }
+}
+
+@layer theme {
+  :root,
+  :host {
+    --rendra-spacing-control-sm: 2.75rem;
+    --rendra-spacing-control-md: 3rem;
+    --rendra-spacing-control-lg: 3.25rem;
+    --rendra-spacing-header: 3.5rem;
+    --rendra-text-xl: 1.125rem;
+    --rendra-text-xl--line-height: 1.625rem;
+    --rendra-text-2xl: 1.3125rem;
+    --rendra-text-2xl--line-height: 1.75rem;
+    --rendra-text-3xl: 1.5rem;
+    --rendra-text-3xl--line-height: 2rem;
+  }
+}