Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/design-system/src/styles/base/_colors-dark.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,14 @@
--ring: var(--zinc-600);
--secondary: var(--zinc-800);
--secondary-foreground: var(--general-white);
--sidebar: var(--color-card);
--sidebar-accent: var(--color-background);
--sidebar-accent-foreground: var(--color-foreground);
Comment on lines +32 to +34
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix incorrect CSS variable references.

The variables reference non-existent --color-* variables. They should reference the corresponding base variables instead.

-    --sidebar: var(--color-card);
-    --sidebar-accent: var(--color-background);
-    --sidebar-accent-foreground: var(--color-foreground);
-    --sidebar-forground: var(--color-foreground);
+    --sidebar: var(--card);
+    --sidebar-accent: var(--background);
+    --sidebar-accent-foreground: var(--foreground);
+    --sidebar-foreground: var(--foreground);

Also applies to: 36-36

--sidebar-border: rgba(255, 255, 255, 0.0000);
--sidebar-forground: var(--color-foreground);
--sidebar-primary: #ff0000;
--sidebar-primary-foreground: #ff0000;
--sidebar-ring: #ff0000;
Comment on lines +37 to +39
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Replace placeholder red colors with proper design tokens.

The hardcoded #ff0000 values appear to be placeholder development values and should be replaced with appropriate design tokens.

-    --sidebar-primary: #ff0000;
-    --sidebar-primary-foreground: #ff0000;
-    --sidebar-ring: #ff0000;
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
+    --sidebar-ring: var(--ring);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
--sidebar-primary: #ff0000;
--sidebar-primary-foreground: #ff0000;
--sidebar-ring: #ff0000;
--sidebar-primary: var(--primary);
--sidebar-primary-foreground: var(--primary-foreground);
--sidebar-ring: var(--ring);

--success: var(--emerald-500);
--success-border: var(--green-900);
--success-foreground: var(--green-50);
Expand Down
8 changes: 8 additions & 0 deletions packages/design-system/src/styles/base/_colors-light.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,14 @@
--ring: var(--zinc-400);
--secondary: var(--zinc-100);
--secondary-foreground: var(--zinc-900);
--sidebar: var(--color-card);
--sidebar-accent: var(--color-background);
--sidebar-accent-foreground: var(--color-foreground);
Comment on lines +32 to +34
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix incorrect CSS variable references.

The variables reference non-existent --color-* variables. They should reference the corresponding base variables instead.

-    --sidebar: var(--color-card);
-    --sidebar-accent: var(--color-background);
-    --sidebar-accent-foreground: var(--color-foreground);
-    --sidebar-forground: var(--color-foreground);
+    --sidebar: var(--card);
+    --sidebar-accent: var(--background);
+    --sidebar-accent-foreground: var(--foreground);
+    --sidebar-foreground: var(--foreground);

Also applies to: 36-36

--sidebar-border: rgba(255, 255, 255, 0.0000);
--sidebar-forground: var(--color-foreground);
--sidebar-primary: #ff0000;
--sidebar-primary-foreground: #ff0000;
--sidebar-ring: #ff0000;
Comment on lines +37 to +39
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Replace placeholder red colors with proper design tokens.

The hardcoded #ff0000 values appear to be placeholder development values and should be replaced with appropriate design tokens.

-    --sidebar-primary: #ff0000;
-    --sidebar-primary-foreground: #ff0000;
-    --sidebar-ring: #ff0000;
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
+    --sidebar-ring: var(--ring);

--success: var(--green-100);
--success-border: var(--green-200);
--success-foreground: var(--green-700);
Expand Down
8 changes: 8 additions & 0 deletions packages/design-system/src/tailwind/colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,14 @@ export const colors = {
"ring": "hsl(var(--ring))",
"secondary": "hsl(var(--secondary))",
"secondary-foreground": "hsl(var(--secondary-foreground))",
"sidebar": "hsl(var(--sidebar))",
"sidebar-accent": "hsl(var(--sidebar-accent))",
"sidebar-accent-foreground": "hsl(var(--sidebar-accent-foreground))",
"sidebar-border": "hsl(var(--sidebar-border))",
"sidebar-forground": "hsl(var(--sidebar-forground))",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix typo in color token name.

The token name contains a typo: "forground" should be "foreground".

-  "sidebar-forground": "hsl(var(--sidebar-forground))",
+  "sidebar-foreground": "hsl(var(--sidebar-foreground))",
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"sidebar-forground": "hsl(var(--sidebar-forground))",
"sidebar-foreground": "hsl(var(--sidebar-foreground))",

"sidebar-primary": "hsl(var(--sidebar-primary))",
"sidebar-primary-foreground": "hsl(var(--sidebar-primary-foreground))",
"sidebar-ring": "hsl(var(--sidebar-ring))",
"success": "hsl(var(--success))",
"success-border": "hsl(var(--success-border))",
"success-foreground": "hsl(var(--success-foreground))",
Expand Down
14 changes: 14 additions & 0 deletions packages/design-system/src/tokens/token_Icon_size_Mode1.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"LG": {
"$type": "number",
"$value": 24
},
"MD": {
"$type": "number",
"$value": 18
},
"XS": {
"$type": "number",
"$value": 16
}
}
32 changes: 32 additions & 0 deletions packages/design-system/src/tokens/token_color_default.json
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,38 @@
"$value": "{general.white}",
"$description": "Secondary colors for <Button />"
},
"sidebar": {
"$type": "color",
"$value": "{color.card}"
},
"sidebar-accent": {
"$type": "color",
"$value": "{color.background}"
},
"sidebar-accent-foreground": {
"$type": "color",
"$value": "{color.foreground}"
},
"sidebar-border": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.0000)"
},
"sidebar-forground": {
"$type": "color",
"$value": "{color.foreground}"
},
"sidebar-primary": {
"$type": "color",
"$value": "#ff0000"
},
"sidebar-primary-foreground": {
"$type": "color",
"$value": "#ff0000"
},
"sidebar-ring": {
"$type": "color",
"$value": "#ff0000"
},
"success": {
"$type": "color",
"$value": "{emerald.500}",
Expand Down
32 changes: 32 additions & 0 deletions packages/design-system/src/tokens/token_color_light.json
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,38 @@
"$value": "{zinc.900}",
"$description": "Secondary colors for <Button />"
},
"sidebar": {
"$type": "color",
"$value": "{color.card}"
},
"sidebar-accent": {
"$type": "color",
"$value": "{color.background}"
},
"sidebar-accent-foreground": {
"$type": "color",
"$value": "{color.foreground}"
},
"sidebar-border": {
"$type": "color",
"$value": "rgba(255, 255, 255, 0.0000)"
},
"sidebar-forground": {
"$type": "color",
"$value": "{color.foreground}"
},
"sidebar-primary": {
"$type": "color",
"$value": "#ff0000"
},
"sidebar-primary-foreground": {
"$type": "color",
"$value": "#ff0000"
},
"sidebar-ring": {
"$type": "color",
"$value": "#ff0000"
},
"success": {
"$type": "color",
"$value": "{green.100}",
Expand Down
200 changes: 200 additions & 0 deletions packages/design-system/src/tokens/token_typography_Mode1.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
{
"Text-black": {
"$type": "color",
"$value": "#1a1a20"
},
"font": {
"family": {
"Font Family": {
"$type": "string",
"$value": "Poppins"
}
},
"line height": {
"Display": {
"LG": {
"$type": "number",
"$value": 112
},
"MD": {
"$type": "number",
"$value": 64
},
"SM": {
"$type": "number",
"$value": 52
},
"XS": {
"$type": "number",
"$value": 44
}
},
"Heading": {
"LG": {
"$type": "number",
"$value": 40
},
"MD": {
"$type": "number",
"$value": 36
},
"SM": {
"$type": "number",
"$value": 32
},
"XL": {
"$type": "number",
"$value": 44
},
"XS": {
"$type": "number",
"$value": 28
},
"XXL": {
"$type": "number",
"$value": 52
}
},
"Labels": {
"LG": {
"$type": "number",
"$value": 24
},
"MD": {
"$type": "number",
"$value": 20
},
"SM": {
"$type": "number",
"$value": 16
},
"XS": {
"$type": "number",
"$value": 16
}
},
"Paragraphs": {
"LG": {
"$type": "number",
"$value": 28
},
"MD": {
"$type": "number",
"$value": 24
},
"SM": {
"$type": "number",
"$value": 20
},
"XS": {
"$type": "number",
"$value": 20
}
}
},
"size": {
"Display": {
"LG": {
"$type": "number",
"$value": 96
},
"MD": {
"$type": "number",
"$value": 52
},
"SM": {
"$type": "number",
"$value": 44
},
"XS": {
"$type": "number",
"$value": 36
}
},
"Heading": {
"LG": {
"$type": "number",
"$value": 32
},
"MD": {
"$type": "number",
"$value": 28
},
"SM": {
"$type": "number",
"$value": 24
},
"XL": {
"$type": "number",
"$value": 36
},
"XS": {
"$type": "number",
"$value": 20
},
"XXL": {
"$type": "number",
"$value": 40
}
},
"Labels": {
"LG": {
"$type": "number",
"$value": 18
},
"MD": {
"$type": "number",
"$value": 16
},
"SM": {
"$type": "number",
"$value": 14
},
"XS": {
"$type": "number",
"$value": 12
}
},
"Paragraphs": {
"LG": {
"$type": "number",
"$value": 18
},
"MD": {
"$type": "number",
"$value": 16
},
"SM": {
"$type": "number",
"$value": 14
},
"XS": {
"$type": "number",
"$value": 12
},
"XXS": {
"$type": "number",
"$value": 10
}
}
},
"weight": {
"Bold": {
"$type": "string",
"$value": "Bold"
},
"Medium": {
"$type": "string",
"$value": "Medium"
},
"Regular": {
"$type": "string",
"$value": "Regular"
},
"light": {
"$type": "string",
"$value": "Light"
}
}
}
}
Loading