rename colors

src/components/Button/index.tsx

@@ -23,13 +23,13 @@ export function Button(componentProps: PropsWithChildren<ButtonProps>) {
   return (
     <Box
       AutoButtonColor={false}
-      BackgroundColor3={hover ? theme.background : theme.primary}
+      BackgroundColor3={hover ? theme.backgroundPrimary : theme.textPrimary}
       BorderRadius={25}
       Component="textbutton"
       Font={theme.fontBold}
       PaddingX={4}
       PaddingY={1.5}
-      TextColor3={hover ? theme.primary : theme.background}
+      TextColor3={hover ? theme.textPrimary : theme.backgroundPrimary}
       TextSize={16}
       {...props}
       Event={{
@@ -48,7 +48,7 @@ export function Button(componentProps: PropsWithChildren<ButtonProps>) {
     >
       <uistroke
         ApplyStrokeMode={Enum.ApplyStrokeMode.Border}
-        Color={theme.primary}
+        Color={theme.textPrimary}
         Thickness={hover ? 1 : 0}
         {...strokeProps}
       />

src/components/Checkbox/index.tsx

@@ -41,7 +41,9 @@ export function Checkbox(componentProps: PropsWithChildren<CheckboxProps>) {
 
   return (
     <Button
-      BackgroundColor3={checkboxValue ? theme.accent : theme.overlay}
+      BackgroundColor3={
+        checkboxValue ? theme.accentPrimary : theme.backgroundOverlay
+      }
       BorderRadius={4}
       DisableListLayout
       PaddingX={0}
@@ -60,7 +62,7 @@ export function Checkbox(componentProps: PropsWithChildren<CheckboxProps>) {
         }, props.Event?.MouseButton1Click),
       }}
       StrokeProps={{
-        Color: checkboxValue ? theme.accent : theme.borders,
+        Color: checkboxValue ? theme.accentPrimary : theme.bordersPrimary,
         Thickness: 2,
 
         ...props.StrokeProps,

src/components/Input/index.tsx

@@ -23,20 +23,22 @@ export function Input(componentProps: PropsWithChildren<InputProps>) {
   return (
     <Box
       AutomaticSize="Y"
-      BackgroundColor3={theme.overlay}
-      BorderColor3={focused && !disabled ? theme.accent : theme.borders}
+      BackgroundColor3={theme.backgroundOverlay}
+      BorderColor3={
+        focused && !disabled ? theme.accentPrimary : theme.bordersPrimary
+      }
       BorderRadius={8}
       BorderThickness={2}
       ClearTextOnFocus={false}
       ClipsDescendants
       Component="textbox"
       PaddingX={2}
       PaddingY={1.5}
-      PlaceholderColor3={theme.primary60}
+      PlaceholderColor3={theme.textSecondary}
       PlaceholderText=""
       Size={UDim2.fromScale(1, 0)}
       Text=""
-      TextColor3={disabled ? theme.primary60 : theme.primary}
+      TextColor3={disabled ? theme.textSecondary : theme.textPrimary}
       TextEditable={!disabled}
       TextSize={12}
       TextTransparency={disabled ? 0.25 : 0}

src/components/ProgressBar/index.tsx

@@ -37,7 +37,7 @@ export function ProgressBar(
 
   return (
     <Box
-      BackgroundColor3={theme.primary60}
+      BackgroundColor3={theme.textSecondary}
       BackgroundTransparency={0.8}
       BorderRadius={borderRadius}
       ClipsDescendants
@@ -47,15 +47,15 @@ export function ProgressBar(
     >
       <Box Component="canvasgroup" Size={UDim2.fromScale(1, 1)}>
         <Box
-          BackgroundColor3={theme.accent}
+          BackgroundColor3={theme.accentPrimary}
           BorderRadius={borderRadius}
           ClipsDescendants
           HorizontalAlignment={Enum.HorizontalAlignment.Right}
           Size={UDim2.fromScale(value / 100, 1)}
           {...indicatorProps}
         >
           <Box
-            BackgroundColor3={theme.accent}
+            BackgroundColor3={theme.accentPrimary}
             Size={UDim2.fromScale(0.5, 1)}
             {...innerIndicatorProps}
           />

src/components/SecondaryButton/index.tsx

@@ -16,8 +16,8 @@ export function SecondaryButton(
 
   return (
     <Button
-      BackgroundColor3={theme.background}
-      TextColor3={theme.primary}
+      BackgroundColor3={theme.backgroundPrimary}
+      TextColor3={theme.textPrimary}
       {...props}
       Event={{
         ...props.Event,
@@ -34,7 +34,7 @@ export function SecondaryButton(
       }}
       StrokeProps={mergeProps(
         {
-          Color: hover ? theme.primary : theme.primary60,
+          Color: hover ? theme.textPrimary : theme.textSecondary,
           Thickness: 1,
         },
         props.StrokeProps,

src/components/Sheet/index.tsx

@@ -15,7 +15,9 @@ export function Sheet(componentProps: PropsWithChildren<SheetProps>) {
 
   const props = componentProps;
 
-  const background = props.Background ? theme.background : theme.overlay;
+  const background = props.Background
+    ? theme.backgroundPrimary
+    : theme.backgroundOverlay;
   props.Background = undefined;
 
   return <Box BackgroundColor3={background} {...props} />;

src/components/Slider/index.tsx

@@ -75,7 +75,7 @@ export function Slider(componentProps: PropsWithChildren<SliderProps>) {
       )}
 
       <ProgressBar
-        BackgroundColor3={theme.accent}
+        BackgroundColor3={theme.accentPrimary}
         Size={UDim2.fromScale(1, 1)}
         Value={!value ? internalValue : value}
         {...progressBarProps}
@@ -84,7 +84,7 @@ export function Slider(componentProps: PropsWithChildren<SliderProps>) {
       <Box
         AnchorPoint={new Vector2(0.25, 0.25)}
         AutoButtonColor={false}
-        BackgroundColor3={theme.accent}
+        BackgroundColor3={theme.accentPrimary}
         Component="textbutton"
         Position={new UDim2(internalValue / 100, 0, -0, 0)}
         Size={UDim2.fromOffset(16, 16)}

src/components/Typography/index.tsx

@@ -14,7 +14,7 @@ export function Typography(props: PropsWithChildren<TypographyProps>) {
   return (
     <Box
       Component="textlabel"
-      TextColor3={theme.primary}
+      TextColor3={theme.textPrimary}
       TextSize={12}
       TextXAlignment={Enum.TextXAlignment.Left}
       {...props}

src/themes/dark.ts

@@ -1,12 +1,12 @@
 import type { Theme } from 'themes';
 
 export const darkTheme: Theme = {
-  primary: Color3.fromRGB(250, 250, 250),
-  primary60: Color3.fromRGB(160, 160, 161),
-  background: Color3.fromRGB(24, 26, 27),
-  overlay: Color3.fromRGB(28, 30, 34),
-  borders: Color3.fromRGB(38, 41, 45),
-  accent: Color3.fromRGB(67, 147, 228),
-  font: Enum.Font.Arial,
+  textPrimary: Color3.fromRGB(250, 250, 250),
+  textSecondary: Color3.fromRGB(160, 160, 161),
+  backgroundPrimary: Color3.fromRGB(24, 26, 27),
+  backgroundOverlay: Color3.fromRGB(28, 30, 34),
+  bordersPrimary: Color3.fromRGB(38, 41, 45),
+  accentPrimary: Color3.fromRGB(67, 147, 228),
+  fontRegular: Enum.Font.Arial,
   fontBold: Enum.Font.ArialBold,
 };

src/themes/index.ts

@@ -1,11 +1,11 @@
 export interface Theme {
-  primary: Color3;
-  primary60: Color3;
-  background: Color3;
-  overlay: Color3;
-  borders: Color3;
-  accent: Color3;
-  font: Enum.Font;
+  textPrimary: Color3;
+  textSecondary: Color3;
+  backgroundPrimary: Color3;
+  backgroundOverlay: Color3;
+  bordersPrimary: Color3;
+  accentPrimary: Color3;
+  fontRegular: Enum.Font;
   fontBold: Enum.Font;
 }
 

src/themes/light.ts

@@ -1,12 +1,12 @@
 import type { Theme } from 'themes';
 
 export const lightTheme: Theme = {
-  primary: Color3.fromRGB(19, 20, 20),
-  primary60: Color3.fromRGB(113, 114, 114),
-  background: Color3.fromRGB(255, 255, 255),
-  borders: Color3.fromRGB(227, 229, 234),
-  overlay: Color3.fromRGB(250, 250, 250),
-  accent: Color3.fromRGB(67, 147, 228),
-  font: Enum.Font.Arial,
+  textPrimary: Color3.fromRGB(19, 20, 20),
+  textSecondary: Color3.fromRGB(113, 114, 114),
+  backgroundPrimary: Color3.fromRGB(255, 255, 255),
+  backgroundOverlay: Color3.fromRGB(250, 250, 250),
+  bordersPrimary: Color3.fromRGB(227, 229, 234),
+  accentPrimary: Color3.fromRGB(67, 147, 228),
+  fontRegular: Enum.Font.Arial,
   fontBold: Enum.Font.ArialBold,
 };