@fibery/ui-kit 4.2.0 → 4.3.0

package/src/design-system/alpha-coefficients.ts

@@ -0,0 +1,235 @@
+import type {$TSFixMe} from "../tsfixme";
+import {defineAlphaCoefficient, type AlphaCoefficient, type AlphaValue} from "./alpha";
+import type {ModeDef} from "./types";
+
+export type AlphaModeDef = ModeDef<AlphaCoefficient>;
+
+const mode = <Light extends AlphaValue, Dark extends AlphaValue>(light: Light, dark: Dark) =>
+  [defineAlphaCoefficient(light), defineAlphaCoefficient(dark)] as const satisfies AlphaModeDef;
+
+const same = <Value extends AlphaValue>(value: Value) => mode(value, value);
+
+export const alphaCoefficients = {
+  direction: {
+    surface5: same(0.05),
+    surface10: same(0.1),
+    surface15: same(0.15),
+    surface25: same(0.25),
+    surface40: same(0.4),
+    ink5: same(0.05),
+    ink10: same(0.1),
+    ink15: same(0.15),
+    ink25: same(0.25),
+    ink50: same(0.5),
+    ink90: same(0.9),
+  },
+
+  adaptiveUserColor: {
+    bg: mode(0.15, 0.3),
+    focus: mode(0.25, 0.4),
+    hover: mode(0.4, 0.6),
+    fg: same(0.95),
+    calloutBg: mode(0.1, 0.3),
+    highlightBg: mode(0.3, 0.4),
+    highlightDecor: same(0.9),
+  },
+
+  inputStroke: {
+    disabled: mode(0.6, 0.3),
+    default: mode(0.8, 0.4),
+    errorHover: same(0.4),
+    errorFocus: same(0.25),
+  },
+
+  shadow: {
+    hairline: same(0.05),
+    low: same(0.1),
+    medium: same(0.15),
+    high: same(0.2),
+    popupGlowLight: mode(0.3, 1),
+    floatingPanelStrokeLight: mode(0.15, 1),
+    floatingPanelDarkElevation: mode(0.15, 0.5),
+    menuHeaderLightStroke: mode(0.5, 0.2),
+    formHeader: mode(0.1, 0.4),
+    sidebarEdge: mode(0.1, 0.8),
+  },
+
+  entityBox: {
+    focusStroke: same(0.4),
+    focusHoverStroke: same(0.6),
+    elevationDefault: same(0.05),
+    elevationRaised: same(0.1),
+  },
+
+  entityBoxColorCoding: {
+    elevation: same(0.1),
+    stroke: same(0.3),
+    focusStroke: same(0.4),
+    focusHoverStroke: same(0.6),
+  },
+
+  foreground: {
+    active: same(0.8),
+    icon: same(0.7),
+    secondary: mode(0.7, 0.65),
+    menuItem: same(0.9),
+    solidActiveText: same(0.8),
+  },
+
+  badgeFill: {
+    accent: mode(0.7, 0.8),
+    neutral: mode(0.7, 0.8),
+  },
+
+  entityCard: {
+    overlay: mode(0.8, 0.5),
+    done: same(0.3),
+  },
+
+  interactiveFill: {
+    disabledNeutral: same(0.3),
+    tabHover: same(0.1),
+    warningComment: mode(0.6, 0.4),
+    ghostAccentHover: same(0.8),
+    ghostNeutralHover: mode(0.5, 0.8),
+    selection: mode(0.2, 0.4),
+    iconBackground: same(0.2),
+    accentSubtle: same(0.1),
+    accentMild: same(0.15),
+    accentMedium: same(0.2),
+    accentStrong: same(0.3),
+    accentBold: same(0.35),
+    accentVivid: same(0.6),
+    accentStroke: same(0.25),
+    accentStrokeHover: same(0.4),
+    accentStrokeFocus: same(0.5),
+    accentSolid: same(0.8),
+  },
+
+  border: {
+    panel: same(0.2),
+    dbSettingsCard: mode(0.8, 0.6),
+    link: same(0.4),
+    linkHover: same(0.75),
+    entityNode: mode(0.3, 0.4),
+    entityNodeHover: same(0.8),
+    shortcut: mode(0.5, 0.2),
+    media: same(0.14 as $TSFixMe),
+    filterGroup: mode(0.05, 0.03 as $TSFixMe),
+    richTextTable: mode(0.09 as $TSFixMe, 0.18 as $TSFixMe),
+    focusRing: same(0.3),
+    selectedColor: same(0.25),
+    cell: same(0.5),
+    cellPinned: same(0.7),
+  },
+
+  actionMenu: {
+    selectedHover: same(0.8),
+    dangerHover: same(0.1),
+    dangerActive: same(0.8),
+    innerHoverDark: mode(1, 0.5),
+    separator: mode(0.1, 0.15),
+  },
+
+  iconAndMention: {
+    appIconFg: mode(0.9, 0.7),
+    appIconBg: mode(0.9, 0.5),
+    mentionBg: mode(0.3, 0.4),
+  },
+
+  menu: {
+    selected: mode(0.8, 1),
+    selectedHover: mode(0.7, 1),
+  },
+
+  overlay: {
+    view: mode(0.2, 0.6),
+    modal: mode(0.2, 0.5),
+    file: same(0.6),
+  },
+
+  statusFill: {
+    error: mode(0.2, 0.6),
+    warning: same(0.6),
+    infoBox: mode(0.5, 0.2),
+    appCardHover: mode(0.95, 1),
+  },
+
+  progress: {
+    iconBg: mode(0.14 as $TSFixMe, 0.18 as $TSFixMe),
+    iconFill: mode(0.57 as $TSFixMe, 0.59 as $TSFixMe),
+    neutralFill: same(0.2),
+    track: same(0.25),
+    doneCircle: same(0.8),
+  },
+
+  segmentedControl: {
+    track: same(0.8),
+  },
+
+  button: {
+    customHover: same(0.15),
+    customFocus: same(0.3),
+    customBorder: same(0.3),
+    customTextActive: same(0.8),
+    softHover: mode(0.3, 0.45),
+    solidNeutralHover: mode(0.85, 1),
+    solidNeutralActiveText: mode(1, 0.8),
+  },
+
+  checkbox: {
+    focus: same(0.25),
+    hover: same(0.1),
+  },
+
+  pinnedFilter: {
+    fill: same(0.15),
+    border: same(0.6),
+  },
+
+  desktopTheme: {
+    findBorder: same(0.2),
+    findShadow: mode(0.2, 0.4),
+    activeTabBorder: same(0.1),
+  },
+
+  cursor: {
+    outline: same(0.6),
+    labelBg: same(0.95),
+    shadow: same(0.2),
+    overlay: same(0.9),
+    selection: same(0.25),
+  },
+
+  gridColorCoding: {
+    fallback: same(0.05),
+  },
+
+  whiteboard: {
+    lockedOrDisabled: same(0.5),
+    placeholder: same(0.2),
+    mapPreview: same(0.4),
+    cardShadow: same(0.05),
+    cardBorder: same(0.2),
+    unitHeader: same(0.6),
+    unitBorder: mode(0.2, 0.25),
+    uploadPreview: mode(0.65, 0.85),
+    embedEditBorder: same(0.9),
+    accentText: same(0.6),
+    stickyNoteAuthor: same(0.8),
+  },
+
+  utility: {
+    boardBg: same(0.8),
+    timelinePlaceholder: mode(0.2, 1),
+    logoGridSubtle: mode(0.2, 1),
+    logoGridMedium: mode(0.4, 1),
+    shadowOutline: same(0.2),
+    scrollFade: same(0.15),
+    selectedOutline: same(0.75),
+    scrollbar: same(0.5),
+    aiBg: same(0.1),
+    spinnerBg: same(0.1),
+    appIconWrapper: same(0.2),
+  },
+} as const;

package/src/design-system/alpha.ts

@@ -29,9 +29,18 @@ export const opacity = {
 
 export type AlphaValue = (typeof opacity)[keyof typeof opacity];
 
+declare const alphaCoefficientBrand: unique symbol;
+
+export type AlphaCoefficient = AlphaValue & {
+  readonly [alphaCoefficientBrand]: "alpha-coefficient";
+};
+
+export const defineAlphaCoefficient = <Value extends AlphaValue>(value: Value): Value & AlphaCoefficient =>
+  value as Value & AlphaCoefficient;
+
 // inspired by https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/alpha-value
 export const alpha = memoize(
-  (color: string, alpha: AlphaValue) => {
+  (color: string, alpha: AlphaCoefficient) => {
     return produceColor(color, (oklch) => ({...oklch, alpha}));
   },
   (a, b) => a + b