@dxos/ui-theme 0.0.0 → 0.8.4-main.16b68245aa

package/src/Tokens.stories.tsx

@@ -1,88 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type HelicalArcSeries, type TokenAudit, auditFacet, parseAlphaLuminosity } from '@ch-ui/tokens';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { Fragment } from 'react';
-
-import { tokenSet } from './config';
-
-const colorAudit = auditFacet(tokenSet.colors, { condition: 'p3' });
-
-const Swatch = ({ variableName, value, semantic, physical }: TokenAudit<HelicalArcSeries>) => {
-  const [luminosity, alpha] = parseAlphaLuminosity(value);
-
-  return (
-    <div className='shrink-0 is-40 flex flex-col rounded overflow-hidden'>
-      <dd className='aspect-video' style={{ background: `var(${variableName})` }}></dd>
-      <dt className='text-xs bg-baseSurface grow pli-2 plb-1'>
-        <p className='text-sm'>
-          {luminosity}
-          {typeof alpha !== 'undefined' && ` / ${alpha}`}
-        </p>
-        {physical.includes('values') && <p>values</p>}
-        {physical.includes('naming') && <p>naming</p>}
-        {semantic.length > 0 && (
-          <ul>
-            {semantic.map(({ sememeName, conditionId }) => {
-              const sememeCondition = `${sememeName} / ${conditionId}`;
-              return <li key={sememeCondition}>{sememeCondition}</li>;
-            })}
-          </ul>
-        )}
-      </dt>
-    </div>
-  );
-};
-
-const DefaultStory = () => {
-  return (
-    <>
-      <div className='flex'>
-        <div className='p-2 bg-baseSurface rounded'>
-          <h1 className='text-lg mbe-2'>Physical color tokens</h1>
-          <pre className='text-xs'>
-            Luminosity (/ alpha)?
-            <br />
-            value // (whether added directly as a physical value)
-            <br />
-            naming // (whether added as a named physical value)
-            <br />
-            ...`semantic token name / theme`[]
-          </pre>
-        </div>
-      </div>
-
-      {Object.entries(colorAudit).map(([seriesId, audits], i) => (
-        <Fragment key={i}>
-          <h2 className='mbs-12 mbe-4'>
-            <span className='pli-2 plb-1 bg-baseSurface rounded'>{seriesId}</span>
-          </h2>
-          <dl className='flex flex-wrap gap-2'>
-            {audits
-              .sort((a, b) => {
-                const [aL, aA] = parseAlphaLuminosity(a.value);
-                const [bL, bA] = parseAlphaLuminosity(b.value);
-                return aL - bL - (Number.isFinite(aA) && Number.isFinite(bA) ? aA! - bA! : 0);
-              })
-              .map((audit, i) => (
-                <Swatch key={i} {...audit} />
-              ))}
-          </dl>
-        </Fragment>
-      ))}
-    </>
-  );
-};
-
-const meta = {
-  title: 'ui/react-ui-theme/Tokens',
-  render: DefaultStory,
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/src/config/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './tokens';
-export * from './tailwind';

package/src/config/tailwind.ts

@@ -1,250 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import tailwindcssContainerQueries from '@tailwindcss/container-queries';
-import tailwindcssForms from '@tailwindcss/forms';
-import merge from 'lodash.merge';
-import tailwindScrollbar from 'tailwind-scrollbar';
-import defaultConfig from 'tailwindcss/stubs/config.full.js';
-import { type Config, type ThemeConfig } from 'tailwindcss/types/config';
-import tailwindcssLogical from 'tailwindcss-logical';
-import tailwindcssRadix from 'tailwindcss-radix';
-
-import { tokensTailwindConfig } from './tokens';
-
-export type TailwindConfig = Config;
-export type TailwindThemeConfig = ThemeConfig;
-
-const { extend: extendTokens, ...overrideTokens } = tokensTailwindConfig;
-
-export const tailwindConfig = ({
-  env = 'production',
-  content = [],
-  extensions = [],
-}: {
-  env?: string;
-  content?: string[];
-  extensions?: Partial<TailwindThemeConfig>[];
-}): TailwindConfig => ({
-  darkMode: 'class',
-  theme: {
-    // Configure fonts in theme.css and package.json.
-    fontFamily: {
-      body: ['Inter Variable', ...defaultConfig.theme.fontFamily.sans],
-      mono: ['JetBrains Mono Variable', ...defaultConfig.theme.fontFamily.mono],
-    },
-    extend: merge(
-      {
-        spacing: {
-          prose: 'var(--dx-prose)',
-          containerMaxWidth: 'var(--dx-containerMaxWidth)',
-          cardDefaultWidth: 'var(--dx-cardDefaultWidth)',
-          cardMinWidth: 'var(--dx-cardMinWidth)',
-          cardMaxWidth: 'var(--dx-cardMaxWidth)',
-          popoverMaxWidth: 'var(--dx-popoverMaxWidth)',
-        },
-        backgroundImage: {
-          'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-          'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-        },
-        borderRadius: {
-          none: '0',
-          sm: '0.25rem',
-          DEFAULT: '0.5rem',
-          md: '.75rem',
-          lg: '1rem',
-        },
-        screens: {
-          'pointer-fine': { raw: '(pointer: fine)' },
-          'hover-hover': { raw: '(hover: hover)' },
-          md: '768px',
-          lg: '1024px',
-        },
-        fontSize: {
-          // Base size 16px
-          // Scale 1.125
-          xs: ['0.790rem', { lineHeight: '1rem' }],
-          sm: ['0.889rem', { lineHeight: '1.25rem' }],
-          base: ['1rem', { lineHeight: '1.5rem' }],
-          lg: ['1.125rem', { lineHeight: '1.75rem' }],
-          xl: ['1.266rem', { lineHeight: '1.75rem' }],
-          '2xl': ['1.424rem', { lineHeight: '2rem' }],
-          '3xl': ['1.602rem', { lineHeight: '2.25rem' }],
-          '4xl': ['1.802rem', { lineHeight: '2.5rem' }],
-          '5xl': ['2.027rem', { lineHeight: '2.5rem' }],
-          '6xl': ['2.281rem', { lineHeight: '2.5rem' }],
-          '7xl': ['2.566rem', { lineHeight: '2.75rem' }],
-          '8xl': ['2.887rem', { lineHeight: '3rem' }],
-          '9xl': ['3.247rem', { lineHeight: '3.25rem' }],
-        },
-        boxShadow: {
-          slider: '0 0 0 5px rgba(0, 0, 0, 0.3)',
-        },
-        transitionProperty: {
-          'max-height': 'max-height',
-        },
-        transitionTimingFunction: {
-          'in-out-symmetric': 'cubic-bezier(0.5,0,0.5,1)',
-        },
-        keyframes: {
-          // Popper chrome
-          slideDownAndFade: {
-            from: { opacity: 0, transform: 'translateY(-2px)' },
-            to: { opacity: 1, transform: 'translateY(0)' },
-          },
-          slideLeftAndFade: {
-            from: { opacity: 0, transform: 'translateX(2px)' },
-            to: { opacity: 1, transform: 'translateX(0)' },
-          },
-          slideUpAndFade: {
-            from: { opacity: 0, transform: 'translateY(2px)' },
-            to: { opacity: 1, transform: 'translateY(0)' },
-          },
-          slideRightAndFade: {
-            from: { opacity: 0, transform: 'translateX(-2px)' },
-            to: { opacity: 1, transform: 'translateX(0)' },
-          },
-          fadeIn: {
-            from: { opacity: 0 },
-            to: { opacity: 1 },
-          },
-
-          // Accordion
-          slideDown: {
-            from: { height: '0px' },
-            to: { height: 'var(--radix-accordion-content-height)' },
-          },
-          slideUp: {
-            from: { height: 'var(--radix-accordion-content-height)' },
-            to: { height: '0px' },
-          },
-
-          // Toast
-          'toast-hide': {
-            '0%': { opacity: '1' },
-            '100%': { opacity: '0' },
-          },
-          'toast-slide-in-right': {
-            '0%': { transform: 'translateX(calc(100% + 1rem))' },
-            '100%': { transform: 'translateX(0)' },
-          },
-          'toast-slide-in-bottom': {
-            '0%': { transform: 'translateY(calc(100% + 1rem))' },
-            '100%': { transform: 'translateY(0)' },
-          },
-          'toast-swipe-out': {
-            '0%': {
-              transform: 'translateX(var(--radix-toast-swipe-end-x))',
-            },
-            '100%': {
-              transform: 'translateX(calc(100% + 1rem))',
-            },
-          },
-
-          // Shimmer
-          'shimmer-loop': {
-            '100%': {
-              transform: 'translateX(100%)',
-            },
-          },
-
-          'halo-pulse': {
-            '0%': {
-              opacity: 0.3,
-            },
-            '5%': {
-              opacity: 1,
-            },
-            '100%': {
-              opacity: 0.3,
-            },
-          },
-
-          'progress-indeterminate': {
-            '0%': {
-              left: 0,
-              width: '0%',
-            },
-            '25%': {
-              left: '25%',
-              width: '50%',
-            },
-            '75%': {
-              left: '50%',
-              width: '100%',
-            },
-            '100%': {
-              left: '100%',
-              width: '0%',
-            },
-          },
-
-          // Border trail
-          ['trail']: {
-            to: { 'offset-distance': '100%' },
-          },
-          ['trail-offset']: {
-            '0%': { 'offset-distance': '50%' },
-            '100%': { 'offset-distance': '150%' },
-          },
-        },
-        animation: {
-          ['fade-in']: 'fadeIn 100ms ease-in forwards',
-
-          // Border trail
-          ['trail']: 'trail 6s linear infinite',
-          ['trail-offset']: 'trail-offset 6s linear infinite',
-
-          // Popper chrome
-          ['slideDownAndFade']: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-          ['slideLeftAndFade']: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-          ['slideUpAndFade']: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-          ['slideRightAndFade']: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-
-          // Toast
-          ['toast-hide']: 'toast-hide 100ms ease-in forwards',
-          ['toast-slide-in-right']: 'toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-          ['toast-slide-in-bottom']: 'toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-          ['toast-swipe-out']: 'toast-swipe-out 100ms ease-out forwards',
-
-          // Accordion
-          ['slideDown']: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-          ['slideUp']: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-
-          ['spin']: 'spin 1.5s linear infinite',
-          ['spin-slow']: 'spin 3s linear infinite',
-
-          ['shimmer']: 'shimmer-loop 2s infinite',
-          ['halo-pulse']: 'halo-pulse 2s ease-out infinite',
-          ['progress-indeterminate']: 'progress-indeterminate 2s ease-out infinite',
-          ['progress-linear']: 'progress-linear 2s ease-out infinite',
-        },
-      },
-      extendTokens,
-      ...extensions,
-    ),
-    ...overrideTokens,
-    colors: {
-      ...overrideTokens.colors,
-      inherit: 'inherit',
-      current: 'currentColor',
-      transparent: 'transparent',
-      black: 'black',
-      white: 'white',
-    },
-  },
-  plugins: [
-    tailwindcssContainerQueries,
-    tailwindcssForms,
-    tailwindcssLogical,
-    tailwindcssRadix(),
-    // https://adoxography.github.io/tailwind-scrollbar/utilities
-    tailwindScrollbar,
-  ],
-  ...(env === 'development' && { mode: 'jit' }),
-  content,
-  future: {
-    hoverOnlyWhenSupported: true,
-  },
-});

package/src/config/tokens/alias-colors.ts

@@ -1,39 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type AliasLayer } from '@ch-ui/tokens';
-
-import { valenceAliases } from './sememes-hue';
-import { sheetAliases } from './sememes-sheet';
-import { systemAliases } from './sememes-system';
-
-const groupAliases = ['groupSurface', ...(systemAliases.groupSurface?.root ?? [])];
-const modalAliases = ['modalSurface', ...(systemAliases.modalSurface?.root ?? [])];
-
-export const aliasColors = {
-  conditions: {
-    root: [':root, .dark'],
-    group: [
-      [
-        '.sidebar-surface, .dark .sidebar-surface',
-        ...groupAliases.map((alias) => `.bg-${alias}, .dark .bg-${alias}`),
-      ].join(', '),
-    ],
-    modal: [
-      [
-        '.modal-surface, .dark .modal-surface',
-        ...modalAliases.map((alias) => `.bg-${alias}, .dark .bg-${alias}`),
-        //
-      ].join(', '),
-    ],
-    gridFocusStack: ['[data-grid-focus-indicator-variant="stack"]'],
-  },
-  aliases: {
-    // TODO(thure): Aliases should be merged more elegantly, this causes overwrites.
-    ...sheetAliases,
-    ...systemAliases,
-    ...valenceAliases,
-  },
-  namespace: 'dx-',
-} satisfies AliasLayer<string>;

package/src/config/tokens/index.ts

@@ -1,92 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type TailwindAdapterConfig } from '@ch-ui/tailwind-tokens';
-import adapter from '@ch-ui/tailwind-tokens';
-import { type TokenSet } from '@ch-ui/tokens';
-
-import { aliasColors } from './alias-colors';
-import { lengthsFacet, maxSizesFacet } from './lengths';
-import { huePalettes, physicalColors } from './physical-colors';
-import { semanticColors } from './semantic-colors';
-import { systemAliases, systemSememes } from './sememes-system';
-
-export * from './sizes';
-
-export const hues = Object.keys(huePalettes);
-
-export const tokenSet = {
-  colors: {
-    physical: physicalColors,
-    semantic: semanticColors,
-    alias: aliasColors,
-  },
-  lengths: lengthsFacet,
-  maxSizes: maxSizesFacet,
-} satisfies TokenSet;
-
-const adapterConfig: TailwindAdapterConfig = {
-  colors: {
-    facet: 'colors',
-    disposition: 'overwrite',
-    tokenization: 'recursive',
-  },
-  borderWidth: {
-    facet: 'lengths',
-    disposition: 'extend',
-    tokenization: 'omit-series',
-  },
-  ringWidth: {
-    facet: 'lengths',
-    disposition: 'extend',
-    tokenization: 'omit-series',
-  },
-  ringOffsetWidth: {
-    facet: 'lengths',
-    disposition: 'extend',
-    tokenization: 'omit-series',
-  },
-  outlineWidth: {
-    facet: 'lengths',
-    disposition: 'extend',
-    tokenization: 'omit-series',
-  },
-  spacing: {
-    facet: 'lengths',
-    disposition: 'extend',
-    tokenization: 'keep-series',
-  },
-};
-
-export const userDefaultTokenSet = {
-  colors: {
-    physical: {
-      definitions: {
-        series: {
-          neutral: physicalColors.definitions!.series!.neutral,
-          primary: physicalColors.definitions!.series!.primary,
-        },
-        accompanyingSeries: physicalColors.definitions!.accompanyingSeries,
-      },
-      conditions: physicalColors.conditions,
-      series: {
-        neutral: physicalColors.series.neutral,
-        primary: physicalColors.series.primary,
-      },
-      namespace: physicalColors.namespace,
-    },
-    semantic: {
-      conditions: semanticColors.conditions,
-      sememes: systemSememes,
-      namespace: semanticColors.namespace,
-    },
-    alias: {
-      conditions: aliasColors.conditions,
-      aliases: systemAliases,
-      namespace: aliasColors.namespace,
-    },
-  },
-} satisfies TokenSet;
-
-export const tokensTailwindConfig = adapter(tokenSet, adapterConfig);

package/src/config/tokens/lengths.ts

@@ -1,97 +0,0 @@
-//
-
-// Copyright 2025 DXOS.org
-//
-
-import { type Facet, type LinearPhysicalLayer } from '@ch-ui/tokens';
-
-import { cardDefaultInlineSize, cardMaxInlineSize, cardMinInlineSize } from './sizes';
-
-export const lengthsFacet = {
-  physical: {
-    namespace: 'dx-',
-    conditions: { root: [':root'] },
-    series: {
-      line: {
-        root: {
-          unit: 'px',
-          initial: 0,
-          slope: 1,
-        },
-      },
-      // "gap"
-      lacuna: {
-        root: {
-          unit: 'rem',
-          initial: 0,
-          slope: 0.125,
-        },
-      },
-    },
-  } satisfies LinearPhysicalLayer,
-
-  semantic: {
-    namespace: 'dx-',
-    conditions: { root: [':root'] },
-    sememes: {
-      noLine: { root: ['line', 0] },
-      hairLine: { root: ['line', 1] },
-      thickLine: { root: ['line', 2] },
-      trimXs: { root: ['lacuna', 3] },
-      trimSm: { root: ['lacuna', 4] },
-      trimMd: { root: ['lacuna', 6] },
-      trimLg: { root: ['lacuna', 12] },
-      inputFine: { root: ['lacuna', 3] },
-      inputCoarse: { root: ['lacuna', 4] },
-    },
-  },
-
-  alias: {
-    namespace: 'dx-',
-    conditions: {
-      fine: [':root, .density-fine'],
-      coarse: ['.density-coarse'],
-      flush: ['.density-flush'],
-      gridFocusStack: ['[data-grid-focus-indicator-variant="stack"]'],
-    },
-    aliases: {
-      noLine: { fine: ['focusOffset'] },
-      hairLine: { fine: ['modalLine', 'landmarkLine', 'positionedLine', 'gridGap', 'gridFocusIndicatorWidth'] },
-      thickLine: { fine: ['focusLine'], gridFocusStack: ['gridFocusIndicatorWidth'] },
-      trimXs: { fine: ['cardSpacingChrome', 'labelSpacingBlock', 'inputSpacingBlock'] }, // TODO(burdon): Remove need for this.
-      trimSm: { fine: ['cardSpacingInline', 'cardSpacingBlock', 'cardSpacingGap'] },
-      trimMd: { coarse: ['cardSpacingInline', 'cardSpacingBlock', 'cardSpacingGap'] },
-      inputFine: { fine: ['iconButtonPadding'] },
-      inputCoarse: { coarse: ['iconButtonPadding'] },
-    },
-  },
-} satisfies Facet;
-
-export const maxSizesFacet = {
-  physical: {
-    namespace: 'dx-',
-    conditions: { root: [':root'] },
-    series: {
-      size: {
-        root: {
-          unit: 'rem',
-          initial: 0,
-          slope: 1,
-        },
-      },
-    },
-  } satisfies LinearPhysicalLayer,
-
-  semantic: {
-    namespace: 'dx-',
-    conditions: { root: [':root'] },
-    sememes: {
-      prose: { root: ['size', 50] },
-      containerMaxWidth: { root: ['size', 50] },
-      popoverMaxWidth: { root: ['size', cardDefaultInlineSize] },
-      cardDefaultWidth: { root: ['size', cardDefaultInlineSize] },
-      cardMinWidth: { root: ['size', cardMinInlineSize] },
-      cardMaxWidth: { root: ['size', cardMaxInlineSize] },
-    },
-  },
-} satisfies Facet;

package/src/config/tokens/physical-colors.ts

@@ -1,125 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import type { AccompanyingSeries, ColorsPhysicalLayer, Gamut, HelicalArcSeries, PhysicalSeries } from '@ch-ui/tokens';
-
-import { type PhysicalPalette } from './types';
-
-const reflectiveRelation = {
-  initial: 1_000,
-  slope: -1_000,
-  method: 'floor',
-} satisfies AccompanyingSeries;
-
-const gamuts: (Gamut & string)[] = ['srgb', 'p3', 'rec2020'];
-
-const DEG_RAD = Math.PI / 180;
-
-/**
- * Creates a color palette configuration for a given hue value.
- *
- * @param hue - A number from 0-16 representing different hue angles
- * @returns A PhysicalPalette configuration with:
- * - keyPoint: [lightness, chroma, hue] in LCH color space
- *   - lightness: Fixed at 0.5 (50%)
- *   - chroma: Varies sinusoidally around 0.13 based on hue angle
- *   - hue: Calculated by mapping input 0-16 to 26-386 degrees
- * - Control points and torsion for color interpolation
- */
-const hueKeyPoint = (hue: number): PhysicalPalette => {
-  const hueDeg = (360 * (hue / 17) + 26) % 360;
-  return {
-    keyPoint: [0.5, 0.13 + 0.024 * Math.sin((hueDeg - 15) * DEG_RAD), hueDeg],
-    lowerCp: 1,
-    upperCp: 1,
-    torsion: 0,
-  };
-};
-
-export const huePalettes = {
-  red: hueKeyPoint(0),
-  orange: hueKeyPoint(1),
-  amber: hueKeyPoint(2),
-  yellow: hueKeyPoint(3),
-  lime: hueKeyPoint(4),
-  green: hueKeyPoint(5),
-  emerald: hueKeyPoint(6),
-  teal: hueKeyPoint(7),
-  cyan: hueKeyPoint(8),
-  sky: hueKeyPoint(9),
-  blue: hueKeyPoint(10),
-  indigo: hueKeyPoint(11),
-  violet: hueKeyPoint(12),
-  purple: hueKeyPoint(13),
-  fuchsia: hueKeyPoint(14),
-  pink: hueKeyPoint(15),
-  rose: hueKeyPoint(16),
-};
-
-/**
- * The keyPoint represents the LCH value:
- * - Lightness: 0-1, should usually set the keyPoint at or near 0.5
- * - Chroma: min 0, max 0.08–0.5 depending on hue and gamut, theme will clamp final value to within gamut’s range
- * - Hue: 0-360 (~26 “red”, ~141 “green”, ~262 “blue”)
- *
- * NOTE: Rebuild the theme and restart the dev server to see changes.
- *
- * Theme references:
- * https://oklch.com
- * https://colorsublime.github.io
- * https://github.com/microsoft/vscode-docs/blob/main/api/extension-guides/color-theme.md#create-a-new-color-theme
- * https://raw.githubusercontent.com/microsoft/vscode/main/src/vs/workbench/services/themes/common/colorThemeSchema.ts
- * https://tailwindcss.com/docs/colors
- */
-const systemPalettes = {
-  neutral: {
-    keyPoint: [0.5, 0.001, 260],
-    lowerCp: 0,
-    upperCp: 0,
-    torsion: 0,
-    // Values used directly.
-    // TODO(burdon): Audit.
-    values: [25, 50, 75, 100, 150, 200, 250, 300, 400, 500, 600, 700, 750, 800, 850, 900],
-  } satisfies PhysicalPalette,
-
-  // https://oklch.com/#0.5,0.2,260,100 (#0559d2)
-  primary: {
-    keyPoint: [0.5, 0.2, 260],
-    lowerCp: 0.86,
-    upperCp: 1,
-    torsion: -30,
-    // Values used directly.
-    // TODO(burdon): Audit.
-    values: [100, 150, 200, 350, 400, 450, 500, 750, 800, 850],
-  } satisfies PhysicalPalette,
-};
-
-const physicalSeries = {
-  ...huePalettes,
-  ...systemPalettes,
-};
-
-export const physicalColors: ColorsPhysicalLayer = {
-  namespace: 'dx-',
-  definitions: {
-    // @ts-ignore
-    series: physicalSeries,
-    accompanyingSeries: { reflectiveRelation },
-  },
-  conditions: {
-    srgb: [':root, .dark'],
-    p3: ['@media (color-gamut: p3)', ':root, .dark'],
-    rec2020: ['@media (color-gamut: rec2020)', ':root, .dark'],
-  },
-  series: Object.entries(physicalSeries).reduce((acc: ColorsPhysicalLayer['series'], [id]) => {
-    acc[id] = gamuts.reduce((acc: PhysicalSeries<Gamut & string, HelicalArcSeries>, gamut) => {
-      acc[gamut] = {
-        extends: id,
-        physicalValueRelation: { extends: 'reflectiveRelation' },
-      };
-      return acc;
-    }, {});
-    return acc;
-  }, {}),
-};