Add color to Tutorials category badge

starknet-io · Dec 14, 2023 · 983423a · 983423a
1 parent 81e0553
commit 983423a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/workspaces/website/src/components/Badge/BadgeStyles.ts b/workspaces/website/src/components/Badge/BadgeStyles.ts
@@ -8,6 +8,10 @@ const community_calls = defineStyle({
   background: "badge-community-calls-bg",
   color: "badge-community-calls-fg",
 });
+const tutorials_and_guides = defineStyle({
+  background: "badge-tutorials-and-guides-bg",
+  color: "badge-tutorials-and-guides-fg",
+});
 const stark_math = defineStyle({
   background: "badge-stark-math-bg",
   color: "badge-stark-math-fg",
@@ -59,6 +63,7 @@ export const badgeTheme = defineStyleConfig({
   variants: {
     developers,
     community_calls,
+    tutorials_and_guides,
     stark_math,
     stark_struck_podcast,
     stark_at_home,

diff --git a/workspaces/website/src/style/tokens.ts b/workspaces/website/src/style/tokens.ts
@@ -136,6 +136,8 @@ export const tokens = {
       "badge-engineering-fg": "#991B1B",
       "badge-community-calls-bg": "#FEF3C7",
       "badge-community-calls-fg": "#92400E",
+      "badge-tutorials-and-guides-bg": "#FBF2B1",
+      "badge-tutorials-and-guides-fg": "#8B7710",
       "badge-stark-math-bg": "#DBEAFE",
       "badge-stark-math-fg": "#1E40AF",
       "badge-governance-bg": "#EDE9FE",
@@ -340,6 +342,8 @@ export const tokens = {
       "badge-engineering-fg": "#991B1B",
       "badge-community-calls-bg": "#FEF3C7",
       "badge-community-calls-fg": "#92400E",
+      "badge-tutorials-and-guides-bg": "#FBF2B1",
+      "badge-tutorials-and-guides-fg": "#8B7710",
       "badge-stark-math-bg": "#DBEAFE",
       "badge-stark-math-fg": "#1E40AF",
       "badge-governance-bg": "#EDE9FE",
@@ -946,6 +950,14 @@ export const semanticTokens = {
       default: tokens.colors.light["badge-community-calls-fg"],
       _dark: tokens.colors.dark["badge-community-calls-fg"],
     },
+    "badge-tutorials-and-guides-bg": {
+      default: tokens.colors.light["badge-tutorials-and-guides-bg"],
+      _dark: tokens.colors.dark["badge-tutorials-and-guides-bg"],
+    },
+    "badge-tutorials-and-guides-fg": {
+      default: tokens.colors.light["badge-tutorials-and-guides-fg"],
+      _dark: tokens.colors.dark["badge-tutorials-and-guides-fg"],
+    },
     "badge-stark-math-bg": {
       default: tokens.colors.light["badge-stark-math-bg"],
       _dark: tokens.colors.dark["badge-stark-math-bg"],