move usage style helper to lib/styles

src/components/MarginUsageRing.tsx

@@ -2,11 +2,10 @@ import styled, { type AnyStyledComponent } from 'styled-components';
 
 import { RiskLevels } from '@/constants/abacus';
 
-import { UsageColorFromRiskLevel } from '@/styles/globalStyle';
-
 import { Ring } from '@/components/Ring';
 
 import { abacusHelper } from '@/lib/abacus';
+import { UsageColorFromRiskLevel } from '@/lib/styles';
 
 type ElementProps = {
   value: number;

src/components/UsageBars.tsx

@@ -2,9 +2,9 @@ import styled, { type AnyStyledComponent } from 'styled-components';
 
 import { type RiskLevels } from '@/constants/abacus';
 
-import { UsageColorFromRiskLevel } from '@/styles/globalStyle';
-
 import { abacusHelper } from '@/lib/abacus';
+import { UsageColorFromRiskLevel } from '@/lib/styles';
+
 type ElementProps = {
   value: number;
 };

src/lib/styles.ts

@@ -0,0 +1,16 @@
+import { css } from 'styled-components';
+
+import { type RiskLevels } from '@/constants/abacus';
+
+export const UsageColorFromRiskLevel = (riskLevel: RiskLevels) =>
+  ({
+    low: css`
+      color: var(--color-risk-low);
+    `,
+    medium: css`
+      color: var(--color-risk-medium);
+    `,
+    high: css`
+      color: var(--color-risk-high);
+    `,
+  }[riskLevel.name]);

src/styles/globalStyle.ts

@@ -1,10 +1,7 @@
-import { createGlobalStyle, css } from 'styled-components';
-
-import { type RiskLevels } from '@/constants/abacus';
+import { createGlobalStyle } from 'styled-components';
 
 export const GlobalStyle = createGlobalStyle`
   :root {
-    /* Computed: Layers */
     --color-layer-0: ${({ theme }) => theme.layer0};
     --color-layer-1: ${({ theme }) => theme.layer1};
     --color-layer-2: ${({ theme }) => theme.layer2};
@@ -14,45 +11,26 @@ export const GlobalStyle = createGlobalStyle`
     --color-layer-6: ${({ theme }) => theme.layer6};
     --color-layer-7: ${({ theme }) => theme.layer7};
 
-    /* Computed: Borders */
     --color-border: ${({ theme }) => theme.borderDefault};
     --color-border-white: ${({ theme }) => theme.borderButton}; //xcxc
     --color-border-red: ${({ theme }) => theme.borderDestructive}; //xcxc
 
-    /* Computed: Text */
     --color-text-0: ${({ theme }) => theme.textPrimary}; //xcxc
     --color-text-1: ${({ theme }) => theme.textSecondary}; //xcxc
     --color-text-2: ${({ theme }) => theme.textTertiary}; //xcxc
 
-    /* Computed: Accent */
     --color-accent: ${({ theme }) => theme.accent};
     --color-favorite: ${({ theme }) => theme.favorite};
 
-    /* Computed: Status */
     --color-success: ${({ theme }) => theme.success};
     --color-warning: ${({ theme }) => theme.warning};
     --color-error: ${({ theme }) => theme.error};
 
-    /* Computed: Directional */
     --color-positive: ${({ theme }) => theme.positive};
     --color-negative: ${({ theme }) => theme.negative};
 
-    /* Computed: Risk */
     --color-risk-low: ${({ theme }) => theme.riskLow};
     --color-risk-medium: ${({ theme }) => theme.riskMedium};
     --color-risk-high: ${({ theme }) => theme.riskHigh};
   }
 `;
-
-export const UsageColorFromRiskLevel = (riskLevel: RiskLevels) =>
-  ({
-    low: css`
-      color: var(--color-risk-low);
-    `,
-    medium: css`
-      color: var(--color-risk-medium);
-    `,
-    high: css`
-      color: var(--color-risk-high);
-    `,
-  }[riskLevel.name]);