Skip to content

Commit b2ce416

Browse files
Gerome-ElassaadGerome-Elassaad
committed
Update styles
1 parent acc94e2 commit b2ce416

6 files changed

Lines changed: 311 additions & 296 deletions

File tree

‎app/styles/components/code.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
.actions .shiki {
2-
background-color: var(--bolt-elements-actions-code-background) !important;
2+
background-color: var(--codinit-elements-actions-code-background) !important;
33
}
44

55
.shiki {
66
&:not(:has(.actions), .actions *, .mcp-tool-invocation-code *) {
7-
background-color: var(--bolt-elements-messages-code-background) !important;
7+
background-color: var(--codinit-elements-messages-code-background) !important;
88
}
99
}

‎app/styles/components/editor.scss‎

Lines changed: 78 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,150 @@
11
:root {
2-
--cm-backgroundColor: var(--bolt-elements-editor-backgroundColor, var(--bolt-elements-bg-depth-1));
3-
--cm-textColor: var(--bolt-elements-editor-textColor, var(--bolt-elements-textPrimary));
2+
--cm-backgroundColor: var(--codinit-elements-editor-backgroundColor, var(--codinit-elements-bg-depth-1));
3+
--cm-textColor: var(--codinit-elements-editor-textColor, var(--codinit-elements-textPrimary));
44

55
/* Gutter */
66

7-
--cm-gutter-backgroundColor: var(--bolt-elements-editor-gutter-backgroundColor, var(--cm-backgroundColor));
8-
--cm-gutter-textColor: var(--bolt-elements-editor-gutter-textColor, var(--bolt-elements-textSecondary));
9-
--cm-gutter-activeLineTextColor: var(--bolt-elements-editor-gutter-activeLineTextColor, var(--cm-gutter-textColor));
7+
--cm-gutter-backgroundColor: var(--codinit-elements-editor-gutter-backgroundColor, var(--cm-backgroundColor));
8+
--cm-gutter-textColor: var(--codinit-elements-editor-gutter-textColor, var(--codinit-elements-textSecondary));
9+
--cm-gutter-activeLineTextColor: var(
10+
--codinit-elements-editor-gutter-activeLineTextColor,
11+
var(--cm-gutter-textColor)
12+
);
1013

1114
/* Fold Gutter */
1215

13-
--cm-foldGutter-textColor: var(--bolt-elements-editor-foldGutter-textColor, var(--cm-gutter-textColor));
14-
--cm-foldGutter-textColorHover: var(--bolt-elements-editor-foldGutter-textColorHover, var(--cm-gutter-textColor));
16+
--cm-foldGutter-textColor: var(--codinit-elements-editor-foldGutter-textColor, var(--cm-gutter-textColor));
17+
--cm-foldGutter-textColorHover: var(--codinit-elements-editor-foldGutter-textColorHover, var(--cm-gutter-textColor));
1518

1619
/* Active Line */
1720

18-
--cm-activeLineBackgroundColor: var(--bolt-elements-editor-activeLineBackgroundColor, rgb(224 231 235 / 30%));
21+
--cm-activeLineBackgroundColor: var(--codinit-elements-editor-activeLineBackgroundColor, rgb(224 231 235 / 30%));
1922

2023
/* Cursor */
2124

2225
--cm-cursor-width: 2px;
23-
--cm-cursor-backgroundColor: var(--bolt-elements-editor-cursorColor, var(--bolt-elements-textSecondary));
26+
--cm-cursor-backgroundColor: var(--codinit-elements-editor-cursorColor, var(--codinit-elements-textSecondary));
2427

2528
/* Matching Brackets */
2629

27-
--cm-matching-bracket: var(--bolt-elements-editor-matchingBracketBackgroundColor, rgb(50 140 130 / 0.3));
30+
--cm-matching-bracket: var(--codinit-elements-editor-matchingBracketBackgroundColor, rgb(50 140 130 / 0.3));
2831

2932
/* Selection */
3033

31-
--cm-selection-backgroundColorFocused: var(--bolt-elements-editor-selection-backgroundColor, #42b4ff);
32-
--cm-selection-backgroundOpacityFocused: var(--bolt-elements-editor-selection-backgroundOpacity, 0.3);
33-
--cm-selection-backgroundColorBlured: var(--bolt-elements-editor-selection-inactiveBackgroundColor, #c9e9ff);
34-
--cm-selection-backgroundOpacityBlured: var(--bolt-elements-editor-selection-inactiveBackgroundOpacity, 0.3);
34+
--cm-selection-backgroundColorFocused: var(--codinit-elements-editor-selection-backgroundColor, #42b4ff);
35+
--cm-selection-backgroundOpacityFocused: var(--codinit-elements-editor-selection-backgroundOpacity, 0.3);
36+
--cm-selection-backgroundColorBlured: var(--codinit-elements-editor-selection-inactiveBackgroundColor, #c9e9ff);
37+
--cm-selection-backgroundOpacityBlured: var(--codinit-elements-editor-selection-inactiveBackgroundOpacity, 0.3);
3538

3639
/* Panels */
3740

38-
--cm-panels-borderColor: var(--bolt-elements-editor-panels-borderColor, var(--bolt-elements-borderColor));
41+
--cm-panels-borderColor: var(--codinit-elements-editor-panels-borderColor, var(--codinit-elements-borderColor));
3942

4043
/* Search */
4144

42-
--cm-search-backgroundColor: var(--bolt-elements-editor-search-backgroundColor, var(--cm-backgroundColor));
43-
--cm-search-textColor: var(--bolt-elements-editor-search-textColor, var(--bolt-elements-textSecondary));
44-
--cm-search-closeButton-backgroundColor: var(--bolt-elements-editor-search-closeButton-backgroundColor, transparent);
45+
--cm-search-backgroundColor: var(--codinit-elements-editor-search-backgroundColor, var(--cm-backgroundColor));
46+
--cm-search-textColor: var(--codinit-elements-editor-search-textColor, var(--codinit-elements-textSecondary));
47+
--cm-search-closeButton-backgroundColor: var(
48+
--codinit-elements-editor-search-closeButton-backgroundColor,
49+
transparent
50+
);
4551

4652
--cm-search-closeButton-backgroundColorHover: var(
47-
--bolt-elements-editor-search-closeButton-backgroundColorHover,
48-
var(--bolt-elements-item-backgroundActive)
53+
--codinit-elements-editor-search-closeButton-backgroundColorHover,
54+
var(--codinit-elements-item-backgroundActive)
4955
);
5056

5157
--cm-search-closeButton-textColor: var(
52-
--bolt-elements-editor-search-closeButton-textColor,
53-
var(--bolt-elements-item-contentDefault)
58+
--codinit-elements-editor-search-closeButton-textColor,
59+
var(--codinit-elements-item-contentDefault)
5460
);
5561

5662
--cm-search-closeButton-textColorHover: var(
57-
--bolt-elements-editor-search-closeButton-textColorHover,
58-
var(--bolt-elements-item-contentActive)
63+
--codinit-elements-editor-search-closeButton-textColorHover,
64+
var(--codinit-elements-item-contentActive)
5965
);
6066

6167
--cm-search-button-backgroundColor: var(
62-
--bolt-elements-editor-search-button-backgroundColor,
63-
var(--bolt-elements-item-backgroundDefault)
68+
--codinit-elements-editor-search-button-backgroundColor,
69+
var(--codinit-elements-item-backgroundDefault)
6470
);
6571

6672
--cm-search-button-backgroundColorHover: var(
67-
--bolt-elements-editor-search-button-backgroundColorHover,
68-
var(--bolt-elements-item-backgroundActive)
73+
--codinit-elements-editor-search-button-backgroundColorHover,
74+
var(--codinit-elements-item-backgroundActive)
6975
);
7076

71-
--cm-search-button-textColor: var(--bolt-elements-editor-search-button-textColor, var(--bolt-elements-textSecondary));
77+
--cm-search-button-textColor: var(
78+
--codinit-elements-editor-search-button-textColor,
79+
var(--codinit-elements-textSecondary)
80+
);
7281

7382
--cm-search-button-textColorHover: var(
74-
--bolt-elements-editor-search-button-textColorHover,
75-
var(--bolt-elements-textPrimary)
83+
--codinit-elements-editor-search-button-textColorHover,
84+
var(--codinit-elements-textPrimary)
7685
);
7786

78-
--cm-search-button-borderColor: var(--bolt-elements-editor-search-button-borderColor, transparent);
79-
--cm-search-button-borderColorHover: var(--bolt-elements-editor-search-button-borderColorHover, transparent);
87+
--cm-search-button-borderColor: var(--codinit-elements-editor-search-button-borderColor, transparent);
88+
--cm-search-button-borderColorHover: var(--codinit-elements-editor-search-button-borderColorHover, transparent);
8089

8190
--cm-search-button-borderColorFocused: var(
82-
--bolt-elements-editor-search-button-borderColorFocused,
83-
var(--bolt-elements-borderColorActive)
91+
--codinit-elements-editor-search-button-borderColorFocused,
92+
var(--codinit-elements-borderColorActive)
8493
);
8594

86-
--cm-search-input-backgroundColor: var(--bolt-elements-editor-search-input-backgroundColor, transparent);
87-
--cm-search-input-textColor: var(--bolt-elements-editor-search-input-textColor, var(--bolt-elements-textPrimary));
88-
--cm-search-input-borderColor: var(--bolt-elements-editor-search-input-borderColor, var(--bolt-elements-borderColor));
95+
--cm-search-input-backgroundColor: var(--codinit-elements-editor-search-input-backgroundColor, transparent);
96+
--cm-search-input-textColor: var(
97+
--codinit-elements-editor-search-input-textColor,
98+
var(--codinit-elements-textPrimary)
99+
);
100+
--cm-search-input-borderColor: var(
101+
--codinit-elements-editor-search-input-borderColor,
102+
var(--codinit-elements-borderColor)
103+
);
89104

90105
--cm-search-input-borderColorFocused: var(
91-
--bolt-elements-editor-search-input-borderColorFocused,
92-
var(--bolt-elements-borderColorActive)
106+
--codinit-elements-editor-search-input-borderColorFocused,
107+
var(--codinit-elements-borderColorActive)
93108
);
94109

95110
/* Tooltip */
96111

97-
--cm-tooltip-backgroundColor: var(--bolt-elements-editor-tooltip-backgroundColor, var(--cm-backgroundColor));
98-
--cm-tooltip-textColor: var(--bolt-elements-editor-tooltip-textColor, var(--bolt-elements-textPrimary));
112+
--cm-tooltip-backgroundColor: var(--codinit-elements-editor-tooltip-backgroundColor, var(--cm-backgroundColor));
113+
--cm-tooltip-textColor: var(--codinit-elements-editor-tooltip-textColor, var(--codinit-elements-textPrimary));
99114

100115
--cm-tooltip-backgroundColorSelected: var(
101-
--bolt-elements-editor-tooltip-backgroundColorSelected,
116+
--codinit-elements-editor-tooltip-backgroundColorSelected,
102117
theme('colors.alpha.accent.30')
103118
);
104119

105120
--cm-tooltip-textColorSelected: var(
106-
--bolt-elements-editor-tooltip-textColorSelected,
107-
var(--bolt-elements-textPrimary)
121+
--codinit-elements-editor-tooltip-textColorSelected,
122+
var(--codinit-elements-textPrimary)
108123
);
109124

110-
--cm-tooltip-borderColor: var(--bolt-elements-editor-tooltip-borderColor, var(--bolt-elements-borderColor));
125+
--cm-tooltip-borderColor: var(--codinit-elements-editor-tooltip-borderColor, var(--codinit-elements-borderColor));
111126

112-
--cm-searchMatch-backgroundColor: var(--bolt-elements-editor-searchMatch-backgroundColor, rgba(234, 92, 0, 0.33));
127+
--cm-searchMatch-backgroundColor: var(--codinit-elements-editor-searchMatch-backgroundColor, rgba(234, 92, 0, 0.33));
113128
}
114129

115130
html[data-theme='light'] {
116-
--bolt-elements-editor-gutter-textColor: #237893;
117-
--bolt-elements-editor-gutter-activeLineTextColor: var(--bolt-elements-textPrimary);
118-
--bolt-elements-editor-foldGutter-textColorHover: var(--bolt-elements-textPrimary);
119-
--bolt-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 5%);
120-
--bolt-elements-editor-tooltip-backgroundColorSelected: theme('colors.alpha.accent.20');
121-
--bolt-elements-editor-search-button-backgroundColor: theme('colors.gray.100');
122-
--bolt-elements-editor-search-button-backgroundColorHover: theme('colors.alpha.gray.10');
131+
--codinit-elements-editor-gutter-textColor: #237893;
132+
--codinit-elements-editor-gutter-activeLineTextColor: var(--codinit-elements-textPrimary);
133+
--codinit-elements-editor-foldGutter-textColorHover: var(--codinit-elements-textPrimary);
134+
--codinit-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 5%);
135+
--codinit-elements-editor-tooltip-backgroundColorSelected: theme('colors.alpha.accent.20');
136+
--codinit-elements-editor-search-button-backgroundColor: theme('colors.gray.100');
137+
--codinit-elements-editor-search-button-backgroundColorHover: theme('colors.alpha.gray.10');
123138
}
124139

125140
html[data-theme='dark'] {
126-
--cm-backgroundColor: var(--bolt-elements-bg-depth-2);
127-
--bolt-elements-editor-gutter-textColor: var(--bolt-elements-textTertiary);
128-
--bolt-elements-editor-gutter-activeLineTextColor: var(--bolt-elements-textSecondary);
129-
--bolt-elements-editor-selection-inactiveBackgroundOpacity: 0.3;
130-
--bolt-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 50%);
131-
--bolt-elements-editor-foldGutter-textColorHover: var(--bolt-elements-textPrimary);
132-
--bolt-elements-editor-matchingBracketBackgroundColor: rgba(66, 180, 255, 0.3);
133-
--bolt-elements-editor-search-button-backgroundColor: theme('colors.gray.800');
134-
--bolt-elements-editor-search-button-backgroundColorHover: theme('colors.alpha.white.10');
141+
--cm-backgroundColor: var(--codinit-elements-bg-depth-2);
142+
--codinit-elements-editor-gutter-textColor: var(--codinit-elements-textTertiary);
143+
--codinit-elements-editor-gutter-activeLineTextColor: var(--codinit-elements-textSecondary);
144+
--codinit-elements-editor-selection-inactiveBackgroundOpacity: 0.3;
145+
--codinit-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 50%);
146+
--codinit-elements-editor-foldGutter-textColorHover: var(--codinit-elements-textPrimary);
147+
--codinit-elements-editor-matchingBracketBackgroundColor: rgba(66, 180, 255, 0.3);
148+
--codinit-elements-editor-search-button-backgroundColor: theme('colors.gray.800');
149+
--codinit-elements-editor-search-button-backgroundColorHover: theme('colors.alpha.white.10');
135150
}

‎app/styles/components/toast.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
.Toastify__toast {
22
--at-apply: shadow-md;
33

4-
background-color: var(--bolt-elements-bg-depth-2);
5-
color: var(--bolt-elements-textPrimary);
6-
border: 1px solid var(--bolt-elements-borderColor);
4+
background-color: var(--codinit-elements-bg-depth-2);
5+
color: var(--codinit-elements-textPrimary);
6+
border: 1px solid var(--codinit-elements-borderColor);
77
}
88

99
.Toastify__close-button {
10-
color: var(--bolt-elements-item-contentDefault);
10+
color: var(--codinit-elements-item-contentDefault);
1111
opacity: 1;
1212
transition: none;
1313

1414
&:hover {
15-
color: var(--bolt-elements-item-contentActive);
15+
color: var(--codinit-elements-item-contentActive);
1616
}
1717
}

‎app/styles/diff-view.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,11 @@
5555
}
5656

5757
.diff-line-number {
58-
@apply w-12 shrink-0 pl-2 py-0.5 text-left font-mono text-bolt-elements-textTertiary border-r border-bolt-elements-borderColor bg-bolt-elements-background-depth-1;
58+
@apply w-12 shrink-0 pl-2 py-0.5 text-left font-mono text-codinit-elements-textTertiary border-r border-codinit-elements-borderColor bg-codinit-elements-background-depth-1;
5959
}
6060

6161
.diff-line-content {
62-
@apply px-4 py-0.5 font-mono whitespace-pre flex-1 group-hover:bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary;
62+
@apply px-4 py-0.5 font-mono whitespace-pre flex-1 group-hover:bg-codinit-elements-background-depth-2 text-codinit-elements-textPrimary;
6363
}
6464

6565
/* Cores específicas para adições/remoções */

‎app/styles/index.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ html,
1111
body {
1212
height: 100%;
1313
width: 100%;
14-
background-color: var(--bolt-elements-bg-depth-1);
14+
background-color: var(--codinit-elements-bg-depth-1);
1515
}
1616

1717
:root {
@@ -60,14 +60,14 @@ body {
6060
.modern-scrollbar-invert {
6161
&::-webkit-scrollbar-thumb {
6262
// Override with a contrasting color, e.g., primary text color with transparency
63-
background-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 70%);
63+
background-color: color-mix(in srgb, var(--codinit-elements-textPrimary), transparent 70%);
6464
}
6565

6666
&::-webkit-scrollbar-thumb:hover {
6767
// Darker/more opaque version on hover
68-
background-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 50%);
68+
background-color: color-mix(in srgb, var(--codinit-elements-textPrimary), transparent 50%);
6969
}
7070

7171
// Firefox support for inverted colors
72-
scrollbar-color: color-mix(in srgb, var(--bolt-elements-textPrimary), transparent 50%) transparent;
72+
scrollbar-color: color-mix(in srgb, var(--codinit-elements-textPrimary), transparent 50%) transparent;
7373
}

0 commit comments

Comments
 (0)