@sumup-oss/design-tokens 8.0.0-next.0

package/dist/es/themes/shared.js

@@ -0,0 +1,330 @@
+/**
+ * Copyright 2024, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const shared = [
+    /* Border radii */
+    {
+        name: '--cui-border-radius-bit',
+        value: '4px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-border-radius-byte',
+        value: '8px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-border-radius-kilo',
+        value: '12px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-border-radius-mega',
+        value: '16px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-border-radius-circle',
+        value: '100%',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-border-radius-pill',
+        value: '999999px',
+        type: 'dimension',
+    },
+    /* Border widths */
+    {
+        name: '--cui-border-width-kilo',
+        value: '1px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-border-width-mega',
+        value: '2px',
+        type: 'dimension',
+    },
+    /* Font families */
+    {
+        name: '--cui-font-stack-default',
+        value: 'aktiv-grotesk, Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+        type: 'fontFamily',
+    },
+    {
+        name: '--cui-font-stack-mono',
+        value: 'Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace',
+        type: 'fontFamily',
+    },
+    /* Font weights */
+    {
+        name: '--cui-font-weight-regular',
+        value: '400',
+        type: 'fontWeight',
+    },
+    {
+        name: '--cui-font-weight-bold',
+        value: '700',
+        type: 'fontWeight',
+    },
+    /* Icon sizes */
+    {
+        name: '--cui-icon-sizes-kilo',
+        value: '16px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-icon-sizes-mega',
+        value: '24px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-icon-sizes-giga',
+        value: '32px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-icon-sizes-tera',
+        value: '48px',
+        type: 'dimension',
+    },
+    /* Spacings */
+    {
+        name: '--cui-spacings-bit',
+        value: '4px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-spacings-byte',
+        value: '8px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-spacings-kilo',
+        value: '12px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-spacings-mega',
+        value: '16px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-spacings-giga',
+        value: '24px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-spacings-tera',
+        value: '32px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-spacings-peta',
+        value: '40px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-spacings-exa',
+        value: '48px',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-spacings-zetta',
+        value: '56px',
+        type: 'dimension',
+    },
+    /* Transitions */
+    {
+        name: '--cui-transitions-default',
+        value: '120ms ease-in-out',
+        type: 'duration',
+    },
+    {
+        name: '--cui-transitions-slow',
+        value: '300ms ease-in-out',
+        type: 'duration',
+    },
+    /* Typography */
+    {
+        name: '--cui-typography-headline-one-font-size',
+        value: '2rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-headline-one-line-height',
+        value: '2.25rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-headline-two-font-size',
+        value: '1.5rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-headline-two-line-height',
+        value: '1.75rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-headline-three-font-size',
+        value: '1.25rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-headline-three-line-height',
+        value: '1.5rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-headline-four-font-size',
+        value: '1.125rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-headline-four-line-height',
+        value: '1.5rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-title-one-font-size',
+        value: '7.5rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-title-one-line-height',
+        value: '7.5rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-title-two-font-size',
+        value: '6rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-title-two-line-height',
+        value: '6rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-title-three-font-size',
+        value: '4rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-title-three-line-height',
+        value: '4rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-title-four-font-size',
+        value: '3.5rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-title-four-line-height',
+        value: '3.5rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-sub-headline-font-size',
+        value: '0.875rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-sub-headline-line-height',
+        value: '1.25rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-body-one-font-size',
+        value: '1rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-body-one-line-height',
+        value: '1.5rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-body-two-font-size',
+        value: '0.875rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-body-two-line-height',
+        value: '1.25rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-body-large-font-size',
+        value: '1.25rem',
+        type: 'dimension',
+    },
+    {
+        name: '--cui-typography-body-large-line-height',
+        value: '1.75rem',
+        type: 'dimension',
+    },
+    /* Z-indices */
+    {
+        name: '--cui-z-index-default',
+        value: 0,
+        type: 'number',
+    },
+    {
+        name: '--cui-z-index-absolute',
+        value: 1,
+        type: 'number',
+    },
+    {
+        name: '--cui-z-index-input',
+        value: 20,
+        type: 'number',
+    },
+    {
+        name: '--cui-z-index-popover',
+        value: 30,
+        type: 'number',
+    },
+    {
+        name: '--cui-z-index-tooltip',
+        value: 40,
+        type: 'number',
+    },
+    {
+        name: '--cui-z-index-header',
+        value: 600,
+        type: 'number',
+    },
+    {
+        name: '--cui-z-index-backdrop',
+        value: 700,
+        type: 'number',
+    },
+    {
+        name: '--cui-z-index-navigation',
+        value: 800,
+        type: 'number',
+    },
+    {
+        name: '--cui-z-index-modal',
+        value: 1000,
+        type: 'number',
+    },
+    {
+        name: '--cui-z-index-toast',
+        value: 1100,
+        type: 'number',
+    },
+];

package/dist/es/types/index.d.ts

@@ -0,0 +1,175 @@
+/**
+ * Copyright 2020, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export type Spacings = {
+    bit: string;
+    byte: string;
+    kilo: string;
+    mega: string;
+    giga: string;
+    tera: string;
+    peta: string;
+    exa: string;
+    zetta: string;
+};
+export type IconSizes = {
+    kilo: string;
+    mega: string;
+    giga: string;
+    tera: string;
+};
+export type BorderRadius = {
+    bit: string;
+    byte: string;
+    kilo: string;
+    mega: string;
+    circle: string;
+    pill: string;
+};
+export type BorderWidth = {
+    kilo: string;
+    mega: string;
+};
+export type Typography = {
+    fontSize: string;
+    lineHeight: string;
+};
+export type FontStack = {
+    default: string;
+    mono: string;
+};
+export type FontWeight = {
+    regular: string;
+    bold: string;
+};
+type Breakpoint = 'untilKilo' | 'kilo' | 'kiloToMega' | 'mega' | 'untilMega' | 'megaToGiga' | 'giga' | 'untilGiga' | 'gigaToTera' | 'tera' | 'untilTera';
+type GridBreakpoint = 'default' | 'untilKilo' | 'kilo' | 'mega' | 'giga' | 'tera';
+export type Breakpoints = {
+    [key in Breakpoint]: string;
+};
+export type MediaQueries = {
+    [key in Breakpoint]: string;
+};
+export type Grid = {
+    [key in GridBreakpoint]: {
+        priority: number;
+        breakpoint: Breakpoint | 'default';
+        cols: number;
+        maxWidth: string;
+        gutter: string;
+    };
+};
+export type Transitions = {
+    default: string;
+    slow: string;
+};
+export type ZIndex = {
+    default: number;
+    absolute: number;
+    input: number;
+    popover: number;
+    tooltip: number;
+    header: number;
+    backdrop: number;
+    navigation: number;
+    modal: number;
+    toast: number;
+};
+/**
+ * @deprecated
+ *
+ * Use the CSS custom properties from `@sumup-oss/design-tokens` instead.
+ * Use the [`circuit-ui/prefer-custom-properties`](https://github.com/sumup-oss/circuit-ui/tree/main/packages/eslint-plugin-circuit-ui/prefer-custom-properties)
+ * ESLint rule to automatically migrate your code.
+ */
+export interface Theme {
+    spacings: Spacings;
+    iconSizes: IconSizes;
+    borderRadius: BorderRadius;
+    borderWidth: BorderWidth;
+    typography: {
+        headline: {
+            one: Typography;
+            two: Typography;
+            three: Typography;
+            four: Typography;
+        };
+        title: {
+            one: Typography;
+            two: Typography;
+            three: Typography;
+            four: Typography;
+        };
+        subHeadline: Typography;
+        body: {
+            one: Typography;
+            two: Typography;
+        };
+        bodyLarge: Typography;
+    };
+    fontStack: FontStack;
+    fontWeight: FontWeight;
+    breakpoints: Breakpoints;
+    mq: MediaQueries;
+    grid: Grid;
+    transitions: Transitions;
+    zIndex: ZIndex;
+}
+export type ColorScheme = 'light' | 'dark';
+/**
+ * The token definitions below are loosely based on
+ * https://github.com/design-tokens/community-group
+ */
+export type TokenName = `--cui-${string}`;
+export type TokenType = Token['type'];
+export type Token = ColorToken | DimensionToken | DurationToken | FontFamilyToken | FontWeightToken | NumberToken;
+interface BaseToken {
+    name: TokenName;
+    description?: string;
+    type: string;
+    value: unknown;
+}
+type ColorUsage = 'fg' | 'bg' | 'border';
+type ColorSentiment = 'accent' | 'promo' | 'success' | 'warning' | 'danger' | 'on-strong';
+type ColorVariant = 'normal' | 'subtle' | 'highlight' | 'strong' | 'placeholder' | 'elevated' | 'overlay' | 'divider' | 'focus';
+type ColorInteraction = 'hovered' | 'pressed' | 'disabled';
+interface ColorToken extends BaseToken {
+    type: 'color';
+    name: `--cui-${ColorUsage}-${ColorSentiment | ColorVariant}` | `--cui-${ColorUsage}-${ColorVariant}-${ColorInteraction}` | `--cui-${ColorUsage}-${ColorSentiment}-${ColorVariant | ColorInteraction}` | `--cui-${ColorUsage}-${ColorSentiment}-${ColorVariant}-${ColorInteraction}`;
+    value: Color;
+}
+export type Color = `#${string}` | `rgb(${number},${number},${number})` | `rgb(${number},${number},${number},${number})` | `rgba(${number},${number},${number},${number})`;
+interface DimensionToken extends BaseToken {
+    type: 'dimension';
+    value: Dimension;
+}
+type Dimension = `${number}rem` | `${number}px` | `${number}%`;
+interface DurationToken extends BaseToken {
+    type: 'duration';
+    value: Duration;
+}
+type Duration = `${number}ms` | `${number}ms ${string}`;
+interface FontFamilyToken extends BaseToken {
+    type: 'fontFamily';
+    value: string | string[];
+}
+interface FontWeightToken extends BaseToken {
+    type: 'fontWeight';
+    value: string | number;
+}
+interface NumberToken extends BaseToken {
+    type: 'number';
+    value: number;
+}
+export {};

package/dist/es/types/index.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright 2020, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export {};

package/dist/es/utils/theme-prop-type.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright 2020, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import PropTypes from 'prop-types';
+/**
+ * @deprecated
+ *
+ * Use the CSS custom properties from `@sumup-oss/design-tokens` instead.
+ * Use the [`circuit-ui/prefer-custom-properties`](https://github.com/sumup-oss/circuit-ui/tree/main/packages/eslint-plugin-circuit-ui/prefer-custom-properties)
+ * ESLint rule to automatically migrate your code.
+ */
+export declare const themePropType: PropTypes.Requireable<PropTypes.InferProps<{
+    spacings: PropTypes.Requireable<unknown>;
+    iconSizes: PropTypes.Requireable<unknown>;
+    borderRadius: PropTypes.Requireable<unknown>;
+    borderWidth: PropTypes.Requireable<unknown>;
+    typography: PropTypes.Requireable<unknown>;
+    fontStack: PropTypes.Requireable<unknown>;
+    fontWeight: PropTypes.Requireable<unknown>;
+    breakpoints: PropTypes.Requireable<unknown>;
+    mq: PropTypes.Requireable<unknown>;
+    grid: PropTypes.Requireable<unknown>;
+    transitions: PropTypes.Requireable<unknown>;
+    zIndex: PropTypes.Requireable<unknown>;
+}>>;

package/dist/es/utils/theme-prop-type.js

@@ -0,0 +1,156 @@
+/**
+ * Copyright 2020, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import PropTypes from 'prop-types';
+const typePropType = PropTypes.shape({
+    fontSize: PropTypes.string,
+    lineHeight: PropTypes.string,
+}).isRequired;
+const gridPropType = PropTypes.shape({
+    priority: PropTypes.number.isRequired,
+    breakpoint: PropTypes.oneOf([
+        'default',
+        'untilKilo',
+        'kilo',
+        'mega',
+        'giga',
+        'tera',
+    ]).isRequired,
+    cols: PropTypes.number.isRequired,
+    maxWidth: PropTypes.string.isRequired,
+    gutter: PropTypes.string.isRequired,
+}).isRequired;
+/**
+ * @deprecated
+ *
+ * Use the CSS custom properties from `@sumup-oss/design-tokens` instead.
+ * Use the [`circuit-ui/prefer-custom-properties`](https://github.com/sumup-oss/circuit-ui/tree/main/packages/eslint-plugin-circuit-ui/prefer-custom-properties)
+ * ESLint rule to automatically migrate your code.
+ */
+export const themePropType = PropTypes.shape({
+    spacings: PropTypes.shape({
+        bit: PropTypes.string.isRequired,
+        byte: PropTypes.string.isRequired,
+        kilo: PropTypes.string.isRequired,
+        mega: PropTypes.string.isRequired,
+        giga: PropTypes.string.isRequired,
+        tera: PropTypes.string.isRequired,
+        peta: PropTypes.string.isRequired,
+        exa: PropTypes.string.isRequired,
+        zetta: PropTypes.string.isRequired,
+    })
+        .isRequired,
+    iconSizes: PropTypes.shape({
+        kilo: PropTypes.string.isRequired,
+        mega: PropTypes.string.isRequired,
+        giga: PropTypes.string.isRequired,
+        tera: PropTypes.string.isRequired,
+    })
+        .isRequired,
+    borderRadius: PropTypes.shape({
+        bit: PropTypes.string.isRequired,
+        byte: PropTypes.string.isRequired,
+        kilo: PropTypes.string.isRequired,
+        mega: PropTypes.string.isRequired,
+        circle: PropTypes.string.isRequired,
+        pill: PropTypes.string.isRequired,
+    })
+        .isRequired,
+    borderWidth: PropTypes.shape({
+        kilo: PropTypes.string.isRequired,
+        mega: PropTypes.string.isRequired,
+    })
+        .isRequired,
+    typography: PropTypes.shape({
+        headline: PropTypes.shape({
+            one: typePropType,
+            two: typePropType,
+            three: typePropType,
+            four: typePropType,
+        }).isRequired,
+        title: PropTypes.shape({
+            one: typePropType,
+            two: typePropType,
+            three: typePropType,
+            four: typePropType,
+        }).isRequired,
+        subHeadline: typePropType,
+        body: PropTypes.shape({
+            one: typePropType,
+            two: typePropType,
+        }).isRequired,
+        bodyLarge: typePropType,
+    }).isRequired,
+    fontStack: PropTypes.shape({
+        default: PropTypes.string,
+        mono: PropTypes.string,
+    }).isRequired,
+    fontWeight: PropTypes.shape({
+        regular: PropTypes.string.isRequired,
+        bold: PropTypes.string.isRequired,
+    })
+        .isRequired,
+    breakpoints: PropTypes.shape({
+        untilKilo: PropTypes.string.isRequired,
+        kilo: PropTypes.string.isRequired,
+        kiloToMega: PropTypes.string.isRequired,
+        mega: PropTypes.string.isRequired,
+        untilMega: PropTypes.string.isRequired,
+        megaToGiga: PropTypes.string.isRequired,
+        giga: PropTypes.string.isRequired,
+        untilGiga: PropTypes.string.isRequired,
+        gigaToTera: PropTypes.string.isRequired,
+        tera: PropTypes.string.isRequired,
+        untilTera: PropTypes.string.isRequired,
+    })
+        .isRequired,
+    mq: PropTypes.shape({
+        untilKilo: PropTypes.string.isRequired,
+        kilo: PropTypes.string.isRequired,
+        kiloToMega: PropTypes.string.isRequired,
+        mega: PropTypes.string.isRequired,
+        untilMega: PropTypes.string.isRequired,
+        megaToGiga: PropTypes.string.isRequired,
+        giga: PropTypes.string.isRequired,
+        gigaToTera: PropTypes.string.isRequired,
+        tera: PropTypes.string.isRequired,
+        untilTera: PropTypes.string.isRequired,
+    })
+        .isRequired,
+    grid: PropTypes.shape({
+        default: gridPropType,
+        untilKilo: gridPropType,
+        kilo: gridPropType,
+        mega: gridPropType,
+        giga: gridPropType,
+        tera: gridPropType,
+    }).isRequired,
+    transitions: PropTypes.shape({
+        default: PropTypes.string.isRequired,
+        slow: PropTypes.string.isRequired,
+    })
+        .isRequired,
+    zIndex: PropTypes.shape({
+        default: PropTypes.number.isRequired,
+        absolute: PropTypes.number.isRequired,
+        input: PropTypes.number.isRequired,
+        popover: PropTypes.number.isRequired,
+        tooltip: PropTypes.number.isRequired,
+        header: PropTypes.number.isRequired,
+        backdrop: PropTypes.number.isRequired,
+        navigation: PropTypes.number.isRequired,
+        modal: PropTypes.number.isRequired,
+        toast: PropTypes.number.isRequired,
+    }).isRequired,
+});