onClose()}
+ onClick={closeTab}
className={classes.back}
>
Gå tilbake
@@ -102,6 +127,8 @@ export const ColorPane = ({
.toLowerCase();
setName(value);
}}
+ onBlur={checkNameIsValid}
+ error={colorError}
/>
)}
Farge
@@ -122,6 +149,8 @@ export const ColorPane = ({
data-size='sm'
color='neutral'
onClick={() => {
+ /* Check here as well to disable sending new color */
+ if (!checkNameIsValid()) return;
onPrimaryClicked(color.hex, name);
}}
>
@@ -132,9 +161,7 @@ export const ColorPane = ({
data-size='sm'
color='neutral'
variant='secondary'
- onClick={() => {
- onClose();
- }}
+ onClick={closeTab}
>
Avbryt
diff --git a/packages/cli/bin/config.ts b/packages/cli/bin/config.ts
index d2e2f0f87f..dca0585e85 100644
--- a/packages/cli/bin/config.ts
+++ b/packages/cli/bin/config.ts
@@ -1,6 +1,7 @@
import * as R from 'ramda';
import { z } from 'zod';
import { convertToHex } from '../src/colors/index.js';
+import { RESERVED_COLORS } from '../src/colors/theme.js';
import { cliOptions } from '../src/tokens/create.js';
export function mapPathToOptionName(path: (string | number)[]) {
@@ -20,14 +21,31 @@ const hexPatterns = [
`#[0-9a-fA-F]{6}`,
`#[0-9a-fA-F]{8}`,
];
+const reservedColorsPattern = `^(?!(?:${RESERVED_COLORS.join('|')})$)`;
export const colorRegex = new RegExp(`^${hexPatterns.join('|')}$`);
const colorSchema = z
- .string({ description: 'A hex color, which is used for creating a color scale' })
+ .string({
+ description: `A hex color, which is used for creating a color scale. Invalid color names: ${RESERVED_COLORS.join(', ')}`,
+ })
.regex(colorRegex)
.transform(convertToHex);
-const colorCategorySchema = z.record(colorSchema, { description: 'One or more color definitions' });
+
+const colorCategorySchema = z
+ .record(
+ z.string().regex(new RegExp(reservedColorsPattern, 'i'), {
+ message: `Color names cannot include reserved names: ${RESERVED_COLORS.join(', ')}`,
+ }),
+ colorSchema,
+ {
+ description: 'One or more color definitions',
+ invalid_type_error: 'Color definitions must be hex color values',
+ },
+ )
+ .refine((colors) => !Object.keys(colors).some((key) => RESERVED_COLORS.includes(key.toLowerCase())), {
+ message: `Color names cannot include reserved names: ${RESERVED_COLORS.join(', ')}`,
+ });
const themeSchema = z.object(
{
diff --git a/packages/cli/src/colors/theme.ts b/packages/cli/src/colors/theme.ts
index 4bd163ca1f..419c21528d 100644
--- a/packages/cli/src/colors/theme.ts
+++ b/packages/cli/src/colors/theme.ts
@@ -5,6 +5,19 @@ import type { CssColor } from './types.js';
import type { Color, ColorNumber, ColorScheme, ThemeInfo } from './types.js';
import { getLightnessFromHex, getLuminanceFromLightness } from './utils.js';
+export const RESERVED_COLORS = [
+ 'neutral',
+ 'success',
+ 'warning',
+ 'danger',
+ 'info',
+ 'blue',
+ 'green',
+ 'orange',
+ 'purple',
+ 'red',
+];
+
/**
* Generates a color scale based on a base color and a color mode.
*