pixelize-design-library 2.1.19 → 2.1.20

package/src/Theme/Skyline/palette.ts

@@ -0,0 +1,372 @@
+import defaultPalette from "../Default/palette";
+
+const palette = {
+  ...defaultPalette,
+  primary: {
+    50: "#e3f2f9",
+    100: "#c5e4f3",
+    200: "#a2d4ec",
+    300: "#7ac1e4",
+    400: "#47a9da",
+    500: "#0088cc", // primary shade
+    600: "#007ab8",
+    700: "#006ba1",
+    800: "#005885",
+    900: "#003f5e",
+    opacity: {
+      4: "#9A4FE50a",
+      8: "#9A4FE514",
+      16: "#9A4FE529",
+      24: "#9A4FE53d",
+      32: "#9A4FE552",
+      40: "#9A4FE566",
+      48: "#9A4FE57a",
+    }
+  },
+  secondary: {
+    50: "#e3f2f9",
+    100: "#c5e4f3",
+    200: "#a2d4ec",
+    300: "#7ac1e4",
+    400: "#47a9da",
+    500: "#0088cc", // primary shade
+    600: "#007ab8",
+    700: "#006ba1",
+    800: "#005885",
+    900: "#003f5e",
+    opacity: {
+      4: "#9A4FE50a",
+      8: "#9A4FE514",
+      16: "#9A4FE529",
+      24: "#9A4FE53d",
+      32: "#9A4FE552",
+      40: "#9A4FE566",
+      48: "#9A4FE57a",
+    }
+  },
+  tertiary: {
+    50: "#e3f2f9",
+    100: "#c5e4f3",
+    200: "#a2d4ec",
+    300: "#7ac1e4",
+    400: "#47a9da",
+    500: "#0088cc", // primary shade
+    600: "#007ab8",
+    700: "#006ba1",
+    800: "#005885",
+    900: "#003f5e",
+    opacity: {
+      4: "#9A4FE50a",
+      8: "#9A4FE514",
+      16: "#9A4FE529",
+      24: "#9A4FE53d",
+      32: "#9A4FE552",
+      40: "#9A4FE566",
+      48: "#9A4FE57a",
+    }
+  },
+  transparent: "transparent",
+  black: "#000",
+  white: "#fff",
+  semantic: {
+    success: {
+      50: "#e6f9f0",
+      100: "#c0f0d8",
+      200: "#8be6bb",
+      300: "#5bdb9e",
+      400: "#33d181",
+      500: "#00b768", // Main success color
+      600: "#00a05a",
+      700: "#00854b",
+      800: "#006b3c",
+      900: "#004c28",
+    },
+    error: {
+      50: "#ffe6e6",
+      100: "#fbbcbc",
+      200: "#f28f8f",
+      300: "#e66060",
+      400: "#db3a3a",
+      500: "#c21e1e", // Main error color
+      600: "#a01919",
+      700: "#7e1313",
+      800: "#5c0d0d",
+      900: "#3d0909",
+    },
+    warning: {
+      50: "#fff4e6",
+      100: "#ffe1b8",
+      200: "#ffcc85",
+      300: "#ffb653",
+      400: "#ffa31a",
+      500: "#ff8a00", // Main warning color
+      600: "#db7000",
+      700: "#b75800",
+      800: "#934300",
+      900: "#702f00",
+    },
+    info: {
+      50: "#e3f5ff",
+      100: "#b8e4ff",
+      200: "#85d1ff",
+      300: "#52bdff",
+      400: "#1fa9ff",
+      500: "#008df5", // Main info color
+      600: "#0077db",
+      700: "#005cb3",
+      800: "#004489",
+      900: "#002d5c",
+    },
+  },
+  gray: {
+    50: "#f7fafc",
+    100: "#edf2f7",
+    200: "#e2e8f0",
+    300: "#cbd5e0",
+    400: "#a0aec0",
+    500: "#718096",
+    600: "#4a5568",
+    700: "#2d3748",
+    800: "#1a202c",
+    900: "#171923",
+  },
+  red: {
+    50: "#fff5f5",
+    100: "#fed7d7",
+    200: "#feb2b2",
+    300: "#fc8181",
+    400: "#f56565",
+    500: "#e53e3e",
+    600: "#c53030",
+    700: "#9b2c2c",
+    800: "#822727",
+    900: "#63171b",
+  },
+  orange: {
+    50: "#fffaf0",
+    100: "#feebc8",
+    200: "#fbd38d",
+    300: "#f6ad55",
+    400: "#ed8936",
+    500: "#dd6b20",
+    600: "#c05621",
+    700: "#9c4221",
+    800: "#7b341e",
+    900: "#652b19",
+  },
+  yellow: {
+    50: "#fffff0",
+    100: "#fefcbf",
+    200: "#faf089",
+    300: "#f6e05e",
+    400: "#ecc94b",
+    500: "#d69e2e",
+    600: "#b7791f",
+    700: "#975a16",
+    800: "#744210",
+    900: "#5f370e",
+  },
+  green: {
+    50: "#f0fff4",
+    100: "#c6f6d5",
+    200: "#9ae6b4",
+    300: "#68d391",
+    400: "#48bb78",
+    500: "#38a169",
+    600: "#2f855a",
+    700: "#276749",
+    800: "#22543d",
+    900: "#1c4532",
+  },
+  teal: {
+    50: "#e6fffa",
+    100: "#b2f5ea",
+    200: "#81e6d9",
+    300: "#4fd1c5",
+    400: "#38b2ac",
+    500: "#319795",
+    600: "#2c7a7b",
+    700: "#285e61",
+    800: "#234e52",
+    900: "#1d4044",
+  },
+  blue: {
+    50: "#ebf8ff",
+    100: "#bee3f8",
+    200: "#90cdf4",
+    300: "#63b3ed",
+    400: "#4299e1",
+    500: "#3182ce",
+    600: "#2b6cb0",
+    700: "#2c5282",
+    800: "#2a4365",
+    900: "#1a365d",
+  },
+  cyan: {
+    50: "#edfdfd",
+    100: "#c4f1f9",
+    200: "#9decf9",
+    300: "#76e4f7",
+    400: "#0bc5ea",
+    500: "#00b5d8",
+    600: "#00a3c4",
+    700: "#0987a0",
+    800: "#086f83",
+    900: "#065666",
+  },
+  purple: {
+    50: "#faf5ff",
+    100: "#e9d8fd",
+    200: "#d6bcfa",
+    300: "#b794f4",
+    400: "#9f7aea",
+    500: "#805ad5",
+    600: "#6b46c1",
+    700: "#553c9a",
+    800: "#44337a",
+    900: "#322659",
+  },
+  pink: {
+    50: "#fff5f7",
+    100: "#fed7e2",
+    200: "#fbb6ce",
+    300: "#f687b3",
+    400: "#ed64a6",
+    500: "#d53f8c",
+    600: "#b83280",
+    700: "#97266d",
+    800: "#702459",
+    900: "#521b41",
+  },
+  background: {
+    50: "#ffffff",
+    100: "#fefefe",
+    200: "#fdfdfd",
+    300: "#fcfcfc",
+    400: "#fcfcfc",
+    500: "#fbfbfb",
+    600: "#e4e4e4",
+    700: "#b2b2b2",
+    800: "#8a8a8a",
+    900: "#696969",
+  },
+  backgroundColor: {
+    main: "#f8f9fa", // Light greyish white
+    secondary: "#f1f1f1", // Very light grey
+    tertiary: "#ececec", // Soft grey
+    quaternary: "#e2e6ea", // Pale blueish-grey
+    light: "#fafafa", // Almost pure white
+    medium: "#eaeaea", // Medium light grey
+    accent: "#e5e5e5", // A slightly deeper grey
+    subtle: "#f5f6f7", // Slightly off-white with a cooler tone
+    muted: "#dfe3e6", // Light muted blue-grey
+    neutral: "#ebedef", // Neutral grey with a balanced tone
+  },
+  text: {
+    50: "#eeeff0",
+    100: "#cacccf",
+    200: "#b1b3b8",
+    300: "#8d9097",
+    400: "#777b83",
+    500: "#555a64",
+    600: "#4d525b",
+    700: "#3c4047",
+    800: "#2f3237",
+    900: "#24262a",
+  },
+  header: {
+    50: "#ecedec",
+    100: "#c5c6ca",
+    200: "#a9abb0",
+    300: "#81848c",
+    400: "#696b75",
+    500: "#434853",
+    600: "#3d424c",
+    700: "#30333b",
+    800: "#25282e",
+    900: "#1c1e23",
+  },
+  placeholder: {
+    50: "#f1f1f2",
+    100: "#d3d5d8",
+    200: "#bec0c5",
+    300: "#a0a3aa",
+    400: "#8d9199",
+    500: "#717680",
+    600: "#676b74",
+    700: "#50545b",
+    800: "#3e4146",
+    900: "#2f3236",
+  },
+  boxShadow: {
+    primary: "#9A52E247",
+    error: "#F2463A47",
+    default: "",
+  },
+  sidebar: {
+    background: {
+      50: "#f1f1f2",
+      100: "#d3d5d8",
+      200: "#bec0c5",
+      300: "#a0a3aa",
+      400: "#8d9199",
+      500: "#161B32",
+      600: "#676b74",
+      700: "#50545b",
+      800: "#3e4146",
+      900: "#2f3236",
+    }
+  },
+  boxborder: {
+    50: "#fbfbfb",
+    100: "#f2f3f4",
+    200: "#ecedee",
+    300: "#e4e5e7",
+    400: "#dee0e2",
+    500: "#d6d8db",
+    600: "#c3c5c7",
+    700: "#98999b",
+    800: "#767778",
+    900: "#5a5b5c",
+  },
+  border: {
+    50: "#fdfdfd",
+    100: "#f8f8f8",
+    200: "#f4f4f4",
+    300: "#f0f0f0",
+    400: "#ededed",
+    500: "#e8e8e8",
+    600: "#d3d3d3",
+    700: "#a5a5a5",
+    800: "#808080",
+    900: "#616161",
+  },
+  table: {
+    hover: {
+      50: "#fefefe",
+      100: "#fcfcfc",
+      200: "#fbfbfb",
+      300: "#f9f9f9",
+      400: "#f8f8f8",
+      500: "#f6f6f6",
+      600: "#e0e0e0",
+      700: "#afafaf",
+      800: "#878787",
+      900: "#676767",
+    }
+  },
+  disabled: {
+    50: "#fcfcfc",
+    100: "#f7f7f7",
+    200: "#f3f3f3",
+    300: "#ededed",
+    400: "#e9e9e9",
+    500: "#e4e4e4",
+    600: "#cfcfcf",
+    700: "#a2a2a2",
+    800: "#7d7d7d",
+    900: "#606060",
+  }
+};
+
+export default palette;

package/src/Theme/Skyline/theme.ts

@@ -0,0 +1,17 @@
+import { extendTheme } from "@chakra-ui/react";
+import palette from "./palette";
+import { CustomThemeProps } from "../themeProps";
+import common from "../common";
+import fonts from "../fonts";
+import { componentStyles } from "../componentStyles";
+
+const skyline: CustomThemeProps = {
+  colors: palette,
+  ...fonts,
+  ...common,
+};
+
+export default extendTheme({
+  ...skyline,
+  components: componentStyles,
+});

package/{dist/Theme/common.js → src/Theme/common.ts}

@@ -1,21 +1,6 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var space_1 = __importDefault(require("./space"));
-var common = {
+import space from "./space";
+
+const common = {
     lineHeights: {
         normal: "normal",
         none: 1,
@@ -41,13 +26,35 @@ var common = {
         wider: "0.05em",
         widest: "0.1em",
     },
-    space: space_1.default,
-    sizes: __assign(__assign({}, space_1.default), { full: "100%", screenW: "100vw", screenH: "100vh", max: 'max-content', min: 'min-content', '3xs': '14rem', '2xs': '16rem', xs: '20rem', sm: '24rem', md: '28rem', lg: '32rem', xl: '36rem', '2xl': '42rem', '3xl': '48rem', '4xl': '56rem', '5xl': '64rem', '6xl': '72rem', '7xl': '80rem', '8xl': '90rem', container: {
+    space: space,
+    sizes: {
+        ...space,
+        full: "100%",
+        screenW: "100vw",
+        screenH: "100vh",
+        max: 'max-content',
+        min: 'min-content',
+        '3xs': '14rem',
+        '2xs': '16rem',
+        xs: '20rem',
+        sm: '24rem',
+        md: '28rem',
+        lg: '32rem',
+        xl: '36rem',
+        '2xl': '42rem',
+        '3xl': '48rem',
+        '4xl': '56rem',
+        '5xl': '64rem',
+        '6xl': '72rem',
+        '7xl': '80rem',
+        '8xl': '90rem',
+        container: {
             sm: '640px',
             md: '768px',
             lg: '1024px',
             xl: '1280px',
-        } }),
+        },
+    },
     breakpoints: {
         sm: "30em",
         md: "48em",
@@ -98,4 +105,5 @@ var common = {
         cssVarPrefix: 'ck',
     }
 };
-exports.default = common;
+
+export default common;

package/src/Theme/componentStyles.ts

@@ -0,0 +1,13 @@
+import { Button } from "../Components/Button/Button.styles";
+import { Checkbox } from "../Components/Checkbox/Checkbox.styles";
+import { Input } from "../Components/Input/TextInput.styles";
+import { Select } from "../Components/Select/Select.styles";
+import { Tag } from "../Components/Tag/Tag.styles";
+
+export const componentStyles = {
+  Checkbox,
+  Input,
+  Button,
+  Select,
+  Tag,
+};

package/src/Theme/fonts.ts

@@ -0,0 +1,41 @@
+// Supports weights 100-900
+// import "@fontsource-variable/inter";
+
+const fonts = {
+  fonts: {
+    body: "Inter Variable, sans-serif",
+    heading: "Inter Variable, sans-serif",
+    mono: "Inter Variable, sans-serif",
+    // body: "Ubuntu Sans, serif",
+    // heading: "Ubuntu Sans, serif",
+    // mono: "Ubuntu Sans, monospace",
+  },
+  fontSizes: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "3.75rem",
+    "7xl": "4.5rem",
+    "8xl": "6rem",
+    "9xl": "8rem",
+  },
+  fontWeights: {
+    hairline: 100,
+    thin: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
+  },
+};
+
+export default fonts;

package/{dist/Theme/index.d.ts → src/Theme/index.ts}

@@ -2,10 +2,12 @@ import lavender from "./Default/theme";
 import meadow from "./Meadow/theme";
 import radiant from "./Radiant/theme";
 import skyline from "./Skyline/theme";
+
 export { skyline, meadow, radiant, lavender };
-export declare const ThemesList: {
-    skyline: Record<string, any>;
-    meadow: Record<string, any>;
-    radiant: Record<string, any>;
-    lavender: Record<string, any>;
-};
+
+export const ThemesList = {
+    skyline: skyline,
+    meadow: meadow,
+    radiant: radiant,
+    lavender: lavender,
+}

package/src/Theme/space.ts

@@ -0,0 +1,34 @@
+const space = {
+    px: "1px",
+    0: "0",
+    1: "0.25rem", // 4px
+    2: "0.5rem",  // 8px
+    3: "0.75rem", // 12px
+    4: "1rem",    // 16px
+    5: "1.25rem", // 20px
+    6: "1.5rem",  // 24px
+    7: "1.75rem", // 28px
+    8: "2rem",    // 32px
+    9: "2.25rem", // 36px
+    10: "2.5rem", // 40px
+    12: "3rem",   // 48px
+    14: "3.5rem", // 56px
+    16: "4rem",   // 64px
+    20: "5rem",   // 80px
+    24: "6rem",   // 96px
+    28: "7rem",   // 112px
+    32: "8rem",   // 128px
+    36: "9rem",   // 144px
+    40: "10rem",  // 160px
+    44: "11rem",  // 176px
+    48: "12rem",  // 192px
+    52: "13rem",  // 208px
+    56: "14rem",  // 224px
+    60: "15rem",  // 240px
+    64: "16rem",  // 256px
+    72: "18rem",  // 288px
+    80: "20rem",  // 320px
+    96: "24rem",  // 384px
+};
+
+export default space;

package/src/Theme/theme.ts

@@ -0,0 +1,9 @@
+// theme/theme.ts
+export type ThemeName = 'skyline' | 'midnight' | 'sunset' | 'lavender';
+
+export const themes: Record<ThemeName, string> = {
+    skyline: 'skyline',
+    midnight: 'midnight',
+    sunset: 'sunset',
+    lavender: 'lavender',
+};