@wireapp/react-ui-kit 9.69.4 → 9.69.5

package/lib/Identity/Theme/Theme.js

@@ -0,0 +1,246 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = exports.themes = exports.THEME_ID = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const colors_1 = require("../colors");
+const colors_v2_1 = require("../colors-v2");
+const Sizes_1 = require("../Sizes");
+var THEME_ID;
+(function (THEME_ID) {
+    THEME_ID["DARK"] = "THEME_DARK";
+    THEME_ID["LIGHT"] = "THEME_LIGHT";
+    THEME_ID["DEFAULT"] = "THEME_DEFAULT";
+})(THEME_ID || (exports.THEME_ID = THEME_ID = {}));
+exports.themes = {
+    [THEME_ID.DEFAULT]: {
+        fontSizes: Sizes_1.fontSizes,
+        Button: {
+            primaryBg: 'var(--accent-color)',
+            primaryHoverBg: 'var(--button-primary-hover)',
+            primaryActiveBg: 'var(--button-primary-active)',
+            primaryActiveBorder: 'var(--button-primary-active-border)',
+            primaryFocusBorder: 'var(--button-primary-focus-border)',
+            primaryDisabledBg: 'var(--button-primary-disabled-bg)',
+            primaryDisabledText: 'var(--button-primary-disabled-text)',
+            secondaryActiveBg: 'var(--button-secondary-active-bg)',
+            secondaryActiveBorder: 'var(--button-secondary-active-border)',
+            secondaryHoverBorder: 'var(--button-secondary-hover-border)',
+            tertiaryBg: 'var(--button-tertiary-bg)',
+            tertiaryBorder: 'var(--button-tertiary-border)',
+            tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',
+            tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',
+            tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',
+            tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',
+            tertiaryActiveBg: 'var(--accent-color-highlight)',
+        },
+        Checkbox: {
+            background: 'var(--checkbox-background)',
+            border: 'var(--checkbox-border)',
+            borderFocused: 'var(--accent-color)',
+            disableBgColor: 'var(--checkbox-background-disabled)',
+            disableBorderColor: 'var(--checkbox-border-disabled)',
+            disablecheckedBgColor: 'var(--checkbox-background-disabled-selected)',
+            invalidBorderColor: 'var(--danger-color)',
+        },
+        IconButton: {
+            activePrimaryBgColor: 'var(--accent-color-highlight)',
+            focusBorderColor: 'var(--accent-color-border)',
+            hoverPrimaryBgColor: 'var(--icon-button-primary-hover-bg)',
+            primaryActiveFillColor: 'var(--icon-primary-active-fill)',
+            primaryBgColor: 'var(--icon-button-primary-enabled-bg)',
+            primaryBorderColor: 'var(--icon-button-primary-border)',
+            primaryDisabledBgColor: 'var(--icon-button-primary-disabled-bg)',
+            primaryDisabledBorderColor: 'var(--icon-button-primary-disabled-border)',
+            primaryHoverBorderColor: 'var(--icon-button-primary-hover-border)',
+            secondaryActiveBorderColor: 'var(--icon-secondary-active-border)',
+        },
+        IndicatorRangeInput: {
+            thumb: 'var(--indicator-range-input-thumb)',
+            trackBg: 'var(--indicator-range-input-track-bg)',
+        },
+        Input: {
+            backgroundColor: 'var(--text-input-background)',
+            backgroundColorDisabled: 'var(--text-input-disabled)',
+            backgroundAutocomplete: 'var(--text-input-autocomplete-background)',
+            labelColor: 'var(--text-input-label)',
+            placeholderColor: 'var(--text-input-placeholder)',
+            borderHover: 'var(--text-input-border-hover)',
+        },
+        Select: {
+            borderColor: 'var(--text-input-border)',
+            contrastTextColor: 'var(--text-input-background)',
+            disabledColor: 'var(--text-input-placeholder)',
+            focusedDescriptionColor: 'var(--select-focused-description)',
+            optionHoverBg: 'var(--accent-color-highlight)',
+            selectedActiveBg: 'var(--button-primary-hover)',
+        },
+        Tooltip: {
+            backgroundColor: 'var(--button-tertiary-bg)',
+            color: 'var(--main-color)',
+        },
+        general: {
+            backgroundColor: 'var(--app-bg)',
+            color: 'var(--main-color)',
+            dangerColor: 'var(--danger-color)',
+            successColor: 'var(--success-color)',
+            primaryColor: 'var(--accent-color)',
+            contrastColor: 'var(--text-input-background)',
+            focusColor: 'var(--accent-color-focus)',
+        },
+    },
+    [THEME_ID.LIGHT]: {
+        fontSizes: Sizes_1.fontSizes,
+        Button: {
+            primaryBg: 'var(--accent-color)',
+            primaryHoverBg: 'var(--button-primary-hover)',
+            primaryActiveBg: 'var(--button-primary-active)',
+            primaryActiveBorder: 'var(--button-primary-active-border)',
+            primaryFocusBorder: 'var(--button-primary-focus-border)',
+            primaryDisabledBg: 'var(--button-primary-disabled-bg)',
+            primaryDisabledText: 'var(--button-primary-disabled-text)',
+            secondaryActiveBg: 'var(--button-secondary-active-bg)',
+            secondaryActiveBorder: 'var(--button-secondary-active-border)',
+            secondaryHoverBorder: 'var(--button-secondary-hover-border)',
+            tertiaryBg: 'var(--button-tertiary-bg)',
+            tertiaryBorder: 'var(--button-tertiary-border)',
+            tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',
+            tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',
+            tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',
+            tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',
+            tertiaryActiveBg: 'var(--accent-color-highlight)',
+        },
+        Checkbox: {
+            background: colors_v2_1.COLOR_V2.GRAY_20,
+            border: colors_v2_1.COLOR_V2.GRAY_80,
+            borderFocused: colors_v2_1.BASE_LIGHT_COLOR.BLUE,
+            disableBgColor: colors_v2_1.COLOR_V2.GRAY_20,
+            disableBorderColor: colors_v2_1.COLOR_V2.GRAY_60,
+            disablecheckedBgColor: colors_v2_1.COLOR_V2.GRAY_60,
+            invalidBorderColor: colors_v2_1.BASE_LIGHT_COLOR.RED,
+        },
+        IconButton: {
+            activePrimaryBgColor: colors_v2_1.COLOR_V2.BLUE_LIGHT_50,
+            focusBorderColor: colors_v2_1.COLOR_V2.BLUE_LIGHT_500,
+            hoverPrimaryBgColor: colors_v2_1.COLOR_V2.GRAY_20,
+            primaryActiveFillColor: colors_v2_1.COLOR_V2.BLUE,
+            primaryBgColor: colors_v2_1.COLOR_V2.WHITE,
+            primaryBorderColor: colors_v2_1.COLOR_V2.GRAY_40,
+            primaryDisabledBgColor: colors_v2_1.COLOR_V2.GRAY_20,
+            primaryDisabledBorderColor: colors_v2_1.COLOR_V2.GRAY_40,
+            primaryHoverBorderColor: colors_v2_1.COLOR_V2.GRAY_50,
+            secondaryActiveBorderColor: 'transparent',
+        },
+        IndicatorRangeInput: {
+            thumb: 'var(--indicator-range-input-thumb)',
+            trackBg: 'var(--indicator-range-input-track-bg)',
+        },
+        Input: {
+            backgroundColor: colors_1.COLOR.WHITE,
+            backgroundColorDisabled: colors_v2_1.COLOR_V2.GRAY_20,
+            backgroundAutocomplete: colors_v2_1.COLOR_V2.BLUE_LIGHT_50,
+            placeholderColor: colors_1.COLOR.GRAY_DARKEN_24,
+            labelColor: colors_v2_1.COLOR_V2.GRAY_80,
+            borderHover: 'var(--text-input-border-hover)',
+        },
+        Select: {
+            disabledColor: colors_v2_1.COLOR_V2.GRAY_70,
+            contrastTextColor: colors_1.COLOR.WHITE,
+            borderColor: colors_v2_1.COLOR_V2.GRAY_40,
+            focusedDescriptionColor: colors_v2_1.COLOR_V2.WHITE,
+            optionHoverBg: 'var(--accent-color-highlight)',
+            selectedActiveBg: 'var(--button-primary-hover)',
+        },
+        Tooltip: {
+            backgroundColor: colors_1.COLOR.WHITE,
+            color: colors_1.COLOR.TEXT,
+        },
+        general: {
+            backgroundColor: colors_v2_1.COLOR_V2.GRAY_20,
+            color: colors_1.COLOR.TEXT,
+            primaryColor: colors_v2_1.COLOR_V2.BLUE,
+            dangerColor: colors_v2_1.COLOR_V2.RED,
+            successColor: colors_v2_1.COLOR_V2.GREEN_LIGHT_500,
+            contrastColor: 'var(--text-input-background)',
+            focusColor: 'var(--accent-color-focus)',
+        },
+    },
+    [THEME_ID.DARK]: {
+        fontSizes: Sizes_1.fontSizes,
+        Button: {
+            primaryBg: 'var(--accent-color)',
+            primaryHoverBg: 'var(--button-primary-hover)',
+            primaryActiveBg: 'var(--button-primary-active)',
+            primaryActiveBorder: 'var(--button-primary-active-border)',
+            primaryFocusBorder: 'var(--button-primary-focus-border)',
+            primaryDisabledBg: 'var(--button-primary-disabled-bg)',
+            primaryDisabledText: 'var(--button-primary-disabled-text)',
+            secondaryActiveBg: 'var(--button-secondary-active-bg)',
+            secondaryActiveBorder: 'var(--button-secondary-active-border)',
+            secondaryHoverBorder: 'var(--button-secondary-hover-border)',
+            tertiaryBg: 'var(--button-tertiary-bg)',
+            tertiaryBorder: 'var(--button-tertiary-border)',
+            tertiaryHoverBg: 'var(--button-tertiary-hover-bg)',
+            tertiaryHoverBorder: 'var(--button-tertiary-hover-border)',
+            tertiarydisabledBg: 'var(--button-tertiary-disabled-bg)',
+            tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',
+            tertiaryActiveBg: 'var(--accent-color-highlight)',
+        },
+        Checkbox: {
+            background: colors_v2_1.COLOR_V2.GRAY_20,
+            border: colors_v2_1.COLOR_V2.GRAY_60,
+            borderFocused: colors_v2_1.BASE_DARK_COLOR.BLUE,
+            disableBgColor: colors_v2_1.COLOR_V2.GRAY_10,
+            disableBorderColor: colors_v2_1.COLOR_V2.GRAY_70,
+            disablecheckedBgColor: colors_v2_1.COLOR_V2.GRAY_60,
+            invalidBorderColor: colors_v2_1.BASE_DARK_COLOR.RED,
+        },
+        IconButton: {
+            activePrimaryBgColor: colors_v2_1.COLOR_V2.BLUE_DARK_800,
+            focusBorderColor: colors_v2_1.COLOR_V2.BLUE_DARK_600,
+            hoverPrimaryBgColor: colors_v2_1.COLOR_V2.GRAY_80,
+            primaryActiveFillColor: colors_1.COLOR.WHITE,
+            primaryBgColor: colors_v2_1.COLOR_V2.GRAY_90,
+            primaryBorderColor: colors_v2_1.COLOR_V2.GRAY_100,
+            primaryDisabledBgColor: colors_v2_1.COLOR_V2.GRAY_95,
+            primaryDisabledBorderColor: colors_v2_1.COLOR_V2.GRAY_90,
+            primaryHoverBorderColor: colors_v2_1.COLOR_V2.GRAY_70,
+            secondaryActiveBorderColor: colors_v2_1.COLOR_V2.BLUE_DARK_800,
+        },
+        IndicatorRangeInput: {
+            thumb: 'var(--indicator-range-input-thumb)',
+            trackBg: 'var(--indicator-range-input-track-bg)',
+        },
+        Input: {
+            backgroundColor: colors_1.COLOR.BLACK_LIGHTEN_24,
+            backgroundColorDisabled: colors_1.COLOR.GRAY_100,
+            backgroundAutocomplete: colors_v2_1.COLOR_V2.BLUE_LIGHT_900,
+            placeholderColor: colors_1.COLOR.GRAY_LIGHTEN_88,
+            labelColor: colors_v2_1.COLOR_V2.GRAY_40,
+            borderHover: 'var(--text-input-border-hover)',
+        },
+        Select: {
+            disabledColor: colors_v2_1.COLOR_V2.GRAY_60,
+            contrastTextColor: colors_1.COLOR.BLACK,
+            borderColor: colors_v2_1.COLOR_V2.GRAY_90,
+            focusedDescriptionColor: colors_v2_1.COLOR_V2.GRAY_40,
+            optionHoverBg: 'var(--accent-color-highlight)',
+            selectedActiveBg: 'var(--button-primary-active)',
+        },
+        Tooltip: {
+            backgroundColor: colors_1.COLOR.TEXT,
+            color: colors_1.COLOR.WHITE,
+        },
+        general: {
+            backgroundColor: colors_1.COLOR.BLACK,
+            color: colors_1.COLOR.WHITE,
+            primaryColor: colors_v2_1.COLOR_V2.BLUE,
+            dangerColor: colors_v2_1.COLOR_V2.RED,
+            successColor: colors_v2_1.COLOR_V2.GREEN_DARK_500,
+            contrastColor: 'var(--text-input-background)',
+            focusColor: 'var(--accent-color-focus)',
+        },
+    },
+};
+const ThemeProvider = (props) => (0, jsx_runtime_1.jsx)(react_1.ThemeProvider, { ...props, theme: props.theme });
+exports.ThemeProvider = ThemeProvider;

package/lib/Identity/Theme/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Theme';
+//# sourceMappingURL=index.d.ts.map

package/lib/Identity/Theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Identity/Theme/index.ts"],"names":[],"mappings":"AAmBA,cAAc,SAAS,CAAC"}

package/lib/Identity/Theme/index.js

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Theme"), exports);

package/lib/Identity/colors/colors.d.ts

@@ -0,0 +1,4 @@
+import Color from 'color';
+export type ColorParam = Color | string | ArrayLike<number> | number | Record<string, any>;
+export declare const COLOR: any;
+//# sourceMappingURL=colors.d.ts.map

package/lib/Identity/colors/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/Identity/colors/colors.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAgE3F,eAAO,MAAM,KAAK,EAAE,GAWnB,CAAC"}

package/lib/Identity/colors/colors.js

@@ -0,0 +1,89 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2018 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COLOR = void 0;
+const color_1 = __importDefault(require("color"));
+const steps = [];
+const percent = 100;
+for (let index = 8; index < percent; index += 8) {
+    steps.push(index);
+}
+function shade(color, amount = 0.08) {
+    return (0, color_1.default)(color).mix((0, color_1.default)(BASE_COLOR.BLACK), amount).toString();
+}
+function tint(color, amount) {
+    return (0, color_1.default)(color).mix((0, color_1.default)(BASE_COLOR.WHITE), amount).toString();
+}
+function opaque(color, amount) {
+    return (0, color_1.default)(color)
+        .fade(1 - amount)
+        .toString();
+}
+const BASE_COLOR = {
+    BLACK: '#000',
+    BLUE: '#0772de',
+    GRAY: '#696c6e',
+    GREEN: '#00c800',
+    ORANGE: '#ff8900',
+    RED: '#e02020',
+    WHITE: '#fff',
+    YELLOW: '#febf02',
+};
+const DARK_COLOR = {};
+const LIGHT_COLOR = {};
+const OPAQUE_COLOR = {};
+Object.entries({
+    BLACK: BASE_COLOR.BLACK,
+    GRAY: BASE_COLOR.GRAY,
+    WHITE: BASE_COLOR.WHITE,
+}).forEach(([key, value]) => {
+    steps.forEach(step => {
+        const amount = step / percent;
+        DARK_COLOR[`${key}_DARKEN_${step}`] = shade(value, amount);
+        LIGHT_COLOR[`${key}_LIGHTEN_${step}`] = tint(value, amount);
+    });
+});
+Object.entries(BASE_COLOR).forEach(([key, value]) => {
+    steps.forEach(step => {
+        const amount = step / percent;
+        OPAQUE_COLOR[`${key}_OPAQUE_${step}`] = opaque(value, amount);
+    });
+});
+const COMPONENT_COLOR = {
+    DISABLED: opaque(DARK_COLOR.GRAY_DARKEN_32, 0.16),
+    ICON: DARK_COLOR.GRAY_DARKEN_72,
+    LINK: DARK_COLOR.GRAY_DARKEN_72,
+    TEXT: DARK_COLOR.GRAY_DARKEN_72,
+};
+exports.COLOR = {
+    ...BASE_COLOR,
+    ...DARK_COLOR,
+    ...LIGHT_COLOR,
+    ...OPAQUE_COLOR,
+    ...COMPONENT_COLOR,
+    BLACK: BASE_COLOR.BLACK,
+    WHITE: BASE_COLOR.WHITE,
+    opaque,
+    shade,
+    tint,
+};

package/lib/Identity/colors/colors.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const BaseColors: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DarkVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LightVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const OpaqueVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ComponentColors: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const AllColorVariants: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=colors.stories.d.ts.map

package/lib/Identity/colors/colors.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.stories.d.ts","sourceRoot":"","sources":["../../../src/Identity/colors/colors.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAItC,QAAA,MAAM,IAAI,EAAE,IAEX,CAAC;AAEF,eAAe,IAAI,CAAC;AA8CpB,eAAO,MAAM,UAAU,wDAMtB,CAAC;AAEF,eAAO,MAAM,YAAY,wDAMxB,CAAC;AAEF,eAAO,MAAM,aAAa,wDAMzB,CAAC;AAEF,eAAO,MAAM,cAAc,wDAM1B,CAAC;AAEF,eAAO,MAAM,eAAe,wDAM3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,wDAuB5B,CAAC"}

package/lib/Identity/colors/colors.stories.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AllColorVariants = exports.ComponentColors = exports.OpaqueVariants = exports.LightVariants = exports.DarkVariants = exports.BaseColors = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const colors_1 = require("./colors");
+const meta = {
+    title: 'Identity/Colors/V1',
+};
+exports.default = meta;
+const ColorBox = ({ color, name }) => ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '8px' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                backgroundColor: color,
+                border: '1px solid #E5E5E5',
+                borderRadius: '4px',
+                height: '48px',
+                marginBottom: '4px',
+                width: '100%',
+            } }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '12px' }, children: [(0, jsx_runtime_1.jsx)("strong", { children: name }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("code", { children: color })] })] }));
+const ColorSection = ({ title, colors }) => ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '32px' }, children: [(0, jsx_runtime_1.jsx)("h3", { children: title }), (0, jsx_runtime_1.jsx)("div", { style: {
+                display: 'grid',
+                gap: '16px',
+                gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+            }, children: Object.entries(colors)
+                .filter(([, value]) => typeof value === 'string')
+                .map(([key, value]) => ((0, jsx_runtime_1.jsx)(ColorBox, { color: value, name: key }, key))) })] }));
+const BaseColors = () => {
+    const colors = Object.entries(colors_1.COLOR)
+        .filter(([key, value]) => typeof value === 'string' && !key.includes('_'))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    return (0, jsx_runtime_1.jsx)(ColorSection, { title: "Base Colors", colors: colors });
+};
+exports.BaseColors = BaseColors;
+const DarkVariants = () => {
+    const colors = Object.entries(colors_1.COLOR)
+        .filter(([key]) => key.includes('DARKEN'))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    return (0, jsx_runtime_1.jsx)(ColorSection, { title: "Dark Variants", colors: colors });
+};
+exports.DarkVariants = DarkVariants;
+const LightVariants = () => {
+    const colors = Object.entries(colors_1.COLOR)
+        .filter(([key]) => key.includes('LIGHTEN'))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    return (0, jsx_runtime_1.jsx)(ColorSection, { title: "Light Variants", colors: colors });
+};
+exports.LightVariants = LightVariants;
+const OpaqueVariants = () => {
+    const colors = Object.entries(colors_1.COLOR)
+        .filter(([key]) => key.includes('OPAQUE'))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    return (0, jsx_runtime_1.jsx)(ColorSection, { title: "Opaque Variants", colors: colors });
+};
+exports.OpaqueVariants = OpaqueVariants;
+const ComponentColors = () => {
+    const colors = Object.entries(colors_1.COLOR)
+        .filter(([key]) => ['DISABLED', 'ICON', 'LINK', 'TEXT'].includes(key))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    return (0, jsx_runtime_1.jsx)(ColorSection, { title: "Component Colors", colors: colors });
+};
+exports.ComponentColors = ComponentColors;
+const AllColorVariants = () => {
+    const baseColors = Object.entries(colors_1.COLOR)
+        .filter(([key, value]) => typeof value === 'string' && !key.includes('_'))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    const colorsByBase = Object.keys(baseColors).map(baseColor => {
+        const variants = Object.entries(colors_1.COLOR)
+            .filter(([key, value]) => typeof value === 'string' && key.startsWith(baseColor) && key !== baseColor)
+            .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+        return {
+            base: baseColor,
+            variants: { [baseColor]: baseColors[baseColor], ...variants },
+        };
+    });
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: colorsByBase.map(({ base, variants }) => ((0, jsx_runtime_1.jsx)(ColorSection, { title: `${base} - All Variants`, colors: variants }, base))) }));
+};
+exports.AllColorVariants = AllColorVariants;

package/lib/Identity/colors/index.d.ts

@@ -0,0 +1,2 @@
+export * from './colors';
+//# sourceMappingURL=index.d.ts.map

package/lib/Identity/colors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Identity/colors/index.ts"],"names":[],"mappings":"AAmBA,cAAc,UAAU,CAAC"}

package/lib/Identity/colors/index.js

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./colors"), exports);