@telegraph/tokens 0.0.0

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAahB,CAAC"}

package/dist/index.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tgph = void 0;
+const color_1 = require("./semantic/color");
+const rounded_1 = require("./semantic/rounded");
+const spacing_1 = require("./semantic/spacing");
+const color_2 = require("./tokens/color");
+const font_1 = require("./tokens/font");
+const rounded_2 = require("./tokens/rounded");
+const shadow_1 = require("./tokens/shadow");
+const spacing_2 = require("./tokens/spacing");
+exports.tgph = {
+    tokens: {
+        color: color_2.color,
+        font: font_1.font,
+        rounded: rounded_2.rounded,
+        shadow: shadow_1.shadow,
+        spacing: spacing_2.spacing,
+    },
+    semantic: {
+        color: color_1.semanticColor,
+        spacing: spacing_1.semanticSpacing,
+        rounded: rounded_1.semanticRounded,
+    },
+};

package/dist/light.css

@@ -0,0 +1 @@
+:root{--tgph-surface:#fff;--tgph-gray-1:#fcfcfd;--tgph-gray-2:#f9f9fb;--tgph-gray-3:#f0f0f3;--tgph-gray-4:#e8e8ec;--tgph-gray-5:#e0e1e6;--tgph-gray-6:#d9d9e0;--tgph-gray-7:#cdced6;--tgph-gray-8:#b9bbc6;--tgph-gray-9:#8b8d98;--tgph-gray-10:#80838d;--tgph-gray-11:#60646c;--tgph-gray-12:#1c2024;--tgph-beige-1:#fdfdfc;--tgph-beige-2:#f9f9f8;--tgph-beige-3:#f1f0ef;--tgph-beige-4:#e9e8e6;--tgph-beige-5:#e2e1de;--tgph-beige-6:#dad9d6;--tgph-beige-7:#cfceca;--tgph-beige-8:#bcbbb5;--tgph-beige-9:#8d8d86;--tgph-beige-10:#82827c;--tgph-beige-11:#63635e;--tgph-beige-12:#21201c;--tgph-accent-1:#fffcfc;--tgph-accent-2:#fff8f7;--tgph-accent-3:#feebe7;--tgph-accent-4:#ffdcd3;--tgph-accent-5:#ffcdc2;--tgph-accent-6:#fdbdaf;--tgph-accent-7:#f5a898;--tgph-accent-8:#ec8e7b;--tgph-accent-9:#e54d2e;--tgph-accent-10:#dd4425;--tgph-accent-11:#d13415;--tgph-accent-12:#5c271f;--tgph-green-1:#fbfefd;--tgph-green-2:#f4fbf7;--tgph-green-3:#e6f7ed;--tgph-green-4:#d6f1e3;--tgph-green-5:#c3e9d7;--tgph-green-6:#acdec8;--tgph-green-7:#8bceb6;--tgph-green-8:#56ba9f;--tgph-green-9:#29a383;--tgph-green-10:#26997b;--tgph-green-11:#208368;--tgph-green-12:#1d3b31;--tgph-yellow-1:#fbfefd;--tgph-yellow-2:#f4fbf7;--tgph-yellow-3:#e6f7ed;--tgph-yellow-4:#d6f1e3;--tgph-yellow-5:#c3e9d7;--tgph-yellow-6:#acdec8;--tgph-yellow-7:#8bceb6;--tgph-yellow-8:#56ba9f;--tgph-yellow-9:#29a383;--tgph-yellow-10:#26997b;--tgph-yellow-11:#208368;--tgph-yellow-12:#1d3b31;--tgph-blue-1:#fdfdfe;--tgph-blue-2:#f7f9ff;--tgph-blue-3:#edf2fe;--tgph-blue-4:#e1e9ff;--tgph-blue-5:#d2deff;--tgph-blue-6:#c1d0ff;--tgph-blue-7:#abbdf9;--tgph-blue-8:#8da4ef;--tgph-blue-9:#3e63dd;--tgph-blue-10:#3358d4;--tgph-blue-11:#3a5bc7;--tgph-blue-12:#1f2d5c;--tgph-red-1:#fffcfd;--tgph-red-2:#fff7f8;--tgph-red-3:#feeaed;--tgph-red-4:#ffdce1;--tgph-red-5:#ffced6;--tgph-red-6:#f8bfc8;--tgph-red-7:#efacb8;--tgph-red-8:#e592a3;--tgph-red-9:#e54666;--tgph-red-10:#dc3b5d;--tgph-red-11:#ca244d;--tgph-red-12:#64172b;--tgph-transparent:transparent;--tgph-white:#fff;--tgph-black:#000;--tgph-alpha-white-1:#ffffff0d;--tgph-alpha-white-2:#ffffff1a;--tgph-alpha-white-3:#ffffff26;--tgph-alpha-white-4:#fff3;--tgph-alpha-white-5:#ffffff4d;--tgph-alpha-white-6:#fff6;--tgph-alpha-white-7:#ffffff80;--tgph-alpha-white-8:#fff9;--tgph-alpha-white-9:#ffffffb3;--tgph-alpha-white-10:#fffc;--tgph-alpha-white-11:#ffffffe6;--tgph-alpha-white-12:#fffffff2;--tgph-alpha-black-1:#0000000d;--tgph-alpha-black-2:#0000001a;--tgph-alpha-black-3:#00000026;--tgph-alpha-black-4:#0003;--tgph-alpha-black-5:#0000004d;--tgph-alpha-black-6:#0006;--tgph-alpha-black-7:#00000080;--tgph-alpha-black-8:#0009;--tgph-alpha-black-9:#000000b3;--tgph-alpha-black-10:#000c;--tgph-alpha-black-11:#000000e6;--tgph-alpha-black-12:#000000f2;--tgph-font-family-sans:Inter,sans-serif;--tgph-font-family-mono:Menlo,serif;--tgph-font-body-family:Inter,sans-serif;--tgph-font-body-size-0:.6875rem;--tgph-font-body-size-1:.75rem;--tgph-font-body-size-2:.875rem;--tgph-font-body-size-3:1rem;--tgph-font-body-size-4:1.125rem;--tgph-font-body-size-5:1.25rem;--tgph-font-body-size-6:1.5rem;--tgph-font-body-size-7:1.875rem;--tgph-font-body-size-8:2.25rem;--tgph-font-body-size-9:3rem;--tgph-font-body-leading-0:1rem;--tgph-font-body-leading-1:1rem;--tgph-font-body-leading-2:1.25rem;--tgph-font-body-leading-3:1.5rem;--tgph-font-body-leading-4:1.125rem;--tgph-font-body-leading-5:1.25rem;--tgph-font-body-leading-6:1.5rem;--tgph-font-body-leading-7:1.875rem;--tgph-font-body-leading-8:2.25rem;--tgph-font-body-leading-9:3rem;--tgph-font-body-tracking-0:0.25%;--tgph-font-body-tracking-1:0.25%;--tgph-font-body-tracking-2:0;--tgph-font-body-tracking-3:0;--tgph-font-body-tracking-4:-0.25%;--tgph-font-body-tracking-5:-0.5%;--tgph-font-body-tracking-6:-0.625%;--tgph-font-body-tracking-7:-0.75%;--tgph-font-body-tracking-8:-1%;--tgph-font-body-tracking-9:-2.5%;--tgph-font-code-family:Menlo,serif;--tgph-rounded-0:0px;--tgph-rounded-1:.125rem;--tgph-rounded-2:.25rem;--tgph-rounded-3:.375rem;--tgph-rounded-4:.5rem;--tgph-rounded-5:.75rem;--tgph-rounded-6:1rem;--tgph-rounded-full:9999px;--tgph-shadow-0:0 0 #000;--tgph-shadow-1:0px 0px 1px 0px rgba(28, 32, 36, 0.06),0px 1px 1px 0px rgba(28, 32, 36, 0.05), 0px 3px 2px 0px rgba(28, 32, 36, 0.03), 0px 5px 2px 0px rgba(28, 32, 36, 0.01);--tgph-shadow-2:0px 1px 2px 0px rgba(28, 32, 36, 0.06),0px 4px 4px 0px rgba(28, 32, 36, 0.05),0px 9px 6px 0px rgba(28, 32, 36, 0.03),0px 16px 7px 0px rgba(28, 32, 36, 0.01);--tgph-shadow-3:0px 2px 4px 0px rgba(28, 32, 36, 0.06),0px 7px 7px 0px rgba(28, 32, 36, 0.05),0px 16px 10px 0px rgba(28, 32, 36, 0.03),0px 29px 12px 0px rgba(28, 32, 36, 0.01);--tgph-shadow-inner:inset 0px 0px 1px 0px rgba(28, 32, 36, 0.06),inset 0px 1px 1px 0px rgba(28, 32, 36, 0.05), inset 0px 3px 2px 0px rgba(28, 32, 36, 0.03),inset 0px 5px 2px 0px rgba(28, 32, 36, 0.01);--tgph-spacing-0:0px;--tgph-spacing-1:.25rem;--tgph-spacing-2:.5rem;--tgph-spacing-3:.75rem;--tgph-spacing-4:1rem;--tgph-spacing-5:1.25rem;--tgph-spacing-6:1.5rem;--tgph-spacing-7:1.75rem;--tgph-spacing-8:2rem;--tgph-spacing-9:2.25rem;--tgph-spacing-10:2.5rem;--tgph-spacing-11:2.75rem;--tgph-spacing-12:3rem;--tgph-spacing-14:3.5rem;--tgph-spacing-16:4rem;--tgph-spacing-20:5rem;--tgph-spacing-24:6rem;--tgph-spacing-28:7rem;--tgph-spacing-32:8rem;--tgph-spacing-36:9rem;--tgph-spacing-40:10rem;--tgph-spacing-44:11rem;--tgph-spacing-48:12rem;--tgph-spacing-52:13rem;--tgph-spacing-56:14rem;--tgph-spacing-60:15rem;--tgph-spacing-64:16rem;--tgph-spacing-72:18rem;--tgph-spacing-80:20rem;--tgph-spacing-96:24rem;--tgph-spacing-px:1px}

package/dist/semantic/color.d.ts

@@ -0,0 +1,274 @@
+export declare const semanticColor: {
+    text: {
+        primary: {
+            black: string | undefined;
+            white: string | undefined;
+            gray: {
+                light: string;
+                dark: string;
+            };
+            beige: {
+                light: string;
+                dark: string;
+            };
+            accent: {
+                light: string;
+                dark: string;
+            };
+            green: {
+                light: string;
+                dark: string;
+            };
+            yellow: {
+                light: string;
+                dark: string;
+            };
+            blue: {
+                light: string;
+                dark: string;
+            };
+            red: {
+                light: string;
+                dark: string;
+            };
+            disabled: {
+                light: string;
+                dark: string;
+            };
+        };
+        secondary: {
+            black: string | undefined;
+            white: string | undefined;
+            gray: {
+                light: string;
+                dark: string;
+            };
+            beige: {
+                light: string;
+                dark: string;
+            };
+            accent: {
+                light: string;
+                dark: string;
+            };
+            green: {
+                light: string;
+                dark: string;
+            };
+            yellow: {
+                light: string;
+                dark: string;
+            };
+            blue: {
+                light: string;
+                dark: string;
+            };
+            red: {
+                light: string;
+                dark: string;
+            };
+            disabled: {
+                light: string;
+                dark: string;
+            };
+        };
+    };
+    button: {
+        solid: {
+            background: {
+                accent: {
+                    default: {
+                        light: string;
+                        dark: string;
+                    };
+                    hover: {
+                        light: string;
+                        dark: string;
+                    };
+                    focus: {
+                        light: string;
+                        dark: string;
+                    };
+                };
+                disabled: {
+                    default: {
+                        light: string;
+                        dark: string;
+                    };
+                };
+            };
+            text: {
+                accent: string;
+                disabled: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            stroke: {
+                accent: string;
+                disabled: {
+                    light: string;
+                    dark: string;
+                };
+            };
+        };
+        ghost: {
+            background: {
+                accent: {
+                    default: string;
+                    hover: {
+                        light: string;
+                        dark: string;
+                    };
+                    focus: {
+                        light: string;
+                        dark: string;
+                    };
+                };
+                gray: {
+                    default: string;
+                    hover: {
+                        light: string;
+                        dark: string;
+                    };
+                    focus: {
+                        light: string;
+                        dark: string;
+                    };
+                };
+                red: {
+                    default: string;
+                    hover: {
+                        light: string;
+                        dark: string;
+                    };
+                    focus: {
+                        light: string;
+                        dark: string;
+                    };
+                };
+                disabled: {
+                    default: string;
+                };
+            };
+            text: {
+                accent: {
+                    light: string;
+                    dark: string;
+                };
+                gray: {
+                    light: string;
+                    dark: string;
+                };
+                red: {
+                    light: string;
+                    dark: string;
+                };
+                disabled: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            icon: {
+                accent: {
+                    light: string;
+                    dark: string;
+                };
+                gray: {
+                    light: string;
+                    dark: string;
+                };
+                red: {
+                    light: string;
+                    dark: string;
+                };
+                disabled: {
+                    light: string;
+                    dark: string;
+                };
+            };
+        };
+        soft: {
+            background: {
+                red: {
+                    active: {
+                        light: string;
+                        dark: string;
+                    };
+                    hover: {
+                        light: string;
+                        dark: string;
+                    };
+                    focus: {
+                        light: string;
+                        dark: string;
+                    };
+                };
+                disabled: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            text: {
+                red: string;
+                disabled: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            icon: {
+                red: string;
+                disabled: {
+                    light: string;
+                    dark: string;
+                };
+            };
+        };
+        outlined: {
+            background: {
+                gray: string;
+                disabled: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            border: {
+                gray: {
+                    active: {
+                        light: string;
+                        dark: string;
+                    };
+                    hover: {
+                        light: string;
+                        dark: string;
+                    };
+                    focus: {
+                        light: string;
+                        dark: string;
+                    };
+                };
+            };
+            text: {
+                gray: {
+                    light: string;
+                    dark: string;
+                };
+                disabled: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            icon: {
+                gray: {
+                    light: string;
+                    dark: string;
+                };
+                disabled: {
+                    light: string;
+                    dark: string;
+                };
+            };
+        };
+    };
+};
+//# sourceMappingURL=color.d.ts.map

package/dist/semantic/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/semantic/color.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HzB,CAAC"}

package/dist/semantic/color.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.semanticColor = void 0;
+const color_1 = require("../tokens/color");
+exports.semanticColor = {
+    text: {
+        primary: {
+            black: color_1.color.black[12],
+            white: color_1.color.white[12],
+            gray: color_1.color.gray[12],
+            beige: color_1.color.beige[12],
+            accent: color_1.color.accent[12],
+            green: color_1.color.green[12],
+            yellow: color_1.color.yellow[12],
+            blue: color_1.color.blue[12],
+            red: color_1.color.red[12],
+            disabled: color_1.color.gray[8],
+        },
+        secondary: {
+            black: color_1.color.black[11],
+            white: color_1.color.white[11],
+            gray: color_1.color.gray[11],
+            beige: color_1.color.beige[11],
+            accent: color_1.color.accent[11],
+            green: color_1.color.green[11],
+            yellow: color_1.color.yellow[11],
+            blue: color_1.color.blue[11],
+            red: color_1.color.red[11],
+            disabled: color_1.color.gray[8],
+        },
+    },
+    // color.button.solid.background.accent.focus
+    button: {
+        solid: {
+            background: {
+                accent: {
+                    default: color_1.color.accent[9],
+                    hover: color_1.color.accent[10],
+                    focus: color_1.color.accent[11],
+                },
+                disabled: {
+                    default: color_1.color.gray[2],
+                },
+            },
+            text: {
+                accent: color_1.color.white,
+                disabled: color_1.color.gray[8],
+            },
+            stroke: {
+                accent: color_1.color.white,
+                disabled: color_1.color.gray[8],
+            },
+        },
+        ghost: {
+            background: {
+                accent: {
+                    default: color_1.color.transparent,
+                    hover: color_1.color.accent[3],
+                    focus: color_1.color.accent[4],
+                },
+                gray: {
+                    default: color_1.color.transparent,
+                    hover: color_1.color.gray[3],
+                    focus: color_1.color.gray[4],
+                },
+                red: {
+                    default: color_1.color.transparent,
+                    hover: color_1.color.red[3],
+                    focus: color_1.color.red[4],
+                },
+                disabled: {
+                    default: color_1.color.transparent,
+                },
+            },
+            text: {
+                accent: color_1.color.accent[11],
+                gray: color_1.color.gray[11],
+                red: color_1.color.red[11],
+                disabled: color_1.color.gray[8],
+            },
+            icon: {
+                accent: color_1.color.accent[11],
+                gray: color_1.color.gray[11],
+                red: color_1.color.red[11],
+                disabled: color_1.color.gray[8],
+            },
+        },
+        soft: {
+            background: {
+                red: {
+                    active: color_1.color.red[3],
+                    hover: color_1.color.red[4],
+                    focus: color_1.color.red[5],
+                },
+                disabled: color_1.color.gray[2],
+            },
+            text: {
+                red: color_1.color.white,
+                disabled: color_1.color.gray[8],
+            },
+            icon: {
+                red: color_1.color.white,
+                disabled: color_1.color.gray[8],
+            },
+        },
+        outlined: {
+            background: {
+                gray: color_1.color.transparent,
+                disabled: color_1.color.gray[2],
+            },
+            border: {
+                gray: {
+                    active: color_1.color.gray[6],
+                    hover: color_1.color.gray[7],
+                    focus: color_1.color.gray[8],
+                },
+            },
+            text: {
+                gray: color_1.color.gray[12],
+                disabled: color_1.color.gray[8],
+            },
+            icon: {
+                gray: color_1.color.gray[12],
+                disabled: color_1.color.gray[8],
+            },
+        },
+    },
+};

package/dist/semantic/rounded.d.ts

@@ -0,0 +1,4 @@
+export declare const semanticRounded: {
+    button: string;
+};
+//# sourceMappingURL=rounded.d.ts.map

package/dist/semantic/rounded.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rounded.d.ts","sourceRoot":"","sources":["../../src/semantic/rounded.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;CAE3B,CAAC"}

package/dist/semantic/rounded.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.semanticRounded = void 0;
+const rounded_1 = require("../tokens/rounded");
+exports.semanticRounded = {
+    button: rounded_1.rounded[2],
+};

package/dist/semantic/spacing.d.ts

@@ -0,0 +1,20 @@
+export declare const semanticSpacing: {
+    button: {
+        height: {
+            1: string;
+            2: string;
+            3: string;
+        };
+        gap: {
+            1: string;
+            2: string;
+            3: string;
+        };
+        padding: {
+            1: string;
+            2: string;
+            3: string;
+        };
+    };
+};
+//# sourceMappingURL=spacing.d.ts.map

package/dist/semantic/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/semantic/spacing.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;CAkB3B,CAAC"}

package/dist/semantic/spacing.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.semanticSpacing = void 0;
+const spacing_1 = require("../tokens/spacing");
+exports.semanticSpacing = {
+    button: {
+        height: {
+            1: spacing_1.spacing[6],
+            2: spacing_1.spacing[8],
+            3: spacing_1.spacing[10],
+        },
+        gap: {
+            1: spacing_1.spacing[1],
+            2: spacing_1.spacing[2],
+            3: spacing_1.spacing[3],
+        },
+        padding: {
+            1: spacing_1.spacing[2],
+            2: spacing_1.spacing[3],
+            3: spacing_1.spacing[4],
+        },
+    },
+};

package/dist/semantic.css

@@ -0,0 +1 @@
+:root{--tgph-color-text-primary-gray:var(--tgph-gray-12);--tgph-color-text-primary-beige:var(--tgph-beige-12);--tgph-color-text-primary-accent:var(--tgph-accent-12);--tgph-color-text-primary-green:var(--tgph-green-12);--tgph-color-text-primary-yellow:var(--tgph-green-12);--tgph-color-text-primary-blue:var(--tgph-blue-12);--tgph-color-text-primary-red:var(--tgph-red-12);--tgph-color-text-primary-disabled:var(--tgph-gray-8);--tgph-color-text-secondary-gray:var(--tgph-gray-11);--tgph-color-text-secondary-beige:var(--tgph-beige-11);--tgph-color-text-secondary-accent:var(--tgph-accent-11);--tgph-color-text-secondary-green:var(--tgph-green-11);--tgph-color-text-secondary-yellow:var(--tgph-green-11);--tgph-color-text-secondary-blue:var(--tgph-blue-11);--tgph-color-text-secondary-red:var(--tgph-red-11);--tgph-color-text-secondary-disabled:var(--tgph-gray-8);--tgph-color-button-solid-background-accent-default:var(--tgph-accent-9);--tgph-color-button-solid-background-accent-default-dark:var(--tgph-accent-9);--tgph-color-button-solid-background-accent-hover:var(--tgph-accent-10);--tgph-color-button-solid-background-accent-focus:var(--tgph-accent-11);--tgph-color-button-solid-background-disabled-default:var(--tgph-gray-2);--tgph-color-button-solid-text-accent:var(--tgph-white);--tgph-color-button-solid-text-disabled:var(--tgph-gray-8);--tgph-color-button-solid-stroke-accent:var(--tgph-white);--tgph-color-button-solid-stroke-disabled:var(--tgph-gray-8);--tgph-color-button-ghost-background-accent-default:var(--tgph-transparent);--tgph-color-button-ghost-background-accent-hover:var(--tgph-accent-3);--tgph-color-button-ghost-background-accent-focus:var(--tgph-accent-4);--tgph-color-button-ghost-background-gray-default:var(--tgph-transparent);--tgph-color-button-ghost-background-gray-hover:var(--tgph-gray-3);--tgph-color-button-ghost-background-gray-focus:var(--tgph-gray-4);--tgph-color-button-ghost-background-red-default:var(--tgph-transparent);--tgph-color-button-ghost-background-red-hover:var(--tgph-red-3);--tgph-color-button-ghost-background-red-focus:var(--tgph-red-4);--tgph-color-button-ghost-background-disabled-default:var(--tgph-transparent);--tgph-color-button-ghost-text-accent:var(--tgph-accent-11);--tgph-color-button-ghost-text-gray:var(--tgph-gray-11);--tgph-color-button-ghost-text-red:var(--tgph-red-11);--tgph-color-button-ghost-text-disabled:var(--tgph-gray-8);--tgph-color-button-ghost-icon-accent:var(--tgph-accent-11);--tgph-color-button-ghost-icon-gray:var(--tgph-gray-11);--tgph-color-button-ghost-icon-red:var(--tgph-red-11);--tgph-color-button-ghost-icon-disabled:var(--tgph-gray-8);--tgph-color-button-soft-background-red-active:var(--tgph-red-3);--tgph-color-button-soft-background-red-hover:var(--tgph-red-4);--tgph-color-button-soft-background-red-focus:var(--tgph-red-5);--tgph-color-button-soft-background-disabled:var(--tgph-gray-2);--tgph-color-button-soft-text-red:var(--tgph-white);--tgph-color-button-soft-text-disabled:var(--tgph-gray-8);--tgph-color-button-soft-icon-red:var(--tgph-white);--tgph-color-button-soft-icon-disabled:var(--tgph-gray-8);--tgph-color-button-outlined-background-gray:var(--tgph-transparent);--tgph-color-button-outlined-background-disabled:var(--tgph-gray-2);--tgph-color-button-outlined-border-gray-active:var(--tgph-gray-6);--tgph-color-button-outlined-border-gray-hover:var(--tgph-gray-7);--tgph-color-button-outlined-border-gray-focus:var(--tgph-gray-8);--tgph-color-button-outlined-text-gray:var(--tgph-gray-12);--tgph-color-button-outlined-text-disabled:var(--tgph-gray-8);--tgph-color-button-outlined-icon-gray:var(--tgph-gray-12);--tgph-color-button-outlined-icon-disabled:var(--tgph-gray-8);--tgph-spacing-button-height-1:var(--tgph-spacing-6);--tgph-spacing-button-height-2:var(--tgph-spacing-8);--tgph-spacing-button-height-3:var(--tgph-spacing-10);--tgph-spacing-button-gap-1:var(--tgph-spacing-1);--tgph-spacing-button-gap-2:var(--tgph-spacing-2);--tgph-spacing-button-gap-3:var(--tgph-spacing-3);--tgph-spacing-button-padding-1:var(--tgph-spacing-2);--tgph-spacing-button-padding-2:var(--tgph-spacing-3);--tgph-spacing-button-padding-3:var(--tgph-spacing-4);--tgph-rounded-button:var(--tgph-rounded-2)}