@bariskuran/base 0.0.0-stage → 0.0.2

package/src/libs/colorGet/_dS.jsx

@@ -0,0 +1,101 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { colorGet } from ".";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { baseStore } from "../baseStore";
+
+const X = () => {
+    const { input, set } = baseStore.useLocal({ input: "primary" });
+    const out = colorGet(input);
+
+    return (
+        <Ds.page
+            title="colorGet()"
+            releasedOn="1.0.0"
+            description={`Resolves a color (theme token/path or raw css color) and returns helper APIs.
+
+                        You can use colorGet via direct import from base, or via the theme helper in styled usage (theme.colorGet).`}
+        >
+            <Ds.block
+                title={{ tr: "Etkileşimli", en: "Interactive" }}
+                code={`import { colorGet } from "${SYS.basePath}";
+
+                       colorGet("primary");
+                       colorGet("foregrounds.tint50");
+                       colorGet("rgba(0,0,0,0.5)");
+                       colorGet("red");
+                       colorGet("primary");
+`}
+                example={
+                    <Flex.column gap={12} full>
+                        <Flex gap={10} full>
+                            <Flex.column gap={4}>
+                                <Typo.span>Input:</Typo.span>
+                                <Flex gap={10}>
+                                    <input
+                                        type="text"
+                                        value={input}
+                                        onChange={(e) =>
+                                            set((s) => {
+                                                s.input = e.target.value;
+                                            })
+                                        }
+                                        style={{ width: 220 }}
+                                    />
+                                    {out?.colorApi?.hex8 && (
+                                        <div
+                                            style={{
+                                                backgroundColor: out?.colorApi?.hex8,
+                                                width: 29,
+                                                height: 29,
+                                            }}
+                                        />
+                                    )}
+                                </Flex>
+                            </Flex.column>
+                        </Flex>
+                        <Ds.output
+                            directValue={`
+                                color: ${out?.color},
+                                colorApi: {
+                                      colorConverterResults,
+                                      shade1..100, // 100 = #000
+                                      tint1..100, // 100 = #fff
+                                }
+                                opposite: ${out?.opposite},
+                                oppositeApi: {
+                                    // same content as colorApi, but for the opposite color
+                                }
+                            `}
+                        />
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                args="const result = colorGet(color);"
+                props={{
+                    color: {
+                        description: { tr: "Girdi renk token'ı/yolu/CSS rengi.", en: "Input color token/path/css color." },
+                        type: "string",
+                        required: true,
+                    },
+                }}
+                returnProps={{
+                    color: { description: { tr: "Çözümlenen renk string'i.", en: "Resolved color string." }, type: "string" },
+                    colorApi: {
+                        description: { tr: "Çözümlenen renk için yardımcı API (tint, shade vb.).", en: "Helper API for the resolved color (tint, shade, etc.)." },
+                        type: "object",
+                    },
+                    opposite: { description: { tr: "Erişilebilir karşıt renk string'i.", en: "Accessible opposite color string." }, type: "string" },
+                    oppositeApi: {
+                        description: { tr: "Karşıt renk için yardımcı API.", en: "Helper API for the opposite color." },
+                        type: "object",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/colorGet/index.js

@@ -0,0 +1,149 @@
+import { baseStore } from "../baseStore";
+import { colorConverter } from "../colorConverter";
+import { colorShader } from "../colorShader";
+import { colorTinter } from "../colorTinter";
+import { colorFind } from "../colorFind";
+
+const getTheme = () => {
+    try {
+        return baseStore?.globalData?.get?.()?.theme || {};
+    } catch {
+        return {};
+    }
+};
+
+const resolveColor = (input) => {
+    return colorFind(input, { output: "hex8" });
+};
+
+const clamp = (num, min = 0, max = 100) => Math.min(max, Math.max(min, Number(num) || 0));
+
+const getThemeContrastPair = () => {
+    const theme = getTheme();
+
+    const fgResolved = resolveColor(theme?.foreground);
+    const bgResolved = resolveColor(theme?.background);
+
+    const fgLum = fgResolved ? colorConverter(fgResolved)?.luminance : undefined;
+    const bgLum = bgResolved ? colorConverter(bgResolved)?.luminance : undefined;
+
+    let dark, light;
+
+    if (fgResolved && fgLum != null && bgResolved && bgLum != null) {
+        if (fgLum < bgLum) {
+            dark = fgResolved;
+            light = bgResolved;
+        } else {
+            dark = bgResolved;
+            light = fgResolved;
+        }
+    } else {
+
+        dark = "#000000";
+        light = "#ffffff";
+    }
+
+    return { dark, light };
+};
+
+const getAccessibleOpposite = (luminance) => {
+    const { dark, light } = getThemeContrastPair();
+    return luminance >= 0.5 ? dark : light;
+};
+
+const buildColorApi = (resolvedColor) => {
+    const converted = colorConverter(resolvedColor);
+    if (!converted || !converted.hex8) return undefined;
+
+    const {
+        hex6,
+        hex8,
+        rgbArray,
+        rgbString,
+        rgbaArray,
+        rgbaString,
+        hsbArray,
+        hsbString,
+        hsbaArray,
+        hsbaString,
+        hslArray,
+        hslString,
+        hslaArray,
+        hslaString,
+        luminance,
+        isLight,
+        isDark,
+        linearRgbaArray,
+    } = converted;
+
+    const api = {
+        color: resolvedColor,
+
+        hex6,
+        hex8,
+        rgbArray,
+        rgbString,
+        rgbaArray,
+        rgbaString,
+        hsbArray,
+        hsbString,
+        hsbaArray,
+        hsbaString,
+        hslArray,
+        hslString,
+        hslaArray,
+        hslaString,
+        luminance,
+        linearRgbaArray,
+        isLight,
+        isDark,
+
+        shade(amount = 0) {
+            return colorShader(hex8, clamp(amount));
+        },
+
+        tint(amount = 0) {
+            return colorTinter(hex8, clamp(amount));
+        },
+    };
+
+    for (let i = 1; i <= 100; i++) {
+        Object.defineProperty(api, `shade${i}`, {
+            enumerable: true,
+            configurable: false,
+            get() {
+                return colorShader(hex8, i);
+            },
+        });
+    }
+
+    for (let i = 1; i <= 100; i++) {
+        Object.defineProperty(api, `tint${i}`, {
+            enumerable: true,
+            configurable: false,
+            get() {
+                return colorTinter(hex8, i);
+            },
+        });
+    }
+
+    return api;
+};
+
+export const colorGet = (color) => {
+    const resolvedColor = resolveColor(color);
+    if (!resolvedColor) return undefined;
+
+    const converted = colorConverter(resolvedColor);
+    if (!converted || !converted.hex8) return undefined;
+
+    const oppositeColor = getAccessibleOpposite(converted.luminance);
+
+    return {
+        color: resolvedColor,
+        colorApi: buildColorApi(resolvedColor),
+
+        opposite: oppositeColor,
+        oppositeApi: buildColorApi(oppositeColor),
+    };
+};

package/src/libs/colorGet3DShadow/_dS.jsx

@@ -0,0 +1,166 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { get3DShadow } from ".";
+import styled from "styled-components";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { baseStore } from "../baseStore";
+
+const Card = styled.div`
+    width: 120rem;
+    height: 60rem;
+    border-radius: 8rem;
+    background: white;
+    display: grid;
+    place-items: center;
+`;
+
+const PreviewCard = styled(Card)`
+    ${({ $depth, $hoverDepth, $transition, $color }) =>
+        get3DShadow({
+            depth: $depth,
+            hoverDepth: $hoverDepth,
+            transition: $transition,
+            color: $color,
+        })}
+`;
+
+const X = () => {
+    const { depth, hoverDepth, transition, color, set } = baseStore.useLocal({
+        depth: 1,
+        hoverDepth: 3,
+        transition: true,
+        color: "#0f172a",
+    });
+
+    return (
+        <Ds.page
+            title="get3DShadow()"
+            releasedOn="1.0.0"
+            description={`Generates reusable 3D box-shadow CSS fragment for styled-components.
+
+                    You can use get3DShadow via direct import from base, or via the theme helper in styled usage (theme.get3DShadow if attached in your setup).`}
+        >
+            <Ds.block
+                title={{ tr: "Etkileşimli Önizleme", en: "Interactive preview" }}
+                code={`import { get3DShadow } from "${SYS.basePath}";
+
+                        const Box = styled.div\`
+                          \${get3DShadow({ depth: 1 })}
+                        \`;
+
+                        const Box = styled.div\`
+                          \${get3DShadow({ depth: 1, hoverDepth: 3 })}
+                        \`;
+`}
+                example={
+                    <Flex.column gap={12} full>
+                        <Flex gap={10}>
+                            <Flex.column gap={4}>
+                                <Typo.span>depth: {depth}</Typo.span>
+                                <input
+                                    type="range"
+                                    min={1}
+                                    max={10}
+                                    value={depth}
+                                    onChange={(e) =>
+                                        set((s) => {
+                                            s.depth = Number(e.target.value);
+                                        })
+                                    }
+                                />
+                            </Flex.column>
+                            <Flex.column gap={4}>
+                                <Typo.span>hoverDepth: {hoverDepth}</Typo.span>
+                                <input
+                                    type="range"
+                                    min={1}
+                                    max={15}
+                                    value={hoverDepth}
+                                    onChange={(e) =>
+                                        set((s) => {
+                                            s.hoverDepth = Number(e.target.value);
+                                        })
+                                    }
+                                />
+                            </Flex.column>
+                            <Flex.column gap={4}>
+                                <Typo.span>shadow color:</Typo.span>
+                                <input
+                                    type="color"
+                                    value={color}
+                                    onChange={(e) =>
+                                        set((s) => {
+                                            s.color = e.target.value;
+                                        })
+                                    }
+                                />
+                            </Flex.column>
+                        </Flex>
+                        <label>
+                            <input
+                                type="checkbox"
+                                checked={transition}
+                                onChange={(e) =>
+                                    set((s) => {
+                                        s.transition = e.target.checked;
+                                    })
+                                }
+                            />{" "}
+                            transition
+                        </label>
+                        <Flex gap={12}>
+                            <PreviewCard
+                                children="preview"
+                                $depth={depth}
+                                $hoverDepth={hoverDepth}
+                                $transition={transition}
+                                $color={color}
+                            />
+                            <PreviewCard
+                                children="static"
+                                $depth={depth}
+                                $hoverDepth={null}
+                                $transition={transition}
+                                $color={color}
+                            />
+                        </Flex>
+                        <Ds.output directValue={{ depth, hoverDepth, transition, color }} />
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                args="const shadowCss = get3DShadow({ color, depth, hoverDepth, transition });"
+                props={{
+                    depth: {
+                        description: { tr: "Temel gölge derinliği seviyesi.", en: "Base shadow depth level." },
+                        type: "number",
+                        defaultValue: "1",
+                    },
+                    hoverDepth: {
+                        description: { tr: "Hover durumundaki gölge derinliği.", en: "Shadow depth on hover." },
+                        type: "number | null",
+                    },
+                    transition: {
+                        description: { tr: "Hover gölgesi için transition ekler.", en: "Adds transition for hover shadow." },
+                        type: "boolean",
+                        defaultValue: "true",
+                    },
+                    color: {
+                        description: { tr: "Gölge kaynak rengi (varsayılan theme.foreground).", en: "Shadow source color (defaults theme.foreground)." },
+                        type: "string",
+                        defaultValue: "theme.foreground",
+                    },
+                }}
+                returnProps={{
+                    shadowCss: {
+                        description: { tr: "box-shadow katmanları için styled-components CSS parçası.", en: "styled-components css fragment for box-shadow layers." },
+                        type: "css",
+                    },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/colorGet3DShadow/index.js

@@ -0,0 +1,45 @@
+import { css } from "styled-components";
+import { baseStore } from "../baseStore";
+import { colorConverter } from "../colorConverter";
+
+const getRgbString = (color) => {
+    try {
+        const rgb = colorConverter(color)?.rgbArray;
+        if (rgb?.length >= 3) {
+            return `${rgb[0]}, ${rgb[1]}, ${rgb[2]}`;
+        }
+    } catch {
+        return "0, 0, 0";
+    }
+
+    return "0, 0, 0";
+};
+
+const buildShadowLayers = (depth = 1, rgb = "0, 0, 0") => {
+    const d = depth * 2.5;
+
+    return `
+        0 ${d * 0.5}rem ${d * 1}rem rgba(${rgb}, 0.06),
+        0 ${d * 1.5}rem ${d * 3}rem rgba(${rgb}, 0.08),
+        0 ${d * 3}rem ${d * 6}rem rgba(${rgb}, 0.12)
+    `;
+};
+
+export const get3DShadow = ({ depth = 1, hoverDepth = null, transition = true, color } = {}) => {
+    const theme = baseStore.globalData.get().theme;
+    const baseColor = color || theme?.foreground || "#000";
+    const rgb = getRgbString(baseColor);
+
+    return css`
+        box-shadow: ${buildShadowLayers(depth, rgb)};
+        ${transition ? `transition: box-shadow 0.25s ease;` : ""}
+
+        ${hoverDepth != null
+            ? `
+            &:hover {
+                box-shadow: ${buildShadowLayers(hoverDepth, rgb)};
+            }
+        `
+            : ""}
+    `;
+};

package/src/libs/colorPickHigherContrast/_dS.jsx

@@ -0,0 +1,136 @@
+import Ds from "../DesignSystem";
+import { SYS } from "../../constants/SYS";
+import { colorPickHigherContrast } from ".";
+import { Flex } from "../Flex";
+import { Typo } from "../Typo";
+import { baseStore } from "../baseStore";
+
+const X = () => {
+    const { optionA, optionB, background, set } = baseStore.useLocal({
+        optionA: "#ffffff",
+        optionB: "#111111",
+        background: "#3b82f6",
+    });
+    const output = colorPickHigherContrast(optionA, optionB, background);
+
+    return (
+        <Ds.page
+            title="colorPickHigherContrast()"
+            releasedOn="1.0.0"
+            description={`Compares two candidates against a background and returns the better WCAG contrast winner.
+
+You can use colorPickHigherContrast via direct import from base, or via the theme helper in styled usage (theme.colorPickHigherContrast).`}
+        >
+            <Ds.block
+                title={{ tr: "Etkileşimli Karşılaştırma", en: "Interactive comparison" }}
+                code={`import { colorPickHigherContrast } from "${SYS.basePath}";
+
+                       colorPickHigherContrast("#ffffff", "#111111", "#3b82f6");`}
+                example={
+                    <Flex.column gap={10} full>
+                        <Flex gap={10}>
+                            <Flex.column gap={4}>
+                                <Typo.span>Background</Typo.span>
+                                <input
+                                    type="color"
+                                    value={background}
+                                    onChange={(e) =>
+                                        set((s) => {
+                                            s.background = e.target.value;
+                                        })
+                                    }
+                                />
+                            </Flex.column>
+                            <Flex.column gap={4}>
+                                <Typo.span>Option A</Typo.span>
+                                <input
+                                    type="color"
+                                    value={optionA}
+                                    onChange={(e) =>
+                                        set((s) => {
+                                            s.optionA = e.target.value;
+                                        })
+                                    }
+                                />
+                            </Flex.column>
+                            <Flex.column gap={4}>
+                                <Typo.span>Option B</Typo.span>
+                                <input
+                                    type="color"
+                                    value={optionB}
+                                    onChange={(e) =>
+                                        set((s) => {
+                                            s.optionB = e.target.value;
+                                        })
+                                    }
+                                />
+                            </Flex.column>
+                        </Flex>
+                        <Flex
+                            gap={10}
+                            style={{
+                                background,
+                                padding: 10,
+                                borderRadius: 8,
+                                width: "fit-content",
+                            }}
+                        >
+                            <div
+                                style={{
+                                    width: 56,
+                                    height: 28,
+                                    borderRadius: 6,
+                                    background: optionA,
+                                }}
+                            />
+                            <div
+                                style={{
+                                    width: 56,
+                                    height: 28,
+                                    borderRadius: 6,
+                                    background: optionB,
+                                }}
+                            />
+                            <div
+                                style={{
+                                    width: 56,
+                                    height: 28,
+                                    borderRadius: 6,
+                                    background: output?.winner,
+                                }}
+                            />
+                        </Flex>
+                        <Ds.output directValue={output} />
+                    </Flex.column>
+                }
+            />
+            <Ds.api
+                args="const { winner, ratioA, ratioB } = colorPickHigherContrast(optionA, optionB, background);"
+                props={{
+                    optionA: {
+                        description: { tr: "İlk aday renk.", en: "First candidate color." },
+                        type: "string | object | null",
+                        defaultValue: "theme.foreground",
+                    },
+                    optionB: {
+                        description: { tr: "İkinci aday renk.", en: "Second candidate color." },
+                        type: "string | object | null",
+                        defaultValue: "theme.background",
+                    },
+                    background: {
+                        description: { tr: "Arka plan rengi.", en: "Background color." },
+                        type: "string | object",
+                        required: true,
+                    },
+                }}
+                returnProps={{
+                    winner: { description: { tr: "Kazanan aday renk string'i.", en: "Winning candidate color string." }, type: "string" },
+                    ratioA: { description: { tr: "optionA için kontrast oranı.", en: "Contrast ratio for optionA." }, type: "number" },
+                    ratioB: { description: { tr: "optionB için kontrast oranı.", en: "Contrast ratio for optionB." }, type: "number" },
+                }}
+            />
+        </Ds.page>
+    );
+};
+
+export default X;

package/src/libs/colorPickHigherContrast/index.js

@@ -0,0 +1,18 @@
+import { colorConverter } from "../colorConverter";
+import { colorWcagValue } from "../colorWcagValue";
+import { baseStore } from "../baseStore";
+
+export const colorPickHigherContrast = (optionA, optionB, background) => {
+    const { theme } = baseStore.globalData.get();
+    const { background: sysBg, foreground: sysFg } = theme || {};
+
+    const a = colorConverter(optionA ?? sysFg);
+    const b = colorConverter(optionB ?? sysBg);
+
+    const ratioA = colorWcagValue(background, a.hex6);
+    const ratioB = colorWcagValue(background, b.hex6);
+
+    const winner = ratioA >= ratioB ? a.hex6 : b.hex6;
+
+    return { winner, ratioA, ratioB };
+};