origam 2.2.1 → 2.5.0

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

@@ -51,6 +51,11 @@
   --origam-color__feedback--info---fgSubtle: #60a5fa;
   --origam-color__feedback--info---border: #2196f3;
   --origam-color__overlay---scrim: #000000;
+  --origam-gradient---sunset: linear-gradient(135deg, #b55149, #9d6f4a);
+  --origam-gradient---ocean: linear-gradient(135deg, #134a59, #2f7e90);
+  --origam-gradient---forest: linear-gradient(135deg, #0a2b34, #3a6047);
+  --origam-gradient---fire: linear-gradient(135deg, #8c1a0b, #8a6210);
+  --origam-gradient---midnight: linear-gradient(135deg, #0d0d0e, #1f2022);
   --origam-btn---background-color: #262626;
   --origam-btn---color: #f5f5f5;
   --origam-btn---background-color-hover: #404040;
@@ -1172,6 +1177,32 @@
   --origam-input__append---margin-inline-start: 16px;
   --origam-input---density-default-density: 0px;
   --origam-input---density-compact-density: -8px;
+  --origam-inline-edit---transition-duration: 200ms;
+  --origam-inline-edit__display---padding-block: 4px;
+  --origam-inline-edit__display---padding-inline: 8px;
+  --origam-inline-edit__display---border-radius: 4px;
+  --origam-inline-edit__display---min-height: 24px;
+  --origam-inline-edit__display---hover-bg-color: #171717;
+  --origam-inline-edit__display---color-empty: #525252;
+  --origam-inline-edit__editor---padding-block: 4px;
+  --origam-inline-edit__editor---padding-inline: 8px;
+  --origam-inline-edit__editor---border-radius: 4px;
+  --origam-inline-edit__editor---border-color: #262626;
+  --origam-inline-edit__editor---focus-border-color: #8b5cf6;
+  --origam-inline-edit__editor---focus-ring-color: #4c1d95;
+  --origam-inline-edit__editor---bg-color: #0a0a0a;
+  --origam-inline-edit__editor---gap: 4px;
+  --origam-inline-edit__input---min-width: 80px;
+  --origam-inline-edit__input---multiline-min-height: 64px;
+  --origam-inline-edit--error---color: #cf6679;
+  --origam-inline-edit--error---background-color: #171717;
+  --origam-inline-edit--error---ring-color: #171717;
+  --origam-inline-edit--error---font-size: 0.625rem;
+  --origam-inline-edit--error---font-weight: 500;
+  --origam-inline-edit--error---padding-block: 4px;
+  --origam-inline-edit--error---padding-inline: 8px;
+  --origam-inline-edit--error---border-radius: 4px;
+  --origam-inline-edit__actions---gap: 4px;
   --origam-text-field__details---padding-inline: 16px;
   --origam-text-field__input---opacity: 0;
   --origam-text-field__input---opacity-active: 1;
@@ -1185,6 +1216,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 +2043,54 @@
   --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: 3.5rem;
+  --origam-code---line-number-padding-right: 20px;
+  --origam-code---line-number-gap: 16px;
+  --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-code__syntax---foreground: #fafafa;
+  --origam-code__syntax---background: #0a0a0a;
+  --origam-code__syntax---keyword: #cf6679;
+  --origam-code__syntax---string: #4ade80;
+  --origam-code__syntax---string-expression: #4ade80;
+  --origam-code__syntax---function: #60a5fa;
+  --origam-code__syntax---parameter: #60a5fa;
+  --origam-code__syntax---constant: #fbbf24;
+  --origam-code__syntax---comment: #525252;
+  --origam-code__syntax---punctuation: #a3a3a3;
+  --origam-code__syntax---link: #c4b5fd;
+  --origam-code__syntax---inserted: #4ade80;
   --origam-color-picker---background-color: #171717;
   --origam-color-picker---border-radius: 8px;
   --origam-color-picker---padding-block: 16px;
@@ -2246,12 +2353,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);
@@ -2300,6 +2412,11 @@
   --origam-grids__col---padding-block-end: 8px;
   --origam-grids__spacer---flex-grow: 1;
   --origam-grids__spacer---min-size: 0px;
+  --origam-grid---gap-xs: 4px;
+  --origam-grid---gap-sm: 8px;
+  --origam-grid---gap-md: 16px;
+  --origam-grid---gap-lg: 24px;
+  --origam-grid---gap-xl: 32px;
   --origam-skeleton---background-color: #262626;
   --origam-skeleton---border-radius: 4px;
   --origam-skeleton---border-radius-circular: 9999px;
@@ -2396,4 +2513,229 @@
   --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-group---z-index: 1060;
+  --origam-snackbar-group---gap: 12px;
+  --origam-snackbar-group---max-width: 420px;
+  --origam-snackbar-group---transition-duration: 100ms;
+  --origam-snackbar-group---position-top: 16px;
+  --origam-snackbar-group---position-bottom: 16px;
+  --origam-snackbar-group---position-left: 16px;
+  --origam-snackbar-group---position-right: 16px;
+  --origam-snackbar-group__item---gap: 12px;
+  --origam-snackbar-group__item---min-width: 288px;
+  --origam-snackbar-group__item---max-width: 420px;
+  --origam-snackbar-group__item---padding: 12px 14px;
+  --origam-snackbar-group__item---border-radius: 8px;
+  --origam-snackbar-group__item---border-width: 1px;
+  --origam-snackbar-group__item---background-color: #0a0a0a;
+  --origam-snackbar-group__item---border-color: #262626;
+  --origam-snackbar-group__item---color: #fafafa;
+  --origam-snackbar-group__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-group__item---font-size: 0.875rem;
+  --origam-snackbar-group__item---content-gap: 8px;
+  --origam-snackbar-group__item---prepend-color: currentColor;
+  --origam-snackbar-group__item---text-gap: 4px;
+  --origam-snackbar-group__item---title-font-weight: 600;
+  --origam-snackbar-group__item---message-font-weight: 400;
+  --origam-snackbar-group__item---message-color: currentColor;
+  --origam-snackbar-group__item---message-opacity: 0.85;
+  --origam-snackbar-group__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);
+  --origam-blockquote---padding-block: 16px;
+  --origam-blockquote---padding-inline: 24px;
+  --origam-blockquote---font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
+  --origam-blockquote---font-size: 1rem;
+  --origam-blockquote---font-style: normal;
+  --origam-blockquote---font-weight: 400;
+  --origam-blockquote---line-height: 1.625;
+  --origam-blockquote---color: #fafafa;
+  --origam-blockquote__accent---color: #8b5cf6;
+  --origam-blockquote__accent---width: 4px;
+  --origam-blockquote__author---color: #a3a3a3;
+  --origam-blockquote__author---font-size: 0.875rem;
+  --origam-blockquote__author---font-style: normal;
+  --origam-blockquote__author---font-weight: 500;
+  --origam-blockquote__author---margin-top: 12px;
+  --origam-blockquote__source---color: #a3a3a3;
+  --origam-blockquote__source---font-size: 0.875rem;
+  --origam-blockquote__source---font-style: italic;
+  --origam-blockquote---quote-mark-font-size: 2.25rem;
+  --origam-blockquote---quote-mark-color: #8b5cf6;
+  --origam-blockquote---quote-mark-opacity: 0.25;
+  --origam-blockquote---quote-mark-line-height: 1;
+  --origam-blockquote__quoted---glyph-size: 8rem;
+  --origam-blockquote__quoted---glyph-opacity: 0.08;
+  --origam-blockquote__quoted---glyph-offset-top: -0.1em;
+  --origam-blockquote__quoted---glyph-offset-left: -0.05em;
+  --origam-blockquote__quoted---glyph-padding-extra: 1rem;
+  --origam-blockquote__elegant---font-family: Georgia, 'Times New Roman', serif;
+  --origam-blockquote__elegant---font-size: 1.125rem;
+  --origam-blockquote__elegant---font-style: italic;
+  --origam-blockquote__elegant---line-height: 2;
+  --origam-blockquote__elegant---padding-block: 24px;
+  --origam-blockquote__minimal---font-size: 0.875rem;
+  --origam-blockquote__minimal---font-style: italic;
+  --origam-blockquote__minimal---padding-inline: 12px;
+  --origam-blockquote__pull---font-family: Georgia, 'Times New Roman', serif;
+  --origam-blockquote__pull---font-size: 1.5rem;
+  --origam-blockquote__pull---font-weight: 500;
+  --origam-blockquote__pull---line-height: 1.375;
+  --origam-blockquote__pull---padding-block: 24px;
+  --origam-blockquote__pull---rule-width: 2px;
+  --origam-video---background-color: #000000;
+  --origam-video---border-radius: 8px;
+  --origam-video__poster---background-color: #000000;
+  --origam-video---poster-btn-size: 64px;
+  --origam-video---poster-btn-background-color: #0a0a0a;
+  --origam-video---poster-btn-background-color-hover: #171717;
+  --origam-video---poster-btn-color: #ffffff;
+  --origam-video---poster-btn-font-size: 1.5rem;
+  --origam-video__controls---background-color: #0a0a0a;
+  --origam-video__controls---color: #ffffff;
+  --origam-video__controls---padding: 8px;
+  --origam-video__controls---gap: 8px;
+  --origam-video__btn---size: 32px;
+  --origam-video__btn---color: #ffffff;
+  --origam-video__btn---color-hover: #ffffff;
+  --origam-video__btn---background-color-hover: #262626;
+  --origam-video__btn---background-color-active: #404040;
+  --origam-video__btn---border-radius: 4px;
+  --origam-video__btn---font-size: 1rem;
+  --origam-video__time---color: #ffffff;
+  --origam-video__time---font-size: 0.625rem;
+  --origam-video__time---font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  --origam-video__scrubber---color: #8b5cf6;
+  --origam-video__scrubber---thumb-size: 16px;
+  --origam-video__volume---color: #ffffff;
+  --origam-video__volume---width: 80px;
+  --origam-video__loading---color: #ffffff;
+  --origam-video__loading---font-size: 1.5rem;
+  --origam-video--error---background-color: #0a0a0a;
+  --origam-video--error---color: #cf6679;
+  --origam-video--error---font-size: 0.75rem;
+  --origam-video--error---gap: 8px;
+  --origam-video--error---padding: 16px;
+  --origam-video--error---icon-font-size: 1.5rem;
+  --origam-audio---background-color: #171717;
+  --origam-audio---color: #fafafa;
+  --origam-audio---accent-color: #8b5cf6;
+  --origam-audio---secondary-color: #a3a3a3;
+  --origam-audio---border-color: #262626;
+  --origam-audio---border-width: 1px;
+  --origam-audio---box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.06), 0px 1px 2px -1px rgba(0,0,0,0.06);
+  --origam-audio---border-radius: 12px;
+  --origam-audio---gap: 16px;
+  --origam-audio---padding: 16px;
+  --origam-audio__body---gap: 12px;
+  --origam-audio__metadata---gap: 4px;
+  --origam-audio__meta---gap: 8px;
+  --origam-audio__meta---font-size: 13px;
+  --origam-audio__meta---color: #a3a3a3;
+  --origam-audio__cover---size: 96px;
+  --origam-audio__cover---border-radius: 8px;
+  --origam-audio__title---color: #fafafa;
+  --origam-audio__title---font-size: 18px;
+  --origam-audio__title---font-weight: 700;
+  --origam-audio__title---line-height: 1.25;
+  --origam-audio__artist---color: #a3a3a3;
+  --origam-audio__album---color: #a3a3a3;
+  --origam-audio__duration---color: #a3a3a3;
+  --origam-audio__waveform---height: 48px;
+  --origam-audio__waveform---color: #8b5cf6;
+  --origam-audio__transport---gap: 8px;
+  --origam-audio__transport---btn-size: 32px;
+  --origam-audio__transport---btn-icon-size: 20px;
+  --origam-audio---play-btn-size: 48px;
+  --origam-audio__compact---cover-size: 48px;
+  --origam-audio__compact---body-gap: 8px;
+  --origam-audio__compact---metadata-gap: 8px;
+  --origam-audio__compact---title-font-size: 14px;
+  --origam-audio__loading---font-size: 0.75rem;
+  --origam-audio__loading---color: #a3a3a3;
+  --origam-audio--error---background-color: #171717;
+  --origam-audio--error---color: #cf6679;
+  --origam-audio--error---font-size: 0.75rem;
+  --origam-audio--error---border-radius: 4px;
+  --origam-audio--error---padding: 8px 12px;
+  --origam-audio--error---gap: 8px;
+  --origam-audio--error---icon-font-size: 1rem;
+  --origam-media-scrubber---color: #8b5cf6;
+  --origam-media-scrubber---primary: #8b5cf6;
+  --origam-media-scrubber__track---thickness: 4px;
+  --origam-media-scrubber__track---thickness-active: 6px;
+  --origam-media-scrubber__track---size: 4px;
+  --origam-media-scrubber__track---size-active: 6px;
+  --origam-media-scrubber__track---background-color: #262626;
+  --origam-media-scrubber__track---bg: #262626;
+  --origam-media-scrubber__buffer---background-color: #262626;
+  --origam-media-scrubber__buffer---bg: #262626;
+  --origam-media-scrubber__thumb---diameter: 12px;
+  --origam-media-scrubber__thumb---size: 12px;
+  --origam-media-scrubber__tooltip---background-color: #171717;
+  --origam-media-scrubber__tooltip---color: #ffffff;
+  --origam-media-controller---color: #fafafa;
+  --origam-media-controller__scrubber---color: #8b5cf6;
 }