@apify/ui-library 0.76.0 → 0.76.2-featcolortokens-178953.21

package/README.md

@@ -4,12 +4,25 @@
 
 ## Development
 
-1. **This is a public package** - it shouldn't have any relation or dependency to Apify internal logic - we want to use it across our repositories and some of them might be public.
+### This is a public package
+It shouldn't have any relation or dependency to Apify internal logic - we want to use it across our repositories and some of them might be public.
 
-2. **Shared logic with web and docs** - If you’re changing any shared logic with the web that might affect the behavior, performance, or SEO, you need to always test it on both applications before it’s merged and published as a new version of the packages and after it’s done it’s your duty to make sure there are the latest versions within both repositories.
+### Shared logic with web and docs
+If you’re changing any shared logic with the web that might affect the behavior, performance, or SEO, you need to always test it on both applications before it’s merged and published as a new version of the packages and after it’s done it’s your duty to make sure there are the latest versions within both repositories.
 
-3. **Purpose and documentation** - there should be a clear purpose for each component and the component should be properly documented - both code and storybook.
+### Purpose and documentation
+There should be a clear purpose for each component and the component should be properly documented - both code and storybook.
 
-4. **Architecture design and dependencies** - No technology-specific logic. We don’t want to use anything technology or codebase-specific (such as Meteor, React router, Next …) as there might be different approaches for the technology where the component is used (examples as linking logic - in Next.js there is Next Link component, same of Next Image instead of using normal <img /> tag). This kind of behavior should not happen on the component level. Browser vs. server - some of the components might be used on the web with SSR (Server Side Renderings) and such a component can’t be using browser-specific features (such as accessing window.location)
+### Architecture design and dependencies
+No technology-specific logic. We don’t want to use anything technology or codebase-specific (such as Meteor, React router, Next …) as there might be different approaches for the technology where the component is used (examples as linking logic - in Next.js there is Next Link component, same of Next Image instead of using normal <img /> tag). This kind of behavior should not happen on the component level. Browser vs. server - some of the components might be used on the web with SSR (Server Side Renderings) and such a component can’t be using browser-specific features (such as accessing window.location)
 
-5. **Supernova tokens update** - New supernova tokens are available in `supernova_color_tokens.ts` and `supernova_typography_tokens.json`, specific code is generated with `npm run generate-theme` command
+### Supernova typography tokens update
+New supernova typography tokens are available in `supernova_typography_tokens.json`, specific code is generated with `npm run generate-theme` command
+
+### Color tokens update
+We use the [Design Tokens Manager](https://www.figma.com/community/plugin/1263743870981744253/design-tokens-manager) Figma plugin to export color tokens from our design files. This tool allows us to convert design-defined color styles into structured token JSON format that developers can easily consume.
+The design team is responsible for exporting and maintaining the tokens. Once finalized, the exported file is shared with developers to integrate into the codebase, ensuring consistent color usage across platforms.
+
+The exported tokens are stored in the `src/design_system/colors/figma_color_tokens.light.json` and `src/design_system/colors/figma_color_tokens.dark.json` files.
+
+Source code based on these tokens is generated with `npm run build-color-tokens` command (it's also run automatically on `npm run build`).

package/dist/src/design_system/colors/generated/colors_theme.dark.d.ts

@@ -0,0 +1,110 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const darkTheme: {
+    readonly roseLight: "#e88bb3";
+    readonly roseBase: "#b8487b";
+    readonly roseDark: "#6f234f";
+    readonly roseText: "#ed8bb5";
+    readonly buttercupLight: "#f9deaa";
+    readonly buttercupBase: "#e5b557";
+    readonly buttercupDark: "#b87939";
+    readonly buttercupText: "#ebbf6c";
+    readonly paprikaLight: "#e26c7d";
+    readonly paprikaBase: "#9e384b";
+    readonly paprikaDark: "#511d27";
+    readonly paprikaText: "#f67c8d";
+    readonly tealLight: "#aef0f5";
+    readonly tealBase: "#58bcc4";
+    readonly tealDark: "#408288";
+    readonly tealText: "#62c1c8";
+    readonly indigoLight: "#a8b7ed";
+    readonly indigoBase: "#6d85ca";
+    readonly indigoDark: "#425484";
+    readonly indigoText: "#a2b2eb";
+    readonly slateLight: "#c2c5dc";
+    readonly slateBase: "#8690bf";
+    readonly slateDark: "#535c81";
+    readonly slateText: "#afb2c9";
+    readonly coralLight: "#f3ccb0";
+    readonly coralBase: "#f08848";
+    readonly coralDark: "#9a4e2d";
+    readonly coralText: "#f9b27b";
+    readonly lavenderLight: "#b482ed";
+    readonly lavenderBase: "#8148c9";
+    readonly lavenderDark: "#48296f";
+    readonly lavenderText: "#be8af9";
+    readonly bambooLight: "#7acaa9";
+    readonly bambooBase: "#439274";
+    readonly bambooDark: "#305b4a";
+    readonly bambooText: "#65bc99";
+    readonly neutral0: "#ffffff";
+    readonly neutral25: "#f8f9fc";
+    readonly neutral50: "#f3f4fa";
+    readonly neutral75: "#eef0f8";
+    readonly neutral100: "#e1e3ed";
+    readonly neutral150: "#d1d5e4";
+    readonly neutral200: "#c1c6d9";
+    readonly neutral250: "#b2b8cc";
+    readonly neutral300: "#a5abc0";
+    readonly neutral350: "#989eb3";
+    readonly neutral400: "#8c93a8";
+    readonly neutral450: "#7d8499";
+    readonly neutral500: "#6e758a";
+    readonly neutral550: "#646a7f";
+    readonly neutral600: "#575d71";
+    readonly neutral650: "#4d5265";
+    readonly neutral700: "#414758";
+    readonly neutral750: "#343847";
+    readonly neutral775: "#2d313e";
+    readonly neutral800: "#2a2d39";
+    readonly neutral850: "#252832";
+    readonly neutral875: "#1e2027";
+    readonly neutral900: "#1a1b21";
+    readonly neutral950: "#101114";
+    readonly yellow25: "#fcdc73";
+    readonly yellow50: "#ffd761";
+    readonly yellow75: "#f9ce4b";
+    readonly yellow100: "#f5bc38";
+    readonly yellow200: "#cf9117";
+    readonly yellow300: "#a56909";
+    readonly yellow350: "#8a4f05";
+    readonly yellow400: "#6d3806";
+    readonly yellow500: "#5d2e0e";
+    readonly yellow600: "#3f1b07";
+    readonly yellow700: "#301806";
+    readonly red25: "#f5a790";
+    readonly red50: "#fe9e8a";
+    readonly red75: "#ff8770";
+    readonly red100: "#ff7157";
+    readonly red200: "#ef6045";
+    readonly red300: "#cf4436";
+    readonly red350: "#aa3229";
+    readonly red400: "#812420";
+    readonly red500: "#672523";
+    readonly red600: "#40191b";
+    readonly red700: "#381719";
+    readonly green25: "#74d584";
+    readonly green50: "#6ccd7c";
+    readonly green75: "#55c06a";
+    readonly green100: "#3bb358";
+    readonly green200: "#23a64a";
+    readonly green300: "#068a35";
+    readonly green350: "#006e29";
+    readonly green400: "#00531e";
+    readonly green500: "#14441f";
+    readonly green600: "#0f2b14";
+    readonly green700: "#09260f";
+    readonly blue25: "#92c0ff";
+    readonly blue50: "#8ebcff";
+    readonly blue75: "#80a9ff";
+    readonly blue100: "#6f9dff";
+    readonly blue200: "#5990ff";
+    readonly blue300: "#3970d7";
+    readonly blue350: "#295cbb";
+    readonly blue400: "#194594";
+    readonly blue500: "#1a3a78";
+    readonly blue600: "#0d2550";
+    readonly blue700: "#151d34";
+};
+//# sourceMappingURL=colors_theme.dark.d.ts.map

package/dist/src/design_system/colors/generated/colors_theme.dark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors_theme.dark.d.ts","sourceRoot":"","sources":["../../../../../src/design_system/colors/generated/colors_theme.dark.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGZ,CAAC"}

package/dist/src/design_system/colors/generated/colors_theme.dark.js

@@ -0,0 +1,110 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export const darkTheme = {
+    roseLight: '#e88bb3',
+    roseBase: '#b8487b',
+    roseDark: '#6f234f',
+    roseText: '#ed8bb5',
+    buttercupLight: '#f9deaa',
+    buttercupBase: '#e5b557',
+    buttercupDark: '#b87939',
+    buttercupText: '#ebbf6c',
+    paprikaLight: '#e26c7d',
+    paprikaBase: '#9e384b',
+    paprikaDark: '#511d27',
+    paprikaText: '#f67c8d',
+    tealLight: '#aef0f5',
+    tealBase: '#58bcc4',
+    tealDark: '#408288',
+    tealText: '#62c1c8',
+    indigoLight: '#a8b7ed',
+    indigoBase: '#6d85ca',
+    indigoDark: '#425484',
+    indigoText: '#a2b2eb',
+    slateLight: '#c2c5dc',
+    slateBase: '#8690bf',
+    slateDark: '#535c81',
+    slateText: '#afb2c9',
+    coralLight: '#f3ccb0',
+    coralBase: '#f08848',
+    coralDark: '#9a4e2d',
+    coralText: '#f9b27b',
+    lavenderLight: '#b482ed',
+    lavenderBase: '#8148c9',
+    lavenderDark: '#48296f',
+    lavenderText: '#be8af9',
+    bambooLight: '#7acaa9',
+    bambooBase: '#439274',
+    bambooDark: '#305b4a',
+    bambooText: '#65bc99',
+    neutral0: '#ffffff',
+    neutral25: '#f8f9fc',
+    neutral50: '#f3f4fa',
+    neutral75: '#eef0f8',
+    neutral100: '#e1e3ed',
+    neutral150: '#d1d5e4',
+    neutral200: '#c1c6d9',
+    neutral250: '#b2b8cc',
+    neutral300: '#a5abc0',
+    neutral350: '#989eb3',
+    neutral400: '#8c93a8',
+    neutral450: '#7d8499',
+    neutral500: '#6e758a',
+    neutral550: '#646a7f',
+    neutral600: '#575d71',
+    neutral650: '#4d5265',
+    neutral700: '#414758',
+    neutral750: '#343847',
+    neutral775: '#2d313e',
+    neutral800: '#2a2d39',
+    neutral850: '#252832',
+    neutral875: '#1e2027',
+    neutral900: '#1a1b21',
+    neutral950: '#101114',
+    yellow25: '#fcdc73',
+    yellow50: '#ffd761',
+    yellow75: '#f9ce4b',
+    yellow100: '#f5bc38',
+    yellow200: '#cf9117',
+    yellow300: '#a56909',
+    yellow350: '#8a4f05',
+    yellow400: '#6d3806',
+    yellow500: '#5d2e0e',
+    yellow600: '#3f1b07',
+    yellow700: '#301806',
+    red25: '#f5a790',
+    red50: '#fe9e8a',
+    red75: '#ff8770',
+    red100: '#ff7157',
+    red200: '#ef6045',
+    red300: '#cf4436',
+    red350: '#aa3229',
+    red400: '#812420',
+    red500: '#672523',
+    red600: '#40191b',
+    red700: '#381719',
+    green25: '#74d584',
+    green50: '#6ccd7c',
+    green75: '#55c06a',
+    green100: '#3bb358',
+    green200: '#23a64a',
+    green300: '#068a35',
+    green350: '#006e29',
+    green400: '#00531e',
+    green500: '#14441f',
+    green600: '#0f2b14',
+    green700: '#09260f',
+    blue25: '#92c0ff',
+    blue50: '#8ebcff',
+    blue75: '#80a9ff',
+    blue100: '#6f9dff',
+    blue200: '#5990ff',
+    blue300: '#3970d7',
+    blue350: '#295cbb',
+    blue400: '#194594',
+    blue500: '#1a3a78',
+    blue600: '#0d2550',
+    blue700: '#151d34',
+};
+//# sourceMappingURL=colors_theme.dark.js.map

package/dist/src/design_system/colors/generated/colors_theme.dark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors_theme.dark.js","sourceRoot":"","sources":["../../../../../src/design_system/colors/generated/colors_theme.dark.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,cAAc,EAAE,SAAS;IACzB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,YAAY,EAAE,SAAS;IACvB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,SAAS;IACtB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,SAAS;IACrB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,aAAa,EAAE,SAAS;IACxB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,WAAW,EAAE,SAAS;IACtB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACZ,CAAC"}

package/dist/src/design_system/colors/generated/colors_theme.light.d.ts

@@ -0,0 +1,110 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const lightTheme: {
+    readonly roseLight: "#f483b5";
+    readonly roseBase: "#c6387d";
+    readonly roseDark: "#781552";
+    readonly roseText: "#b6006b";
+    readonly buttercupLight: "#ffdd96";
+    readonly buttercupBase: "#f0b21b";
+    readonly buttercupDark: "#c37319";
+    readonly buttercupText: "#a65d00";
+    readonly paprikaLight: "#e44467";
+    readonly paprikaBase: "#9b0238";
+    readonly paprikaDark: "#4a0018";
+    readonly paprikaText: "#ba0044";
+    readonly tealLight: "#a7f2ed";
+    readonly tealBase: "#30c0bb";
+    readonly tealDark: "#297774";
+    readonly tealText: "#018181";
+    readonly indigoLight: "#a1b7ff";
+    readonly indigoBase: "#5d85e1";
+    readonly indigoDark: "#365494";
+    readonly indigoText: "#2563c1";
+    readonly slateLight: "#c1c5e1";
+    readonly slateBase: "#8490c4";
+    readonly slateDark: "#525c85";
+    readonly slateText: "#566087";
+    readonly coralLight: "#ffc89f";
+    readonly coralBase: "#fa8136";
+    readonly coralDark: "#bb4511";
+    readonly coralText: "#c74000";
+    readonly lavenderLight: "#bf97ed";
+    readonly lavenderBase: "#6a14de";
+    readonly lavenderDark: "#330276";
+    readonly lavenderText: "#6e00f4";
+    readonly bambooLight: "#64cda5";
+    readonly bambooBase: "#12966f";
+    readonly bambooDark: "#195d46";
+    readonly bambooText: "#007455";
+    readonly neutral0: "#ffffff";
+    readonly neutral25: "#f8f9fc";
+    readonly neutral50: "#f3f4fa";
+    readonly neutral75: "#eef0f8";
+    readonly neutral100: "#e0e3f2";
+    readonly neutral150: "#d0d5e9";
+    readonly neutral200: "#c0c6de";
+    readonly neutral250: "#b0b8d1";
+    readonly neutral300: "#a3abc5";
+    readonly neutral350: "#969eb8";
+    readonly neutral400: "#8a93ae";
+    readonly neutral450: "#7b84a0";
+    readonly neutral500: "#6c7590";
+    readonly neutral550: "#626a85";
+    readonly neutral600: "#555d76";
+    readonly neutral650: "#4b526b";
+    readonly neutral700: "#3f475d";
+    readonly neutral750: "#31384d";
+    readonly neutral775: "#2b3143";
+    readonly neutral800: "#272d3e";
+    readonly neutral850: "#242836";
+    readonly neutral875: "#1d202a";
+    readonly neutral900: "#191b22";
+    readonly neutral950: "#0a0b0f";
+    readonly yellow25: "#f9f6ea";
+    readonly yellow50: "#f9f0db";
+    readonly yellow75: "#f7e8c4";
+    readonly yellow100: "#f7dfb1";
+    readonly yellow200: "#f5b315";
+    readonly yellow300: "#e39c04";
+    readonly yellow350: "#d58e00";
+    readonly yellow400: "#ca8200";
+    readonly yellow500: "#a96600";
+    readonly yellow600: "#8c4e02";
+    readonly yellow700: "#864906";
+    readonly red25: "#fcf2ef";
+    readonly red50: "#fff0ec";
+    readonly red75: "#ffe3dc";
+    readonly red100: "#fedad1";
+    readonly red200: "#ffb39f";
+    readonly red300: "#ff886e";
+    readonly red350: "#fc7156";
+    readonly red400: "#fa4d37";
+    readonly red500: "#e3231d";
+    readonly red600: "#bb0401";
+    readonly red700: "#af0600";
+    readonly green25: "#e8f9ef";
+    readonly green50: "#e4f5e5";
+    readonly green75: "#daefdc";
+    readonly green100: "#cfe9d1";
+    readonly green200: "#80da8d";
+    readonly green300: "#46c263";
+    readonly green350: "#22b551";
+    readonly green400: "#00ab46";
+    readonly green500: "#008a27";
+    readonly green600: "#086e08";
+    readonly green700: "#176b08";
+    readonly blue25: "#f0f8ff";
+    readonly blue50: "#ecf1ff";
+    readonly blue75: "#e1eaff";
+    readonly blue100: "#d8e2ff";
+    readonly blue200: "#b2c6ff";
+    readonly blue300: "#88abfe";
+    readonly blue350: "#709efd";
+    readonly blue400: "#5290f9";
+    readonly blue500: "#1672eb";
+    readonly blue600: "#1a57da";
+    readonly blue700: "#224ed5";
+};
+//# sourceMappingURL=colors_theme.light.d.ts.map

package/dist/src/design_system/colors/generated/colors_theme.light.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors_theme.light.d.ts","sourceRoot":"","sources":["../../../../../src/design_system/colors/generated/colors_theme.light.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGb,CAAC"}

package/dist/src/design_system/colors/generated/colors_theme.light.js

@@ -0,0 +1,110 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export const lightTheme = {
+    roseLight: '#f483b5',
+    roseBase: '#c6387d',
+    roseDark: '#781552',
+    roseText: '#b6006b',
+    buttercupLight: '#ffdd96',
+    buttercupBase: '#f0b21b',
+    buttercupDark: '#c37319',
+    buttercupText: '#a65d00',
+    paprikaLight: '#e44467',
+    paprikaBase: '#9b0238',
+    paprikaDark: '#4a0018',
+    paprikaText: '#ba0044',
+    tealLight: '#a7f2ed',
+    tealBase: '#30c0bb',
+    tealDark: '#297774',
+    tealText: '#018181',
+    indigoLight: '#a1b7ff',
+    indigoBase: '#5d85e1',
+    indigoDark: '#365494',
+    indigoText: '#2563c1',
+    slateLight: '#c1c5e1',
+    slateBase: '#8490c4',
+    slateDark: '#525c85',
+    slateText: '#566087',
+    coralLight: '#ffc89f',
+    coralBase: '#fa8136',
+    coralDark: '#bb4511',
+    coralText: '#c74000',
+    lavenderLight: '#bf97ed',
+    lavenderBase: '#6a14de',
+    lavenderDark: '#330276',
+    lavenderText: '#6e00f4',
+    bambooLight: '#64cda5',
+    bambooBase: '#12966f',
+    bambooDark: '#195d46',
+    bambooText: '#007455',
+    neutral0: '#ffffff',
+    neutral25: '#f8f9fc',
+    neutral50: '#f3f4fa',
+    neutral75: '#eef0f8',
+    neutral100: '#e0e3f2',
+    neutral150: '#d0d5e9',
+    neutral200: '#c0c6de',
+    neutral250: '#b0b8d1',
+    neutral300: '#a3abc5',
+    neutral350: '#969eb8',
+    neutral400: '#8a93ae',
+    neutral450: '#7b84a0',
+    neutral500: '#6c7590',
+    neutral550: '#626a85',
+    neutral600: '#555d76',
+    neutral650: '#4b526b',
+    neutral700: '#3f475d',
+    neutral750: '#31384d',
+    neutral775: '#2b3143',
+    neutral800: '#272d3e',
+    neutral850: '#242836',
+    neutral875: '#1d202a',
+    neutral900: '#191b22',
+    neutral950: '#0a0b0f',
+    yellow25: '#f9f6ea',
+    yellow50: '#f9f0db',
+    yellow75: '#f7e8c4',
+    yellow100: '#f7dfb1',
+    yellow200: '#f5b315',
+    yellow300: '#e39c04',
+    yellow350: '#d58e00',
+    yellow400: '#ca8200',
+    yellow500: '#a96600',
+    yellow600: '#8c4e02',
+    yellow700: '#864906',
+    red25: '#fcf2ef',
+    red50: '#fff0ec',
+    red75: '#ffe3dc',
+    red100: '#fedad1',
+    red200: '#ffb39f',
+    red300: '#ff886e',
+    red350: '#fc7156',
+    red400: '#fa4d37',
+    red500: '#e3231d',
+    red600: '#bb0401',
+    red700: '#af0600',
+    green25: '#e8f9ef',
+    green50: '#e4f5e5',
+    green75: '#daefdc',
+    green100: '#cfe9d1',
+    green200: '#80da8d',
+    green300: '#46c263',
+    green350: '#22b551',
+    green400: '#00ab46',
+    green500: '#008a27',
+    green600: '#086e08',
+    green700: '#176b08',
+    blue25: '#f0f8ff',
+    blue50: '#ecf1ff',
+    blue75: '#e1eaff',
+    blue100: '#d8e2ff',
+    blue200: '#b2c6ff',
+    blue300: '#88abfe',
+    blue350: '#709efd',
+    blue400: '#5290f9',
+    blue500: '#1672eb',
+    blue600: '#1a57da',
+    blue700: '#224ed5',
+};
+//# sourceMappingURL=colors_theme.light.js.map

package/dist/src/design_system/colors/generated/colors_theme.light.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors_theme.light.js","sourceRoot":"","sources":["../../../../../src/design_system/colors/generated/colors_theme.light.ts"],"names":[],"mappings":"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"}

package/dist/src/design_system/colors/generated/css_variables.dark.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const tokens = "\n  --color-neutral-text: #f3f4fa;\n  --color-neutral-text-muted: #b2b8cc;\n  --color-neutral-text-subtle: #8c93a8;\n  --color-neutral-text-disabled: #575d71;\n  --color-neutral-text-on-primary: #1a1b21;\n  --color-neutral-icon-on-primary: #1a1b21;\n  --color-neutral-background: #1a1b21;\n  --color-neutral-background-muted: #252832;\n  --color-neutral-background-subtle: #2a2d39;\n  --color-neutral-background-white: #f3f4fa;\n  --color-neutral-card-background: #1e2027;\n  --color-neutral-card-background-hover: #252832;\n  --color-neutral-border: #414758;\n  --color-neutral-separator-subtle: #343847;\n  --color-neutral-hover: #2d313e;\n  --color-neutral-disabled: #343847;\n  --color-neutral-overflow: #2a2d39;\n  --color-neutral-icon: #b2b8cc;\n  --color-neutral-icon-subtle: #6e758a;\n  --color-neutral-icon-disabled: #575d71;\n  --color-neutral-field-border: #343847;\n  --color-neutral-action-secondary: #575d71;\n  --color-neutral-action-secondary-hover: #6e758a;\n  --color-neutral-action-secondary-active: #343847;\n  --color-neutral-chip-background: #575d71;\n  --color-neutral-chip-background-hover: #6e758a;\n  --color-neutral-chip-background-active: #8c93a8;\n  --color-neutral-chip-background-disabled: #8c93a8;\n  --color-neutral-large-tooltip-background: #2a2d39;\n  --color-neutral-large-tooltip-border: #343847;\n  --color-neutral-small-tooltip-text: #ffffff;\n  --color-neutral-small-tooltip-background: #2a2d39;\n  --color-neutral-small-tooltip-border: #343847;\n  --color-neutral-overlay: #101114;\n  --color-neutral-field-background: #101114;\n  --color-neutral-text-placeholder: #6e758a;\n  --color-primary-text: #6f9dff;\n  --color-primary-text-interactive: #6f9dff;\n  --color-primary-icon: #3970d7;\n  --color-primary-action: #5990ff;\n  --color-primary-action-hover: #80a9ff;\n  --color-primary-action-active: #3970d7;\n  --color-primary-field-border-active: #3970d7;\n  --color-primary-border-subtle: #295cbb;\n  --color-primary-background: #0d2550;\n  --color-primary-background-subtle: #151d34;\n  --color-primary-background-hover: #194594;\n  --color-primary-chip-background: #0d2550;\n  --color-primary-chip-background-subtle: #151d34;\n  --color-primary-chip-background-hover: #194594;\n  --color-primary-chip-text: #8ebcff;\n  --color-primary-shadow-active: #295cbb;\n  --color-primary-black-action: #ffffff;\n  --color-primary-black-action-hover: #d1d5e4;\n  --color-primary-black-action-active: #f3f4fa;\n  --color-primary-black-background: #f3f4fa;\n  --color-primary-black-background-hover: #eef0f8;\n  --color-primary-black-chip-text: #101114;\n  --color-success-text: #3bb358;\n  --color-success-icon: #23a64a;\n  --color-success-background: #14441f;\n  --color-success-background-hover: #00531e;\n  --color-success-background-subtle: #09260f;\n  --color-success-background-subtle-hover: #14441f;\n  --color-success-background-subtle-active: #006e29;\n  --color-success-chip-background: #14441f;\n  --color-success-chip-background-hover: #00531e;\n  --color-success-chip-text: #6ccd7c;\n  --color-success-border: #068a35;\n  --color-success-border-subtle: #006e29;\n  --color-success-action: #23a64a;\n  --color-success-action-hover: #3bb358;\n  --color-success-action-active: #068a35;\n  --color-warning-text: #f9ce4b;\n  --color-warning-icon: #f9ce4b;\n  --color-warning-background: #5d2e0e;\n  --color-warning-background-hover: #6d3806;\n  --color-warning-background-subtle: #301806;\n  --color-warning-chip-background: #5d2e0e;\n  --color-warning-chip-background-hover: #6d3806;\n  --color-warning-chip-text: #ffd761;\n  --color-warning-border: #a56909;\n  --color-warning-border-subtle: #8a4f05;\n  --color-warning-field-border: #cf9117;\n  --color-danger-text: #ff7157;\n  --color-danger-icon: #ef6045;\n  --color-danger-background: #672523;\n  --color-danger-background-hover: #812420;\n  --color-danger-background-subtle: #381719;\n  --color-danger-background-subtle-hover: #672523;\n  --color-danger-background-subtle-active: #aa3229;\n  --color-danger-chip-background: #672523;\n  --color-danger-chip-background-hover: #812420;\n  --color-danger-chip-text: #fe9e8a;\n  --color-danger-border: #cf4436;\n  --color-danger-border-subtle: #aa3229;\n  --color-danger-field-border: #ef6045;\n  --color-danger-action: #ef6045;\n  --color-danger-action-hover: #ff7157;\n  --color-danger-action-active: #cf4436;\n  --color-special-free-plan-background: #9a4e2d;\n  --color-special-starter-plan-background: #b87939;\n  --color-special-scale-plan-background: #425484;\n  --color-special-business-plan-background: #408288;\n  --color-special-enterprise-plan-background: #48296f;\n  --color-rose-light: #e88bb3;\n  --color-rose-base: #b8487b;\n  --color-rose-dark: #6f234f;\n  --color-rose-text: #ed8bb5;\n  --color-buttercup-light: #f9deaa;\n  --color-buttercup-base: #e5b557;\n  --color-buttercup-dark: #b87939;\n  --color-buttercup-text: #ebbf6c;\n  --color-paprika-light: #e26c7d;\n  --color-paprika-base: #9e384b;\n  --color-paprika-dark: #511d27;\n  --color-paprika-text: #f67c8d;\n  --color-teal-light: #aef0f5;\n  --color-teal-base: #58bcc4;\n  --color-teal-dark: #408288;\n  --color-teal-text: #62c1c8;\n  --color-indigo-light: #a8b7ed;\n  --color-indigo-base: #6d85ca;\n  --color-indigo-dark: #425484;\n  --color-indigo-text: #a2b2eb;\n  --color-slate-light: #c2c5dc;\n  --color-slate-base: #8690bf;\n  --color-slate-dark: #535c81;\n  --color-slate-text: #afb2c9;\n  --color-coral-light: #f3ccb0;\n  --color-coral-base: #f08848;\n  --color-coral-dark: #9a4e2d;\n  --color-coral-text: #f9b27b;\n  --color-lavender-light: #b482ed;\n  --color-lavender-base: #8148c9;\n  --color-lavender-dark: #48296f;\n  --color-lavender-text: #be8af9;\n  --color-bamboo-light: #7acaa9;\n  --color-bamboo-base: #439274;\n  --color-bamboo-dark: #305b4a;\n  --color-bamboo-text: #65bc99;\n";
+//# sourceMappingURL=css_variables.dark.d.ts.map

package/dist/src/design_system/colors/generated/css_variables.dark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_variables.dark.d.ts","sourceRoot":"","sources":["../../../../../src/design_system/colors/generated/css_variables.dark.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,MAAM,+rLA8IlB,CAAC"}

package/dist/src/design_system/colors/generated/css_variables.dark.js

@@ -0,0 +1,147 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export const tokens = `
+  --color-neutral-text: #f3f4fa;
+  --color-neutral-text-muted: #b2b8cc;
+  --color-neutral-text-subtle: #8c93a8;
+  --color-neutral-text-disabled: #575d71;
+  --color-neutral-text-on-primary: #1a1b21;
+  --color-neutral-icon-on-primary: #1a1b21;
+  --color-neutral-background: #1a1b21;
+  --color-neutral-background-muted: #252832;
+  --color-neutral-background-subtle: #2a2d39;
+  --color-neutral-background-white: #f3f4fa;
+  --color-neutral-card-background: #1e2027;
+  --color-neutral-card-background-hover: #252832;
+  --color-neutral-border: #414758;
+  --color-neutral-separator-subtle: #343847;
+  --color-neutral-hover: #2d313e;
+  --color-neutral-disabled: #343847;
+  --color-neutral-overflow: #2a2d39;
+  --color-neutral-icon: #b2b8cc;
+  --color-neutral-icon-subtle: #6e758a;
+  --color-neutral-icon-disabled: #575d71;
+  --color-neutral-field-border: #343847;
+  --color-neutral-action-secondary: #575d71;
+  --color-neutral-action-secondary-hover: #6e758a;
+  --color-neutral-action-secondary-active: #343847;
+  --color-neutral-chip-background: #575d71;
+  --color-neutral-chip-background-hover: #6e758a;
+  --color-neutral-chip-background-active: #8c93a8;
+  --color-neutral-chip-background-disabled: #8c93a8;
+  --color-neutral-large-tooltip-background: #2a2d39;
+  --color-neutral-large-tooltip-border: #343847;
+  --color-neutral-small-tooltip-text: #ffffff;
+  --color-neutral-small-tooltip-background: #2a2d39;
+  --color-neutral-small-tooltip-border: #343847;
+  --color-neutral-overlay: #101114;
+  --color-neutral-field-background: #101114;
+  --color-neutral-text-placeholder: #6e758a;
+  --color-primary-text: #6f9dff;
+  --color-primary-text-interactive: #6f9dff;
+  --color-primary-icon: #3970d7;
+  --color-primary-action: #5990ff;
+  --color-primary-action-hover: #80a9ff;
+  --color-primary-action-active: #3970d7;
+  --color-primary-field-border-active: #3970d7;
+  --color-primary-border-subtle: #295cbb;
+  --color-primary-background: #0d2550;
+  --color-primary-background-subtle: #151d34;
+  --color-primary-background-hover: #194594;
+  --color-primary-chip-background: #0d2550;
+  --color-primary-chip-background-subtle: #151d34;
+  --color-primary-chip-background-hover: #194594;
+  --color-primary-chip-text: #8ebcff;
+  --color-primary-shadow-active: #295cbb;
+  --color-primary-black-action: #ffffff;
+  --color-primary-black-action-hover: #d1d5e4;
+  --color-primary-black-action-active: #f3f4fa;
+  --color-primary-black-background: #f3f4fa;
+  --color-primary-black-background-hover: #eef0f8;
+  --color-primary-black-chip-text: #101114;
+  --color-success-text: #3bb358;
+  --color-success-icon: #23a64a;
+  --color-success-background: #14441f;
+  --color-success-background-hover: #00531e;
+  --color-success-background-subtle: #09260f;
+  --color-success-background-subtle-hover: #14441f;
+  --color-success-background-subtle-active: #006e29;
+  --color-success-chip-background: #14441f;
+  --color-success-chip-background-hover: #00531e;
+  --color-success-chip-text: #6ccd7c;
+  --color-success-border: #068a35;
+  --color-success-border-subtle: #006e29;
+  --color-success-action: #23a64a;
+  --color-success-action-hover: #3bb358;
+  --color-success-action-active: #068a35;
+  --color-warning-text: #f9ce4b;
+  --color-warning-icon: #f9ce4b;
+  --color-warning-background: #5d2e0e;
+  --color-warning-background-hover: #6d3806;
+  --color-warning-background-subtle: #301806;
+  --color-warning-chip-background: #5d2e0e;
+  --color-warning-chip-background-hover: #6d3806;
+  --color-warning-chip-text: #ffd761;
+  --color-warning-border: #a56909;
+  --color-warning-border-subtle: #8a4f05;
+  --color-warning-field-border: #cf9117;
+  --color-danger-text: #ff7157;
+  --color-danger-icon: #ef6045;
+  --color-danger-background: #672523;
+  --color-danger-background-hover: #812420;
+  --color-danger-background-subtle: #381719;
+  --color-danger-background-subtle-hover: #672523;
+  --color-danger-background-subtle-active: #aa3229;
+  --color-danger-chip-background: #672523;
+  --color-danger-chip-background-hover: #812420;
+  --color-danger-chip-text: #fe9e8a;
+  --color-danger-border: #cf4436;
+  --color-danger-border-subtle: #aa3229;
+  --color-danger-field-border: #ef6045;
+  --color-danger-action: #ef6045;
+  --color-danger-action-hover: #ff7157;
+  --color-danger-action-active: #cf4436;
+  --color-special-free-plan-background: #9a4e2d;
+  --color-special-starter-plan-background: #b87939;
+  --color-special-scale-plan-background: #425484;
+  --color-special-business-plan-background: #408288;
+  --color-special-enterprise-plan-background: #48296f;
+  --color-rose-light: #e88bb3;
+  --color-rose-base: #b8487b;
+  --color-rose-dark: #6f234f;
+  --color-rose-text: #ed8bb5;
+  --color-buttercup-light: #f9deaa;
+  --color-buttercup-base: #e5b557;
+  --color-buttercup-dark: #b87939;
+  --color-buttercup-text: #ebbf6c;
+  --color-paprika-light: #e26c7d;
+  --color-paprika-base: #9e384b;
+  --color-paprika-dark: #511d27;
+  --color-paprika-text: #f67c8d;
+  --color-teal-light: #aef0f5;
+  --color-teal-base: #58bcc4;
+  --color-teal-dark: #408288;
+  --color-teal-text: #62c1c8;
+  --color-indigo-light: #a8b7ed;
+  --color-indigo-base: #6d85ca;
+  --color-indigo-dark: #425484;
+  --color-indigo-text: #a2b2eb;
+  --color-slate-light: #c2c5dc;
+  --color-slate-base: #8690bf;
+  --color-slate-dark: #535c81;
+  --color-slate-text: #afb2c9;
+  --color-coral-light: #f3ccb0;
+  --color-coral-base: #f08848;
+  --color-coral-dark: #9a4e2d;
+  --color-coral-text: #f9b27b;
+  --color-lavender-light: #b482ed;
+  --color-lavender-base: #8148c9;
+  --color-lavender-dark: #48296f;
+  --color-lavender-text: #be8af9;
+  --color-bamboo-light: #7acaa9;
+  --color-bamboo-base: #439274;
+  --color-bamboo-dark: #305b4a;
+  --color-bamboo-text: #65bc99;
+`;
+//# sourceMappingURL=css_variables.dark.js.map

package/dist/src/design_system/colors/generated/css_variables.dark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_variables.dark.js","sourceRoot":"","sources":["../../../../../src/design_system/colors/generated/css_variables.dark.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8IrB,CAAC"}