text&icons tokens section

buildo · Oct 3, 2023 · ae67a43 · ae67a43
1 parent 5939682
commit ae67a43
Show file tree

Hide file tree

Showing 11 changed files with 418 additions and 52 deletions.
diff --git a/packages/configuration-builder/src/ColorPickerField/ColorPickerField.tsx b/packages/configuration-builder/src/ColorPickerField/ColorPickerField.tsx
@@ -16,9 +16,9 @@ import { PalettesDropdown } from "./PalettesDropdown";
 import { ThemeConfig } from "../ConfiguratorStatusContext";
 import { useButton } from "@react-aria/button";
 import { ColorConfig } from "../ColorEditor/ColorEditor";
-import { stepNames } from "../utils/paletteUtils";
+import { ColorKey, stepNames } from "../utils/paletteUtils";
 
-type Props = FieldProps<string> & { colors: ThemeConfig["colors"] };
+type Props = FieldProps<ColorKey> & { colors: ThemeConfig["colors"] };
 
 function getPaletteItemsSection(key: string, colorConfig: ColorConfig) {
   const paletteItems = [...Array(stepNames.length)].map((_, index) => {
@@ -86,21 +86,14 @@ export function ColorPickerField(props: Props) {
 
   const state = useSelectState({
     ...props,
-<<<<<<< HEAD
     selectedKey: props.value,
     isDisabled: props.disabled,
     children: getColorItems(props.colors),
     onSelectionChange: (key) => {
       const item = state.collection.getItem(key);
       if (item) {
-        props.onChange(item.textValue);
+        props.onChange(item.textValue as ColorKey);
       }
-=======
-    isDisabled: props.disabled,
-    children: getColorItems(props.colors),
-    onSelectionChange: (key) => {
-      props.onChange(state.collection.getItem(key)!.textValue);
->>>>>>> e2d57964 (Implement ColorPickerField)
     },
   });
 
@@ -152,11 +145,7 @@ export function ColorPickerField(props: Props) {
       >
         <Box {...valueProps} flexGrow={1} textAlign="left">
           <Body size={inputConfig.fontSize} color={props.disabled ? "disabled" : "primary"}>
-<<<<<<< HEAD
             {state.selectedItem ? state.selectedItem.rendered : ""}
-=======
-            {props.value}
->>>>>>> e2d57964 (Implement ColorPickerField)
           </Body>
         </Box>
         <Box paddingLeft={16} aria-hidden="true">
@@ -168,17 +157,7 @@ export function ColorPickerField(props: Props) {
       </Box>
       {state.isOpen && (
         <Popover triggerRef={ref} onClose={state.close}>
-<<<<<<< HEAD
           <PalettesDropdown colors={props.colors} state={state} menuProps={menuProps} />
-=======
-          <PalettesDropdown
-            colors={props.colors}
-            value={props.value}
-            onChange={props.onChange}
-            state={state}
-            menuProps={menuProps}
-          />
->>>>>>> e2d57964 (Implement ColorPickerField)
         </Popover>
       )}
     </Field>

diff --git a/packages/configuration-builder/src/ColorPickerField/PalettesDropdown.tsx b/packages/configuration-builder/src/ColorPickerField/PalettesDropdown.tsx
@@ -1,5 +1,4 @@
 import { Box, Card, Divider, Inline, Label, Stack } from "@buildo/bento-design-system";
-<<<<<<< HEAD
 import { ThemeConfig, useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
 import { colorBoxRecipe } from "./PalettesDropdown.css";
 import { SelectState } from "@react-stately/select";
@@ -11,19 +10,6 @@ import { PaletteName, getPalette, getPaletteKeyColor } from "../utils/paletteUti
 
 type Props = {
   colors: ThemeConfig["colors"];
-=======
-import { ThemeConfig } from "../ConfiguratorStatusContext";
-import { colorBoxRecipe } from "./PalettesDropdown.css";
-import { SelectState } from "@react-stately/select";
-import { AriaListBoxOptions, useListBox, useOption } from "@react-aria/listbox";
-import { Key, useRef } from "react";
-import { useTranslation } from "react-i18next";
-
-type Props = {
-  colors: ThemeConfig["colors"];
-  value: string | null;
-  onChange: (value: string) => void;
->>>>>>> e2d57964 (Implement ColorPickerField)
   state: SelectState<object>;
   menuProps: AriaListBoxOptions<object>;
 };

diff --git a/packages/configuration-builder/src/ConfiguratorStatusContext.tsx b/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
@@ -8,6 +8,7 @@ import {
 import { HexColor } from "./utils/colorUtils";
 import { ColorConfig } from "./ColorEditor/ColorEditor";
 import { MapLeafNodes } from "./utils/mapLeafNodes";
+import { ColorKey } from "./utils/paletteUtils";
 
 type BrandColors =
   | [ColorConfig]
@@ -38,7 +39,10 @@ export type ThemeConfig = {
       pink: ColorConfig;
     };
   };
-  tokens: MapLeafNodes<Pick<BentoTokens, "brandColor">, { colorKey: string; alpha: number }>;
+  tokens: MapLeafNodes<
+    Pick<BentoTokens, "brandColor" | "backgroundColor" | "foregroundColor" | "textColor">,
+    { colorKey: ColorKey; alpha: number }
+  >;
 };
 
 export type ThemeSection = "colors" | "tokens";
@@ -53,14 +57,53 @@ type ConfiguratorStatus = {
 export const ConfiguratorStatusContext = createContext<ConfiguratorStatus | null>(null);
 
 export const defaultTokens: MapLeafNodes<
-  Pick<BentoTokens, "brandColor">,
-  { colorKey: string; alpha: number }
+  Pick<BentoTokens, "brandColor" | "backgroundColor" | "foregroundColor" | "textColor">,
+  { colorKey: ColorKey; alpha: number }
 > = {
   brandColor: {
     brandPrimary: { colorKey: "BrandPrimary-40", alpha: 100 },
     brandSecondary: { colorKey: "BrandPrimary-20", alpha: 100 },
     brandTertiary: { colorKey: "BrandPrimary-10", alpha: 100 },
   },
+  backgroundColor: {
+    backgroundPrimary: { colorKey: "white", alpha: 100 },
+    backgroundSecondary: { colorKey: "Neutral-1", alpha: 100 },
+    backgroundOverlay: { colorKey: "Neutral-20", alpha: 20 },
+    backgroundPrimaryInverse: { colorKey: "Neutral-90", alpha: 100 },
+    backgroundSecondaryInverse: { colorKey: "Neutral-80", alpha: 100 },
+    backgroundInteractive: { colorKey: "Interactive-40", alpha: 100 },
+    backgroundInteractiveOverlay: { colorKey: "Interactive-10", alpha: 40 },
+    backgroundInformative: { colorKey: "Informative-5", alpha: 100 },
+    backgroundPositive: { colorKey: "Positive-5", alpha: 100 },
+    backgroundWarning: { colorKey: "Warning-5", alpha: 100 },
+    backgroundNegative: { colorKey: "Negative-5", alpha: 100 },
+    backgroundLightScrim: { colorKey: "white", alpha: 80 },
+    backgroundDarkScrim: { colorKey: "Neutral-90", alpha: 60 },
+  },
+  foregroundColor: {
+    foregroundPrimary: { colorKey: "Neutral-90", alpha: 100 },
+    foregroundSecondary: { colorKey: "Neutral-50", alpha: 100 },
+    foregroundPrimaryInverse: { colorKey: "Neutral-1", alpha: 100 },
+    foregroundSecondaryInverse: { colorKey: "Neutral-30", alpha: 100 },
+    foregroundInteractive: { colorKey: "Interactive-40", alpha: 100 },
+    foregroundInformative: { colorKey: "Informative-30", alpha: 100 },
+    foregroundPositive: { colorKey: "Positive-50", alpha: 100 },
+    foregroundWarning: { colorKey: "Warning-40", alpha: 100 },
+    foregroundNegative: { colorKey: "Negative-30", alpha: 100 },
+    foregroundDisabled: { colorKey: "Neutral-40", alpha: 30 },
+  },
+  textColor: {
+    textPrimary: { colorKey: "Neutral-90", alpha: 100 },
+    textSecondary: { colorKey: "Neutral-50", alpha: 100 },
+    textPrimaryInverse: { colorKey: "Neutral-1", alpha: 100 },
+    textSecondaryInverse: { colorKey: "Neutral-30", alpha: 100 },
+    textInteractive: { colorKey: "Interactive-40", alpha: 100 },
+    textInformative: { colorKey: "Informative-50", alpha: 100 },
+    textPositive: { colorKey: "Positive-70", alpha: 100 },
+    textWarning: { colorKey: "Warning-60", alpha: 100 },
+    textNegative: { colorKey: "Negative-60", alpha: 100 },
+    textDisabled: { colorKey: "Neutral-40", alpha: 30 },
+  },
 };
 
 export function ConfiguratorStatusProvider(props: { children: Children }) {

diff --git a/packages/configuration-builder/src/PhosphorIcons.tsx b/packages/configuration-builder/src/PhosphorIcons.tsx
@@ -14,6 +14,8 @@ import {
   Layout,
   Eyedropper,
   Swatches,
+  Planet,
+  CloudMoon,
 } from "@phosphor-icons/react";
 
 function phosphorToBento(Icon: PhosphorIcon) {
@@ -36,3 +38,5 @@ export const IconLayout = phosphorToBento(Layout);
 export const IconSubtract = phosphorToBento(Subtract);
 export const IconSwatches = phosphorToBento(Swatches);
 export const IconTextAa = phosphorToBento(TextAa);
+export const IconPlanet = phosphorToBento(Planet);
+export const IconCloudMoon = phosphorToBento(CloudMoon);
diff --git a/packages/configuration-builder/src/TokensSection/BrandTokens.tsx b/packages/configuration-builder/src/TokensSection/BrandTokens.tsx
@@ -9,6 +9,7 @@ import {
   unsafeLocalizedString,
   DecorativeDivider,
   Headline,
+  Actions,
 } from "@buildo/bento-design-system";
 import { ColorSelector } from "./ColorSelector";
 import { useTranslation } from "react-i18next";
@@ -19,6 +20,8 @@ import { useState } from "react";
 type Props = {
   tokens: ThemeConfig["tokens"]["brandColor"];
   onChange: (value: ThemeConfig["tokens"]["brandColor"]) => void;
+  onNext: () => void;
+  onCancel: () => void;
 };
 
 function BrandTokensPlayground() {
@@ -97,6 +100,10 @@ export function BrandTokens(props: Props) {
         </Column>
         <BrandTokensPlayground />
       </Columns>
+      <Actions
+        primaryAction={{ label: t("Next"), onPress: props.onNext }}
+        secondaryAction={{ label: t("Cancel"), onPress: props.onCancel }}
+      />
     </Stack>
   );
 }
diff --git a/packages/configuration-builder/src/TokensSection/ColorSelector.tsx b/packages/configuration-builder/src/TokensSection/ColorSelector.tsx
@@ -10,10 +10,10 @@ import {
 import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext";
 import { useTranslation } from "react-i18next";
 import { ColorPickerField } from "../ColorPickerField/ColorPickerField";
-import { colorTokenToRGBA } from "../utils/paletteUtils";
+import { ColorKey, colorTokenToRGBA } from "../utils/paletteUtils";
 
 type Value = {
-  colorKey: string;
+  colorKey: ColorKey;
   alpha: number;
 };
 
@@ -43,7 +43,7 @@ export function ColorSelector(props: {
             colors={colors}
             label={t("Tokens.Color.label")}
             value={props.value.colorKey}
-            onChange={(colorKey) => props.onChange({ ...props.value, colorKey: colorKey })}
+            onChange={(colorKey) => props.onChange({ ...props.value, colorKey })}
           />
         </Stack>
         <Column width="content">