🎉 first commit

app/styles/components/code.scss

@@ -0,0 +1,9 @@
+.actions .shiki {
+  background-color: var(--upage-elements-actions-code-background) !important;
+}
+
+.shiki {
+  &:not(:has(.actions), .actions *) {
+    background-color: var(--upage-elements-messages-code-background) !important;
+  }
+}

app/styles/components/editor.scss

@@ -0,0 +1,135 @@
+:root {
+  --cm-backgroundColor: var(--upage-elements-editor-backgroundColor, var(--upage-elements-bg-depth-1));
+  --cm-textColor: var(--upage-elements-editor-textColor, var(--upage-elements-textPrimary));
+
+  /* Gutter */
+
+  --cm-gutter-backgroundColor: var(--upage-elements-editor-gutter-backgroundColor, var(--cm-backgroundColor));
+  --cm-gutter-textColor: var(--upage-elements-editor-gutter-textColor, var(--upage-elements-textSecondary));
+  --cm-gutter-activeLineTextColor: var(--upage-elements-editor-gutter-activeLineTextColor, var(--cm-gutter-textColor));
+
+  /* Fold Gutter */
+
+  --cm-foldGutter-textColor: var(--upage-elements-editor-foldGutter-textColor, var(--cm-gutter-textColor));
+  --cm-foldGutter-textColorHover: var(--upage-elements-editor-foldGutter-textColorHover, var(--cm-gutter-textColor));
+
+  /* Active Line */
+
+  --cm-activeLineBackgroundColor: var(--upage-elements-editor-activeLineBackgroundColor, rgb(224 231 235 / 30%));
+
+  /* Cursor */
+
+  --cm-cursor-width: 2px;
+  --cm-cursor-backgroundColor: var(--upage-elements-editor-cursorColor, var(--upage-elements-textSecondary));
+
+  /* Matching Brackets */
+
+  --cm-matching-bracket: var(--upage-elements-editor-matchingBracketBackgroundColor, rgb(50 140 130 / 0.3));
+
+  /* Selection */
+
+  --cm-selection-backgroundColorFocused: var(--upage-elements-editor-selection-backgroundColor, #42b4ff);
+  --cm-selection-backgroundOpacityFocused: var(--upage-elements-editor-selection-backgroundOpacity, 0.3);
+  --cm-selection-backgroundColorBlured: var(--upage-elements-editor-selection-inactiveBackgroundColor, #c9e9ff);
+  --cm-selection-backgroundOpacityBlured: var(--upage-elements-editor-selection-inactiveBackgroundOpacity, 0.3);
+
+  /* Panels */
+
+  --cm-panels-borderColor: var(--upage-elements-editor-panels-borderColor, var(--upage-elements-borderColor));
+
+  /* Search */
+
+  --cm-search-backgroundColor: var(--upage-elements-editor-search-backgroundColor, var(--cm-backgroundColor));
+  --cm-search-textColor: var(--upage-elements-editor-search-textColor, var(--upage-elements-textSecondary));
+  --cm-search-closeButton-backgroundColor: var(--upage-elements-editor-search-closeButton-backgroundColor, transparent);
+
+  --cm-search-closeButton-backgroundColorHover: var(
+    --upage-elements-editor-search-closeButton-backgroundColorHover,
+    var(--upage-elements-item-backgroundActive)
+  );
+
+  --cm-search-closeButton-textColor: var(
+    --upage-elements-editor-search-closeButton-textColor,
+    var(--upage-elements-item-contentDefault)
+  );
+
+  --cm-search-closeButton-textColorHover: var(
+    --upage-elements-editor-search-closeButton-textColorHover,
+    var(--upage-elements-item-contentActive)
+  );
+
+  --cm-search-button-backgroundColor: var(
+    --upage-elements-editor-search-button-backgroundColor,
+    var(--upage-elements-item-backgroundDefault)
+  );
+
+  --cm-search-button-backgroundColorHover: var(
+    --upage-elements-editor-search-button-backgroundColorHover,
+    var(--upage-elements-item-backgroundActive)
+  );
+
+  --cm-search-button-textColor: var(--upage-elements-editor-search-button-textColor, var(--upage-elements-textSecondary));
+
+  --cm-search-button-textColorHover: var(
+    --upage-elements-editor-search-button-textColorHover,
+    var(--upage-elements-textPrimary)
+  );
+
+  --cm-search-button-borderColor: var(--upage-elements-editor-search-button-borderColor, transparent);
+  --cm-search-button-borderColorHover: var(--upage-elements-editor-search-button-borderColorHover, transparent);
+
+  --cm-search-button-borderColorFocused: var(
+    --upage-elements-editor-search-button-borderColorFocused,
+    var(--upage-elements-borderColorActive)
+  );
+
+  --cm-search-input-backgroundColor: var(--upage-elements-editor-search-input-backgroundColor, transparent);
+  --cm-search-input-textColor: var(--upage-elements-editor-search-input-textColor, var(--upage-elements-textPrimary));
+  --cm-search-input-borderColor: var(--upage-elements-editor-search-input-borderColor, var(--upage-elements-borderColor));
+
+  --cm-search-input-borderColorFocused: var(
+    --upage-elements-editor-search-input-borderColorFocused,
+    var(--upage-elements-borderColorActive)
+  );
+
+  /* Tooltip */
+
+  --cm-tooltip-backgroundColor: var(--upage-elements-editor-tooltip-backgroundColor, var(--cm-backgroundColor));
+  --cm-tooltip-textColor: var(--upage-elements-editor-tooltip-textColor, var(--upage-elements-textPrimary));
+
+  --cm-tooltip-backgroundColorSelected: var(
+    --upage-elements-editor-tooltip-backgroundColorSelected,
+    theme('colors.alpha.accent.30')
+  );
+
+  --cm-tooltip-textColorSelected: var(
+    --upage-elements-editor-tooltip-textColorSelected,
+    var(--upage-elements-textPrimary)
+  );
+
+  --cm-tooltip-borderColor: var(--upage-elements-editor-tooltip-borderColor, var(--upage-elements-borderColor));
+
+  --cm-searchMatch-backgroundColor: var(--upage-elements-editor-searchMatch-backgroundColor, rgba(234, 92, 0, 0.33));
+}
+
+html[data-theme='light'] {
+  --upage-elements-editor-gutter-textColor: #237893;
+  --upage-elements-editor-gutter-activeLineTextColor: var(--upage-elements-textPrimary);
+  --upage-elements-editor-foldGutter-textColorHover: var(--upage-elements-textPrimary);
+  --upage-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 5%);
+  --upage-elements-editor-tooltip-backgroundColorSelected: theme('colors.alpha.accent.20');
+  --upage-elements-editor-search-button-backgroundColor: theme('colors.gray.100');
+  --upage-elements-editor-search-button-backgroundColorHover: theme('colors.alpha.gray.10');
+}
+
+html[data-theme='dark'] {
+  --cm-backgroundColor: var(--upage-elements-bg-depth-2);
+  --upage-elements-editor-gutter-textColor: var(--upage-elements-textTertiary);
+  --upage-elements-editor-gutter-activeLineTextColor: var(--upage-elements-textSecondary);
+  --upage-elements-editor-selection-inactiveBackgroundOpacity: 0.3;
+  --upage-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 50%);
+  --upage-elements-editor-foldGutter-textColorHover: var(--upage-elements-textPrimary);
+  --upage-elements-editor-matchingBracketBackgroundColor: rgba(66, 180, 255, 0.3);
+  --upage-elements-editor-search-button-backgroundColor: theme('colors.gray.800');
+  --upage-elements-editor-search-button-backgroundColorHover: theme('colors.alpha.white.10');
+}

app/styles/components/resize-handle.scss

@@ -0,0 +1,30 @@
+@use '../z-index';
+
+[data-resize-handle] {
+  position: relative;
+
+  &[data-panel-group-direction='horizontal']:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -6px;
+    right: -5px;
+    z-index: z-index.$zIndexMax;
+  }
+
+  &[data-panel-group-direction='vertical']:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -5px;
+    bottom: -6px;
+    z-index: z-index.$zIndexMax;
+  }
+
+  &[data-resize-handle-state='hover']:after,
+  &[data-resize-handle-state='drag']:after {
+    background-color: #8882;
+  }
+}