@elicecontents/content-ui 0.0.0

package/es/theme/_base.d.ts

@@ -0,0 +1,2 @@
+import type { PaletteOptions } from '@mui/material';
+export declare const basePalette: PaletteOptions;

package/es/theme/_base.js

@@ -0,0 +1,18 @@
+import { gray } from '../tokens/colors/gray.js';
+
+var basePalette = {
+  grey: {
+    50: gray[50],
+    100: gray[100],
+    200: gray[200],
+    300: gray[300],
+    400: gray[400],
+    500: gray[500],
+    600: gray[600],
+    700: gray[700],
+    800: gray[800],
+    900: gray[900]
+  }
+};
+
+export { basePalette };

package/es/theme/createAIDTTheme.d.ts

@@ -0,0 +1,25 @@
+import type { PaletteMode, PaletteOptions, Theme } from '@mui/material';
+import type { TypographyFontFamilyType } from '../typography';
+export interface MuiPalette {
+    light: PaletteOptions;
+    dark: PaletteOptions;
+}
+export type AIDTPalettePublisher = 'elice' | 'visang' | 'miraeN';
+export type AIDTPaletteSubject = 'korean' | 'computerScience' | 'english' | 'socialStudy' | 'math' | 'science';
+export type AIDTPaletteLevel = 'elementary' | 'middle' | 'high';
+export interface SurfaceColor {
+    border: string;
+}
+export interface CreateAIDTThemeProps {
+    paletteMode?: PaletteMode;
+    palettePublisher?: AIDTPalettePublisher;
+    paletteSubject?: AIDTPaletteSubject;
+    paletteLevel?: AIDTPaletteLevel;
+    typographyFontFamily: TypographyFontFamilyType;
+}
+export type CreateAIDTTheme = (props?: CreateAIDTThemeProps) => Theme;
+/**
+ * Create AIDT Theme according to PaletteName, pallettPublisher, pallettSubject, pallettLevel
+ **/
+declare const createAIDTTheme: ({ paletteMode, palettePublisher, paletteSubject, paletteLevel, typographyFontFamily, }: CreateAIDTThemeProps) => Theme;
+export { createAIDTTheme };

package/es/theme/createAIDTTheme.js

@@ -0,0 +1,47 @@
+import { createTheme } from '@mui/material';
+import { createAIDTTypography } from '../typography/typography.js';
+import { basePalette } from './_base.js';
+import { getThemeColors } from './AIDTTheme.js';
+import { AIDTBreakpoints } from '../breakpoints/breakpoints.js';
+import { common } from '../tokens/colors/common.js';
+
+/**
+ * Create AIDT Theme according to PaletteName, pallettPublisher, pallettSubject, pallettLevel
+ **/
+var createAIDTTheme = function createAIDTTheme(_ref) {
+  var _ref$paletteMode = _ref.paletteMode,
+    paletteMode = _ref$paletteMode === void 0 ? 'light' : _ref$paletteMode,
+    _ref$palettePublisher = _ref.palettePublisher,
+    palettePublisher = _ref$palettePublisher === void 0 ? 'elice' : _ref$palettePublisher,
+    _ref$paletteSubject = _ref.paletteSubject,
+    paletteSubject = _ref$paletteSubject === void 0 ? 'korean' : _ref$paletteSubject,
+    _ref$paletteLevel = _ref.paletteLevel,
+    paletteLevel = _ref$paletteLevel === void 0 ? 'elementary' : _ref$paletteLevel,
+    _ref$typographyFontFa = _ref.typographyFontFamily,
+    typographyFontFamily = _ref$typographyFontFa === void 0 ? 'pretendard' : _ref$typographyFontFa;
+  var themeColors = getThemeColors(palettePublisher, paletteSubject, paletteLevel);
+  return createTheme(Object.assign(Object.assign({}, basePalette), {
+    palette: {
+      mode: paletteMode,
+      primary: {
+        main: themeColors.primary,
+        dark: themeColors.black,
+        light: themeColors.light
+      },
+      secondary: {
+        main: themeColors.secondary
+      },
+      background: {
+        "default": themeColors.background
+      },
+      common: {
+        white: common.white,
+        black: common.black
+      }
+    },
+    breakpoints: AIDTBreakpoints,
+    typography: createAIDTTypography(typographyFontFamily)
+  }));
+};
+
+export { createAIDTTheme };

package/es/theme/index.d.ts

@@ -0,0 +1 @@
+export * from './createAIDTTheme';

package/es/theme/index.js

@@ -0,0 +1 @@
+export { createAIDTTheme } from './createAIDTTheme.js';

package/es/tokens/breakpoints/breakpoints.d.ts

@@ -0,0 +1,10 @@
+export declare const breakpoints: Readonly<{
+    xs: 0;
+    sm: 512;
+    md: 768;
+    lg: 1024;
+    xl: 1280;
+    tablet: 480;
+    notebook: 640;
+    desktop: 800;
+}>;

package/es/tokens/breakpoints/breakpoints.js

@@ -0,0 +1,12 @@
+var breakpoints = Object.freeze({
+  xs: 0,
+  sm: 512,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  tablet: 480,
+  notebook: 640,
+  desktop: 800
+});
+
+export { breakpoints };

package/es/tokens/breakpoints/index.d.ts

@@ -0,0 +1 @@
+export * from './breakpoints';

package/es/tokens/breakpoints/index.js

@@ -0,0 +1 @@
+export { breakpoints } from './breakpoints.js';

package/es/tokens/colors/_typing.d.ts

@@ -0,0 +1,7 @@
+import type { Color as MuiColor } from '@mui/material';
+type AccentColorName = 'A100' | 'A200' | 'A400' | 'A700';
+export type AIDTColor = Omit<MuiColor, AccentColorName> & {
+    950: string;
+    0: string;
+};
+export {};

package/es/tokens/colors/bluepurple.d.ts

@@ -0,0 +1,2 @@
+import type { AIDTColor } from './_typing';
+export declare const bluepurple: AIDTColor;

package/es/tokens/colors/bluepurple.js

@@ -0,0 +1,16 @@
+var bluepurple = Object.freeze({
+  50: '#f4f6ff',
+  100: '#dfe1f0',
+  200: '#bec4e1',
+  300: '#9ea6d1',
+  400: '#7d89c2',
+  500: '#5d6bb3',
+  600: '#485ead',
+  700: '#3451A7',
+  800: '#1F44A1',
+  900: '#0A379B',
+  950: '#072567',
+  0: '#031234' // korean high key
+});
+
+export { bluepurple };

package/es/tokens/colors/bluesky.d.ts

@@ -0,0 +1,2 @@
+import type { AIDTColor } from './_typing';
+export declare const bluesky: AIDTColor;

package/es/tokens/colors/bluesky.js

@@ -0,0 +1,16 @@
+var bluesky = Object.freeze({
+  50: '#',
+  100: '#',
+  200: '#',
+  300: '#',
+  400: '#',
+  500: '#9BCAFF',
+  600: '#',
+  700: '#',
+  800: '#',
+  900: '#',
+  950: '#',
+  0: '#'
+});
+
+export { bluesky };

package/es/tokens/colors/common.d.ts

@@ -0,0 +1,9 @@
+import type { CommonColors } from '@mui/material';
+/**
+ * Common color palette for Elice Design System.
+ *
+ * - `white`: `#ffffff`,
+ * - `black`: `#000000`,
+ * 추가 타입확장 고민이 필요
+ */
+export declare const common: CommonColors;

package/es/tokens/colors/common.js

@@ -0,0 +1,13 @@
+/**
+ * Common color palette for Elice Design System.
+ *
+ * - `white`: `#ffffff`,
+ * - `black`: `#000000`,
+ * 추가 타입확장 고민이 필요
+ */
+var common = Object.freeze({
+  white: '#ffffff',
+  black: '#000000'
+});
+
+export { common };

package/es/tokens/colors/gray.d.ts

@@ -0,0 +1,2 @@
+import type { AIDTColor } from './_typing';
+export declare const gray: AIDTColor;

package/es/tokens/colors/gray.js

@@ -0,0 +1,16 @@
+var gray = Object.freeze({
+  50: '#FAFAFD',
+  100: '#F3F4FA',
+  200: '#F1F1F6',
+  300: '#D8D8E2',
+  400: '#9B9BA9',
+  500: '#77778A',
+  600: '#616177',
+  700: '#48485C',
+  800: '#2E2E3C',
+  900: '#1E1E1E',
+  950: '#B2B2B2',
+  0: '#'
+});
+
+export { gray };

package/es/tokens/colors/green.d.ts

@@ -0,0 +1,2 @@
+import type { AIDTColor } from './_typing';
+export declare const green: AIDTColor;

package/es/tokens/colors/green.js

@@ -0,0 +1,16 @@
+var green = Object.freeze({
+  50: '#e8f5e9',
+  100: '#E0F0DE',
+  200: '#C0E0BD',
+  300: '#A1D19C',
+  400: '#81C17B',
+  500: '#62B25A',
+  600: '#539D4C',
+  700: '#45893E',
+  800: '#367431',
+  900: '#285F23',
+  950: '#1B3F17',
+  0: '#0D200C' // english high key
+});
+
+export { green };

package/es/tokens/colors/index.d.ts

@@ -0,0 +1,10 @@
+export { mint } from './mint';
+export { bluepurple } from './bluepurple';
+export { gray } from './gray';
+export { green } from './green';
+export { orange } from './orange';
+export { pink } from './pink';
+export { purple } from './purple';
+export { yellow } from './yellow';
+export { bluesky } from './bluesky';
+export { common } from './common';

package/es/tokens/colors/index.js

@@ -0,0 +1,10 @@
+export { mint } from './mint.js';
+export { bluepurple } from './bluepurple.js';
+export { gray } from './gray.js';
+export { green } from './green.js';
+export { orange } from './orange.js';
+export { pink } from './pink.js';
+export { purple } from './purple.js';
+export { yellow } from './yellow.js';
+export { bluesky } from './bluesky.js';
+export { common } from './common.js';

package/es/tokens/colors/mint.d.ts

@@ -0,0 +1,2 @@
+import type { AIDTColor } from './_typing';
+export declare const mint: AIDTColor;

package/es/tokens/colors/mint.js

@@ -0,0 +1,16 @@
+var mint = Object.freeze({
+  50: '#e0f7fa',
+  100: '#DAF0F2',
+  200: '#B5E0E5',
+  300: '#91D1D9',
+  400: '#6CC1CC',
+  500: '#47B2BF',
+  600: '#359AA8',
+  700: '#248192',
+  800: '#12697B',
+  900: '#005064',
+  950: '#003543',
+  0: '#001B21' // science high key
+});
+
+export { mint };

package/es/tokens/colors/orange.d.ts

@@ -0,0 +1,2 @@
+import type { AIDTColor } from './_typing';
+export declare const orange: AIDTColor;

package/es/tokens/colors/orange.js

@@ -0,0 +1,16 @@
+var orange = Object.freeze({
+  50: '#fff3e0',
+  100: '#FAE5DC',
+  200: '#F5CAB9',
+  300: '#EFB096',
+  400: '#EA9573',
+  500: '#E57B50',
+  600: '#D06C47',
+  700: '#BA5D3D',
+  800: '#A54D34',
+  900: '#5F291D',
+  950: '#1B3F17',
+  0: '#30150E' // social high key
+});
+
+export { orange };

package/es/tokens/colors/pink.d.ts

@@ -0,0 +1,2 @@
+import type { AIDTColor } from './_typing';
+export declare const pink: AIDTColor;

package/es/tokens/colors/pink.js

@@ -0,0 +1,16 @@
+var pink = Object.freeze({
+  50: '#fce4ec',
+  100: '#F7E1ED',
+  200: '#EEC4DB',
+  300: '#E6A6C8',
+  400: '#DD89B6',
+  500: '#D56BA4',
+  600: '#BF5392',
+  700: '#A93B7F',
+  800: '#93226C',
+  900: '#7D0A5A',
+  950: '#53073C',
+  0: '#2A031E' // math high key
+});
+
+export { pink };

package/es/tokens/colors/purple.d.ts

@@ -0,0 +1,2 @@
+import type { AIDTColor } from './_typing';
+export declare const purple: AIDTColor;

package/es/tokens/colors/purple.js

@@ -0,0 +1,16 @@
+var purple = Object.freeze({
+  50: '#F1EEFA',
+  100: '#E2DDEF',
+  200: '#C5BBDF',
+  300: '#A899CF',
+  400: '#8B77BF',
+  500: '#6E55AF',
+  600: '#6147AA',
+  700: '#553AA5',
+  800: '#482CA0',
+  900: '#3C1E9B',
+  950: '#281467',
+  0: '#140A34' // cs high key
+});
+
+export { purple };

package/es/tokens/colors/yellow.d.ts

@@ -0,0 +1,2 @@
+import type { AIDTColor } from './_typing';
+export declare const yellow: AIDTColor;

package/es/tokens/colors/yellow.js

@@ -0,0 +1,16 @@
+var yellow = Object.freeze({
+  50: '#',
+  100: '#',
+  200: '#',
+  300: '#',
+  400: '#',
+  500: '#FBEB97',
+  600: '#',
+  700: '#',
+  800: '#',
+  900: '#',
+  950: '#',
+  0: '#'
+});
+
+export { yellow };

package/es/tokens/index.d.ts

@@ -0,0 +1,4 @@
+import * as colors from './colors';
+export { colors };
+export * from './colors';
+export * from './breakpoints';

package/es/tokens/index.js

@@ -0,0 +1,13 @@
+import * as index from './colors/index.js';
+export { index as colors };
+export { mint } from './colors/mint.js';
+export { bluepurple } from './colors/bluepurple.js';
+export { gray } from './colors/gray.js';
+export { green } from './colors/green.js';
+export { orange } from './colors/orange.js';
+export { pink } from './colors/pink.js';
+export { purple } from './colors/purple.js';
+export { yellow } from './colors/yellow.js';
+export { bluesky } from './colors/bluesky.js';
+export { common } from './colors/common.js';
+export { breakpoints } from './breakpoints/breakpoints.js';

package/es/typography/index.d.ts

@@ -0,0 +1,2 @@
+export * from './typography';
+export * from './typographyFontFamily';

package/es/typography/index.js

@@ -0,0 +1,2 @@
+export { createAIDTTypography } from './typography.js';
+export { TYPOGRAPHY_FONT_FAMILY_NAMES } from './typographyFontFamily.js';

package/es/typography/typography.d.ts

@@ -0,0 +1,165 @@
+import { TYPOGRAPHY_FONT_FAMILY_NAMES } from './typographyFontFamily';
+export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_FONT_FAMILY_NAMES) => {
+    fontFamily: "Pretendard, Arial, sans-serif" | "EliceDXNeolli";
+    '@font-face': {
+        fontFamily: string;
+        fontStyle: string;
+        fontWeight: number;
+        fontDisplay: string;
+        src: string;
+    }[];
+    h1: {
+        fontSize: string;
+        "@media (max-width:1279px)": {
+            fontSize: string;
+        };
+        "@media (max-height:800px)": {
+            fontSize: string;
+        };
+        "@media (max-width:1023px)": {
+            fontSize: string;
+        };
+        fontWeight: number;
+        lineHeight: number;
+    };
+    h2: {
+        fontSize: string;
+        "@media (max-width:1279px)": {
+            fontSize: string;
+        };
+        "@media (max-height:800px)": {
+            fontSize: string;
+        };
+        "@media (max-width:1023px)": {
+            fontSize: string;
+        };
+        fontWeight: number;
+        lineHeight: number;
+    };
+    h3: {
+        fontSize: string;
+        "@media (max-width:1279px)": {
+            fontSize: string;
+        };
+        "@media (max-height:800px)": {
+            fontSize: string;
+        };
+        "@media (max-width:1023px)": {
+            fontSize: string;
+        };
+        fontWeight: number;
+        lineHeight: number;
+    };
+    h4: {
+        fontSize: string;
+        "@media (max-width:1279px)": {
+            fontSize: string;
+        };
+        "@media (max-height:800px)": {
+            fontSize: string;
+        };
+        "@media (max-width:1023px)": {
+            fontSize: string;
+        };
+        fontWeight: number;
+        lineHeight: number;
+    };
+    h5: {
+        fontSize: string;
+        "@media (max-width:1279px)": {
+            fontSize: string;
+        };
+        "@media (max-height:800px)": {
+            fontSize: string;
+        };
+        "@media (max-width:1023px)": {
+            fontSize: string;
+        };
+        fontWeight: number;
+        lineHeight: number;
+    };
+    h6: {
+        fontSize: string;
+        "@media (max-width:1279px)": {
+            fontSize: string;
+        };
+        "@media (max-height:800px)": {
+            fontSize: string;
+        };
+        "@media (max-width:1023px)": {
+            fontSize: string;
+        };
+        fontWeight: number;
+        lineHeight: number;
+    };
+    subtitle1: {
+        fontSize: string;
+        "@media (max-width:1279px)": {
+            fontSize: string;
+        };
+        "@media (max-height:800px)": {
+            fontSize: string;
+        };
+        "@media (max-width:1023px)": {
+            fontSize: string;
+        };
+        fontWeight: number;
+        lineHeight: number;
+    };
+    subtitle2: {
+        fontSize: string;
+        "@media (max-width:1279px)": {
+            fontSize: string;
+        };
+        "@media (max-height:800px)": {
+            fontSize: string;
+        };
+        "@media (max-width:1023px)": {
+            fontSize: string;
+        };
+        fontWeight: number;
+        lineHeight: number;
+    };
+    body1: {
+        fontSize: string;
+        "@media (max-width:1279px)": {
+            fontSize: string;
+        };
+        "@media (max-height:800px)": {
+            fontSize: string;
+        };
+        "@media (max-width:1023px)": {
+            fontSize: string;
+        };
+        fontWeight: number;
+        lineHeight: number;
+    };
+    body2: {
+        fontSize: string;
+        "@media (max-width:1279px)": {
+            fontSize: string;
+        };
+        "@media (max-height:800px)": {
+            fontSize: string;
+        };
+        "@media (max-width:1023px)": {
+            fontSize: string;
+        };
+        fontWeight: number;
+        lineHeight: number;
+    };
+    caption: {
+        fontSize: string;
+        "@media (max-width:1279px)": {
+            fontSize: string;
+        };
+        "@media (max-height:800px)": {
+            fontSize: string;
+        };
+        "@media (max-width:1023px)": {
+            fontSize: string;
+        };
+        fontWeight: number;
+        lineHeight: number;
+    };
+};