@lawkit/ui 0.1.0

package/dist/tokens/src/contracts/theme-contract.css.d.ts

@@ -0,0 +1,65 @@
+export declare const themeVars: {
+    color: {
+        accentPrimary: `var(--${string})`;
+        accentPrimaryHover: `var(--${string})`;
+        accentPrimaryActive: `var(--${string})`;
+        accentSecondary: `var(--${string})`;
+        accentSecondaryHover: `var(--${string})`;
+        accentSecondaryActive: `var(--${string})`;
+        accentSuccess: `var(--${string})`;
+        accentSuccessHover: `var(--${string})`;
+        accentSuccessActive: `var(--${string})`;
+        accentDanger: `var(--${string})`;
+        accentDangerHover: `var(--${string})`;
+        accentDangerActive: `var(--${string})`;
+        accentWarning: `var(--${string})`;
+        accentWarningHover: `var(--${string})`;
+        accentWarningActive: `var(--${string})`;
+        accentInfo: `var(--${string})`;
+        accentInfoHover: `var(--${string})`;
+        accentInfoActive: `var(--${string})`;
+        accentDark: `var(--${string})`;
+        accentDarkHover: `var(--${string})`;
+        accentDarkActive: `var(--${string})`;
+        neutralBackground: `var(--${string})`;
+        neutralSurface: `var(--${string})`;
+        neutralSurfaceAlt: `var(--${string})`;
+        neutralSurfaceRaised: `var(--${string})`;
+        neutralBorder: `var(--${string})`;
+        neutralBorderStrong: `var(--${string})`;
+        neutralDisabled: `var(--${string})`;
+        textPrimary: `var(--${string})`;
+        textHeading: `var(--${string})`;
+        textSecondary: `var(--${string})`;
+        textMuted: `var(--${string})`;
+        textDisabled: `var(--${string})`;
+        textInverse: `var(--${string})`;
+        focusRing: `var(--${string})`;
+    };
+    spacing: {
+        x1: `var(--${string})`;
+        x2: `var(--${string})`;
+        x3: `var(--${string})`;
+        x4: `var(--${string})`;
+        x5: `var(--${string})`;
+        x6: `var(--${string})`;
+    };
+    radius: {
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+    };
+    font: {
+        family: `var(--${string})`;
+        sizeSm: `var(--${string})`;
+        sizeMd: `var(--${string})`;
+        sizeLg: `var(--${string})`;
+        weightRegular: `var(--${string})`;
+        weightMedium: `var(--${string})`;
+        weightBold: `var(--${string})`;
+    };
+    shadow: {
+        focus: `var(--${string})`;
+        raised: `var(--${string})`;
+    };
+};

package/dist/tokens/src/foundation/color-palette.d.ts

@@ -0,0 +1,150 @@
+export type LdsColorTokens = {
+    accentPrimary: string;
+    accentPrimaryHover: string;
+    accentPrimaryActive: string;
+    accentSecondary: string;
+    accentSecondaryHover: string;
+    accentSecondaryActive: string;
+    accentSuccess: string;
+    accentSuccessHover: string;
+    accentSuccessActive: string;
+    accentDanger: string;
+    accentDangerHover: string;
+    accentDangerActive: string;
+    accentWarning: string;
+    accentWarningHover: string;
+    accentWarningActive: string;
+    accentInfo: string;
+    accentInfoHover: string;
+    accentInfoActive: string;
+    accentDark: string;
+    accentDarkHover: string;
+    accentDarkActive: string;
+    neutralBackground: string;
+    neutralSurface: string;
+    neutralSurfaceAlt: string;
+    neutralSurfaceRaised: string;
+    neutralBorder: string;
+    neutralBorderStrong: string;
+    neutralDisabled: string;
+    textPrimary: string;
+    textHeading: string;
+    textSecondary: string;
+    textMuted: string;
+    textDisabled: string;
+    textInverse: string;
+    focusRing: string;
+};
+export declare const scourtPalette: {
+    readonly blue: "#003399";
+    readonly green: "#336633";
+    readonly red: "#660000";
+    readonly yellow: "#cc6600";
+    readonly stamp: "#ff0000";
+};
+export declare const grayPalette: {
+    readonly 0: "#ffffff";
+    readonly 50: "#f2f4f6";
+    readonly 100: "#f1f4f9";
+    readonly 200: "#eeeff2";
+    readonly 300: "#d1d1d1";
+    readonly 400: "#cfd5e1";
+    readonly 500: "#9ea7b8";
+    readonly 600: "#82868b";
+    readonly 700: "#626f86";
+    readonly 800: "#4c5469";
+    readonly 900: "#11152a";
+};
+export declare const bluePalette: {
+    readonly 100: "rgba(33, 81, 236, 0.12)";
+    readonly 200: "rgba(23, 57, 165, 0.12)";
+    readonly 300: "#2151ec";
+    readonly 400: "#2151ec";
+    readonly 500: "#2151ec";
+    readonly 600: "#2151ec";
+    readonly 700: "#1739a5";
+};
+export declare const greenPalette: {
+    readonly 100: "rgba(39, 194, 129, 0.12)";
+    readonly 200: "#28c76f";
+    readonly 300: "#28c76f";
+    readonly 400: "#28c76f";
+    readonly 500: "#1bc47d";
+    readonly 600: "#28c76f";
+    readonly 700: "#006d38";
+};
+export declare const redPalette: {
+    readonly 100: "rgba(234, 59, 59, 0.12)";
+    readonly 200: "#ea5455";
+    readonly 300: "#ea5455";
+    readonly 400: "#ea5455";
+    readonly 500: "#ea5455";
+    readonly 600: "#ea5455";
+    readonly 700: "#b12a30";
+};
+export declare const yellowPalette: {
+    readonly 100: "rgba(240, 175, 35, 0.12)";
+    readonly 200: "#f0af23";
+    readonly 300: "#f0af23";
+    readonly 400: "#f0af23";
+    readonly 500: "#f0af23";
+    readonly 600: "#f0af23";
+    readonly 700: "#7d5800";
+};
+export declare const cyanPalette: {
+    readonly 100: "rgba(0, 207, 232, 0.12)";
+    readonly 200: "#00cfe8";
+    readonly 300: "#00cfe8";
+    readonly 400: "#00cfe8";
+    readonly 500: "#00cfe8";
+    readonly 600: "#00cfe8";
+    readonly 700: "#006876";
+};
+export declare const darkPalette: {
+    readonly 100: "rgba(76, 84, 105, 0.12)";
+    readonly 300: "#4c5469";
+    readonly 400: "#4c5469";
+    readonly 500: "#4c5469";
+    readonly 600: "#4c5469";
+    readonly 700: "#343434";
+};
+export declare const opacityPalette: {
+    readonly scourtBlue: "rgba(0, 51, 153, 0.12)";
+    readonly primary: "rgba(33, 81, 236, 0.12)";
+    readonly secondary: "rgba(130, 134, 139, 0.12)";
+    readonly scourtGreen: "rgba(51, 102, 51, 0.12)";
+    readonly success: "rgba(39, 194, 129, 0.12)";
+    readonly scourtRed: "rgba(102, 0, 0, 0.12)";
+    readonly danger: "rgba(234, 59, 59, 0.12)";
+    readonly orange: "rgba(253, 126, 20, 0.12)";
+    readonly scourtYellow: "rgba(204, 102, 0, 0.12)";
+    readonly warning: "rgba(240, 175, 35, 0.12)";
+    readonly info: "rgba(0, 207, 232, 0.12)";
+    readonly black: "rgba(0, 0, 0, 0.12)";
+    readonly light: "rgba(158, 167, 184, 0.12)";
+    readonly dark: "rgba(76, 84, 105, 0.12)";
+    readonly primaryActive: "rgba(23, 57, 165, 0.12)";
+};
+export declare const bootstrapPalette: {
+    readonly blue: "#0d6efd";
+    readonly purple: "#6f42c1";
+    readonly red: "#dc3545";
+    readonly pink: "#d63384";
+    readonly orange: "#fd7e14";
+    readonly yellow: "#ffc107";
+    readonly green: "#198754";
+    readonly emerald: "#2bdac7";
+    readonly teal: "#20c997";
+    readonly cyan: "#0dcaf0";
+    readonly gray: "#adb5bd";
+};
+export declare const socialPalette: {
+    readonly youtube: "#c4302b";
+    readonly facebook: "#3b5998";
+    readonly github: "#211f1f";
+    readonly google: "#db3236";
+    readonly instagram: "#3f729b";
+    readonly linkedin: "#0e76a8";
+    readonly twitter: "#00acee";
+};
+export declare const defaultColorTokens: LdsColorTokens;

package/dist/tokens/src/foundation/spacing-scale.d.ts

@@ -0,0 +1,17 @@
+export declare const spacingScale: {
+    readonly xs: "4px";
+    readonly s: "8px";
+    readonly m: "12px";
+    readonly l: "16px";
+    readonly xl: "20px";
+    readonly xxl: "24px";
+};
+export type LdsSpacingTokens = {
+    x1: string;
+    x2: string;
+    x3: string;
+    x4: string;
+    x5: string;
+    x6: string;
+};
+export declare const defaultSpacingTokens: LdsSpacingTokens;

package/dist/tokens/src/foundation/typography-scale.d.ts

@@ -0,0 +1,79 @@
+export declare const fontFamilyTokens: {
+    readonly pretendard: "\"Pretendard\", \"Segoe UI\", sans-serif";
+    readonly malgunGothic: "\"Malgun Gothic\", \"MalgunGothic\", sans-serif";
+};
+export declare const fontSizeScale: {
+    readonly 8: "8px";
+    readonly 9: "9px";
+    readonly 10: "10px";
+    readonly 11: "11px";
+    readonly 12: "12px";
+    readonly 13: "13px";
+    readonly 14: "14px";
+    readonly 15: "15px";
+    readonly 16: "16px";
+    readonly 18: "18px";
+    readonly 20: "20px";
+    readonly 21: "21px";
+    readonly 22: "22px";
+    readonly 24: "24px";
+    readonly 25: "25px";
+    readonly 28: "28px";
+    readonly 30: "30px";
+    readonly 49: "49px";
+    readonly 63: "63px";
+    readonly 77: "77px";
+    readonly 84: "84px";
+};
+export declare const lineHeightScale: {
+    readonly 120: "1.2";
+    readonly 121: "1.21";
+    readonly 122: "1.22";
+    readonly 124: "1.24";
+    readonly 127: "1.27";
+    readonly 133: "1.33";
+    readonly 138: "1.38";
+    readonly 139: "1.39";
+    readonly 140: "1.4";
+    readonly 143: "1.43";
+    readonly 150: "1.5";
+    readonly 156: "1.56";
+    readonly 160: "1.6";
+    readonly 162: "1.62";
+    readonly 164: "1.64";
+    readonly 171: "1.71";
+    readonly 175: "1.75";
+    readonly 180: "1.8";
+    readonly 185: "1.85";
+    readonly normal: "normal";
+};
+export declare const letterSpacingScale: {
+    readonly normal: "normal";
+    readonly plus1: "1px";
+    readonly minus180: "-1.8px";
+    readonly minus80: "-0.8px";
+    readonly minus64: "-0.64px";
+    readonly minus60: "-0.6px";
+    readonly minus48: "-0.48px";
+    readonly minus40: "-0.4px";
+    readonly minus30: "-0.3px";
+    readonly minus28: "-0.28px";
+    readonly minus20: "-0.2px";
+    readonly minus15: "-0.15px";
+    readonly minus07: "-0.07px";
+};
+export declare const fontWeightScale: {
+    readonly regular: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+};
+export declare const defaultTypographyTokens: {
+    readonly family: "\"Pretendard\", \"Segoe UI\", sans-serif";
+    readonly sizeSm: "12px";
+    readonly sizeMd: "14px";
+    readonly sizeLg: "16px";
+    readonly weightRegular: "400";
+    readonly weightMedium: "500";
+    readonly weightBold: "700";
+};

package/dist/tokens/src/index.d.ts

@@ -0,0 +1,11 @@
+export type { LdsColorTokens } from './foundation/color-palette';
+export { defaultColorTokens, grayPalette, bluePalette, greenPalette, redPalette, yellowPalette, cyanPalette, darkPalette, opacityPalette, scourtPalette, bootstrapPalette, socialPalette } from './foundation/color-palette';
+export type { LdsSpacingTokens } from './foundation/spacing-scale';
+export { spacingScale, defaultSpacingTokens } from './foundation/spacing-scale';
+export { fontFamilyTokens, fontSizeScale, lineHeightScale, fontWeightScale } from './foundation/typography-scale';
+export { semanticColorRoles } from './semantic/color-roles';
+export { textStyles } from './semantic/text-styles';
+export { themeVars } from './contracts/theme-contract.css';
+export { defaultThemeValues, lightThemeClass } from './themes/light-theme.css';
+export type { LdsThemeInput } from './theme.runtime';
+export { createLdsThemeVars } from './theme.runtime';

package/dist/tokens/src/runtime/create-theme-vars.d.ts

@@ -0,0 +1,9 @@
+import { LdsColorTokens } from '../foundation/color-palette';
+import { LdsSpacingTokens } from '../foundation/spacing-scale';
+export type LdsThemeInput = {
+    color?: Partial<LdsColorTokens>;
+    spacing?: Partial<LdsSpacingTokens>;
+};
+export declare function createLdsThemeVars(input?: LdsThemeInput): {
+    [cssVarName: string]: string;
+};