@cobwds/mcp-server 1.19.3

package/data/tokens/tokens.css

@@ -0,0 +1,479 @@
+/*!
+ * City of Boston Web Design System v1.19.3
+ * Description: A web design system for the City of Boston's digital products.
+ * Repository: https://github.com/CityOfBoston/nywds-poc
+ * License: MIT
+ */
+/* -------------------------------------------
+ *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
+ * ------------------------------------------- */
+
+:root {
+  --cob-border-width-lg: 4px;
+  --cob-border-width-md: 2px;
+  --cob-border-width-sm: 1px;
+  --cob-color-accent: var(--cob-color-freedom-trail-red);
+  --cob-color-admin-orange-10: #fcf4ef;
+  --cob-color-admin-orange-50: #f9e9e0;
+  --cob-color-admin-orange-100: #f3d3c1;
+  --cob-color-admin-orange-200: #e7b59c;
+  --cob-color-admin-orange-300: #db9778;
+  --cob-color-admin-orange-400: #d07954;
+  --cob-color-admin-orange-500: #c0623b;
+  --cob-color-admin-orange-600: #b14b22;
+  --cob-color-admin-orange-700: #a2350a;
+  --cob-color-admin-orange-800: #752607;
+  --cob-color-admin-orange-900: #481704;
+  --cob-color-base: var(--cob-color-neutral-600);
+  --cob-color-base-weak: var(--cob-color-neutral-10);
+  --cob-color-black: #000000;
+  --cob-color-black-transparent-50: #00000003;
+  --cob-color-black-transparent-100: #0000001a;
+  --cob-color-black-transparent-200: #00000033;
+  --cob-color-black-transparent-300: #0000004d;
+  --cob-color-black-transparent-400: #00000066;
+  --cob-color-black-transparent-500: #00000080;
+  --cob-color-black-transparent-600: #00000099;
+  --cob-color-black-transparent-700: #000000b3;
+  --cob-color-black-transparent-800: #000000cc;
+  --cob-color-black-transparent-900: #000000e6;
+  --cob-color-blue-10: #e8f4fc;
+  --cob-color-blue-50: #cee4f4;
+  --cob-color-blue-100: #b4d3ec;
+  --cob-color-blue-200: #9ac3e4;
+  --cob-color-blue-300: #80b2dc;
+  --cob-color-blue-400: #66a2d5;
+  --cob-color-blue-500: #4c92cd;
+  --cob-color-blue-600: #3281c5;
+  --cob-color-blue-700: var(--cob-color-optimistic-blue);
+  --cob-color-blue-800: #104876;
+  --cob-color-blue-900: var(--cob-color-charles-blue);
+  --cob-color-business-teal-10: #f2f6f6;
+  --cob-color-business-teal-50: #e5eded;
+  --cob-color-business-teal-100: #c5d8d9;
+  --cob-color-business-teal-200: #a5c3c5;
+  --cob-color-business-teal-300: #85aeb1;
+  --cob-color-business-teal-400: #65999e;
+  --cob-color-business-teal-500: #387b82;
+  --cob-color-business-teal-600: #0b5d66;
+  --cob-color-business-teal-700: #084b52;
+  --cob-color-business-teal-800: #05393f;
+  --cob-color-business-teal-900: #02272c;
+  --cob-color-charles-blue: #091f2f;
+  --cob-color-danger: var(--cob-color-red-600);
+  --cob-color-danger-strong: var(--cob-color-red-800);
+  --cob-color-danger-weak: var(--cob-color-red-50);
+  --cob-color-emergency: var(--cob-color-red-800);
+  --cob-color-emergency-weak: var(--cob-color-red-300);
+  --cob-color-environment-green-10: #f5f7f6;
+  --cob-color-environment-green-50: #ecf0ee;
+  --cob-color-environment-green-100: #d9e1dd;
+  --cob-color-environment-green-200: #bac6bf;
+  --cob-color-environment-green-300: #9caba1;
+  --cob-color-environment-green-400: #7e9084;
+  --cob-color-environment-green-500: #5f7566;
+  --cob-color-environment-green-600: #415a48;
+  --cob-color-environment-green-700: #233f2b;
+  --cob-color-environment-green-800: #172a1c;
+  --cob-color-environment-green-900: #0b150e;
+  --cob-color-focus: var(--cob-color-blue-600);
+  --cob-color-focus-reverse: var(--cob-color-blue-300);
+  --cob-color-freedom-trail-red: #fb4d42;
+  --cob-color-green-10: #f3f8f4;
+  --cob-color-green-50: #e8f1ea;
+  --cob-color-green-100: #d2e3d5;
+  --cob-color-green-200: #aecdb3;
+  --cob-color-green-300: #8ab792;
+  --cob-color-green-400: #66a170;
+  --cob-color-green-500: #428b4f;
+  --cob-color-green-600: #1e752e;
+  --cob-color-green-700: #165923;
+  --cob-color-green-800: #0f3d18;
+  --cob-color-green-900: #08210d;
+  --cob-color-health-purple-10: #f4f4f8;
+  --cob-color-health-purple-50: #e9eaf1;
+  --cob-color-health-purple-100: #d3d5e3;
+  --cob-color-health-purple-200: #bbb8cc;
+  --cob-color-health-purple-300: #a39bb6;
+  --cob-color-health-purple-400: #8b7fa0;
+  --cob-color-health-purple-500: #736289;
+  --cob-color-health-purple-600: #5b4573;
+  --cob-color-health-purple-700: #43285d;
+  --cob-color-health-purple-800: #2c1a3e;
+  --cob-color-health-purple-900: #160d1f;
+  --cob-color-info: var(--cob-color-blue-600);
+  --cob-color-info-strong: var(--cob-color-blue-800);
+  --cob-color-info-weak: var(--cob-color-blue-50);
+  --cob-color-ink: var(--cob-color-neutral-900);
+  --cob-color-ink-reverse: var(--cob-color-white);
+  --cob-color-link: var(--cob-color-blue-600);
+  --cob-color-link-neutral: var(--cob-color-neutral-900);
+  --cob-color-link-reverse: var(--cob-color-neutral-300);
+  --cob-color-link-reverse-neutral: var(--cob-color-white);
+  --cob-color-link-reverse-strong: var(--cob-color-neutral-50);
+  --cob-color-link-reverse-strongest: var(--cob-color-white);
+  --cob-color-link-strong: var(--cob-color-blue-700);
+  --cob-color-link-strongest: var(--cob-color-blue-800);
+  --cob-color-local-brown-10: #f6f5f4;
+  --cob-color-local-brown-50: #eeebe9;
+  --cob-color-local-brown-100: #ddd7d3;
+  --cob-color-local-brown-200: #c3b9b3;
+  --cob-color-local-brown-300: #a99b94;
+  --cob-color-local-brown-400: #8f7d75;
+  --cob-color-local-brown-500: #745e55;
+  --cob-color-local-brown-600: #5a4036;
+  --cob-color-local-brown-700: #402217;
+  --cob-color-local-brown-800: #2a160f;
+  --cob-color-local-brown-900: #150b07;
+  --cob-color-neutral-10: #f6f6f6;
+  --cob-color-neutral-50: #ededed;
+  --cob-color-neutral-100: #d0d0ce;
+  --cob-color-neutral-200: #bec0c1;
+  --cob-color-neutral-300: #a7a9ab;
+  --cob-color-neutral-400: #909395;
+  --cob-color-neutral-500: #797c7f;
+  --cob-color-neutral-600: #62666a;
+  --cob-color-neutral-700: #4a4d4f;
+  --cob-color-neutral-800: #323435;
+  --cob-color-neutral-900: #1b1b1b;
+  --cob-color-optimistic-blue: #1871bd;
+  --cob-color-red-10: #fbf4f4;
+  --cob-color-red-50: #f7eaea;
+  --cob-color-red-100: #f0d5d5;
+  --cob-color-red-200: #e4b3b3;
+  --cob-color-red-300: #d89191;
+  --cob-color-red-400: #cc6f6f;
+  --cob-color-red-500: #c04d4d;
+  --cob-color-red-600: #b52c2c;
+  --cob-color-red-700: #932424;
+  --cob-color-red-800: #721c1c;
+  --cob-color-red-900: #511414;
+  --cob-color-safety-gray-10: #f2f5f6;
+  --cob-color-safety-gray-50: #e5ebed;
+  --cob-color-safety-gray-100: #cdd6da;
+  --cob-color-safety-gray-200: #b5c1c8;
+  --cob-color-safety-gray-300: #9dacb5;
+  --cob-color-safety-gray-400: #8697a3;
+  --cob-color-safety-gray-500: #6f8391;
+  --cob-color-safety-gray-600: #59707f;
+  --cob-color-safety-gray-700: #435d6e;
+  --cob-color-safety-gray-800: #30424f;
+  --cob-color-safety-gray-900: #1d2830;
+  --cob-color-state-blue-10: #f7fafd;
+  --cob-color-state-blue-50: #eff6fb;
+  --cob-color-state-blue-100: #cddde9;
+  --cob-color-state-blue-200: #abc4d8;
+  --cob-color-state-blue-300: #89abc7;
+  --cob-color-state-blue-400: #6792b6;
+  --cob-color-state-blue-500: #457aa5;
+  --cob-color-state-blue-600: #2d618c;
+  --cob-color-state-blue-700: #154973;
+  --cob-color-state-blue-800: #0e324f;
+  --cob-color-state-blue-900: #081b2b;
+  --cob-color-success: var(--cob-color-green-600);
+  --cob-color-success-strong: var(--cob-color-green-800);
+  --cob-color-success-weak: var(--cob-color-green-50);
+  --cob-color-surface: var(--cob-color-white);
+  --cob-color-surface-raised: var(--cob-color-neutral-10);
+  --cob-color-surface-reverse: var(--cob-color-neutral-900);
+  --cob-color-text: var(--cob-color-neutral-900);
+  --cob-color-text-disabled: var(--cob-color-neutral-200);
+  --cob-color-text-reverse: var(--cob-color-white);
+  --cob-color-text-reverse-disabled: var(--cob-color-neutral-600);
+  --cob-color-text-reverse-weak: var(--cob-color-neutral-100);
+  --cob-color-text-reverse-weaker: var(--cob-color-neutral-200);
+  --cob-color-text-weak: var(--cob-color-neutral-700);
+  --cob-color-text-weaker: var(--cob-color-neutral-500);
+  --cob-color-text-weakest: var(--cob-color-neutral-200);
+  --cob-color-theme: var(--cob-color-optimistic-blue);
+  --cob-color-theme-faint: var(--cob-color-blue-10);
+  --cob-color-theme-mid: var(--cob-color-blue-500);
+  --cob-color-theme-strong: var(--cob-color-blue-800);
+  --cob-color-theme-stronger: var(--cob-color-charles-blue);
+  --cob-color-theme-weak: var(--cob-color-blue-100);
+  --cob-color-theme-weaker: var(--cob-color-blue-50);
+  --cob-color-transparent: #ffffff00;
+  --cob-color-transportation-blue-10: #f4f8fa;
+  --cob-color-transportation-blue-50: #eaf2f5;
+  --cob-color-transportation-blue-100: #d5e5eb;
+  --cob-color-transportation-blue-200: #b2ccd9;
+  --cob-color-transportation-blue-300: #90b3c7;
+  --cob-color-transportation-blue-400: #6e9ab5;
+  --cob-color-transportation-blue-500: #4d83a4;
+  --cob-color-transportation-blue-600: #2c6c93;
+  --cob-color-transportation-blue-700: #0b5583;
+  --cob-color-transportation-blue-800: #093a5c;
+  --cob-color-transportation-blue-900: #072036;
+  --cob-color-warning: var(--cob-color-yellow-400);
+  --cob-color-warning-strong: var(--cob-color-yellow-800);
+  --cob-color-warning-weak: var(--cob-color-yellow-50);
+  --cob-color-white: #ffffff;
+  --cob-color-white-transparent-50: #ffffff03;
+  --cob-color-white-transparent-100: #ffffff1a;
+  --cob-color-white-transparent-200: #ffffff33;
+  --cob-color-white-transparent-300: #ffffff4d;
+  --cob-color-white-transparent-400: #ffffff66;
+  --cob-color-white-transparent-500: #ffffff80;
+  --cob-color-white-transparent-600: #ffffff99;
+  --cob-color-white-transparent-700: #ffffffb3;
+  --cob-color-white-transparent-800: #ffffffcc;
+  --cob-color-white-transparent-900: #ffffffe6;
+  --cob-color-yellow-10: #fefcf2;
+  --cob-color-yellow-50: #fefae5;
+  --cob-color-yellow-100: #fef5cc;
+  --cob-color-yellow-200: #fce888;
+  --cob-color-yellow-300: #fbdb44;
+  --cob-color-yellow-400: #face00;
+  --cob-color-yellow-500: #d6b000;
+  --cob-color-yellow-600: #b29200;
+  --cob-color-yellow-700: #8e7500;
+  --cob-color-yellow-800: #6a5700;
+  --cob-color-yellow-900: #463a00;
+  --cob-decoration-thickness-regular: 7%;
+  --cob-decoration-thickness-strong: 14%;
+  --cob-font-decoration-thickness-regular: 7%;
+  --cob-font-decoration-thickness-strong: 14%;
+  --cob-font-family-agency: var(--cob-font-family-sans);
+  --cob-font-family-alt: "Montserrat", "Arial", sans-serif;
+  --cob-font-family-body: var(--cob-font-family-serif);
+  --cob-font-family-display: var(--cob-font-family-sans);
+  --cob-font-family-heading: var(--cob-font-family-sans);
+  --cob-font-family-monospace: "Roboto Mono Web", "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
+  --cob-font-family-sans: "Montserrat", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --cob-font-family-serif: "Lora", "Georgia", "Cambria", "Times New Roman", "Times", serif;
+  --cob-font-family-ui: var(--cob-font-family-sans);
+  --cob-font-letterspacing-0: 0;
+  --cob-font-letterspacing-100: 0.001rem;
+  --cob-font-letterspacing-200: 0.001rem;
+  --cob-font-letterspacing-300: 0.002rem;
+  --cob-font-letterspacing-400: 0.003rem;
+  --cob-font-letterspacing-500: 0.003rem;
+  --cob-font-letterspacing-600: 0.004rem;
+  --cob-font-letterspacing-body-md: var(--cob-font-letterspacing-400);
+  --cob-font-letterspacing-body-sm: var(--cob-font-letterspacing-400);
+  --cob-font-letterspacing-body-xs: var(--cob-font-letterspacing-600);
+  --cob-font-letterspacing-display-lg: var(--cob-font-letterspacing-negative-100);
+  --cob-font-letterspacing-display-md: var(--cob-font-letterspacing-0);
+  --cob-font-letterspacing-display-sm: var(--cob-font-letterspacing-0);
+  --cob-font-letterspacing-display-xl: var(--cob-font-letterspacing-negative-100);
+  --cob-font-letterspacing-h1: var(--cob-font-letterspacing-0);
+  --cob-font-letterspacing-h2: var(--cob-font-letterspacing-100);
+  --cob-font-letterspacing-h3: var(--cob-font-letterspacing-100);
+  --cob-font-letterspacing-h4: var(--cob-font-letterspacing-200);
+  --cob-font-letterspacing-h5: var(--cob-font-letterspacing-200);
+  --cob-font-letterspacing-h6: var(--cob-font-letterspacing-300);
+  --cob-font-letterspacing-negative-100: -0.01rem;
+  --cob-font-letterspacing-negative-200: -0.02rem;
+  --cob-font-letterspacing-ui-lg: var(--cob-font-letterspacing-300);
+  --cob-font-letterspacing-ui-md: var(--cob-font-letterspacing-400);
+  --cob-font-letterspacing-ui-sm: var(--cob-font-letterspacing-400);
+  --cob-font-letterspacing-ui-xl: var(--cob-font-letterspacing-200);
+  --cob-font-letterspacing-ui-xs: var(--cob-font-letterspacing-600);
+  --cob-font-lineheight-2xl: 2.4375rem;
+  --cob-font-lineheight-2xs: 1.125rem;
+  --cob-font-lineheight-3xl: 2.8125rem;
+  --cob-font-lineheight-4xl: 3.5625rem;
+  --cob-font-lineheight-body-lg: 1.75rem;
+  --cob-font-lineheight-body-md: 1.5rem;
+  --cob-font-lineheight-body-sm: 1.5rem;
+  --cob-font-lineheight-body-xs: 1.25rem;
+  --cob-font-lineheight-display-lg: 3.25rem;
+  --cob-font-lineheight-display-md: 3rem;
+  --cob-font-lineheight-display-sm: 2.75rem;
+  --cob-font-lineheight-display-xl: 3.75rem;
+  --cob-font-lineheight-h1: 2.5rem;
+  --cob-font-lineheight-h2: 2.25rem;
+  --cob-font-lineheight-h3: 2rem;
+  --cob-font-lineheight-h4: 2rem;
+  --cob-font-lineheight-h5: 1.75rem;
+  --cob-font-lineheight-h6: 1.75rem;
+  --cob-font-lineheight-lg: 1.75rem;
+  --cob-font-lineheight-md: 1.5625rem;
+  --cob-font-lineheight-sm: 1.375rem;
+  --cob-font-lineheight-ui-lg: 1.75rem;
+  --cob-font-lineheight-ui-md: 1.5rem;
+  --cob-font-lineheight-ui-sm: 1.5rem;
+  --cob-font-lineheight-ui-xl: 1.75rem;
+  --cob-font-lineheight-ui-xs: 1.25rem;
+  --cob-font-lineheight-xl: 1.9375rem;
+  --cob-font-lineheight-xs: 1.3125rem;
+  --cob-font-size-2xl: 1.375rem;
+  --cob-font-size-2xs: 0.625rem;
+  --cob-font-size-3xl: 1.5rem;
+  --cob-font-size-4xl: 1.75rem;
+  --cob-font-size-5xl: 2rem;
+  --cob-font-size-6xl: 2.25rem;
+  --cob-font-size-7xl: 2.5rem;
+  --cob-font-size-8xl: 2.75rem;
+  --cob-font-size-9xl: 3.125rem;
+  --cob-font-size-agency-lg: var(--cob-font-size-lg);
+  --cob-font-size-agency-md: var(--cob-font-size-md);
+  --cob-font-size-agency-xl: var(--cob-font-size-2xl);
+  --cob-font-size-body-lg: var(--cob-font-size-lg);
+  --cob-font-size-body-md: var(--cob-font-size-md);
+  --cob-font-size-body-sm: var(--cob-font-size-sm);
+  --cob-font-size-body-xs: var(--cob-font-size-xs);
+  --cob-font-size-display-lg: var(--cob-font-size-8xl);
+  --cob-font-size-display-md: var(--cob-font-size-7xl);
+  --cob-font-size-display-sm: var(--cob-font-size-6xl);
+  --cob-font-size-display-xl: var(--cob-font-size-9xl);
+  --cob-font-size-h1: var(--cob-font-size-7xl);
+  --cob-font-size-h2: var(--cob-font-size-5xl);
+  --cob-font-size-h3: var(--cob-font-size-4xl);
+  --cob-font-size-h4: var(--cob-font-size-2xl);
+  --cob-font-size-h5: var(--cob-font-size-2xl);
+  --cob-font-size-h6: var(--cob-font-size-lg);
+  --cob-font-size-lg: 1.125rem;
+  --cob-font-size-md: 1rem;
+  --cob-font-size-sm: 0.875rem;
+  --cob-font-size-ui-lg: var(--cob-font-size-lg);
+  --cob-font-size-ui-md: var(--cob-font-size-md);
+  --cob-font-size-ui-sm: var(--cob-font-size-sm);
+  --cob-font-size-ui-xl: var(--cob-font-size-xl);
+  --cob-font-size-ui-xs: var(--cob-font-size-xs);
+  --cob-font-size-xl: 1.25rem;
+  --cob-font-size-xs: 0.75rem;
+  --cob-font-weight-black: 900;
+  --cob-font-weight-bold: 700;
+  --cob-font-weight-extrabold: 800;
+  --cob-font-weight-extralight: 200;
+  --cob-font-weight-light: 300;
+  --cob-font-weight-medium: 500;
+  --cob-font-weight-regular: 400;
+  --cob-font-weight-semibold: 600;
+  --cob-font-weight-thin: 100;
+  --cob-form-width-lg: 24rem;
+  --cob-form-width-md: 12.5rem;
+  --cob-form-width-sm: 5.5rem;
+  --cob-gutter-lg: 2rem;
+  --cob-gutter-md: 2rem;
+  --cob-gutter-sm: 1.25rem;
+  --cob-gutter-xl: 4rem;
+  --cob-gutter-xs: 1.25rem;
+  --cob-icon-size-2xl: var(--cob-font-size-2xl);
+  --cob-icon-size-3xl: var(--cob-font-size-3xl);
+  --cob-icon-size-4xl: var(--cob-font-size-4xl);
+  --cob-icon-size-5xl: var(--cob-font-size-5xl);
+  --cob-icon-size-lg: var(--cob-font-size-lg);
+  --cob-icon-size-md: var(--cob-font-size-md);
+  --cob-icon-size-sm: var(--cob-font-size-sm);
+  --cob-icon-size-xl: var(--cob-font-size-xl);
+  --cob-icon-size-xs: var(--cob-font-size-xs);
+  --cob-radius-lg: 0.5rem;
+  --cob-radius-md: 0.25rem;
+  --cob-radius-round: 1776px;
+  --cob-radius-sm: 2px;
+  --cob-radius-xl: 0.75rem;
+  --cob-radius-xs: 1px;
+  --cob-radius-xxl: 1rem;
+  --cob-shadow-overlay: 0 25px 50px -12px color(srgb 0 0 0 / 0.30196078431372547);
+  --cob-shadow-raised: 0 4px 6px -1px color(srgb 0 0 0 / 0.10196078431372549), 0 4px 6px -1px color(srgb 0 0 0 / 0.011764705882352941);
+  --cob-size-1px: 1px;
+  --cob-size-2px: 2px;
+  --cob-size-50: 0.25rem;
+  --cob-size-100: 0.5rem;
+  --cob-size-150: 0.75rem;
+  --cob-size-200: 1rem;
+  --cob-size-250: 1.25rem;
+  --cob-size-300: 1.5rem;
+  --cob-size-400: 2rem;
+  --cob-size-450: 2.25rem;
+  --cob-size-500: 2.5rem;
+  --cob-size-550: 2.75rem;
+  --cob-size-600: 3rem;
+  --cob-size-700: 3.5rem;
+  --cob-size-800: 4rem;
+  --cob-size-1200: 6rem;
+  --cob-space-1px: 1px;
+  --cob-space-2px: 2px;
+  --cob-space-50: 0.25rem;
+  --cob-space-100: 0.5rem;
+  --cob-space-150: 0.75rem;
+  --cob-space-200: 1rem;
+  --cob-space-250: 1.25rem;
+  --cob-space-300: 1.5rem;
+  --cob-space-400: 2rem;
+  --cob-space-500: 2.5rem;
+  --cob-space-600: 3rem;
+  --cob-space-700: 3.5rem;
+  --cob-space-800: 4rem;
+  --cob-space-1200: 6rem;
+}
+
+[data-theme="admin"],
+.cob-theme-admin {
+  --cob-color-theme: var(--cob-color-admin-orange-700);
+  --cob-color-theme-faint: var(--cob-color-admin-orange-10);
+  --cob-color-theme-mid: var(--cob-color-admin-orange-500);
+  --cob-color-theme-strong: var(--cob-color-admin-orange-800);
+  --cob-color-theme-stronger: var(--cob-color-admin-orange-900);
+  --cob-color-theme-weak: var(--cob-color-admin-orange-100);
+  --cob-color-theme-weaker: var(--cob-color-admin-orange-50);
+}
+
+[data-theme="business"],
+.cob-theme-business {
+  --cob-color-theme: var(--cob-color-business-teal-700);
+  --cob-color-theme-faint: var(--cob-color-business-teal-10);
+  --cob-color-theme-mid: var(--cob-color-business-teal-500);
+  --cob-color-theme-strong: var(--cob-color-business-teal-800);
+  --cob-color-theme-stronger: var(--cob-color-business-teal-900);
+  --cob-color-theme-weak: var(--cob-color-business-teal-100);
+  --cob-color-theme-weaker: var(--cob-color-business-teal-50);
+}
+
+[data-theme="environment"],
+.cob-theme-environment {
+  --cob-color-theme: var(--cob-color-environment-green-700);
+  --cob-color-theme-faint: var(--cob-color-environment-green-10);
+  --cob-color-theme-mid: var(--cob-color-environment-green-500);
+  --cob-color-theme-strong: var(--cob-color-environment-green-800);
+  --cob-color-theme-stronger: var(--cob-color-environment-green-900);
+  --cob-color-theme-weak: var(--cob-color-environment-green-100);
+  --cob-color-theme-weaker: var(--cob-color-environment-green-50);
+}
+
+[data-theme="health"],
+.cob-theme-health {
+  --cob-color-theme: var(--cob-color-health-purple-700);
+  --cob-color-theme-faint: var(--cob-color-health-purple-10);
+  --cob-color-theme-mid: var(--cob-color-health-purple-500);
+  --cob-color-theme-strong: var(--cob-color-health-purple-800);
+  --cob-color-theme-stronger: var(--cob-color-health-purple-900);
+  --cob-color-theme-weak: var(--cob-color-health-purple-100);
+  --cob-color-theme-weaker: var(--cob-color-health-purple-50);
+}
+
+[data-theme="local"],
+.cob-theme-local {
+  --cob-color-theme: var(--cob-color-local-brown-700);
+  --cob-color-theme-faint: var(--cob-color-local-brown-10);
+  --cob-color-theme-mid: var(--cob-color-local-brown-500);
+  --cob-color-theme-strong: var(--cob-color-local-brown-800);
+  --cob-color-theme-stronger: var(--cob-color-local-brown-900);
+  --cob-color-theme-weak: var(--cob-color-local-brown-100);
+  --cob-color-theme-weaker: var(--cob-color-local-brown-50);
+}
+
+[data-theme="safety"],
+.cob-theme-safety {
+  --cob-color-theme: var(--cob-color-safety-gray-700);
+  --cob-color-theme-faint: var(--cob-color-safety-gray-10);
+  --cob-color-theme-mid: var(--cob-color-safety-gray-500);
+  --cob-color-theme-strong: var(--cob-color-safety-gray-800);
+  --cob-color-theme-stronger: var(--cob-color-safety-gray-900);
+  --cob-color-theme-weak: var(--cob-color-safety-gray-100);
+  --cob-color-theme-weaker: var(--cob-color-safety-gray-50);
+}
+
+[data-theme="transportation"],
+.cob-theme-transportation {
+  --cob-color-theme: var(--cob-color-transportation-blue-700);
+  --cob-color-theme-faint: var(--cob-color-transportation-blue-10);
+  --cob-color-theme-mid: var(--cob-color-transportation-blue-500);
+  --cob-color-theme-strong: var(--cob-color-transportation-blue-800);
+  --cob-color-theme-stronger: var(--cob-color-transportation-blue-900);
+  --cob-color-theme-weak: var(--cob-color-transportation-blue-100);
+  --cob-color-theme-weaker: var(--cob-color-transportation-blue-50);
+}
+