diff --git a/docs/BrandColors.stories.tsx b/docs/BrandColors.stories.tsx index 4c0c415a..d8df1f8f 100644 --- a/docs/BrandColors.stories.tsx +++ b/docs/BrandColors.stories.tsx @@ -1,8 +1,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import tokens from '../src/figma/tokens.json'; -import { brandColor } from '../src/js'; -import getCSSVariablesFromStylesheet from './utils/getCSSVariablesFromStylesheet'; +import { brandColor as brandColorJS } from '../src/js'; +import { getCSSVariablesFromStylesheet, useJsonColor } from './utils'; import { ColorSwatchGroup, ColorSwatch } from './components'; import README from './BrandColors.mdx'; @@ -21,7 +20,10 @@ export default meta; type Story = StoryObj; export const Figma: Story = { - render: () => , + render: () => { + const { brandColor } = useJsonColor(); + return ; + }, }; export const CSS: Story = { @@ -54,7 +56,7 @@ export const JS: Story = { }} > {/* Mapping through each brand color and rendering a ColorSwatch component for it */} - {Object.entries(brandColor).map(([name, color]) => ( + {Object.entries(brandColorJS).map(([name, color]) => ( ))} diff --git a/docs/ThemeColors.mdx b/docs/ThemeColors.mdx index e42830f2..c0fdd914 100644 --- a/docs/ThemeColors.mdx +++ b/docs/ThemeColors.mdx @@ -1,4 +1,4 @@ -import { Canvas } from '@storybook/addon-docs/blocks'; +import { Canvas } from '@storybook/blocks'; import * as ThemeColorStories from './ThemeColors.stories'; # Theme Colors (second tier) diff --git a/docs/ThemeColors.stories.tsx b/docs/ThemeColors.stories.tsx index 200da606..9f38745c 100644 --- a/docs/ThemeColors.stories.tsx +++ b/docs/ThemeColors.stories.tsx @@ -1,11 +1,10 @@ import React from 'react'; -import tokens from '../src/figma/tokens.json'; -import { lightTheme, darkTheme } from '../src'; -import getCSSVariablesFromStylesheet from './utils/getCSSVariablesFromStylesheet'; - -import { ColorSwatchGroup, ColorSwatch } from './components'; +import { lightTheme as lightThemeJS, darkTheme as darkThemeJS } from '../src'; +import brandColor from '../src/figma/brandColors.json'; +import { ColorSwatch, ColorSwatchGroup } from './components'; import README from './ThemeColors.mdx'; +import { getCSSVariablesFromStylesheet, useJsonColor } from './utils'; export default { title: 'Colors/Theme Colors', @@ -18,39 +17,43 @@ export default { }; export const FigmaLightTheme = { - render: () => , - args: { - swatchData: tokens.light.colors, - borderColor: tokens.light.colors.border.muted.value, - textBackgroundColor: tokens.light.colors.background.default.value, - textColor: tokens.light.colors.text.default.value, + render: () => { + const { lightTheme } = useJsonColor(); + if (!lightTheme) { + return null; // or some fallback component + } + console.log('lightTheme', lightTheme); + return ; }, }; export const FigmaDarkTheme = { - render: () => ( -
- -
- ), - args: { - swatchData: tokens.dark.colors, - borderColor: tokens.dark.colors.border.muted.value, - textBackgroundColor: tokens.dark.colors.background.default.value, - textColor: tokens.dark.colors.text.default.value, + render: () => { + const { darkTheme } = useJsonColor(); + console.log('darkTheme', darkTheme); + if (!darkTheme) { + return null; // or some fallback component + } + return ( +
+ +
+ ); }, parameters: { backgrounds: { default: 'dark', - values: [ - { name: 'dark', value: tokens.dark.colors.background.default.value }, - ], + values: [{ name: 'dark', value: brandColor.grey[800].value }], }, }, }; @@ -136,7 +139,7 @@ export const JSLightTheme = { gridTemplateColumns: 'repeat(auto-fill, 300px)', }} > - {Object.entries(lightTheme.colors).flatMap(([category, colorObj]) => + {Object.entries(lightThemeJS.colors).flatMap(([category, colorObj]) => Object.entries(colorObj).map(([name, color]) => ( (
- {Object.entries(darkTheme.colors).flatMap(([category, colorObj]) => + {Object.entries(darkThemeJS.colors).flatMap(([category, colorObj]) => Object.entries(colorObj).map(([name, color]) => ( )), )} @@ -183,7 +186,7 @@ export const JSDarkTheme = { parameters: { backgrounds: { default: 'dark', - values: [{ name: 'dark', value: darkTheme.colors.background.default }], + values: [{ name: 'dark', value: darkThemeJS.colors.background.default }], }, }, }; diff --git a/docs/components/ColorSwatch/ColorSwatch.tsx b/docs/components/ColorSwatch/ColorSwatch.tsx index a190a368..32aa5485 100644 --- a/docs/components/ColorSwatch/ColorSwatch.tsx +++ b/docs/components/ColorSwatch/ColorSwatch.tsx @@ -37,7 +37,7 @@ export const ColorSwatch: FunctionComponent = ({ style={{ height: 120, backgroundColor: color, - border: `1px solid ${borderColor}`, + border: `2px solid ${borderColor}`, display: 'flex', flexDirection: 'column-reverse', borderRadius: '8px', @@ -48,7 +48,7 @@ export const ColorSwatch: FunctionComponent = ({ style={{ backgroundColor: textBackgroundColor, padding: 8, - borderRadius: '0 0 8px 8px', + borderRadius: '0 0 6px 6px', color: textColor, }} > diff --git a/docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx b/docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx index 3d45823f..2a263d0b 100644 --- a/docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx +++ b/docs/components/ColorSwatchGroup/ColorSwatchGroup.tsx @@ -1,31 +1,12 @@ import React, { FunctionComponent } from 'react'; - +import { Theme } from '../../utils/useJsonColor'; import { ColorSwatch } from '..'; -interface ColorToken { - /** - * The value of the color can be hex or a reference to another color using - * the Figma Token reference syntax {colors.blue.blue500} or using maths - * notation rgba($colors.blue.blue500, .5) - */ - value: string; - /** - * The description of the color and what is should be used for - */ - description?: string; - /** - * The type of token - */ - type: 'color'; -} - interface ColorSwatchGroupProps { /** * The color object */ - swatchData: { - [key: string]: ColorToken; - }; + swatchData: Theme; /** * The color of text background that contains the name of the color defaults to background.default */ diff --git a/docs/utils/getCSSVariablesFromStylesheet.ts b/docs/utils/getCSSVariablesFromStylesheet.ts index 07720e73..ff7907d8 100644 --- a/docs/utils/getCSSVariablesFromStylesheet.ts +++ b/docs/utils/getCSSVariablesFromStylesheet.ts @@ -12,7 +12,7 @@ export type Color = { * @param varPrefix - The prefix of the CSS variables to retrieve. * @returns An object containing the retrieved CSS variables. */ -function getCSSVariablesFromStylesheet(varPrefix: string): Color { +export const getCSSVariablesFromStylesheet = (varPrefix: string): Color => { const cssVariables: Color = {}; Array.from(document.styleSheets) @@ -41,6 +41,4 @@ function getCSSVariablesFromStylesheet(varPrefix: string): Color { }); return cssVariables; -} - -export default getCSSVariablesFromStylesheet; +}; diff --git a/docs/utils/index.ts b/docs/utils/index.ts new file mode 100644 index 00000000..4350a456 --- /dev/null +++ b/docs/utils/index.ts @@ -0,0 +1,2 @@ +export { getCSSVariablesFromStylesheet } from './getCSSVariablesFromStylesheet'; +export { useJsonColor } from './useJsonColor'; diff --git a/docs/utils/useJsonColor.ts b/docs/utils/useJsonColor.ts new file mode 100644 index 00000000..7b7412c9 --- /dev/null +++ b/docs/utils/useJsonColor.ts @@ -0,0 +1,99 @@ +import { useEffect, useState } from 'react'; + +import figmaBrandColors from '../../src/figma/brandColors.json'; +import figmaDarkTheme from '../../src/figma/darkTheme.json'; +import figmaLightTheme from '../../src/figma/lightTheme.json'; + +export type ColorDetails = { + value: string; // Hex value or alias to another color + type: string; // Type usually color + parent: string; // Parent category or group of the color + description: string; // Description or notes about the color +}; + +export type ColorPalette = { + [shade: string]: ColorDetails; +}; + +export type Theme = { + [colorName: string]: ColorPalette; +}; + +type CompiledColors = { + [themeName: string]: Theme; +}; + +/** + * Custom hook for compiling color themes from Figma JSON definitions. + * Merges brand, light, and dark theme color settings into a single object. + * + * @returns Object containing compiled color themes. + */ +export const useJsonColor = (): CompiledColors => { + const [colors, setColors] = useState({}); + + useEffect(() => { + /** + * Parses a referenced color value and resolves it based on the current theme. + * If the value is a reference (enclosed in curly braces), it navigates through the theme object. + * + * @param value - The color value or reference to resolve. + * @param theme - The theme object to resolve references against. + * @returns The resolved color value. + */ + const parseColorValue = (value: string, theme: Theme): string => { + if (value.startsWith('{') && value.endsWith('}')) { + const path = value.slice(1, -1).split('.'); + let current: any = theme; + for (const segment of path) { + current = current[segment]; + if (!current) { + return value; // Return original value if resolution fails. + } + } + return current.value; // Return the resolved color value. + } + return value; // Return the direct value if not a reference. + }; + + /** + * Compiles color themes from provided JSON theme definitions. + * Each color value is checked and potentially resolved using parseColorValue. + * + * @param themes - Object containing various theme definitions. + * @returns Object containing compiled and resolved themes. + */ + const compileColors = (themes: { + [key: string]: Theme; + }): CompiledColors => { + const compiledColors: CompiledColors = {}; + Object.entries(themes).forEach(([themeName, theme]) => { + compiledColors[themeName] = {}; + Object.entries(theme).forEach(([colorName, colorValues]) => { + compiledColors[themeName][colorName] = {}; + Object.entries(colorValues).forEach(([shade, details]) => { + const { value, description } = details; + const resolvedValue = parseColorValue(value, figmaBrandColors); + compiledColors[themeName][colorName][shade] = { + ...details, + value: resolvedValue, + description: + description + (value === resolvedValue ? '' : ` ${value}`), + }; + }); + }); + }); + return compiledColors; + }; + + // Compile all color themes into a single object and update the state + const allColors = compileColors({ + brandColor: { ...figmaBrandColors }, + lightTheme: figmaLightTheme, + darkTheme: figmaDarkTheme, + }); + setColors(allColors); + }, []); + + return colors; +}; diff --git a/src/figma/brandColors.json b/src/figma/brandColors.json index 5699ac45..e13aa1b1 100644 --- a/src/figma/brandColors.json +++ b/src/figma/brandColors.json @@ -129,7 +129,7 @@ "description": "" }, "900": { - "value": "{blue.blue900}", + "value": "#00080d", "type": "color", "parent": "Brand Colors/v1 - current", "description": "" diff --git a/src/figma/darkTheme.json b/src/figma/darkTheme.json index f301c51d..cd48bbe3 100644 --- a/src/figma/darkTheme.json +++ b/src/figma/darkTheme.json @@ -4,49 +4,49 @@ "value": "{grey.800}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For default neutral backgrounds" }, - "alternative (secondary)": { + "alternative": { "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For secondary neutral backgrounds." }, "*default-hover": { "value": "#2d3034", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For \"hover\" states that use background-default." }, "*default-pressed": { "value": "#363b3f", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For \"pressed\" states that use background-alternative." }, "*alternative-hover": { "value": "#1e2124", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For \"hover\" states that use background-alternative." }, "*alternative-pressed": { "value": "#272b2f", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For \"pressed\" states that use background-alternative." }, "*hover": { "value": "#ffffff0a", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For \"hover\" state that use no background fill." }, "*pressed": { "value": "#ffffff14", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For \"pressed\" state that use no background fill." } }, "text": { @@ -54,39 +54,39 @@ "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For default neutral text." }, - "alternative (calm)": { + "alternative": { "value": "{grey.200}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For softer contrast neutral text" }, "muted": { "value": "{grey.400}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the softest contrast neutral text (not accessible)" } }, "icon": { "default": { - "value": "{grey.000}", + "value": "{text.default}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For default neutral icons" }, - "alternative (calm)": { - "value": "{grey.200}", + "alternative": { + "value": "{text.alternative}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For softer neutral icons" }, "muted": { - "value": "{grey.400}", + "value": "{text.muted}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the weakest contrast neutral icons (not accessible)" } }, "border": { @@ -94,13 +94,13 @@ "value": "{grey.400}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For soft contrast neutral border" }, "muted": { "value": "#848c9629", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the weakest contrast neutral border" } }, "overlay": { @@ -108,13 +108,13 @@ "value": "#00000099", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the default shade of screen" }, "alternative (strong)": { "value": "#000000cc", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For a stronger shade of screen" } }, "primary": { @@ -122,37 +122,37 @@ "value": "{blue.400}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For interactive, active, and selected semantics. Used for text, background, icon or border" }, "alternative (strong)": { "value": "{blue.200}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the stronger contrast primary semantic elements." }, "muted": { "value": "{blue.400-15%}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the weakest contrast primary semantic backgrounds." }, "inverse": { "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For elements used on top of primary/default. Used for text, icon or border" }, "*default-hover": { "value": "#26a2fc", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the \"hover\" state of primary-default elements" }, "*default-pressed": { "value": "#3baafd", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the \"pressed\" state of primary-default elements" } }, "error": { @@ -160,37 +160,37 @@ "value": "{red.400}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the critical alert semantic elements. Used for text, background, icon or border" }, "alternative (strong)": { "value": "{red.200}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the stronger contrast error semantic elements." }, "muted": { "value": "{red.400-15%}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the weakest contrast critical alert semantic backgrounds." }, "inverse": { "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For elements used on top of error/default. Used for text, icon or border" }, "*default-hover": { "value": "#e47782", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the \"hover\" state of error-default elements." }, "*default-pressed": { "value": "#e78891", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the \"pressed\" state of error-default elements." } }, "warning": { @@ -198,31 +198,31 @@ "value": "{yellow.100}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the caution alert semantic elements. Used for text, background, icon or border" }, "muted": { "value": "{yellow.100-15%}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the weakest contrast caution alert semantic backgrounds." }, "inverse": { "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For elements used on top of warning/default. Used for text, icon or border" }, "*default-hover": { "value": "#ffe485", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the \"hover\" state of warning-default elements" }, "*default-pressed": { "value": "#ffe899", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the \"pressed\" state of warning-default elements" } }, "success": { @@ -230,31 +230,31 @@ "value": "{green.400}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the positive semantic elements. Used for text, background, icon or border" }, "muted": { "value": "{green.400-15%}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the weakest contrast positive semantic backgrounds." }, "inverse": { - "value": "{grey.900}", + "value": "#141618", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For elements used on top of success/default. Used for text, icon or border" }, "*default-hover": { "value": "#2cb94c", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the \"hover\" state of success-default elements" }, "*default-pressed": { "value": "#30ca53", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the \"pressed\" state of success-default elements" } }, "info": { @@ -262,19 +262,19 @@ "value": "{blue.400}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For informational read-only elements. Used for text, background, icon or border" }, "muted": { "value": "{blue.400-15%}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For the weakest contrast informational semantic backgrounds." }, "inverse": { "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For elements used on top of info/default. Used for text, icon or border" } }, "flask": { @@ -282,13 +282,13 @@ "value": "{purple.400}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For Flask primary accent color." }, "inverse": { "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For elements used on top of flask/default. Used for text, icon or border" } }, "shadow": { @@ -296,19 +296,19 @@ "value": "#00000066", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For neutral drop shadow color." }, "primary": { "value": "#1098fc66", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For primary drop shadow color." }, "error": { "value": "#d73a4966", "type": "color", "parent": "Theme Colors/Dark mode", - "description": "" + "description": "For critical/danger drop shadow color." } } } diff --git a/src/figma/lightTheme.json b/src/figma/lightTheme.json index 2c829a90..d8762c96 100644 --- a/src/figma/lightTheme.json +++ b/src/figma/lightTheme.json @@ -4,49 +4,49 @@ "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For default neutral backgrounds" }, - "alternative (secondary)": { + "alternative": { "value": "{grey.050}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For secondary neutral backgrounds." }, "*default-hover": { "value": "#f5f5f5", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For \"hover\" states that use background-default." }, "*default-pressed": { "value": "#ebebeb", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For \"pressed\" states that use background-alternative." }, "*alternative-hover": { "value": "#e7ebee", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For \"hover\" states that use background-alternative." }, "*alternative-pressed": { "value": "#dbe0e6", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For \"pressed\" states that use background-alternative." }, "*hover": { "value": "#0000000a", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For \"hover\" state that use no background fill." }, "*pressed": { "value": "#00000014", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For \"pressed\" state that use no background fill." } }, "text": { @@ -54,19 +54,19 @@ "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For default neutral text." }, - "alternative (calm)": { + "alternative": { "value": "{grey.500}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For softer contrast neutral text" }, "muted": { "value": "{grey.300}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the softest contrast neutral text (not accessible)" } }, "icon": { @@ -74,19 +74,19 @@ "value": "{grey.900}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For default neutral icons" }, - "alternative (calm)": { + "alternative": { "value": "{grey.500}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For softer neutral icons" }, "muted": { "value": "{grey.300}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the weakest contrast neutral icons (not accessible)" } }, "border": { @@ -94,13 +94,13 @@ "value": "{grey.200}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For soft contrast neutral border" }, "muted": { "value": "#bbc0c566", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the weakest contrast neutral border" } }, "overlay": { @@ -108,13 +108,13 @@ "value": "#00000099", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the default shade of screen" }, "alternative (strong)": { "value": "#000000cc", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For a stronger shade of screen" } }, "primary": { @@ -122,37 +122,37 @@ "value": "{blue.500}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For interactive, active, and selected semantics. Used for text, background, icon or border" }, "alternative (strong)": { "value": "{blue.600}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the stronger contrast primary semantic elements." }, "muted": { "value": "{blue.500-10%}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the weakest contrast primary semantic backgrounds." }, "inverse": { "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For elements used on top of primary/default. Used for text, icon or border" }, "*default-hover": { "value": "#036ab5", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the \"hover\" state of primary-default elements" }, "*default-pressed": { "value": "#025ea1", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the \"pressed\" state of primary-default elements" } }, "error": { @@ -160,37 +160,37 @@ "value": "{red.500}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the critical alert semantic elements. Used for text, background, icon or border" }, "alternative (strong)": { "value": "{red.600}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the stronger contrast error semantic elements." }, "muted": { "value": "{red.500-10%}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the weakest contrast critical alert semantic backgrounds." }, "inverse": { "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For elements used on top of error/default. Used for text, icon or border" }, "*default-hover": { "value": "#d02a3a", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the \"hover\" state of error-default elements." }, "*default-pressed": { "value": "#bf2635", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the \"pressed\" state of error-default elements." } }, "warning": { @@ -198,31 +198,31 @@ "value": "{yellow.500}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the caution alert semantic elements. Used for text, background, icon or border" }, "muted": { "value": "{yellow.500-10%}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the weakest contrast caution alert semantic backgrounds." }, "inverse": { "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For elements used on top of warning/default. Used for text, icon or border" }, "*default-hover": { "value": "#ac4a07", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the \"hover\" state of warning-default elements" }, "*default-pressed": { "value": "#984106", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the \"pressed\" state of warning-default elements" } }, "success": { @@ -230,31 +230,31 @@ "value": "{green.500}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the positive semantic elements. Used for text, background, icon or border" }, "muted": { "value": "{green.500-10%}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the weakest contrast positive semantic backgrounds." }, "inverse": { "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For elements used on top of success/default. Used for text, icon or border" }, "*default-hover": { "value": "#18712d", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the \"hover\" state of success-default elements" }, "*default-pressed": { "value": "#156127", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the \"pressed\" state of success-default elements" } }, "info": { @@ -262,19 +262,19 @@ "value": "{blue.500}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For informational read-only elements. Used for text, background, icon or border" }, "muted": { "value": "{blue.500-10%}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For the weakest contrast informational semantic backgrounds." }, "inverse": { "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For elements used on top of info/default. Used for text, icon or border" } }, "flask": { @@ -282,13 +282,13 @@ "value": "{purple.500}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For Flask primary accent color." }, "inverse": { "value": "{grey.000}", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For elements used on top of flask/default. Used for text, icon or border" } }, "shadow": { @@ -296,19 +296,19 @@ "value": "#0000001a", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For neutral drop shadow color." }, "primary": { "value": "#0376c933", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For primary drop shadow color." }, "error": { "value": "#d7384766", "type": "color", "parent": "Theme Colors/Light mode", - "description": "" + "description": "For critical/danger drop shadow color." } } } diff --git a/tsconfig.json b/tsconfig.json index 195b335d..70a4f890 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,7 +10,9 @@ "noErrorTruncation": true, "noUncheckedIndexedAccess": true, "strict": true, - "target": "es2020" + "target": "es2020", + "resolveJsonModule": true, + "jsx": "react" }, "exclude": ["./dist", "**/node_modules"] }