origam 2.2.1 → 2.3.0

package/dist/src/assets/css/tokens/light.css

@@ -1186,6 +1186,34 @@
   --origam-textarea-field__grip---border-color: #d4d4d4;
   --origam-textarea-field__grip---opacity: 0.26;
   --origam-textarea-field__grip---height: 9px;
+  --origam-textarea-field---rich-toolbar-bg-color: #fafafa;
+  --origam-textarea-field---rich-toolbar-border-color: #d4d4d4;
+  --origam-textarea-field---rich-toolbar-border-radius: 8px;
+  --origam-textarea-field---rich-toolbar-padding: 8px;
+  --origam-textarea-field---rich-toolbar-gap: 4px;
+  --origam-textarea-field---rich-toolbar-btn-size: 32px;
+  --origam-textarea-field---rich-toolbar-btn-padding: 4px;
+  --origam-textarea-field---rich-toolbar-btn-border-radius: 4px;
+  --origam-textarea-field---rich-toolbar-btn-bg-color: rgba(0, 0, 0, 0);
+  --origam-textarea-field---rich-toolbar-btn-color: #171717;
+  --origam-textarea-field---rich-toolbar-btn-hover-bg-color: #f5f5f5;
+  --origam-textarea-field---rich-toolbar-btn-hover-color: #171717;
+  --origam-textarea-field---rich-toolbar-btn-active-bg-color: #7c3aed;
+  --origam-textarea-field---rich-toolbar-btn-active-color: #ffffff;
+  --origam-textarea-field---rich-toolbar-btn-focus-outline-color: #7c3aed;
+  --origam-textarea-field---rich-content-padding: 12px;
+  --origam-textarea-field---rich-content-min-height: 120px;
+  --origam-textarea-field---rich-content-line-height: 1.5;
+  --origam-textarea-field---rich-content-paragraph-gap: 12px;
+  --origam-textarea-field---rich-content-placeholder-color: #525252;
+  --origam-textarea-field---rich-code-inline-bg-color: #fafafa;
+  --origam-textarea-field---rich-code-inline-color: #171717;
+  --origam-textarea-field---rich-link-color: #7c3aed;
+  --origam-textarea-field---rich-link-text-decoration: underline;
+  --origam-textarea-field---rich-list-padding-inline-start: 24px;
+  --origam-textarea-field---rich-heading-font-size-h1: 1.75rem;
+  --origam-textarea-field---rich-heading-font-size-h2: 1.35rem;
+  --origam-textarea-field---rich-heading-font-size-h3: 1.1rem;
   --origam-overlay---display: flex;
   --origam-overlay---position: fixed;
   --origam-overlay---border-radius: inherit;
@@ -1985,6 +2013,41 @@
   --origam-date-picker-field__icon---color: #525252;
   --origam-date-picker-field__icon---color-hover: #171717;
   --origam-date-picker-field__icon---color-error: #b91c1c;
+  --origam-code---background-color: #fafafa;
+  --origam-code---color: #171717;
+  --origam-code---border-color: #d4d4d4;
+  --origam-code---border-width: 1px;
+  --origam-code---border-radius: 8px;
+  --origam-code---padding-block: 16px;
+  --origam-code---padding-inline: 16px;
+  --origam-code---font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  --origam-code---font-size: 0.75rem;
+  --origam-code---line-height: 1.6;
+  --origam-code__header---background-color: #f5f5f5;
+  --origam-code__header---color: #525252;
+  --origam-code__header---padding-block: 8px;
+  --origam-code__header---padding-inline: 16px;
+  --origam-code__header---gap: 8px;
+  --origam-code__filename---color: #525252;
+  --origam-code__filename---font-size: 0.625rem;
+  --origam-code__filename---font-weight: 500;
+  --origam-code__copy---color: #525252;
+  --origam-code__copy---color-hover: #171717;
+  --origam-code__copy---background-color: rgba(0, 0, 0, 0);
+  --origam-code__copy---background-color-hover: #ffffff;
+  --origam-code__copy---padding-block: 4px;
+  --origam-code__copy---padding-inline: 8px;
+  --origam-code__copy---border-radius: 4px;
+  --origam-code__copy---font-size: 0.625rem;
+  --origam-code__copy---gap: 4px;
+  --origam-code__copy---offset: 8px;
+  --origam-code---line-number-color: #a3a3a3;
+  --origam-code---line-number-width: 3rem;
+  --origam-code---line-number-padding-right: 12px;
+  --origam-code---line-highlight-background-color: #fffbeb;
+  --origam-code---line-highlight-accent-color: #b45309;
+  --origam-code__row---padding-inline: 0;
+  --origam-code__scrollbar---color: #d4d4d4;
   --origam-color-picker---background-color: #ffffff;
   --origam-color-picker---border-radius: 8px;
   --origam-color-picker---padding-block: 16px;
@@ -2247,12 +2310,17 @@
   --origam-parallax---aspect-ratio: 1.7778;
   --origam-parallax---transition-duration: 280ms;
   --origam-parallax---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-parallax---transition-duration-spring: 400ms;
+  --origam-parallax---transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-parallax---transition-easing-spring: cubic-bezier(0.16, 1, 0.3, 1);
   --origam-parallax---perspective: 1000px;
   --origam-parallax---transform-origin: center center;
   --origam-parallax---translate-multiplier: 0.5;
   --origam-parallax---background-color: rgba(0, 0, 0, 0);
   --origam-parallax---color: #171717;
   --origam-parallax__element---transition-duration: 200ms;
+  --origam-parallax__layer---will-change: transform;
+  --origam-parallax__layer---transform-origin: center center;
   --origam-slide---transition-duration: 200ms;
   --origam-slide---transition-duration-reverse: 200ms;
   --origam-slide---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2397,4 +2465,95 @@
   --origam-treeview---size-color: #525252;
   --origam-treeview---guide-color: #d4d4d4;
   --origam-treeview---guide-thickness: 1px;
+  --origam-tabs---background-color: rgba(0, 0, 0, 0);
+  --origam-tabs---border-color: #d4d4d4;
+  --origam-tabs---border-style: solid;
+  --origam-tabs---border-width: 0px;
+  --origam-tabs---border-radius: 0px;
+  --origam-tabs---color: #171717;
+  --origam-tabs---padding-block: 0px;
+  --origam-tabs---padding-inline: 0px;
+  --origam-tabs---gap: 0px;
+  --origam-tabs---height: 48px;
+  --origam-tabs__item---color: #525252;
+  --origam-tabs__item---background-color: rgba(0, 0, 0, 0);
+  --origam-tabs__item---padding-inline: 16px;
+  --origam-tabs__item---padding-block: 0px;
+  --origam-tabs__item---gap: 8px;
+  --origam-tabs__item---height: 48px;
+  --origam-tabs__item---font-size: 0.75rem;
+  --origam-tabs__item---font-weight: 500;
+  --origam-tabs__item---letter-spacing: 0.0094em;
+  --origam-tabs__item---text-transform: none;
+  --origam-tabs__item---border-radius: 0px;
+  --origam-tabs__item---border-width: 0px;
+  --origam-tabs__item---transition-duration: 100ms;
+  --origam-tabs__item---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-tabs__indicator---color: #7c3aed;
+  --origam-tabs__indicator---height: 2px;
+  --origam-tabs__panel---padding-block: 16px;
+  --origam-tabs__panel---padding-inline: 0px;
+  --origam-tabs__panel---transition-duration: 100ms;
+  --origam-snackbar-stack---z-index: 1060;
+  --origam-snackbar-stack---gap: 12px;
+  --origam-snackbar-stack---max-width: 420px;
+  --origam-snackbar-stack---transition-duration: 100ms;
+  --origam-snackbar-stack---position-top: 16px;
+  --origam-snackbar-stack---position-bottom: 16px;
+  --origam-snackbar-stack---position-left: 16px;
+  --origam-snackbar-stack---position-right: 16px;
+  --origam-snackbar-stack__item---gap: 12px;
+  --origam-snackbar-stack__item---min-width: 288px;
+  --origam-snackbar-stack__item---max-width: 420px;
+  --origam-snackbar-stack__item---padding: 12px 14px;
+  --origam-snackbar-stack__item---border-radius: 8px;
+  --origam-snackbar-stack__item---border-width: 1px;
+  --origam-snackbar-stack__item---background-color: #ffffff;
+  --origam-snackbar-stack__item---border-color: #d4d4d4;
+  --origam-snackbar-stack__item---color: #171717;
+  --origam-snackbar-stack__item---box-shadow: 0px 6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08);
+  --origam-snackbar-stack__item---font-size: 0.875rem;
+  --origam-snackbar-stack__item---content-gap: 8px;
+  --origam-snackbar-stack__item---prepend-color: currentColor;
+  --origam-snackbar-stack__item---text-gap: 4px;
+  --origam-snackbar-stack__item---title-font-weight: 600;
+  --origam-snackbar-stack__item---message-font-weight: 400;
+  --origam-snackbar-stack__item---message-color: currentColor;
+  --origam-snackbar-stack__item---message-opacity: 0.85;
+  --origam-snackbar-stack__item---action-color: #ffffff;
+  --origam-command-palette---z-index: 1050;
+  --origam-command-palette---padding-top: 18vh;
+  --origam-command-palette---width: 640px;
+  --origam-command-palette---max-height: 480px;
+  --origam-command-palette---background-color: #ffffff;
+  --origam-command-palette---color: #171717;
+  --origam-command-palette---border-color: #d4d4d4;
+  --origam-command-palette---border-width: 1px;
+  --origam-command-palette---border-radius: 12px;
+  --origam-command-palette---box-shadow: 0px 11px 8px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12);
+  --origam-command-palette__input---padding: 12px 16px;
+  --origam-command-palette__input---font-size: 0.875rem;
+  --origam-command-palette__input---border-color: #d4d4d4;
+  --origam-command-palette__input---icon-color: #525252;
+  --origam-command-palette__input---placeholder-color: #a3a3a3;
+  --origam-command-palette__list---padding: 8px;
+  --origam-command-palette__item---height: 40px;
+  --origam-command-palette__item---padding: 8px 12px;
+  --origam-command-palette__item---border-radius: 8px;
+  --origam-command-palette__item---background-color: rgba(0, 0, 0, 0);
+  --origam-command-palette__item---background-color-active: #e6e6e6;
+  --origam-command-palette__item---color: #171717;
+  --origam-command-palette__item---color-active: #171717;
+  --origam-command-palette__item---icon-color: #525252;
+  --origam-command-palette__item---description-color: #525252;
+  --origam-command-palette---item-kbd-gap: 4px;
+  --origam-command-palette---group-title-padding: 10px 12px 6px;
+  --origam-command-palette---group-title-color: #525252;
+  --origam-command-palette---group-title-font-size: 0.625rem;
+  --origam-command-palette__empty---color: #525252;
+  --origam-command-palette__footer---padding: 8px 12px;
+  --origam-command-palette__footer---border-color: #d4d4d4;
+  --origam-command-palette__footer---color: #525252;
+  --origam-command-palette__backdrop---background-color: rgba(0, 0, 0, 0.45);
+  --origam-command-palette__backdrop---backdrop-filter: blur(6px);
 }

package/dist/src/assets/locales/index.js

@@ -1,2 +1,2 @@
-export { default as en } from "./en.json";
-export { default as fr } from "./fr.json";
+export { default as en } from './en.json';
+export { default as fr } from './fr.json';

package/dist/src/assets/scss/tokens/_dark.scss

@@ -1185,6 +1185,34 @@
   --origam-textarea-field__grip---border-color: #262626;
   --origam-textarea-field__grip---opacity: 0.26;
   --origam-textarea-field__grip---height: 9px;
+  --origam-textarea-field---rich-toolbar-bg-color: #0a0a0a;
+  --origam-textarea-field---rich-toolbar-border-color: #262626;
+  --origam-textarea-field---rich-toolbar-border-radius: 8px;
+  --origam-textarea-field---rich-toolbar-padding: 8px;
+  --origam-textarea-field---rich-toolbar-gap: 4px;
+  --origam-textarea-field---rich-toolbar-btn-size: 32px;
+  --origam-textarea-field---rich-toolbar-btn-padding: 4px;
+  --origam-textarea-field---rich-toolbar-btn-border-radius: 4px;
+  --origam-textarea-field---rich-toolbar-btn-bg-color: rgba(0, 0, 0, 0);
+  --origam-textarea-field---rich-toolbar-btn-color: #fafafa;
+  --origam-textarea-field---rich-toolbar-btn-hover-bg-color: #262626;
+  --origam-textarea-field---rich-toolbar-btn-hover-color: #fafafa;
+  --origam-textarea-field---rich-toolbar-btn-active-bg-color: #8b5cf6;
+  --origam-textarea-field---rich-toolbar-btn-active-color: #ffffff;
+  --origam-textarea-field---rich-toolbar-btn-focus-outline-color: #8b5cf6;
+  --origam-textarea-field---rich-content-padding: 12px;
+  --origam-textarea-field---rich-content-min-height: 120px;
+  --origam-textarea-field---rich-content-line-height: 1.5;
+  --origam-textarea-field---rich-content-paragraph-gap: 12px;
+  --origam-textarea-field---rich-content-placeholder-color: #a3a3a3;
+  --origam-textarea-field---rich-code-inline-bg-color: #0a0a0a;
+  --origam-textarea-field---rich-code-inline-color: #fafafa;
+  --origam-textarea-field---rich-link-color: #8b5cf6;
+  --origam-textarea-field---rich-link-text-decoration: underline;
+  --origam-textarea-field---rich-list-padding-inline-start: 24px;
+  --origam-textarea-field---rich-heading-font-size-h1: 1.75rem;
+  --origam-textarea-field---rich-heading-font-size-h2: 1.35rem;
+  --origam-textarea-field---rich-heading-font-size-h3: 1.1rem;
   --origam-overlay---display: flex;
   --origam-overlay---position: fixed;
   --origam-overlay---border-radius: inherit;
@@ -1984,6 +2012,41 @@
   --origam-date-picker-field__icon---color: #a3a3a3;
   --origam-date-picker-field__icon---color-hover: #fafafa;
   --origam-date-picker-field__icon---color-error: #cf6679;
+  --origam-code---background-color: #0a0a0a;
+  --origam-code---color: #fafafa;
+  --origam-code---border-color: #262626;
+  --origam-code---border-width: 1px;
+  --origam-code---border-radius: 8px;
+  --origam-code---padding-block: 16px;
+  --origam-code---padding-inline: 16px;
+  --origam-code---font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  --origam-code---font-size: 0.75rem;
+  --origam-code---line-height: 1.6;
+  --origam-code__header---background-color: #262626;
+  --origam-code__header---color: #a3a3a3;
+  --origam-code__header---padding-block: 8px;
+  --origam-code__header---padding-inline: 16px;
+  --origam-code__header---gap: 8px;
+  --origam-code__filename---color: #a3a3a3;
+  --origam-code__filename---font-size: 0.625rem;
+  --origam-code__filename---font-weight: 500;
+  --origam-code__copy---color: #a3a3a3;
+  --origam-code__copy---color-hover: #fafafa;
+  --origam-code__copy---background-color: rgba(0, 0, 0, 0);
+  --origam-code__copy---background-color-hover: #171717;
+  --origam-code__copy---padding-block: 4px;
+  --origam-code__copy---padding-inline: 8px;
+  --origam-code__copy---border-radius: 4px;
+  --origam-code__copy---font-size: 0.625rem;
+  --origam-code__copy---gap: 4px;
+  --origam-code__copy---offset: 8px;
+  --origam-code---line-number-color: #525252;
+  --origam-code---line-number-width: 3rem;
+  --origam-code---line-number-padding-right: 12px;
+  --origam-code---line-highlight-background-color: #171717;
+  --origam-code---line-highlight-accent-color: #fbbf24;
+  --origam-code__row---padding-inline: 0;
+  --origam-code__scrollbar---color: #262626;
   --origam-color-picker---background-color: #171717;
   --origam-color-picker---border-radius: 8px;
   --origam-color-picker---padding-block: 16px;
@@ -2246,12 +2309,17 @@
   --origam-parallax---aspect-ratio: 1.7778;
   --origam-parallax---transition-duration: 280ms;
   --origam-parallax---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-parallax---transition-duration-spring: 400ms;
+  --origam-parallax---transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-parallax---transition-easing-spring: cubic-bezier(0.16, 1, 0.3, 1);
   --origam-parallax---perspective: 1000px;
   --origam-parallax---transform-origin: center center;
   --origam-parallax---translate-multiplier: 0.5;
   --origam-parallax---background-color: rgba(0, 0, 0, 0);
   --origam-parallax---color: #fafafa;
   --origam-parallax__element---transition-duration: 200ms;
+  --origam-parallax__layer---will-change: transform;
+  --origam-parallax__layer---transform-origin: center center;
   --origam-slide---transition-duration: 200ms;
   --origam-slide---transition-duration-reverse: 200ms;
   --origam-slide---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2396,4 +2464,95 @@
   --origam-treeview---size-color: #a3a3a3;
   --origam-treeview---guide-color: #262626;
   --origam-treeview---guide-thickness: 1px;
+  --origam-tabs---background-color: rgba(0, 0, 0, 0);
+  --origam-tabs---border-color: #262626;
+  --origam-tabs---border-style: solid;
+  --origam-tabs---border-width: 0px;
+  --origam-tabs---border-radius: 0px;
+  --origam-tabs---color: #fafafa;
+  --origam-tabs---padding-block: 0px;
+  --origam-tabs---padding-inline: 0px;
+  --origam-tabs---gap: 0px;
+  --origam-tabs---height: 48px;
+  --origam-tabs__item---color: #a3a3a3;
+  --origam-tabs__item---background-color: rgba(0, 0, 0, 0);
+  --origam-tabs__item---padding-inline: 16px;
+  --origam-tabs__item---padding-block: 0px;
+  --origam-tabs__item---gap: 8px;
+  --origam-tabs__item---height: 48px;
+  --origam-tabs__item---font-size: 0.75rem;
+  --origam-tabs__item---font-weight: 500;
+  --origam-tabs__item---letter-spacing: 0.0094em;
+  --origam-tabs__item---text-transform: none;
+  --origam-tabs__item---border-radius: 0px;
+  --origam-tabs__item---border-width: 0px;
+  --origam-tabs__item---transition-duration: 100ms;
+  --origam-tabs__item---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-tabs__indicator---color: #8b5cf6;
+  --origam-tabs__indicator---height: 2px;
+  --origam-tabs__panel---padding-block: 16px;
+  --origam-tabs__panel---padding-inline: 0px;
+  --origam-tabs__panel---transition-duration: 100ms;
+  --origam-snackbar-stack---z-index: 1060;
+  --origam-snackbar-stack---gap: 12px;
+  --origam-snackbar-stack---max-width: 420px;
+  --origam-snackbar-stack---transition-duration: 100ms;
+  --origam-snackbar-stack---position-top: 16px;
+  --origam-snackbar-stack---position-bottom: 16px;
+  --origam-snackbar-stack---position-left: 16px;
+  --origam-snackbar-stack---position-right: 16px;
+  --origam-snackbar-stack__item---gap: 12px;
+  --origam-snackbar-stack__item---min-width: 288px;
+  --origam-snackbar-stack__item---max-width: 420px;
+  --origam-snackbar-stack__item---padding: 12px 14px;
+  --origam-snackbar-stack__item---border-radius: 8px;
+  --origam-snackbar-stack__item---border-width: 1px;
+  --origam-snackbar-stack__item---background-color: #0a0a0a;
+  --origam-snackbar-stack__item---border-color: #262626;
+  --origam-snackbar-stack__item---color: #fafafa;
+  --origam-snackbar-stack__item---box-shadow: 0px 6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08);
+  --origam-snackbar-stack__item---font-size: 0.875rem;
+  --origam-snackbar-stack__item---content-gap: 8px;
+  --origam-snackbar-stack__item---prepend-color: currentColor;
+  --origam-snackbar-stack__item---text-gap: 4px;
+  --origam-snackbar-stack__item---title-font-weight: 600;
+  --origam-snackbar-stack__item---message-font-weight: 400;
+  --origam-snackbar-stack__item---message-color: currentColor;
+  --origam-snackbar-stack__item---message-opacity: 0.85;
+  --origam-snackbar-stack__item---action-color: #ffffff;
+  --origam-command-palette---z-index: 1050;
+  --origam-command-palette---padding-top: 18vh;
+  --origam-command-palette---width: 640px;
+  --origam-command-palette---max-height: 480px;
+  --origam-command-palette---background-color: #171717;
+  --origam-command-palette---color: #fafafa;
+  --origam-command-palette---border-color: #262626;
+  --origam-command-palette---border-width: 1px;
+  --origam-command-palette---border-radius: 12px;
+  --origam-command-palette---box-shadow: 0px 11px 8px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12);
+  --origam-command-palette__input---padding: 12px 16px;
+  --origam-command-palette__input---font-size: 0.875rem;
+  --origam-command-palette__input---border-color: #262626;
+  --origam-command-palette__input---icon-color: #a3a3a3;
+  --origam-command-palette__input---placeholder-color: #525252;
+  --origam-command-palette__list---padding: 8px;
+  --origam-command-palette__item---height: 40px;
+  --origam-command-palette__item---padding: 8px 12px;
+  --origam-command-palette__item---border-radius: 8px;
+  --origam-command-palette__item---background-color: rgba(0, 0, 0, 0);
+  --origam-command-palette__item---background-color-active: #262626;
+  --origam-command-palette__item---color: #fafafa;
+  --origam-command-palette__item---color-active: #fafafa;
+  --origam-command-palette__item---icon-color: #a3a3a3;
+  --origam-command-palette__item---description-color: #a3a3a3;
+  --origam-command-palette---item-kbd-gap: 4px;
+  --origam-command-palette---group-title-padding: 10px 12px 6px;
+  --origam-command-palette---group-title-color: #a3a3a3;
+  --origam-command-palette---group-title-font-size: 0.625rem;
+  --origam-command-palette__empty---color: #a3a3a3;
+  --origam-command-palette__footer---padding: 8px 12px;
+  --origam-command-palette__footer---border-color: #262626;
+  --origam-command-palette__footer---color: #a3a3a3;
+  --origam-command-palette__backdrop---background-color: rgba(0, 0, 0, 0.45);
+  --origam-command-palette__backdrop---backdrop-filter: blur(6px);
 }

package/dist/src/assets/scss/tokens/_light.scss

@@ -1186,6 +1186,34 @@
   --origam-textarea-field__grip---border-color: #d4d4d4;
   --origam-textarea-field__grip---opacity: 0.26;
   --origam-textarea-field__grip---height: 9px;
+  --origam-textarea-field---rich-toolbar-bg-color: #fafafa;
+  --origam-textarea-field---rich-toolbar-border-color: #d4d4d4;
+  --origam-textarea-field---rich-toolbar-border-radius: 8px;
+  --origam-textarea-field---rich-toolbar-padding: 8px;
+  --origam-textarea-field---rich-toolbar-gap: 4px;
+  --origam-textarea-field---rich-toolbar-btn-size: 32px;
+  --origam-textarea-field---rich-toolbar-btn-padding: 4px;
+  --origam-textarea-field---rich-toolbar-btn-border-radius: 4px;
+  --origam-textarea-field---rich-toolbar-btn-bg-color: rgba(0, 0, 0, 0);
+  --origam-textarea-field---rich-toolbar-btn-color: #171717;
+  --origam-textarea-field---rich-toolbar-btn-hover-bg-color: #f5f5f5;
+  --origam-textarea-field---rich-toolbar-btn-hover-color: #171717;
+  --origam-textarea-field---rich-toolbar-btn-active-bg-color: #7c3aed;
+  --origam-textarea-field---rich-toolbar-btn-active-color: #ffffff;
+  --origam-textarea-field---rich-toolbar-btn-focus-outline-color: #7c3aed;
+  --origam-textarea-field---rich-content-padding: 12px;
+  --origam-textarea-field---rich-content-min-height: 120px;
+  --origam-textarea-field---rich-content-line-height: 1.5;
+  --origam-textarea-field---rich-content-paragraph-gap: 12px;
+  --origam-textarea-field---rich-content-placeholder-color: #525252;
+  --origam-textarea-field---rich-code-inline-bg-color: #fafafa;
+  --origam-textarea-field---rich-code-inline-color: #171717;
+  --origam-textarea-field---rich-link-color: #7c3aed;
+  --origam-textarea-field---rich-link-text-decoration: underline;
+  --origam-textarea-field---rich-list-padding-inline-start: 24px;
+  --origam-textarea-field---rich-heading-font-size-h1: 1.75rem;
+  --origam-textarea-field---rich-heading-font-size-h2: 1.35rem;
+  --origam-textarea-field---rich-heading-font-size-h3: 1.1rem;
   --origam-overlay---display: flex;
   --origam-overlay---position: fixed;
   --origam-overlay---border-radius: inherit;
@@ -1985,6 +2013,41 @@
   --origam-date-picker-field__icon---color: #525252;
   --origam-date-picker-field__icon---color-hover: #171717;
   --origam-date-picker-field__icon---color-error: #b91c1c;
+  --origam-code---background-color: #fafafa;
+  --origam-code---color: #171717;
+  --origam-code---border-color: #d4d4d4;
+  --origam-code---border-width: 1px;
+  --origam-code---border-radius: 8px;
+  --origam-code---padding-block: 16px;
+  --origam-code---padding-inline: 16px;
+  --origam-code---font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  --origam-code---font-size: 0.75rem;
+  --origam-code---line-height: 1.6;
+  --origam-code__header---background-color: #f5f5f5;
+  --origam-code__header---color: #525252;
+  --origam-code__header---padding-block: 8px;
+  --origam-code__header---padding-inline: 16px;
+  --origam-code__header---gap: 8px;
+  --origam-code__filename---color: #525252;
+  --origam-code__filename---font-size: 0.625rem;
+  --origam-code__filename---font-weight: 500;
+  --origam-code__copy---color: #525252;
+  --origam-code__copy---color-hover: #171717;
+  --origam-code__copy---background-color: rgba(0, 0, 0, 0);
+  --origam-code__copy---background-color-hover: #ffffff;
+  --origam-code__copy---padding-block: 4px;
+  --origam-code__copy---padding-inline: 8px;
+  --origam-code__copy---border-radius: 4px;
+  --origam-code__copy---font-size: 0.625rem;
+  --origam-code__copy---gap: 4px;
+  --origam-code__copy---offset: 8px;
+  --origam-code---line-number-color: #a3a3a3;
+  --origam-code---line-number-width: 3rem;
+  --origam-code---line-number-padding-right: 12px;
+  --origam-code---line-highlight-background-color: #fffbeb;
+  --origam-code---line-highlight-accent-color: #b45309;
+  --origam-code__row---padding-inline: 0;
+  --origam-code__scrollbar---color: #d4d4d4;
   --origam-color-picker---background-color: #ffffff;
   --origam-color-picker---border-radius: 8px;
   --origam-color-picker---padding-block: 16px;
@@ -2247,12 +2310,17 @@
   --origam-parallax---aspect-ratio: 1.7778;
   --origam-parallax---transition-duration: 280ms;
   --origam-parallax---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-parallax---transition-duration-spring: 400ms;
+  --origam-parallax---transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-parallax---transition-easing-spring: cubic-bezier(0.16, 1, 0.3, 1);
   --origam-parallax---perspective: 1000px;
   --origam-parallax---transform-origin: center center;
   --origam-parallax---translate-multiplier: 0.5;
   --origam-parallax---background-color: rgba(0, 0, 0, 0);
   --origam-parallax---color: #171717;
   --origam-parallax__element---transition-duration: 200ms;
+  --origam-parallax__layer---will-change: transform;
+  --origam-parallax__layer---transform-origin: center center;
   --origam-slide---transition-duration: 200ms;
   --origam-slide---transition-duration-reverse: 200ms;
   --origam-slide---transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2397,4 +2465,95 @@
   --origam-treeview---size-color: #525252;
   --origam-treeview---guide-color: #d4d4d4;
   --origam-treeview---guide-thickness: 1px;
+  --origam-tabs---background-color: rgba(0, 0, 0, 0);
+  --origam-tabs---border-color: #d4d4d4;
+  --origam-tabs---border-style: solid;
+  --origam-tabs---border-width: 0px;
+  --origam-tabs---border-radius: 0px;
+  --origam-tabs---color: #171717;
+  --origam-tabs---padding-block: 0px;
+  --origam-tabs---padding-inline: 0px;
+  --origam-tabs---gap: 0px;
+  --origam-tabs---height: 48px;
+  --origam-tabs__item---color: #525252;
+  --origam-tabs__item---background-color: rgba(0, 0, 0, 0);
+  --origam-tabs__item---padding-inline: 16px;
+  --origam-tabs__item---padding-block: 0px;
+  --origam-tabs__item---gap: 8px;
+  --origam-tabs__item---height: 48px;
+  --origam-tabs__item---font-size: 0.75rem;
+  --origam-tabs__item---font-weight: 500;
+  --origam-tabs__item---letter-spacing: 0.0094em;
+  --origam-tabs__item---text-transform: none;
+  --origam-tabs__item---border-radius: 0px;
+  --origam-tabs__item---border-width: 0px;
+  --origam-tabs__item---transition-duration: 100ms;
+  --origam-tabs__item---transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --origam-tabs__indicator---color: #7c3aed;
+  --origam-tabs__indicator---height: 2px;
+  --origam-tabs__panel---padding-block: 16px;
+  --origam-tabs__panel---padding-inline: 0px;
+  --origam-tabs__panel---transition-duration: 100ms;
+  --origam-snackbar-stack---z-index: 1060;
+  --origam-snackbar-stack---gap: 12px;
+  --origam-snackbar-stack---max-width: 420px;
+  --origam-snackbar-stack---transition-duration: 100ms;
+  --origam-snackbar-stack---position-top: 16px;
+  --origam-snackbar-stack---position-bottom: 16px;
+  --origam-snackbar-stack---position-left: 16px;
+  --origam-snackbar-stack---position-right: 16px;
+  --origam-snackbar-stack__item---gap: 12px;
+  --origam-snackbar-stack__item---min-width: 288px;
+  --origam-snackbar-stack__item---max-width: 420px;
+  --origam-snackbar-stack__item---padding: 12px 14px;
+  --origam-snackbar-stack__item---border-radius: 8px;
+  --origam-snackbar-stack__item---border-width: 1px;
+  --origam-snackbar-stack__item---background-color: #ffffff;
+  --origam-snackbar-stack__item---border-color: #d4d4d4;
+  --origam-snackbar-stack__item---color: #171717;
+  --origam-snackbar-stack__item---box-shadow: 0px 6px 24px 0px rgba(0,0,0,0.05), 0px 0px 0px 1px rgba(0,0,0,0.08);
+  --origam-snackbar-stack__item---font-size: 0.875rem;
+  --origam-snackbar-stack__item---content-gap: 8px;
+  --origam-snackbar-stack__item---prepend-color: currentColor;
+  --origam-snackbar-stack__item---text-gap: 4px;
+  --origam-snackbar-stack__item---title-font-weight: 600;
+  --origam-snackbar-stack__item---message-font-weight: 400;
+  --origam-snackbar-stack__item---message-color: currentColor;
+  --origam-snackbar-stack__item---message-opacity: 0.85;
+  --origam-snackbar-stack__item---action-color: #ffffff;
+  --origam-command-palette---z-index: 1050;
+  --origam-command-palette---padding-top: 18vh;
+  --origam-command-palette---width: 640px;
+  --origam-command-palette---max-height: 480px;
+  --origam-command-palette---background-color: #ffffff;
+  --origam-command-palette---color: #171717;
+  --origam-command-palette---border-color: #d4d4d4;
+  --origam-command-palette---border-width: 1px;
+  --origam-command-palette---border-radius: 12px;
+  --origam-command-palette---box-shadow: 0px 11px 8px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12);
+  --origam-command-palette__input---padding: 12px 16px;
+  --origam-command-palette__input---font-size: 0.875rem;
+  --origam-command-palette__input---border-color: #d4d4d4;
+  --origam-command-palette__input---icon-color: #525252;
+  --origam-command-palette__input---placeholder-color: #a3a3a3;
+  --origam-command-palette__list---padding: 8px;
+  --origam-command-palette__item---height: 40px;
+  --origam-command-palette__item---padding: 8px 12px;
+  --origam-command-palette__item---border-radius: 8px;
+  --origam-command-palette__item---background-color: rgba(0, 0, 0, 0);
+  --origam-command-palette__item---background-color-active: #e6e6e6;
+  --origam-command-palette__item---color: #171717;
+  --origam-command-palette__item---color-active: #171717;
+  --origam-command-palette__item---icon-color: #525252;
+  --origam-command-palette__item---description-color: #525252;
+  --origam-command-palette---item-kbd-gap: 4px;
+  --origam-command-palette---group-title-padding: 10px 12px 6px;
+  --origam-command-palette---group-title-color: #525252;
+  --origam-command-palette---group-title-font-size: 0.625rem;
+  --origam-command-palette__empty---color: #525252;
+  --origam-command-palette__footer---padding: 8px 12px;
+  --origam-command-palette__footer---border-color: #d4d4d4;
+  --origam-command-palette__footer---color: #525252;
+  --origam-command-palette__backdrop---background-color: rgba(0, 0, 0, 0.45);
+  --origam-command-palette__backdrop---backdrop-filter: blur(6px);
 }