Add box component

packages/core/src/common/classes.ts

@@ -98,6 +98,8 @@ export const ALERT_BODY = `${ALERT}-body`;
 export const ALERT_CONTENTS = `${ALERT}-contents`;
 export const ALERT_FOOTER = `${ALERT}-footer`;
 
+export const BOX = `${NS}-box`;
+
 export const BREADCRUMB = `${NS}-breadcrumb`;
 export const BREADCRUMB_CURRENT = `${BREADCRUMB}-current`;
 export const BREADCRUMBS = `${BREADCRUMB}s`;

packages/core/src/components/_index.scss

@@ -2,6 +2,7 @@
 // Licensed under the Apache License, Version 2.0.
 
 @import "alert/alert";
+@import "box/box";
 @import "breadcrumbs/breadcrumbs";
 @import "button/button";
 @import "button/button-group";

packages/core/src/components/box/_box-variables.scss

@@ -0,0 +1,123 @@
+/* !
+ * (c) Copyright 2024 Palantir Technologies Inc. All rights reserved.
+ */
+
+@import "../../common/variables";
+
+$space-unit: calc($pt-grid-size / 2);
+
+$relative-sizes: (
+  "25": 25%,
+  "50": 50%,
+  "75": 75%,
+  "100": 100%,
+  "auto": auto,
+);
+
+$colors: (
+  "black": $black,
+
+  "dark-gray-1": $dark-gray1,
+  "dark-gray-2": $dark-gray2,
+  "dark-gray-3": $dark-gray3,
+  "dark-gray-4": $dark-gray4,
+  "dark-gray-5": $dark-gray5,
+
+  "gray-1": $gray1,
+  "gray-2": $gray2,
+  "gray-3": $gray3,
+  "gray-4": $gray4,
+  "gray-5": $gray5,
+
+  "light-gray-1": $light-gray1,
+  "light-gray-2": $light-gray2,
+  "light-gray-3": $light-gray3,
+  "light-gray-4": $light-gray4,
+  "light-gray-5": $light-gray5,
+
+  "white": $white,
+
+  "blue-1": $blue1,
+  "blue-2": $blue2,
+  "blue-3": $blue3,
+  "blue-4": $blue4,
+  "blue-5": $blue5,
+
+  "green-1": $green1,
+  "green-2": $green2,
+  "green-3": $green3,
+  "green-4": $green4,
+  "green-5": $green5,
+
+  "orange-1": $orange1,
+  "orange-2": $orange2,
+  "orange-3": $orange3,
+  "orange-4": $orange4,
+  "orange-5": $orange5,
+
+  "red-1": $red1,
+  "red-2": $red2,
+  "red-3": $red3,
+  "red-4": $red4,
+  "red-5": $red5,
+
+  "cerulean-1": $cerulean1,
+  "cerulean-2": $cerulean2,
+  "cerulean-3": $cerulean3,
+  "cerulean-4": $cerulean4,
+  "cerulean-5": $cerulean5,
+
+  "forest-1": $forest1,
+  "forest-2": $forest2,
+  "forest-3": $forest3,
+  "forest-4": $forest4,
+  "forest-5": $forest5,
+
+  "gold-1": $gold1,
+  "gold-2": $gold2,
+  "gold-3": $gold3,
+  "gold-4": $gold4,
+  "gold-5": $gold5,
+
+  "indigo-1": $indigo1,
+  "indigo-2": $indigo2,
+  "indigo-3": $indigo3,
+  "indigo-4": $indigo4,
+  "indigo-5": $indigo5,
+
+  "lime-1": $lime1,
+  "lime-2": $lime2,
+  "lime-3": $lime3,
+  "lime-4": $lime4,
+  "lime-5": $lime5,
+
+  "rose-1": $rose1,
+  "rose-2": $rose2,
+  "rose-3": $rose3,
+  "rose-4": $rose4,
+  "rose-5": $rose5,
+
+  "sepia-1": $sepia1,
+  "sepia-2": $sepia2,
+  "sepia-3": $sepia3,
+  "sepia-4": $sepia4,
+  "sepia-5": $sepia5,
+
+  "turquoise-1": $turquoise1,
+  "turquoise-2": $turquoise2,
+  "turquoise-3": $turquoise3,
+  "turquoise-4": $turquoise4,
+  "turquoise-5": $turquoise5,
+
+  "vermilion-1": $vermilion1,
+  "vermilion-2": $vermilion2,
+  "vermilion-3": $vermilion3,
+  "vermilion-4": $vermilion4,
+  "vermilion-5": $vermilion5,
+
+  "violet-1": $violet1,
+  "violet-2": $violet2,
+  "violet-3": $violet3,
+  "violet-4": $violet4,
+  "violet-5": $violet5,
+);