@apify/ui-library 1.141.2 → 1.145.2-featverifieddeveloperbadge-bd59c6.13

package/src/utils/css_utils.ts

@@ -1,5 +1,7 @@
 import { css } from 'styled-components';
 
+import { theme } from '../design_system/theme.js';
+
 /**
  * To be used in any styled-component styles to limit the number of visible lines of a given text
  * @param nLines number of lines to show
@@ -15,3 +17,80 @@ export function clampLines(nLines: number) {
         -webkit-box-orient: vertical;
     `;
 }
+
+export type DeviceBreakpoints = 'mobile' | 'tablet' | 'desktop' | 'mediumDesktop' | 'largeDesktop' | 'xLargeDesktop';
+type MediaQueryBreakpoint = Exclude<DeviceBreakpoints, 'mobile'>;
+
+export type ResponsiveValue<T> = T | { [key in DeviceBreakpoints]?: T };
+
+const mediaQueryBreakpoints: MediaQueryBreakpoint[] = [
+    'tablet',
+    'desktop',
+    'mediumDesktop',
+    'largeDesktop',
+    'xLargeDesktop',
+];
+
+const responsiveBreakpoints: DeviceBreakpoints[] = ['mobile', ...mediaQueryBreakpoints];
+
+export const isResponsiveObject = <T>(value?: ResponsiveValue<T>): value is { [key in DeviceBreakpoints]?: T } =>
+    typeof value === 'object' && value !== null;
+
+export const getResponsiveValueAtBreakpoint = <T>(
+    value: ResponsiveValue<T> | undefined,
+    breakpoint: DeviceBreakpoints,
+) => {
+    if (isResponsiveObject(value)) return value[breakpoint];
+    return value;
+};
+
+/**
+ * Use this when a CSS property can be either a single value or different values per breakpoint.
+ * Pass the property name, a function that turns the input into a CSS value, and optionally fallback values to use
+ * when the main value is not provided (margin bottom can for example be specified by mb, my, m).
+ * @param cssProperty CSS property name to generate
+ * @param resolver converts the input value into a CSS value ('space16' => '16px')
+ * @param value single value or breakpoint-based values for the property
+ * @param fallbackValues values checked in order when `value` is missing
+ * @returns generated responsive styles, or `undefined` when there is nothing to output
+ */
+export const getResponsiveStyles = <T>(
+    cssProperty: string,
+    resolver: (value: T) => string | number,
+    value?: ResponsiveValue<T>,
+    fallbackValues: ResponsiveValue<T>[] = [],
+) => {
+    const resolvedValue = value ?? fallbackValues.find((fallbackValue) => fallbackValue !== undefined);
+
+    if (resolvedValue === undefined) {
+        return undefined;
+    }
+
+    if (!isResponsiveObject(resolvedValue)) {
+        return css`
+            ${cssProperty}: ${resolver(resolvedValue)};
+        `;
+    }
+
+    const styleBlocks = responsiveBreakpoints
+        .map((breakpoint) => {
+            const nextValue = getResponsiveValueAtBreakpoint(resolvedValue, breakpoint);
+
+            if (nextValue === undefined) return false;
+
+            const declaration = css`
+                ${cssProperty}: ${resolver(nextValue)};
+            `;
+
+            return breakpoint === 'mobile'
+                ? declaration
+                : css`
+                      @media ${theme.device[breakpoint as MediaQueryBreakpoint]} {
+                          ${declaration}
+                      }
+                  `;
+        })
+        .filter(Boolean);
+
+    return styleBlocks.length > 0 ? styleBlocks : undefined;
+};

package/style/colors/tokens.dark.css

@@ -0,0 +1,149 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-neutral-text: #f4f4f5;
+  --color-neutral-text-muted: #bfc1c5;
+  --color-neutral-text-subtle: #9ea2a8;
+  --color-neutral-text-disabled: #4f5257;
+  --color-neutral-text-on-primary: #161718;
+  --color-neutral-icon-on-primary: #161718;
+  --color-neutral-background: #161718;
+  --color-neutral-background-muted: #1f2123;
+  --color-neutral-background-subtle: #242528;
+  --color-neutral-background-white: #f4f4f5;
+  --color-neutral-card-background: #1b1c1d;
+  --color-neutral-card-background-hover: #1f2123;
+  --color-neutral-border: #3d3f43;
+  --color-neutral-separator-subtle: #333538;
+  --color-neutral-hover: #292b2e;
+  --color-neutral-on-surface: rgba(109, 113, 120, 0.22);
+  --color-neutral-disabled: #333538;
+  --color-neutral-overflow: #242528;
+  --color-neutral-icon: #bfc1c5;
+  --color-neutral-icon-subtle: #6d7178;
+  --color-neutral-icon-disabled: #4f5257;
+  --color-neutral-field-border: #333538;
+  --color-neutral-action-secondary: #4f5257;
+  --color-neutral-action-secondary-hover: #6d7178;
+  --color-neutral-action-secondary-active: #333538;
+  --color-neutral-chip-background: #4f5257;
+  --color-neutral-chip-background-hover: #6d7178;
+  --color-neutral-chip-background-active: #9ea2a8;
+  --color-neutral-chip-background-disabled: #9ea2a8;
+  --color-neutral-large-tooltip-background: #242528;
+  --color-neutral-large-tooltip-border: #333538;
+  --color-neutral-small-tooltip-text: #ffffff;
+  --color-neutral-small-tooltip-background: #242528;
+  --color-neutral-small-tooltip-border: #333538;
+  --color-neutral-overlay: #101114;
+  --color-neutral-field-background: #0a0a0b;
+  --color-neutral-text-placeholder: #6d7178;
+  --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: #d2d3d6;
+  --color-primary-black-action-active: #f4f4f5;
+  --color-primary-black-background: #f4f4f5;
+  --color-primary-black-background-hover: #edeeef;
+  --color-primary-black-chip-text: #0a0a0b;
+  --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-special-highlight: #0d2550;
+  --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;
+}

package/style/colors/tokens.light.css

@@ -0,0 +1,149 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-neutral-text: #1f2123;
+  --color-neutral-text-muted: #3d3f43;
+  --color-neutral-text-subtle: #6d7178;
+  --color-neutral-text-disabled: #c9cbcf;
+  --color-neutral-text-on-primary: #ffffff;
+  --color-neutral-icon-on-primary: #ffffff;
+  --color-neutral-background: #ffffff;
+  --color-neutral-background-muted: #f9f9fa;
+  --color-neutral-background-subtle: #f4f4f5;
+  --color-neutral-background-white: #ffffff;
+  --color-neutral-card-background: #ffffff;
+  --color-neutral-card-background-hover: #ffffff;
+  --color-neutral-border: #d2d3d6;
+  --color-neutral-separator-subtle: #e4e5e6;
+  --color-neutral-hover: #edeeef;
+  --color-neutral-on-surface: rgba(109, 113, 120, 0.12);
+  --color-neutral-disabled: #f4f4f5;
+  --color-neutral-overflow: #e4e5e6;
+  --color-neutral-icon: #4f5257;
+  --color-neutral-icon-subtle: #9ea2a8;
+  --color-neutral-icon-disabled: #bfc1c5;
+  --color-neutral-field-border: #c9cbcf;
+  --color-neutral-action-secondary: #d2d3d6;
+  --color-neutral-action-secondary-hover: #e4e5e6;
+  --color-neutral-action-secondary-active: #d2d3d6;
+  --color-neutral-chip-background: #e4e5e6;
+  --color-neutral-chip-background-hover: #d2d3d6;
+  --color-neutral-chip-background-active: #c9cbcf;
+  --color-neutral-chip-background-disabled: #d2d3d6;
+  --color-neutral-large-tooltip-background: #ffffff;
+  --color-neutral-large-tooltip-border: #e4e5e6;
+  --color-neutral-small-tooltip-text: #ffffff;
+  --color-neutral-small-tooltip-background: #161718;
+  --color-neutral-small-tooltip-border: #1f2123;
+  --color-neutral-overlay: #191b22;
+  --color-neutral-field-background: #f9f9fa;
+  --color-neutral-text-placeholder: #a9acb1;
+  --color-primary-text: #1672eb;
+  --color-primary-text-interactive: #1672eb;
+  --color-primary-icon: #1672eb;
+  --color-primary-action: #1672eb;
+  --color-primary-action-hover: #5290f9;
+  --color-primary-action-active: #1a57da;
+  --color-primary-field-border-active: #1672eb;
+  --color-primary-border-subtle: #b2c6ff;
+  --color-primary-background: #ecf1ff;
+  --color-primary-background-subtle: #f0f8ff;
+  --color-primary-background-hover: #d8e2ff;
+  --color-primary-chip-background: #ecf1ff;
+  --color-primary-chip-background-subtle: #f0f8ff;
+  --color-primary-chip-background-hover: #d8e2ff;
+  --color-primary-chip-text: #1a57da;
+  --color-primary-shadow-active: #b2c6ff;
+  --color-primary-black-action: #242528;
+  --color-primary-black-action-hover: #292b2e;
+  --color-primary-black-action-active: #0a0a0b;
+  --color-primary-black-background: #1b1c1d;
+  --color-primary-black-background-hover: #3d3f43;
+  --color-primary-black-chip-text: #f9f9fa;
+  --color-success-text: #008a27;
+  --color-success-icon: #008a27;
+  --color-success-background: #e4f5e5;
+  --color-success-background-hover: #cfe9d1;
+  --color-success-background-subtle: #e8f9ef;
+  --color-success-background-subtle-hover: #cfe9d1;
+  --color-success-background-subtle-active: #80da8d;
+  --color-success-chip-background: #e4f5e5;
+  --color-success-chip-background-hover: #cfe9d1;
+  --color-success-chip-text: #086e08;
+  --color-success-border: #00ab46;
+  --color-success-border-subtle: #80da8d;
+  --color-success-action: #008a27;
+  --color-success-action-hover: #00ab46;
+  --color-success-action-active: #086e08;
+  --color-warning-text: #a96600;
+  --color-warning-icon: #f5b315;
+  --color-warning-background: #f9f0db;
+  --color-warning-background-hover: #f7dfb1;
+  --color-warning-background-subtle: #f9f6ea;
+  --color-warning-chip-background: #f9f0db;
+  --color-warning-chip-background-hover: #f7dfb1;
+  --color-warning-chip-text: #8c4e02;
+  --color-warning-border: #ca8200;
+  --color-warning-border-subtle: #f5b315;
+  --color-warning-field-border: #f5b315;
+  --color-danger-text: #e3231d;
+  --color-danger-icon: #e3231d;
+  --color-danger-background: #fff0ec;
+  --color-danger-background-hover: #fedad1;
+  --color-danger-background-subtle: #fcf2ef;
+  --color-danger-background-subtle-hover: #fedad1;
+  --color-danger-background-subtle-active: #ffb39f;
+  --color-danger-chip-background: #fff0ec;
+  --color-danger-chip-background-hover: #fedad1;
+  --color-danger-chip-text: #bb0401;
+  --color-danger-border: #fa4d37;
+  --color-danger-border-subtle: #ffb39f;
+  --color-danger-field-border: #fa4d37;
+  --color-danger-action: #e3231d;
+  --color-danger-action-hover: #fa4d37;
+  --color-danger-action-active: #bb0401;
+  --color-special-free-plan-background: #ffc89f;
+  --color-special-starter-plan-background: #ffdd96;
+  --color-special-scale-plan-background: #a1b7ff;
+  --color-special-business-plan-background: #a7f2ed;
+  --color-special-enterprise-plan-background: #bf97ed;
+  --color-special-highlight: #ecf1ff;
+  --color-rose-light: #f483b5;
+  --color-rose-base: #c6387d;
+  --color-rose-dark: #781552;
+  --color-rose-text: #b6006b;
+  --color-buttercup-light: #ffdd96;
+  --color-buttercup-base: #f0b21b;
+  --color-buttercup-dark: #c37319;
+  --color-buttercup-text: #a65d00;
+  --color-paprika-light: #e44467;
+  --color-paprika-base: #9b0238;
+  --color-paprika-dark: #4a0018;
+  --color-paprika-text: #ba0044;
+  --color-teal-light: #a7f2ed;
+  --color-teal-base: #30c0bb;
+  --color-teal-dark: #297774;
+  --color-teal-text: #018181;
+  --color-indigo-light: #a1b7ff;
+  --color-indigo-base: #5d85e1;
+  --color-indigo-dark: #365494;
+  --color-indigo-text: #2563c1;
+  --color-slate-light: #c1c5e1;
+  --color-slate-base: #8490c4;
+  --color-slate-dark: #525c85;
+  --color-slate-text: #566087;
+  --color-coral-light: #ffc89f;
+  --color-coral-base: #fa8136;
+  --color-coral-dark: #bb4511;
+  --color-coral-text: #c74000;
+  --color-lavender-light: #bf97ed;
+  --color-lavender-base: #6a14de;
+  --color-lavender-dark: #330276;
+  --color-lavender-text: #6e00f4;
+  --color-bamboo-light: #64cda5;
+  --color-bamboo-base: #12966f;
+  --color-bamboo-dark: #195d46;
+  --color-bamboo-text: #007455;
+}

package/src/design_system/colors/Colors.mdx

@@ -1,50 +0,0 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
-import { lightTheme } from './generated/colors_theme.light.ts';
-import { darkTheme } from './generated/colors_theme.dark.ts';
-
-<Meta title="Design Tokens/Colors" />
-
-# Colors
-
-## Semantic tokens
-
-<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
-  <div>
-    <h3>Light</h3>
-    <ColorPalette>
-      <ColorItem title="neutral.onSurface" subtitle="#6d71781f" colors={{ color: '#6d71781f' }} />
-    </ColorPalette>
-  </div>
-  <div>
-    <h3>Dark</h3>
-    <ColorPalette>
-      <ColorItem title="neutral.onSurface" subtitle="#6d717838" colors={{ color: '#6d717838' }} />
-    </ColorPalette>
-  </div>
-</div>
-
-## Palette
-
-<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
-  <div>
-    <h3>Light Theme</h3>
-    <ColorPalette>
-      {Object.entries(lightTheme)
-        .sort(([nameA], [nameB]) => nameA.localeCompare(nameB))
-        .map(([name, value]) => (
-          <ColorItem key={name} title={name} subtitle={value} colors={{ color: value }} />
-        ))}
-    </ColorPalette>
-  </div>
-  <div>
-    <h3>Dark Theme</h3>
-    <ColorPalette>
-      {Object.entries(darkTheme)
-        .sort(([nameA], [nameB]) => nameA.localeCompare(nameB))
-        .map(([name, value]) => (
-          <ColorItem key={name} title={name} subtitle={value} colors={{ color: value }} />
-        ))}
-    </ColorPalette>
-  </div>
-</div>
-