chore: update values

utilitywarehouse · Nov 26, 2024 · 0a77f4f · 0a77f4f
1 parent 1cb0ca7
commit 0a77f4f
Show file tree

Hide file tree

Showing 8 changed files with 764 additions and 0 deletions.
diff --git a/packages/design-tokens/build/css/components/dark/badge.css b/packages/design-tokens/build/css/components/dark/badge.css
@@ -0,0 +1,55 @@
+:root {
+  --badge-outline-grey-border-color: #707070;
+  --badge-outline-grey-foreground-color: #f0f0f0;
+  --badge-outline-grey-inverted-foreground-color: #f0f0f0;
+  --badge-outline-grey-inverted-border-color: #b8b8b8;
+  --badge-outline-green-inverted-border-color: #76d5a1;
+  --badge-outline-green-inverted-foreground-color: #e3faeb;
+  --badge-outline-green-border-color: #76d5a1;
+  --badge-outline-green-foreground-color: #e3faeb;
+  --badge-outline-gold-foreground-color: #fff6e0;
+  --badge-outline-gold-inverted-border-color: #fbc64b;
+  --badge-outline-gold-inverted-foreground-color: #fff6e0;
+  --badge-outline-gold-border-color: #f7b51d;
+  --badge-outline-border-width: 2;
+  --badge-outline-cyan-foreground-color: #dbeaff;
+  --badge-outline-cyan-inverted-foreground-color: #dbeaff;
+  --badge-outline-cyan-inverted-border-color: #5692fb;
+  --badge-outline-cyan-border-color: #5692fb;
+  --badge-outline-red-inverted-border-color: #f2636a;
+  --badge-outline-red-inverted-foreground-color: #ffebeb;
+  --badge-outline-red-border-color: #f24550;
+  --badge-outline-red-foreground-color: #ffebeb;
+  --badge-outline-background-color: #aaaaaa00;
+  --badge-strong-green-foreground-color: #133922;
+  --badge-strong-green-background-color: #90dab2;
+  --badge-strong-cyan-background-color: #75a7fd;
+  --badge-strong-cyan-foreground-color: #010a19;
+  --badge-strong-grey-background-color: #585858;
+  --badge-strong-grey-foreground-color: #0b0b0b;
+  --badge-strong-gold-foreground-color: #2e1103;
+  --badge-strong-gold-background-color: #ffd76f;
+  --badge-strong-red-background-color: #f58e92;
+  --badge-strong-red-foreground-color: #3b1216;
+  --badge-gap: 4;
+  --badge-soft-green-foreground-color: #133922;
+  --badge-soft-green-background-color: #90dab2;
+  --badge-soft-grey-background-color: #c1c1c1;
+  --badge-soft-grey-foreground-color: #0b0b0b;
+  --badge-soft-red-background-color: #f58e92;
+  --badge-soft-red-foreground-color: #3b1216;
+  --badge-soft-cyan-background-color: #75a7fd;
+  --badge-soft-cyan-foreground-color: #010a19;
+  --badge-soft-gold-foreground-color: #2e1103;
+  --badge-soft-gold-background-color: #ffd76f;
+  --badge-web-medium-padding-inline: 16;
+  --badge-font-family: Work Sans;
+  --badge-padding-inline: 8;
+  --badge-app-small-padding-block: 2;
+  --badge-font-size: 14;
+  --badge-border-radius-bottom: 0;
+  --badge-padding-block: 4;
+  --badge-line-height: 16;
+  --badge-border-radius: 4;
+  --badge-font-weight: 400;
+}
diff --git a/packages/design-tokens/build/css/components/light/badge.css b/packages/design-tokens/build/css/components/light/badge.css
@@ -0,0 +1,55 @@
+:root {
+  --badge-outline-grey-border-color: #888888;
+  --badge-outline-grey-foreground-color: #242424;
+  --badge-outline-grey-inverted-foreground-color: #f5f5f5;
+  --badge-outline-grey-inverted-border-color: #b8b8b8;
+  --badge-outline-green-inverted-border-color: #2fb66d;
+  --badge-outline-green-inverted-foreground-color: #eefcf3;
+  --badge-outline-green-border-color: #297f50;
+  --badge-outline-green-foreground-color: #003d1e;
+  --badge-outline-gold-foreground-color: #52210c;
+  --badge-outline-gold-inverted-border-color: #f7b51d;
+  --badge-outline-gold-inverted-foreground-color: #fef9e6;
+  --badge-outline-gold-border-color: #c77800;
+  --badge-outline-border-width: 2;
+  --badge-outline-cyan-foreground-color: #001e52;
+  --badge-outline-cyan-inverted-foreground-color: #ecf4fe;
+  --badge-outline-cyan-inverted-border-color: #4789fa;
+  --badge-outline-cyan-border-color: #0550d1;
+  --badge-outline-red-inverted-border-color: #df2a38;
+  --badge-outline-red-inverted-foreground-color: #ffebeb;
+  --badge-outline-red-border-color: #c31d2a;
+  --badge-outline-red-foreground-color: #3b1216;
+  --badge-outline-background-color: #aaaaaa00;
+  --badge-strong-green-foreground-color: #eefcf3;
+  --badge-strong-green-background-color: #297f50;
+  --badge-strong-cyan-background-color: #0550d1;
+  --badge-strong-cyan-foreground-color: #ecf4fe;
+  --badge-strong-grey-background-color: #c1c1c1;
+  --badge-strong-grey-foreground-color: #242424;
+  --badge-strong-gold-foreground-color: #52210c;
+  --badge-strong-gold-background-color: #ffd76f;
+  --badge-strong-red-background-color: #c31d2a;
+  --badge-strong-red-foreground-color: #ffebeb;
+  --badge-gap: 4;
+  --badge-soft-green-foreground-color: #003d1e;
+  --badge-soft-green-background-color: #bdead0;
+  --badge-soft-grey-background-color: #e3e3e3;
+  --badge-soft-grey-foreground-color: #242424;
+  --badge-soft-red-background-color: #ffb3b4;
+  --badge-soft-red-foreground-color: #3b1216;
+  --badge-soft-cyan-background-color: #a6c8fc;
+  --badge-soft-cyan-foreground-color: #001e52;
+  --badge-soft-gold-foreground-color: #52210c;
+  --badge-soft-gold-background-color: #ffe6a8;
+  --badge-web-medium-padding-inline: 16;
+  --badge-font-family: Work Sans;
+  --badge-padding-inline: 8;
+  --badge-app-small-padding-block: 2;
+  --badge-font-size: 14;
+  --badge-border-radius-bottom: 0;
+  --badge-padding-block: 4;
+  --badge-line-height: 16;
+  --badge-border-radius: 4;
+  --badge-font-weight: 400;
+}
diff --git a/packages/design-tokens/build/js/components/dark/index.d.ts b/packages/design-tokens/build/js/components/dark/index.d.ts
@@ -239,6 +239,115 @@ declare const _default: {
         backgroundColor: string;
         padding: number;
     };
+    badge: {
+        outline: {
+            grey: {
+                borderColor: string;
+                foregroundColor: string;
+                inverted: {
+                    foregroundColor: string;
+                    borderColor: string;
+                };
+            };
+            green: {
+                inverted: {
+                    borderColor: string;
+                    foregroundColor: string;
+                };
+                borderColor: string;
+                foregroundColor: string;
+            };
+            gold: {
+                foregroundColor: string;
+                inverted: {
+                    borderColor: string;
+                    foregroundColor: string;
+                };
+                borderColor: string;
+            };
+            borderWidth: number;
+            cyan: {
+                foregroundColor: string;
+                inverted: {
+                    foregroundColor: string;
+                    borderColor: string;
+                };
+                borderColor: string;
+            };
+            red: {
+                inverted: {
+                    borderColor: string;
+                    foregroundColor: string;
+                };
+                borderColor: string;
+                foregroundColor: string;
+            };
+            backgroundColor: string;
+        };
+        strong: {
+            green: {
+                foregroundColor: string;
+                backgroundColor: string;
+            };
+            cyan: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            grey: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            gold: {
+                foregroundColor: string;
+                backgroundColor: string;
+            };
+            red: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+        };
+        gap: number;
+        soft: {
+            green: {
+                foregroundColor: string;
+                backgroundColor: string;
+            };
+            grey: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            red: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            cyan: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            gold: {
+                foregroundColor: string;
+                backgroundColor: string;
+            };
+        };
+        web: {
+            medium: {
+                paddingInline: number;
+            };
+        };
+        fontFamily: string;
+        paddingInline: number;
+        app: {
+            small: {
+                paddingBlock: number;
+            };
+        };
+        fontSize: number;
+        borderRadiusBottom: number;
+        paddingBlock: number;
+        lineHeight: number;
+        borderRadius: number;
+        fontWeight: number;
+    };
     card: {
         surface: {
             purple: {

diff --git a/packages/design-tokens/build/js/components/dark/index.js b/packages/design-tokens/build/js/components/dark/index.js
@@ -239,6 +239,115 @@ export default {
         "backgroundColor": "#1d1d1d",
         "padding": 4
     },
+    "badge": {
+        "outline": {
+            "grey": {
+                "borderColor": "#707070",
+                "foregroundColor": "#f0f0f0",
+                "inverted": {
+                    "foregroundColor": "#f0f0f0",
+                    "borderColor": "#b8b8b8"
+                }
+            },
+            "green": {
+                "inverted": {
+                    "borderColor": "#76d5a1",
+                    "foregroundColor": "#e3faeb"
+                },
+                "borderColor": "#76d5a1",
+                "foregroundColor": "#e3faeb"
+            },
+            "gold": {
+                "foregroundColor": "#fff6e0",
+                "inverted": {
+                    "borderColor": "#fbc64b",
+                    "foregroundColor": "#fff6e0"
+                },
+                "borderColor": "#f7b51d"
+            },
+            "borderWidth": 2,
+            "cyan": {
+                "foregroundColor": "#dbeaff",
+                "inverted": {
+                    "foregroundColor": "#dbeaff",
+                    "borderColor": "#5692fb"
+                },
+                "borderColor": "#5692fb"
+            },
+            "red": {
+                "inverted": {
+                    "borderColor": "#f2636a",
+                    "foregroundColor": "#ffebeb"
+                },
+                "borderColor": "#f24550",
+                "foregroundColor": "#ffebeb"
+            },
+            "backgroundColor": "#aaaaaa00"
+        },
+        "strong": {
+            "green": {
+                "foregroundColor": "#133922",
+                "backgroundColor": "#90dab2"
+            },
+            "cyan": {
+                "backgroundColor": "#75a7fd",
+                "foregroundColor": "#010a19"
+            },
+            "grey": {
+                "backgroundColor": "#585858",
+                "foregroundColor": "#0b0b0b"
+            },
+            "gold": {
+                "foregroundColor": "#2e1103",
+                "backgroundColor": "#ffd76f"
+            },
+            "red": {
+                "backgroundColor": "#f58e92",
+                "foregroundColor": "#3b1216"
+            }
+        },
+        "gap": 4,
+        "soft": {
+            "green": {
+                "foregroundColor": "#133922",
+                "backgroundColor": "#90dab2"
+            },
+            "grey": {
+                "backgroundColor": "#c1c1c1",
+                "foregroundColor": "#0b0b0b"
+            },
+            "red": {
+                "backgroundColor": "#f58e92",
+                "foregroundColor": "#3b1216"
+            },
+            "cyan": {
+                "backgroundColor": "#75a7fd",
+                "foregroundColor": "#010a19"
+            },
+            "gold": {
+                "foregroundColor": "#2e1103",
+                "backgroundColor": "#ffd76f"
+            }
+        },
+        "web": {
+            "medium": {
+                "paddingInline": 16
+            }
+        },
+        "fontFamily": "Work Sans",
+        "paddingInline": 8,
+        "app": {
+            "small": {
+                "paddingBlock": 2
+            }
+        },
+        "fontSize": 14,
+        "borderRadiusBottom": 0,
+        "paddingBlock": 4,
+        "lineHeight": 16,
+        "borderRadius": 4,
+        "fontWeight": 400
+    },
     "card": {
         "surface": {
             "purple": {