Skip to content
Closed
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
176 changes: 176 additions & 0 deletions packages/design-system/src/tokens/token_color_Default.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
{
"color": {
"accent": {
"$type": "color",
"$value": "{zinc.800}",
"$description": "Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc"
},
"accent-foreground": {
"$type": "color",
"$value": "{general.white}",
"$description": "Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc"
},
"background": {
"$type": "color",
"$value": "{zinc.950}",
"$description": "Default background color of <body />...etc"
},
"black": {
"$type": "color",
"$value": "{general.black}"
},
"border": {
"$type": "color",
"$value": "{zinc.800}",
"$description": "Default border color"
},
"card": {
"$type": "color",
"$value": "{zinc.900}",
"$description": "Background color for <Card />"
},
"card-foreground": {
"$type": "color",
"$value": "{general.white}",
"$description": "Foreground color for <Card />"
},
"destructive": {
"$type": "color",
"$value": "{rose.500}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"destructive-foreground": {
"$type": "color",
"$value": "{general.black}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"error": {
"$type": "color",
"$value": "{rose.500}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"error-border": {
"$type": "color",
"$value": "{red.900}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"error-foreground": {
"$type": "color",
"$value": "{red.100}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"foreground": {
"$type": "color",
"$value": "{zinc.50}",
"$description": "Default foreground color of <body />...etc"
},
"information": {
"$type": "color",
"$value": "{sky.500}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"information-border": {
"$type": "color",
"$value": "{blue.900}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"information-foreground": {
"$type": "color",
"$value": "{blue.100}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"input": {
"$type": "color",
"$value": "{zinc.800}",
"$description": "Border color for inputs such as <Input />, <Select />, <Textarea />"
},
"muted": {
"$type": "color",
"$value": "{zinc.800}",
"$description": "Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />"
},
"muted-foreground": {
"$type": "color",
"$value": "{zinc.400}",
"$description": "Muted Foreground such as <TabsList />, <Skeleton /> and <Switch />"
},
"popover": {
"$type": "color",
"$value": "{zinc.950}",
"$description": "Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />"
},
"popover-foreground": {
"$type": "color",
"$value": "{general.white}",
"$description": "Foreground color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />"
},
"primary": {
"$type": "color",
"$value": "{purple.500}",
"$description": "Primary colors for <Button />"
},
"primary-foreground": {
"$type": "color",
"$value": "{general.white}",
"$description": "Secondary colors for <Button />"
},
Comment on lines +112 to +116
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Fix incorrect description for primary-foreground.

The description incorrectly states "Secondary colors for " for the primary-foreground token.

     "primary-foreground": {
       "$type": "color",
       "$value": "{general.white}",
-      "$description": "Secondary colors for <Button />"
+      "$description": "Foreground color for primary buttons"
     },
📝 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
"primary-foreground": {
"$type": "color",
"$value": "{general.white}",
"$description": "Secondary colors for <Button />"
},
"primary-foreground": {
"$type": "color",
"$value": "{general.white}",
"$description": "Foreground color for primary buttons"
},

"primary-light": {
"$type": "color",
"$value": "{purple.100}"
},
"ring": {
"$type": "color",
"$value": "{zinc.600}",
"$description": "Used for focus ring"
},
"secondary": {
"$type": "color",
"$value": "{zinc.800}",
"$description": "Secondary colors for <Button />"
},
"secondary-foreground": {
"$type": "color",
"$value": "{general.white}",
"$description": "Secondary colors for <Button />"
},
"success": {
"$type": "color",
"$value": "{emerald.500}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"success-border": {
"$type": "color",
"$value": "{green.900}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"success-foreground": {
"$type": "color",
"$value": "{green.50}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"table-header": {
"$type": "color",
"$value": "rgba(39, 39, 42, 0.5000)",
"$description": "Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />"
},
"warning": {
"$type": "color",
"$value": "{amber.500}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"warning-border": {
"$type": "color",
"$value": "{amber.900}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"warning-foreground": {
"$type": "color",
"$value": "{amber.100}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"white": {
"$type": "color",
"$value": "{general.white}"
}
}
}
176 changes: 176 additions & 0 deletions packages/design-system/src/tokens/token_color_Light.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
{
"color": {
"accent": {
"$type": "color",
"$value": "{zinc.100}",
"$description": "Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc"
},
"accent-foreground": {
"$type": "color",
"$value": "{zinc.900}",
"$description": "Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc"
},
"background": {
"$type": "color",
"$value": "{general.white}",
"$description": "Default background color of <body />...etc"
},
"black": {
"$type": "color",
"$value": "{general.black}"
},
"border": {
"$type": "color",
"$value": "{zinc.200}",
"$description": "Default border color"
},
"card": {
"$type": "color",
"$value": "{zinc.100}",
"$description": "Background color for <Card />"
},
"card-foreground": {
"$type": "color",
"$value": "{slate.900}",
"$description": "Foreground color for <Card />"
},
"destructive": {
"$type": "color",
"$value": "{red.600}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"destructive-foreground": {
"$type": "color",
"$value": "{general.white}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"error": {
"$type": "color",
"$value": "{red.500}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"error-border": {
"$type": "color",
"$value": "{red.200}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"error-foreground": {
"$type": "color",
"$value": "{red.600}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"foreground": {
"$type": "color",
"$value": "{zinc.950}",
"$description": "Default foreground color of <body />...etc"
},
"information": {
"$type": "color",
"$value": "{blue.100}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"information-border": {
"$type": "color",
"$value": "{blue.200}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"information-foreground": {
"$type": "color",
"$value": "{blue.700}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
Comment on lines +67 to +81
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Fix incorrect descriptions for status colors.

The descriptions for information, success, and warning colors incorrectly reference destructive actions. Update them to reflect their actual purpose.

     "information": {
       "$type": "color",
       "$value": "{blue.100}",
-      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+      "$description": "Used for informational messages and states"
     },
     "success": {
       "$type": "color",
       "$value": "{green.100}",
-      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+      "$description": "Used for success messages and states"
     },
     "warning": {
       "$type": "color",
       "$value": "{amber.500}",
-      "$description": "Used for destructive actions such as <Button variant=\"destructive\">"
+      "$description": "Used for warning messages and states"
     }

Also applies to: 136-150, 156-170

"input": {
"$type": "color",
"$value": "{zinc.200}",
"$description": "Border color for inputs such as <Input />, <Select />, <Textarea />"
},
"muted": {
"$type": "color",
"$value": "{zinc.100}",
"$description": "Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />"
},
"muted-foreground": {
"$type": "color",
"$value": "{zinc.500}",
"$description": "Muted Foreground such as <TabsList />, <Skeleton /> and <Switch />"
},
"popover": {
"$type": "color",
"$value": "{general.white}",
"$description": "Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />"
},
"popover-foreground": {
"$type": "color",
"$value": "{slate.900}",
"$description": "Foreground color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />"
},
"primary": {
"$type": "color",
"$value": "{purple.500}",
"$description": "Primary colors for <Button />"
},
"primary-foreground": {
"$type": "color",
"$value": "{general.white}",
"$description": "Secondary colors for <Button />"
},
"primary-light": {
"$type": "color",
"$value": "{purple.100}"
},
"ring": {
"$type": "color",
"$value": "{zinc.400}",
"$description": "Used for focus ring"
},
"secondary": {
"$type": "color",
"$value": "{zinc.100}",
"$description": "Secondary colors for <Button />"
},
"secondary-foreground": {
"$type": "color",
"$value": "{zinc.900}",
"$description": "Secondary colors for <Button />"
},
"success": {
"$type": "color",
"$value": "{green.100}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"success-border": {
"$type": "color",
"$value": "{green.200}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"success-foreground": {
"$type": "color",
"$value": "{green.700}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"table-header": {
"$type": "color",
"$value": "rgba(244, 244, 245, 0.5000)",
"$description": "Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />"
},
"warning": {
"$type": "color",
"$value": "{amber.500}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"warning-border": {
"$type": "color",
"$value": "{amber.200}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"warning-foreground": {
"$type": "color",
"$value": "{general.white}",
"$description": "Used for destructive actions such as <Button variant=\"destructive\">"
},
"white": {
"$type": "color",
"$value": "{general.white}"
}
}
}
16 changes: 16 additions & 0 deletions packages/design-system/src/tokens/token_icon_size_Mode 1.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"icon size": {
"LG": {
"$type": "number",
"$value": 24
},
"MD": {
"$type": "number",
"$value": 18
},
"XS": {
"$type": "number",
"$value": 16
}
}
}
Loading
Loading