@opencode-ai/ui 0.0.0-beta-202606251302

package/src/styles/index.css

@@ -0,0 +1,53 @@
+@layer theme, base, components, utilities;
+
+@import "./colors.css" layer(theme);
+@import "./theme.css" layer(theme);
+
+@import "./base.css" layer(base);
+@import "katex/dist/katex.min.css" layer(base);
+
+@import "../components/accordion.css" layer(components);
+@import "../components/animated-number.css" layer(components);
+@import "../components/app-icon.css" layer(components);
+@import "../components/avatar.css" layer(components);
+@import "../components/button.css" layer(components);
+@import "../components/card.css" layer(components);
+@import "../components/checkbox.css" layer(components);
+@import "../components/collapsible.css" layer(components);
+@import "../components/diff-changes.css" layer(components);
+@import "../components/context-menu.css" layer(components);
+@import "../components/dropdown-menu.css" layer(components);
+@import "../components/dialog.css" layer(components);
+@import "../components/file-icon.css" layer(components);
+@import "../components/hover-card.css" layer(components);
+@import "../components/provider-icon.css" layer(components);
+@import "../components/dock-surface.css" layer(components);
+@import "../components/icon.css" layer(components);
+@import "../components/icon-button.css" layer(components);
+@import "../components/image-preview.css" layer(components);
+@import "../components/keybind.css" layer(components);
+@import "../components/text-field.css" layer(components);
+@import "../components/inline-input.css" layer(components);
+@import "../components/list.css" layer(components);
+@import "../components/logo.css" layer(components);
+@import "../components/popover.css" layer(components);
+@import "../components/progress.css" layer(components);
+@import "../components/progress-circle.css" layer(components);
+@import "../components/radio-group.css" layer(components);
+@import "../components/resize-handle.css" layer(components);
+@import "../components/select.css" layer(components);
+@import "../components/spinner.css" layer(components);
+@import "../components/switch.css" layer(components);
+@import "../components/scroll-view.css" layer(components);
+@import "../components/sticky-accordion-header.css" layer(components);
+@import "../components/tabs.css" layer(components);
+@import "../components/tag.css" layer(components);
+@import "../components/text-reveal.css" layer(components);
+@import "../components/text-strikethrough.css" layer(components);
+@import "../components/text-shimmer.css" layer(components);
+@import "../components/toast.css" layer(components);
+@import "../components/tooltip.css" layer(components);
+@import "../components/typewriter.css" layer(components);
+
+@import "./utilities.css" layer(utilities);
+@import "./animations.css" layer(utilities);

package/src/styles/tailwind/colors.css

@@ -0,0 +1,285 @@
+/* Generated by script/tailwind.ts */
+/* Do not edit this file manually */
+
+@theme {
+  --color-*: initial;
+  --color-background-base: var(--background-base);
+  --color-background-weak: var(--background-weak);
+  --color-background-strong: var(--background-strong);
+  --color-background-stronger: var(--background-stronger);
+  --color-surface-base: var(--surface-base);
+  --color-base: var(--base);
+  --color-surface-base-hover: var(--surface-base-hover);
+  --color-surface-base-active: var(--surface-base-active);
+  --color-surface-base-interactive-active: var(--surface-base-interactive-active);
+  --color-base2: var(--base2);
+  --color-base3: var(--base3);
+  --color-surface-inset-base: var(--surface-inset-base);
+  --color-surface-inset-base-hover: var(--surface-inset-base-hover);
+  --color-surface-inset-strong: var(--surface-inset-strong);
+  --color-surface-inset-strong-hover: var(--surface-inset-strong-hover);
+  --color-surface-raised-base: var(--surface-raised-base);
+  --color-surface-float-base: var(--surface-float-base);
+  --color-surface-float-base-hover: var(--surface-float-base-hover);
+  --color-surface-raised-base-hover: var(--surface-raised-base-hover);
+  --color-surface-raised-base-active: var(--surface-raised-base-active);
+  --color-surface-raised-strong: var(--surface-raised-strong);
+  --color-surface-raised-strong-hover: var(--surface-raised-strong-hover);
+  --color-surface-raised-stronger: var(--surface-raised-stronger);
+  --color-surface-raised-stronger-hover: var(--surface-raised-stronger-hover);
+  --color-surface-weak: var(--surface-weak);
+  --color-surface-weaker: var(--surface-weaker);
+  --color-surface-strong: var(--surface-strong);
+  --color-surface-raised-stronger-non-alpha: var(--surface-raised-stronger-non-alpha);
+  --color-surface-brand-base: var(--surface-brand-base);
+  --color-surface-brand-hover: var(--surface-brand-hover);
+  --color-surface-interactive-base: var(--surface-interactive-base);
+  --color-surface-interactive-hover: var(--surface-interactive-hover);
+  --color-surface-interactive-weak: var(--surface-interactive-weak);
+  --color-surface-interactive-weak-hover: var(--surface-interactive-weak-hover);
+  --color-surface-success-base: var(--surface-success-base);
+  --color-surface-success-weak: var(--surface-success-weak);
+  --color-surface-success-strong: var(--surface-success-strong);
+  --color-surface-warning-base: var(--surface-warning-base);
+  --color-surface-warning-weak: var(--surface-warning-weak);
+  --color-surface-warning-strong: var(--surface-warning-strong);
+  --color-surface-critical-base: var(--surface-critical-base);
+  --color-surface-critical-weak: var(--surface-critical-weak);
+  --color-surface-critical-strong: var(--surface-critical-strong);
+  --color-surface-info-base: var(--surface-info-base);
+  --color-surface-info-weak: var(--surface-info-weak);
+  --color-surface-info-strong: var(--surface-info-strong);
+  --color-surface-diff-unchanged-base: var(--surface-diff-unchanged-base);
+  --color-surface-diff-skip-base: var(--surface-diff-skip-base);
+  --color-surface-diff-hidden-base: var(--surface-diff-hidden-base);
+  --color-surface-diff-hidden-weak: var(--surface-diff-hidden-weak);
+  --color-surface-diff-hidden-weaker: var(--surface-diff-hidden-weaker);
+  --color-surface-diff-hidden-strong: var(--surface-diff-hidden-strong);
+  --color-surface-diff-hidden-stronger: var(--surface-diff-hidden-stronger);
+  --color-surface-diff-add-base: var(--surface-diff-add-base);
+  --color-surface-diff-add-weak: var(--surface-diff-add-weak);
+  --color-surface-diff-add-weaker: var(--surface-diff-add-weaker);
+  --color-surface-diff-add-strong: var(--surface-diff-add-strong);
+  --color-surface-diff-add-stronger: var(--surface-diff-add-stronger);
+  --color-surface-diff-delete-base: var(--surface-diff-delete-base);
+  --color-surface-diff-delete-weak: var(--surface-diff-delete-weak);
+  --color-surface-diff-delete-weaker: var(--surface-diff-delete-weaker);
+  --color-surface-diff-delete-strong: var(--surface-diff-delete-strong);
+  --color-surface-diff-delete-stronger: var(--surface-diff-delete-stronger);
+  --color-text-base: var(--text-base);
+  --color-input-base: var(--input-base);
+  --color-input-hover: var(--input-hover);
+  --color-input-active: var(--input-active);
+  --color-input-selected: var(--input-selected);
+  --color-input-focus: var(--input-focus);
+  --color-input-disabled: var(--input-disabled);
+  --color-text-weak: var(--text-weak);
+  --color-text-weaker: var(--text-weaker);
+  --color-text-strong: var(--text-strong);
+  --color-text-interactive-base: var(--text-interactive-base);
+  --color-text-on-brand-base: var(--text-on-brand-base);
+  --color-text-on-interactive-base: var(--text-on-interactive-base);
+  --color-text-on-interactive-weak: var(--text-on-interactive-weak);
+  --color-text-on-success-base: var(--text-on-success-base);
+  --color-text-on-critical-base: var(--text-on-critical-base);
+  --color-text-on-critical-weak: var(--text-on-critical-weak);
+  --color-text-on-critical-strong: var(--text-on-critical-strong);
+  --color-text-on-warning-base: var(--text-on-warning-base);
+  --color-text-on-info-base: var(--text-on-info-base);
+  --color-text-diff-add-base: var(--text-diff-add-base);
+  --color-text-diff-delete-base: var(--text-diff-delete-base);
+  --color-text-diff-delete-strong: var(--text-diff-delete-strong);
+  --color-text-diff-add-strong: var(--text-diff-add-strong);
+  --color-text-on-info-weak: var(--text-on-info-weak);
+  --color-text-on-info-strong: var(--text-on-info-strong);
+  --color-text-on-warning-weak: var(--text-on-warning-weak);
+  --color-text-on-warning-strong: var(--text-on-warning-strong);
+  --color-text-on-success-weak: var(--text-on-success-weak);
+  --color-text-on-success-strong: var(--text-on-success-strong);
+  --color-text-on-brand-weak: var(--text-on-brand-weak);
+  --color-text-on-brand-weaker: var(--text-on-brand-weaker);
+  --color-text-on-brand-strong: var(--text-on-brand-strong);
+  --color-button-secondary-base: var(--button-secondary-base);
+  --color-button-secondary-hover: var(--button-secondary-hover);
+  --color-border-base: var(--border-base);
+  --color-border-hover: var(--border-hover);
+  --color-border-active: var(--border-active);
+  --color-border-selected: var(--border-selected);
+  --color-border-disabled: var(--border-disabled);
+  --color-border-focus: var(--border-focus);
+  --color-border-weak-base: var(--border-weak-base);
+  --color-border-strong-base: var(--border-strong-base);
+  --color-border-strong-hover: var(--border-strong-hover);
+  --color-border-strong-active: var(--border-strong-active);
+  --color-border-strong-selected: var(--border-strong-selected);
+  --color-border-strong-disabled: var(--border-strong-disabled);
+  --color-border-strong-focus: var(--border-strong-focus);
+  --color-border-weak-hover: var(--border-weak-hover);
+  --color-border-weak-active: var(--border-weak-active);
+  --color-border-weak-selected: var(--border-weak-selected);
+  --color-border-weak-disabled: var(--border-weak-disabled);
+  --color-border-weak-focus: var(--border-weak-focus);
+  --color-border-weaker-base: var(--border-weaker-base);
+  --color-border-interactive-base: var(--border-interactive-base);
+  --color-border-interactive-hover: var(--border-interactive-hover);
+  --color-border-interactive-active: var(--border-interactive-active);
+  --color-border-interactive-selected: var(--border-interactive-selected);
+  --color-border-interactive-disabled: var(--border-interactive-disabled);
+  --color-border-interactive-focus: var(--border-interactive-focus);
+  --color-border-success-base: var(--border-success-base);
+  --color-border-success-hover: var(--border-success-hover);
+  --color-border-success-selected: var(--border-success-selected);
+  --color-border-warning-base: var(--border-warning-base);
+  --color-border-warning-hover: var(--border-warning-hover);
+  --color-border-warning-selected: var(--border-warning-selected);
+  --color-border-critical-base: var(--border-critical-base);
+  --color-border-critical-hover: var(--border-critical-hover);
+  --color-border-critical-selected: var(--border-critical-selected);
+  --color-border-info-base: var(--border-info-base);
+  --color-border-info-hover: var(--border-info-hover);
+  --color-border-info-selected: var(--border-info-selected);
+  --color-icon-base: var(--icon-base);
+  --color-icon-hover: var(--icon-hover);
+  --color-icon-active: var(--icon-active);
+  --color-icon-selected: var(--icon-selected);
+  --color-icon-disabled: var(--icon-disabled);
+  --color-icon-focus: var(--icon-focus);
+  --color-icon-invert-base: var(--icon-invert-base);
+  --color-icon-weak-base: var(--icon-weak-base);
+  --color-icon-weak-hover: var(--icon-weak-hover);
+  --color-icon-weak-active: var(--icon-weak-active);
+  --color-icon-weak-selected: var(--icon-weak-selected);
+  --color-icon-weak-disabled: var(--icon-weak-disabled);
+  --color-icon-weak-focus: var(--icon-weak-focus);
+  --color-icon-strong-base: var(--icon-strong-base);
+  --color-icon-strong-hover: var(--icon-strong-hover);
+  --color-icon-strong-active: var(--icon-strong-active);
+  --color-icon-strong-selected: var(--icon-strong-selected);
+  --color-icon-strong-disabled: var(--icon-strong-disabled);
+  --color-icon-strong-focus: var(--icon-strong-focus);
+  --color-icon-brand-base: var(--icon-brand-base);
+  --color-icon-interactive-base: var(--icon-interactive-base);
+  --color-icon-success-base: var(--icon-success-base);
+  --color-icon-success-hover: var(--icon-success-hover);
+  --color-icon-success-active: var(--icon-success-active);
+  --color-icon-warning-base: var(--icon-warning-base);
+  --color-icon-warning-hover: var(--icon-warning-hover);
+  --color-icon-warning-active: var(--icon-warning-active);
+  --color-icon-critical-base: var(--icon-critical-base);
+  --color-icon-critical-hover: var(--icon-critical-hover);
+  --color-icon-critical-active: var(--icon-critical-active);
+  --color-icon-info-base: var(--icon-info-base);
+  --color-icon-info-hover: var(--icon-info-hover);
+  --color-icon-info-active: var(--icon-info-active);
+  --color-icon-on-brand-base: var(--icon-on-brand-base);
+  --color-icon-on-brand-hover: var(--icon-on-brand-hover);
+  --color-icon-on-brand-selected: var(--icon-on-brand-selected);
+  --color-icon-on-interactive-base: var(--icon-on-interactive-base);
+  --color-icon-agent-plan-base: var(--icon-agent-plan-base);
+  --color-icon-agent-docs-base: var(--icon-agent-docs-base);
+  --color-icon-agent-ask-base: var(--icon-agent-ask-base);
+  --color-icon-agent-build-base: var(--icon-agent-build-base);
+  --color-icon-on-success-base: var(--icon-on-success-base);
+  --color-icon-on-success-hover: var(--icon-on-success-hover);
+  --color-icon-on-success-selected: var(--icon-on-success-selected);
+  --color-icon-on-warning-base: var(--icon-on-warning-base);
+  --color-icon-on-warning-hover: var(--icon-on-warning-hover);
+  --color-icon-on-warning-selected: var(--icon-on-warning-selected);
+  --color-icon-on-critical-base: var(--icon-on-critical-base);
+  --color-icon-on-critical-hover: var(--icon-on-critical-hover);
+  --color-icon-on-critical-selected: var(--icon-on-critical-selected);
+  --color-icon-on-info-base: var(--icon-on-info-base);
+  --color-icon-on-info-hover: var(--icon-on-info-hover);
+  --color-icon-on-info-selected: var(--icon-on-info-selected);
+  --color-icon-diff-add-base: var(--icon-diff-add-base);
+  --color-icon-diff-add-hover: var(--icon-diff-add-hover);
+  --color-icon-diff-add-active: var(--icon-diff-add-active);
+  --color-icon-diff-delete-base: var(--icon-diff-delete-base);
+  --color-icon-diff-delete-hover: var(--icon-diff-delete-hover);
+  --color-syntax-comment: var(--syntax-comment);
+  --color-syntax-regexp: var(--syntax-regexp);
+  --color-syntax-string: var(--syntax-string);
+  --color-syntax-keyword: var(--syntax-keyword);
+  --color-syntax-primitive: var(--syntax-primitive);
+  --color-syntax-operator: var(--syntax-operator);
+  --color-syntax-variable: var(--syntax-variable);
+  --color-syntax-property: var(--syntax-property);
+  --color-syntax-type: var(--syntax-type);
+  --color-syntax-constant: var(--syntax-constant);
+  --color-syntax-punctuation: var(--syntax-punctuation);
+  --color-syntax-object: var(--syntax-object);
+  --color-syntax-success: var(--syntax-success);
+  --color-syntax-warning: var(--syntax-warning);
+  --color-syntax-critical: var(--syntax-critical);
+  --color-syntax-info: var(--syntax-info);
+  --color-syntax-diff-add: var(--syntax-diff-add);
+  --color-syntax-diff-delete: var(--syntax-diff-delete);
+  --color-syntax-diff-unknown: var(--syntax-diff-unknown);
+  --color-markdown-heading: var(--markdown-heading);
+  --color-markdown-text: var(--markdown-text);
+  --color-markdown-link: var(--markdown-link);
+  --color-markdown-link-text: var(--markdown-link-text);
+  --color-markdown-code: var(--markdown-code);
+  --color-markdown-block-quote: var(--markdown-block-quote);
+  --color-markdown-emph: var(--markdown-emph);
+  --color-markdown-strong: var(--markdown-strong);
+  --color-markdown-horizontal-rule: var(--markdown-horizontal-rule);
+  --color-markdown-list-item: var(--markdown-list-item);
+  --color-markdown-list-enumeration: var(--markdown-list-enumeration);
+  --color-markdown-image: var(--markdown-image);
+  --color-markdown-image-text: var(--markdown-image-text);
+  --color-markdown-code-block: var(--markdown-code-block);
+  --color-border-color: var(--border-color);
+  --color-button-ghost-hover: var(--button-ghost-hover);
+  --color-button-ghost-hover2: var(--button-ghost-hover2);
+  --color-v2-background-bg-base: var(--v2-background-bg-base);
+  --color-v2-background-bg-deep: var(--v2-background-bg-deep);
+  --color-v2-background-bg-layer-01: var(--v2-background-bg-layer-01);
+  --color-v2-background-bg-layer-02: var(--v2-background-bg-layer-02);
+  --color-v2-background-bg-layer-03: var(--v2-background-bg-layer-03);
+  --color-v2-background-bg-layer-04: var(--v2-background-bg-layer-04);
+  --color-v2-background-bg-inverse: var(--v2-background-bg-inverse);
+  --color-v2-background-bg-contrast: var(--v2-background-bg-contrast);
+  --color-v2-background-bg-button-neutral: var(--v2-background-bg-button-neutral);
+  --color-v2-background-bg-accent: var(--v2-background-bg-accent);
+  --color-v2-text-text-base: var(--v2-text-text-base);
+  --color-v2-text-text-muted: var(--v2-text-text-muted);
+  --color-v2-text-text-faint: var(--v2-text-text-faint);
+  --color-v2-text-text-inverse: var(--v2-text-text-inverse);
+  --color-v2-text-text-contrast: var(--v2-text-text-contrast);
+  --color-v2-text-text-accent: var(--v2-text-text-accent);
+  --color-v2-text-text-accent-hover: var(--v2-text-text-accent-hover);
+  --color-v2-icon-icon-base: var(--v2-icon-icon-base);
+  --color-v2-icon-icon-muted: var(--v2-icon-icon-muted);
+  --color-v2-icon-icon-inverse: var(--v2-icon-icon-inverse);
+  --color-v2-icon-icon-contrast: var(--v2-icon-icon-contrast);
+  --color-v2-icon-icon-accent: var(--v2-icon-icon-accent);
+  --color-v2-icon-icon-accent-hover: var(--v2-icon-icon-accent-hover);
+  --color-v2-border-border-muted: var(--v2-border-border-muted);
+  --color-v2-border-border-base: var(--v2-border-border-base);
+  --color-v2-border-border-strong: var(--v2-border-border-strong);
+  --color-v2-border-border-inverse: var(--v2-border-border-inverse);
+  --color-v2-border-border-focus: var(--v2-border-border-focus);
+  --color-v2-overlay-simple-overlay-hover: var(--v2-overlay-simple-overlay-hover);
+  --color-v2-overlay-simple-overlay-pressed: var(--v2-overlay-simple-overlay-pressed);
+  --color-v2-overlay-simple-overlay-contrast-hover: var(--v2-overlay-simple-overlay-contrast-hover);
+  --color-v2-overlay-simple-overlay-contrast-pressed: var(--v2-overlay-simple-overlay-contrast-pressed);
+  --color-v2-overlay-simple-overlay-scrim: var(--v2-overlay-simple-overlay-scrim);
+  --color-v2-overlay-gradient-depth-overlay-depth-top: var(--v2-overlay-gradient-depth-overlay-depth-top);
+  --color-v2-overlay-gradient-depth-overlay-depth-bot: var(--v2-overlay-gradient-depth-overlay-depth-bot);
+  --color-v2-overlay-simple-tab-active-scrim: var(--v2-overlay-simple-tab-active-scrim);
+  --color-v2-overlay-simple-tab-hover-scrim: var(--v2-overlay-simple-tab-hover-scrim);
+  --color-v2-overlay-simple-tab-scrim: var(--v2-overlay-simple-tab-scrim);
+  --color-v2-state-bg-success: var(--v2-state-bg-success);
+  --color-v2-state-fg-success: var(--v2-state-fg-success);
+  --color-v2-state-border-success: var(--v2-state-border-success);
+  --color-v2-state-bg-warning: var(--v2-state-bg-warning);
+  --color-v2-state-fg-warning: var(--v2-state-fg-warning);
+  --color-v2-state-border-warning: var(--v2-state-border-warning);
+  --color-v2-state-bg-danger: var(--v2-state-bg-danger);
+  --color-v2-state-fg-danger: var(--v2-state-fg-danger);
+  --color-v2-state-border-danger: var(--v2-state-border-danger);
+  --color-v2-state-bg-info: var(--v2-state-bg-info);
+  --color-v2-state-fg-info: var(--v2-state-fg-info);
+  --color-v2-state-border-info: var(--v2-state-border-info);
+}

package/src/styles/tailwind/index.css

@@ -0,0 +1,78 @@
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities) source("../../../../");
+@import "./utilities.css";
+
+@import "../index.css";
+
+@theme {
+  --*: initial;
+
+  --spacing: 0.25rem;
+  /* --spacing: var(--spacing); */
+
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+  --breakpoint-3xl: 112rem;
+  --breakpoint-4xl: 128rem;
+  --breakpoint-5xl: 144rem;
+
+  --container-3xs: 16rem;
+  --container-2xs: 18rem;
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-7xl: 80rem;
+
+  --font-sans: var(--font-family-sans);
+  --font-sans--font-feature-settings: var(--font-family-sans--font-feature-settings);
+  --font-mono: var(--font-family-mono);
+  --font-mono--font-feature-settings: var(--font-family-mono--font-feature-settings);
+
+  --text-sm: var(--font-size-small);
+  --text-base: var(--font-size-base);
+  --text-lg: var(--font-size-large);
+  --text-xl: var(--font-size-x-large);
+
+  --font-weight-regular: var(--font-weight-regular);
+  --font-weight-medium: var(--font-weight-medium);
+
+  --leading-lg: var(--line-height-large);
+  --leading-xl: var(--line-height-x-large);
+  --leading-2xl: var(--line-height-2x-large);
+
+  --tracking-normal: var(--letter-spacing-normal);
+  --tracking-tight: var(--letter-spacing-tight);
+  --tracking-tightest: var(--letter-spacing-tightest);
+
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.625rem;
+
+  --shadow-xs: var(--shadow-xs);
+  --shadow-md: var(--shadow-md);
+  --shadow-xs-border: var(--shadow-xs-border);
+  --shadow-xs-border-base: var(--shadow-xs-border-base);
+  --shadow-xs-border-select: var(--shadow-xs-border-select);
+  --shadow-xs-border-focus: var(--shadow-xs-border-focus);
+  --shadow-xs-border-hover: var(--shadow-xs-border-hover);
+  --shadow-xs-border-critical-base: var(--shadow-xs-border-critical-base);
+  --shadow-lg-border-base: var(--shadow-lg-border-base);
+
+  --animate-pulse: var(--animate-pulse);
+}
+
+@import "./colors.css";

package/src/styles/tailwind/utilities.css

@@ -0,0 +1,131 @@
+@utility no-scrollbar {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  & {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
+@utility hover-reveal {
+  @apply opacity-0 transition-opacity;
+
+  @media (hover: none) {
+    opacity: 1;
+  }
+}
+
+@utility badge-mask {
+  -webkit-mask-image: radial-gradient(circle 5px at calc(100% - 4px) 4px, transparent 5px, black 5.5px);
+  mask-image: radial-gradient(circle 5px at calc(100% - 4px) 4px, transparent 5px, black 5.5px);
+}
+
+@utility badge-mask-tight {
+  -webkit-mask-image: radial-gradient(circle 5px at calc(100% - 2px) 2px, transparent 5px, black 5.5px);
+  mask-image: radial-gradient(circle 5px at calc(100% - 2px) 2px, transparent 5px, black 5.5px);
+}
+
+@utility truncate-start {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  direction: rtl;
+  text-align: left;
+}
+
+@utility fade-up-text {
+  animation: fadeUp 0.4s ease-out forwards;
+  opacity: 0;
+
+  &:nth-child(1) {
+    animation-delay: 0.1s;
+  }
+  &:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  &:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+  &:nth-child(4) {
+    animation-delay: 0.4s;
+  }
+  &:nth-child(5) {
+    animation-delay: 0.5s;
+  }
+  &:nth-child(6) {
+    animation-delay: 0.6s;
+  }
+  &:nth-child(7) {
+    animation-delay: 0.7s;
+  }
+  &:nth-child(8) {
+    animation-delay: 0.8s;
+  }
+  &:nth-child(9) {
+    animation-delay: 0.9s;
+  }
+  &:nth-child(10) {
+    animation-delay: 1s;
+  }
+  &:nth-child(11) {
+    animation-delay: 1.1s;
+  }
+  &:nth-child(12) {
+    animation-delay: 1.2s;
+  }
+  &:nth-child(13) {
+    animation-delay: 1.3s;
+  }
+  &:nth-child(14) {
+    animation-delay: 1.4s;
+  }
+  &:nth-child(15) {
+    animation-delay: 1.5s;
+  }
+  &:nth-child(16) {
+    animation-delay: 1.6s;
+  }
+  &:nth-child(17) {
+    animation-delay: 1.7s;
+  }
+  &:nth-child(18) {
+    animation-delay: 1.8s;
+  }
+  &:nth-child(19) {
+    animation-delay: 1.9s;
+  }
+  &:nth-child(20) {
+    animation-delay: 2s;
+  }
+  &:nth-child(21) {
+    animation-delay: 2.1s;
+  }
+  &:nth-child(22) {
+    animation-delay: 2.2s;
+  }
+  &:nth-child(23) {
+    animation-delay: 2.3s;
+  }
+  &:nth-child(24) {
+    animation-delay: 2.4s;
+  }
+  &:nth-child(25) {
+    animation-delay: 2.5s;
+  }
+  &:nth-child(26) {
+    animation-delay: 2.6s;
+  }
+  &:nth-child(27) {
+    animation-delay: 2.7s;
+  }
+  &:nth-child(28) {
+    animation-delay: 2.8s;
+  }
+  &:nth-child(29) {
+    animation-delay: 2.9s;
+  }
+  &:nth-child(30) {
+    animation-delay: 3s;
+  }
+}