[Visuals][Colors] Creating new palette

nx.json

@@ -67,6 +67,11 @@
             "outputs": ["{projectRoot}/lib"],
             "cache": true
         },
+        "compile:css-palette": {
+            "dependsOn": ["^compile:css-palette"],
+            "outputs": ["{projectRoot}/lib"],
+            "cache": true
+        },
         "dist:css": {
             "outputs": ["{projectRoot}/lib/css"],
             "cache": true

packages/colors/package.json

@@ -18,6 +18,7 @@
         "compile:esnext": "tsc -p ./src -t esnext --outDir lib/esnext",
         "compile:css": "sass-compile ./src",
         "compile:css-colors": "generate-css-variables --retainDefault true --outputFileName colors _colors.scss",
+        "compile:css-palette": "generate-css-variables --retainDefault true --outputFileName palette _palette.scss",
         "dev": "run-p \"compile:esm --watch\" \"compile:css --watch\"",
         "lint": "npm-run-all -p lint:scss lint:es",
         "lint:scss": "sass-lint",

packages/colors/src/_palette.scss

@@ -0,0 +1,127 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ */
+
+// Sass variables that map to CSS custom properties
+// These reference the CSS variables, allowing theme switching to work automatically
+// Import the non-partial palette.scss file to get the CSS variable definitions
+
+// Greys
+$bp-grey-100: var(--bp-grey-100);
+$bp-grey-200: var(--bp-grey-200);
+$bp-grey-300: var(--bp-grey-300);
+$bp-grey-400: var(--bp-grey-400);
+$bp-grey-500: var(--bp-grey-500);
+$bp-grey-600: var(--bp-grey-600);
+$bp-grey-700: var(--bp-grey-700);
+$bp-grey-800: var(--bp-grey-800);
+$bp-grey-900: var(--bp-grey-900);
+$bp-grey-1000: var(--bp-grey-1000);
+
+// Blacks
+$bp-black-100: var(--bp-black-100);
+$bp-black-200: var(--bp-black-200);
+$bp-black-300: var(--bp-black-300);
+$bp-black-400: var(--bp-black-400);
+$bp-black-500: var(--bp-black-500);
+$bp-black-600: var(--bp-black-600);
+$bp-black-700: var(--bp-black-700);
+$bp-black-800: var(--bp-black-800);
+$bp-black-900: var(--bp-black-900);
+$bp-black-1000: var(--bp-black-1000);
+
+// Whites
+$bp-white-100: var(--bp-white-100);
+$bp-white-200: var(--bp-white-200);
+$bp-white-300: var(--bp-white-300);
+$bp-white-400: var(--bp-white-400);
+$bp-white-500: var(--bp-white-500);
+$bp-white-600: var(--bp-white-600);
+$bp-white-700: var(--bp-white-700);
+$bp-white-800: var(--bp-white-800);
+$bp-white-900: var(--bp-white-900);
+$bp-white-1000: var(--bp-white-1000);
+
+// Reds
+$bp-red-100: var(--bp-red-100);
+$bp-red-200: var(--bp-red-200);
+$bp-red-300: var(--bp-red-300);
+$bp-red-400: var(--bp-red-400);
+$bp-red-500: var(--bp-red-500);
+$bp-red-600: var(--bp-red-600);
+$bp-red-700: var(--bp-red-700);
+$bp-red-800: var(--bp-red-800);
+$bp-red-900: var(--bp-red-900);
+$bp-red-1000: var(--bp-red-1000);
+
+// Blues
+$bp-blue-100: var(--bp-blue-100);
+$bp-blue-200: var(--bp-blue-200);
+$bp-blue-300: var(--bp-blue-300);
+$bp-blue-400: var(--bp-blue-400);
+$bp-blue-500: var(--bp-blue-500);
+$bp-blue-600: var(--bp-blue-600);
+$bp-blue-700: var(--bp-blue-700);
+$bp-blue-800: var(--bp-blue-800);
+$bp-blue-900: var(--bp-blue-900);
+$bp-blue-1000: var(--bp-blue-1000);
+
+// Greens
+$bp-green-100: var(--bp-green-100);
+$bp-green-200: var(--bp-green-200);
+$bp-green-300: var(--bp-green-300);
+$bp-green-400: var(--bp-green-400);
+$bp-green-500: var(--bp-green-500);
+$bp-green-600: var(--bp-green-600);
+$bp-green-700: var(--bp-green-700);
+$bp-green-800: var(--bp-green-800);
+$bp-green-900: var(--bp-green-900);
+$bp-green-1000: var(--bp-green-1000);
+
+// Indigos
+$bp-indigo-100: var(--bp-indigo-100);
+$bp-indigo-200: var(--bp-indigo-200);
+$bp-indigo-300: var(--bp-indigo-300);
+$bp-indigo-400: var(--bp-indigo-400);
+$bp-indigo-500: var(--bp-indigo-500);
+$bp-indigo-600: var(--bp-indigo-600);
+$bp-indigo-700: var(--bp-indigo-700);
+$bp-indigo-800: var(--bp-indigo-800);
+$bp-indigo-900: var(--bp-indigo-900);
+$bp-indigo-1000: var(--bp-indigo-1000);
+
+// Oranges
+$bp-orange-100: var(--bp-orange-100);
+$bp-orange-200: var(--bp-orange-200);
+$bp-orange-300: var(--bp-orange-300);
+$bp-orange-400: var(--bp-orange-400);
+$bp-orange-500: var(--bp-orange-500);
+$bp-orange-600: var(--bp-orange-600);
+$bp-orange-700: var(--bp-orange-700);
+$bp-orange-800: var(--bp-orange-800);
+$bp-orange-900: var(--bp-orange-900);
+$bp-orange-1000: var(--bp-orange-1000);
+
+// Turquoises
+$bp-turquoise-100: var(--bp-turquoise-100);
+$bp-turquoise-200: var(--bp-turquoise-200);
+$bp-turquoise-300: var(--bp-turquoise-300);
+$bp-turquoise-400: var(--bp-turquoise-400);
+$bp-turquoise-500: var(--bp-turquoise-500);
+$bp-turquoise-600: var(--bp-turquoise-600);
+$bp-turquoise-700: var(--bp-turquoise-700);
+$bp-turquoise-800: var(--bp-turquoise-800);
+$bp-turquoise-900: var(--bp-turquoise-900);
+$bp-turquoise-1000: var(--bp-turquoise-1000);
+
+// Golds
+$bp-gold-100: var(--bp-gold-100);
+$bp-gold-200: var(--bp-gold-200);
+$bp-gold-300: var(--bp-gold-300);
+$bp-gold-400: var(--bp-gold-400);
+$bp-gold-500: var(--bp-gold-500);
+$bp-gold-600: var(--bp-gold-600);
+$bp-gold-700: var(--bp-gold-700);
+$bp-gold-800: var(--bp-gold-800);
+$bp-gold-900: var(--bp-gold-900);
+$bp-gold-1000: var(--bp-gold-1000);

packages/colors/src/index.ts

@@ -14,6 +14,11 @@
  * limitations under the License.
  */
 
+// TODO: Deprecate in a major release
 export { Colors } from "./colors";
+// TODO: Deprecate in a major release
 // eslint-disable-next-line @typescript-eslint/no-deprecated
 export { LegacyColors } from "./legacyColors";
+// Updated with new palette
+export { palette } from "./palette";
+export type { PaletteColor, PaletteColorFamily, PaletteColorValue } from "./palette";

packages/colors/src/palette.scss

@@ -0,0 +1,226 @@
+:root,
+[data-theme="light"] {
+  // greys
+  --bp-grey-100: #dfe0e2;
+  --bp-grey-200: #c2c6cb;
+  --bp-grey-300: #c0c2c5;
+  --bp-grey-400: #85898f;
+  --bp-grey-500: #696e75;
+  --bp-grey-600: #4e535b;
+  --bp-grey-700: #353b43;
+  --bp-grey-800: #1d232d;
+  --bp-grey-900: #080e17;
+  --bp-grey-1000: #000105;
+  // blacks
+  --bp-black-100: #00010505;
+  --bp-black-200: #0001051a;
+  --bp-black-300: #00010533;
+  --bp-black-400: #0001054d;
+  --bp-black-500: #00010580;
+  --bp-black-600: #000105cc;
+  --bp-black-700: #000105d9;
+  --bp-black-800: #000105e6;
+  --bp-black-900: #000105f2;
+  --bp-black-1000: #000105ff;
+  // whites
+  --bp-white-100: #ffffff0f;
+  --bp-white-200: #ffffff1a;
+  --bp-white-300: #ffffff33;
+  --bp-white-400: #ffffff4d;
+  --bp-white-500: #ffffff80;
+  --bp-white-600: #ffffffcc;
+  --bp-white-700: #ffffffd9;
+  --bp-white-800: #ffffffe6;
+  --bp-white-900: #fffffff2;
+  --bp-white-1000: #ffffffff;
+  // reds
+  --bp-red-100: #f7dad9;
+  --bp-red-200: #edb5b5;
+  --bp-red-300: #e19191;
+  --bp-red-400: #d36b6f;
+  --bp-red-500: #c2424d;
+  --bp-red-600: #98323a;
+  --bp-red-700: #6f2229;
+  --bp-red-800: #491418;
+  --bp-red-900: #270709;
+  --bp-red-1000: #080101;
+  // blues
+  --bp-blue-100: #d5e3f8;
+  --bp-blue-200: #abc7f0;
+  --bp-blue-300: #82ace7;
+  --bp-blue-400: #598fdd;
+  --bp-blue-500: #2d72d2; /* stylelint-disable-line @blueprintjs/no-color-literal */
+  --bp-blue-600: #2158a4;
+  --bp-blue-700: #163f79;
+  --bp-blue-800: #0b2850;
+  --bp-blue-900: #03122b;
+  --bp-blue-1000: #00030a;
+  // greens
+  --bp-green-100: #d4e9d6;
+  --bp-green-200: #aad3ae;
+  --bp-green-300: #7fbc87;
+  --bp-green-400: #51a660;
+  --bp-green-500: #008f37;
+  --bp-green-600: #006f29;
+  --bp-green-700: #00511c;
+  --bp-green-800: #00340f;
+  --bp-green-900: #001a05;
+  --bp-green-1000: #000401;
+  // indigos
+  --bp-indigo-100: #dedbf3;
+  --bp-indigo-200: #bfb8e6;
+  --bp-indigo-300: #a196d9;
+  --bp-indigo-400: #8473ca;
+  --bp-indigo-500: #6a4fba;
+  --bp-indigo-600: #523c91;
+  --bp-indigo-700: #3a2a6a;
+  --bp-indigo-800: #241946;
+  --bp-indigo-900: #100a25;
+  --bp-indigo-1000: #020107;
+  // oranges
+  --bp-orange-100: #f5ddd1;
+  --bp-orange-200: #e9bba4;
+  --bp-orange-300: #dc9977;
+  --bp-orange-400: #cd7649;
+  --bp-orange-500: #bd5200;
+  --bp-orange-600: #943e00;
+  --bp-orange-700: #6c2c00;
+  --bp-orange-800: #471a00;
+  --bp-orange-900: #250a00;
+  --bp-orange-1000: #080100;
+  // turquoises
+  --bp-turquoise-100: #d5e7e3;
+  --bp-turquoise-200: #aad0c8;
+  --bp-turquoise-300: #7fb8ad;
+  --bp-turquoise-400: #51a193;
+  --bp-turquoise-500: #008a7a;
+  --bp-turquoise-600: #006b5e;
+  --bp-turquoise-700: #004e44;
+  --bp-turquoise-800: #00322b;
+  --bp-turquoise-900: #001814;
+  --bp-turquoise-1000: #000403;
+  // golds
+  --bp-gold-100: #ece1d1;
+  --bp-gold-200: #d8c3a5;
+  --bp-gold-300: #c5a678;
+  --bp-gold-400: #b28949;
+  --bp-gold-500: #9e6c00;
+  --bp-gold-600: #7b5300;
+  --bp-gold-700: #5a3b00;
+  --bp-gold-800: #3a2500;
+  --bp-gold-900: #1e1100;
+  --bp-gold-1000: #050200;
+}
+
+[data-theme="dark"] {
+  // greys
+  --bp-grey-100: #dfe0e2;
+  --bp-grey-200: #c2c6cb;
+  --bp-grey-300: #c0c2c5;
+  --bp-grey-400: #85898f;
+  --bp-grey-500: #696e75;
+  --bp-grey-600: #4e535b;
+  --bp-grey-700: #353b43;
+  --bp-grey-800: #1d232d;
+  --bp-grey-900: #080e17;
+  --bp-grey-1000: #000105;
+  // blacks
+  --bp-black-100: #00010508;
+  --bp-black-200: #0001051a;
+  --bp-black-300: #00010533;
+  --bp-black-400: #0001054d;
+  --bp-black-500: #00010580;
+  --bp-black-600: #000105cc;
+  --bp-black-700: #000105d9;
+  --bp-black-800: #000105e6;
+  --bp-black-900: #000105f2;
+  --bp-black-1000: #000105ff;
+  // whites
+  --bp-white-100: #ffffff08;
+  --bp-white-200: #ffffff14;
+  --bp-white-300: #ffffff24;
+  --bp-white-400: #ffffff4d;
+  --bp-white-500: #ffffff80;
+  --bp-white-600: #ffffffcc;
+  --bp-white-700: #ffffffd9;
+  --bp-white-800: #ffffffe6;
+  --bp-white-900: #fffffff2;
+  --bp-white-1000: #ffffffff;
+  // reds
+  --bp-red-100: #f7dad9;
+  --bp-red-200: #edb5b5;
+  --bp-red-300: #e19191;
+  --bp-red-400: #d36b6f;
+  --bp-red-500: #c2424d;
+  --bp-red-600: #98323a;
+  --bp-red-700: #6f2229;
+  --bp-red-800: #491418;
+  --bp-red-900: #270709;
+  --bp-red-1000: #080101;
+  // blues
+  --bp-blue-100: #d5e3f8;
+  --bp-blue-200: #abc7f0;
+  --bp-blue-300: #82ace7;
+  --bp-blue-400: #598fdd;
+  --bp-blue-500: #2d72d2; /* stylelint-disable-line @blueprintjs/no-color-literal */
+  --bp-blue-600: #2158a4;
+  --bp-blue-700: #163f79;
+  --bp-blue-800: #0b2850;
+  --bp-blue-900: #03122b;
+  --bp-blue-1000: #00030a;
+  // greens
+  --bp-green-100: #d4e9d6;
+  --bp-green-200: #aad3ae;
+  --bp-green-300: #7fbc87;
+  --bp-green-400: #51a660;
+  --bp-green-500: #008f37;
+  --bp-green-600: #006f29;
+  --bp-green-700: #00511c;
+  --bp-green-800: #00340f;
+  --bp-green-900: #001a05;
+  --bp-green-1000: #000401;
+  // indigos
+  --bp-indigo-100: #dedbf3;
+  --bp-indigo-200: #bfb8e6;
+  --bp-indigo-300: #a196d9;
+  --bp-indigo-400: #8473ca;
+  --bp-indigo-500: #6a4fba;
+  --bp-indigo-600: #523c91;
+  --bp-indigo-700: #3a2a6a;
+  --bp-indigo-800: #241946;
+  --bp-indigo-900: #100a25;
+  --bp-indigo-1000: #020107;
+  // oranges
+  --bp-orange-100: #f5ddd1;
+  --bp-orange-200: #e9bba4;
+  --bp-orange-300: #dc9977;
+  --bp-orange-400: #cd7649;
+  --bp-orange-500: #bd5200;
+  --bp-orange-600: #943e00;
+  --bp-orange-700: #6c2c00;
+  --bp-orange-800: #471a00;
+  --bp-orange-900: #250a00;
+  --bp-orange-1000: #080100;
+  // turquoises
+  --bp-turquoise-100: #d5e7e3;
+  --bp-turquoise-200: #aad0c8;
+  --bp-turquoise-300: #7fb8ad;
+  --bp-turquoise-400: #51a193;
+  --bp-turquoise-500: #008a7a;
+  --bp-turquoise-600: #006b5e;
+  --bp-turquoise-700: #004e44;
+  --bp-turquoise-800: #00322b;
+  --bp-turquoise-900: #001814;
+  --bp-turquoise-1000: #000403;
+  // golds
+  --bp-gold-100: #ece1d1;
+  --bp-gold-200: #d8c3a5;
+  --bp-gold-300: #c5a678;
+  --bp-gold-400: #b28949;
+  --bp-gold-500: #9e6c00;
+  --bp-gold-600: #7b5300;
+  --bp-gold-700: #5a3b00;
+  --bp-gold-800: #3a2500;
+  --bp-gold-900: #1e1100;
+  --bp-gold-1000: #050200;
+}