@elicecontents/content-ui 0.0.0

package/cjs/palettes/miraeN.js

@@ -0,0 +1,154 @@
+'use strict';
+
+var mint = require('../tokens/colors/mint.js');
+var bluepurple = require('../tokens/colors/bluepurple.js');
+var gray = require('../tokens/colors/gray.js');
+var green = require('../tokens/colors/green.js');
+var orange = require('../tokens/colors/orange.js');
+var pink = require('../tokens/colors/pink.js');
+var purple = require('../tokens/colors/purple.js');
+var yellow = require('../tokens/colors/yellow.js');
+var bluesky = require('../tokens/colors/bluesky.js');
+
+var miraeNPalettes = {
+  korean: {
+    elementary: {
+      primary: bluepurple.bluepurple[300],
+      background: bluesky.bluesky[500],
+      secondary: bluepurple.bluepurple[900],
+      black: bluepurple.bluepurple[0],
+      light: bluepurple.bluepurple[50]
+    },
+    middle: {
+      primary: bluepurple.bluepurple[500],
+      background: gray.gray[400],
+      secondary: bluepurple.bluepurple[900],
+      black: bluepurple.bluepurple[0],
+      light: bluepurple.bluepurple[50]
+    },
+    high: {
+      primary: bluepurple.bluepurple[0],
+      background: bluepurple.bluepurple[900],
+      secondary: bluepurple.bluepurple[900],
+      black: bluepurple.bluepurple[0],
+      light: bluepurple.bluepurple[50]
+    }
+  },
+  computerScience: {
+    elementary: {
+      primary: purple.purple[300],
+      background: bluesky.bluesky[500],
+      secondary: purple.purple[900],
+      black: purple.purple[0],
+      light: purple.purple[50]
+    },
+    middle: {
+      primary: purple.purple[500],
+      background: gray.gray[400],
+      secondary: purple.purple[900],
+      black: purple.purple[0],
+      light: purple.purple[50]
+    },
+    high: {
+      primary: bluepurple.bluepurple[0],
+      background: purple.purple[900],
+      secondary: purple.purple[900],
+      black: purple.purple[0],
+      light: purple.purple[50]
+    }
+  },
+  english: {
+    elementary: {
+      primary: green.green[300],
+      background: yellow.yellow[500],
+      secondary: green.green[900],
+      black: green.green[0],
+      light: green.green[50]
+    },
+    middle: {
+      primary: green.green[500],
+      background: gray.gray[400],
+      secondary: green.green[900],
+      black: green.green[0],
+      light: green.green[50]
+    },
+    high: {
+      primary: bluepurple.bluepurple[0],
+      background: green.green[900],
+      secondary: green.green[900],
+      black: green.green[0],
+      light: green.green[50]
+    }
+  },
+  socialStudy: {
+    elementary: {
+      primary: orange.orange[300],
+      background: yellow.yellow[500],
+      secondary: orange.orange[900],
+      black: orange.orange[0],
+      light: orange.orange[50]
+    },
+    middle: {
+      primary: orange.orange[500],
+      background: gray.gray[400],
+      secondary: orange.orange[900],
+      black: orange.orange[0],
+      light: orange.orange[50]
+    },
+    high: {
+      primary: bluepurple.bluepurple[0],
+      background: orange.orange[900],
+      secondary: orange.orange[900],
+      black: orange.orange[0],
+      light: orange.orange[50]
+    }
+  },
+  math: {
+    elementary: {
+      primary: pink.pink[300],
+      background: yellow.yellow[500],
+      secondary: pink.pink[900],
+      black: pink.pink[0],
+      light: pink.pink[50]
+    },
+    middle: {
+      primary: pink.pink[500],
+      background: gray.gray[400],
+      secondary: pink.pink[900],
+      black: pink.pink[0],
+      light: pink.pink[50]
+    },
+    high: {
+      primary: bluepurple.bluepurple[0],
+      background: pink.pink[900],
+      secondary: pink.pink[900],
+      black: pink.pink[0],
+      light: pink.pink[50]
+    }
+  },
+  science: {
+    elementary: {
+      primary: mint.mint[300],
+      background: yellow.yellow[500],
+      secondary: mint.mint[900],
+      black: mint.mint[0],
+      light: mint.mint[50]
+    },
+    middle: {
+      primary: mint.mint[500],
+      background: gray.gray[400],
+      secondary: mint.mint[900],
+      black: mint.mint[0],
+      light: mint.mint[50]
+    },
+    high: {
+      primary: bluepurple.bluepurple[0],
+      background: mint.mint[900],
+      secondary: mint.mint[900],
+      black: mint.mint[0],
+      light: mint.mint[50]
+    }
+  }
+};
+
+exports.miraeNPalettes = miraeNPalettes;

package/cjs/palettes/types.d.ts

@@ -0,0 +1,21 @@
+export interface ThemeColor {
+    primary: string;
+    background: string;
+    secondary: string;
+    black: string;
+    light: string;
+}
+export interface SubjectLevels {
+    elementary: ThemeColor;
+    middle: ThemeColor;
+    high: ThemeColor;
+}
+export interface PublisherSubjects {
+    korean: SubjectLevels;
+    math: SubjectLevels;
+    computerScience: SubjectLevels;
+    english: SubjectLevels;
+    science: SubjectLevels;
+    socialStudy: SubjectLevels;
+}
+export type Publisher = 'elice' | 'visang' | 'miraeN';

package/cjs/palettes/visang.d.ts

@@ -0,0 +1,2 @@
+import type { PublisherSubjects } from './types';
+export declare const visangPalettes: PublisherSubjects;

package/cjs/palettes/visang.js

@@ -0,0 +1,154 @@
+'use strict';
+
+var mint = require('../tokens/colors/mint.js');
+var bluepurple = require('../tokens/colors/bluepurple.js');
+var gray = require('../tokens/colors/gray.js');
+var green = require('../tokens/colors/green.js');
+var orange = require('../tokens/colors/orange.js');
+var pink = require('../tokens/colors/pink.js');
+var purple = require('../tokens/colors/purple.js');
+var yellow = require('../tokens/colors/yellow.js');
+var bluesky = require('../tokens/colors/bluesky.js');
+
+var visangPalettes = {
+  korean: {
+    elementary: {
+      primary: bluepurple.bluepurple[300],
+      background: bluesky.bluesky[500],
+      secondary: bluepurple.bluepurple[900],
+      black: bluepurple.bluepurple[0],
+      light: bluepurple.bluepurple[50]
+    },
+    middle: {
+      primary: bluepurple.bluepurple[500],
+      background: gray.gray[400],
+      secondary: bluepurple.bluepurple[900],
+      black: bluepurple.bluepurple[0],
+      light: bluepurple.bluepurple[50]
+    },
+    high: {
+      primary: bluepurple.bluepurple[0],
+      background: bluepurple.bluepurple[900],
+      secondary: bluepurple.bluepurple[900],
+      black: bluepurple.bluepurple[0],
+      light: bluepurple.bluepurple[50]
+    }
+  },
+  computerScience: {
+    elementary: {
+      primary: purple.purple[300],
+      background: bluesky.bluesky[500],
+      secondary: purple.purple[900],
+      black: purple.purple[0],
+      light: purple.purple[50]
+    },
+    middle: {
+      primary: purple.purple[500],
+      background: gray.gray[400],
+      secondary: purple.purple[900],
+      black: purple.purple[0],
+      light: purple.purple[50]
+    },
+    high: {
+      primary: bluepurple.bluepurple[0],
+      background: purple.purple[900],
+      secondary: purple.purple[900],
+      black: purple.purple[0],
+      light: purple.purple[50]
+    }
+  },
+  english: {
+    elementary: {
+      primary: green.green[300],
+      background: yellow.yellow[500],
+      secondary: green.green[900],
+      black: green.green[0],
+      light: green.green[50]
+    },
+    middle: {
+      primary: green.green[500],
+      background: gray.gray[400],
+      secondary: green.green[900],
+      black: green.green[0],
+      light: green.green[50]
+    },
+    high: {
+      primary: bluepurple.bluepurple[0],
+      background: green.green[900],
+      secondary: green.green[900],
+      black: green.green[0],
+      light: green.green[50]
+    }
+  },
+  socialStudy: {
+    elementary: {
+      primary: orange.orange[300],
+      background: yellow.yellow[500],
+      secondary: orange.orange[900],
+      black: orange.orange[0],
+      light: orange.orange[50]
+    },
+    middle: {
+      primary: orange.orange[500],
+      background: gray.gray[400],
+      secondary: orange.orange[900],
+      black: orange.orange[0],
+      light: orange.orange[50]
+    },
+    high: {
+      primary: bluepurple.bluepurple[0],
+      background: orange.orange[900],
+      secondary: orange.orange[900],
+      black: orange.orange[0],
+      light: orange.orange[50]
+    }
+  },
+  math: {
+    elementary: {
+      primary: pink.pink[300],
+      background: yellow.yellow[500],
+      secondary: pink.pink[900],
+      black: pink.pink[0],
+      light: pink.pink[50]
+    },
+    middle: {
+      primary: pink.pink[500],
+      background: gray.gray[400],
+      secondary: pink.pink[900],
+      black: pink.pink[0],
+      light: pink.pink[50]
+    },
+    high: {
+      primary: bluepurple.bluepurple[0],
+      background: pink.pink[900],
+      secondary: pink.pink[900],
+      black: pink.pink[0],
+      light: pink.pink[50]
+    }
+  },
+  science: {
+    elementary: {
+      primary: mint.mint[300],
+      background: yellow.yellow[500],
+      secondary: mint.mint[900],
+      black: mint.mint[0],
+      light: mint.mint[50]
+    },
+    middle: {
+      primary: mint.mint[500],
+      background: gray.gray[400],
+      secondary: mint.mint[900],
+      black: mint.mint[0],
+      light: mint.mint[50]
+    },
+    high: {
+      primary: bluepurple.bluepurple[0],
+      background: mint.mint[900],
+      secondary: mint.mint[900],
+      black: mint.mint[0],
+      light: mint.mint[50]
+    }
+  }
+};
+
+exports.visangPalettes = visangPalettes;

package/cjs/theme/AIDTTheme.d.ts

@@ -0,0 +1,3 @@
+import type { Publisher, PublisherSubjects, SubjectLevels, ThemeColor } from '../palettes/types';
+declare const getThemeColors: (publisher: Publisher, subject: keyof PublisherSubjects, level: keyof SubjectLevels) => ThemeColor;
+export { getThemeColors };

package/cjs/theme/AIDTTheme.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var eliceDefault = require('../palettes/eliceDefault.js');
+var miraeN = require('../palettes/miraeN.js');
+var visang = require('../palettes/visang.js');
+
+var getThemeColors = function getThemeColors(publisher, subject, level) {
+  var _a;
+  var AIDTThemeColors;
+  switch (publisher) {
+    case 'visang':
+      AIDTThemeColors = visang.visangPalettes;
+      break;
+    case 'miraeN':
+      AIDTThemeColors = miraeN.miraeNPalettes;
+      break;
+    default:
+      AIDTThemeColors = eliceDefault.elicePalettes;
+  }
+  return ((_a = AIDTThemeColors[subject]) === null || _a === void 0 ? void 0 : _a[level]) || {
+    primary: '#000000',
+    background: '#FFFFFF',
+    secondary: '#555555',
+    black: '#132234',
+    light: '#E2E2E2'
+  };
+};
+
+exports.getThemeColors = getThemeColors;

package/cjs/theme/_base.d.ts

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

package/cjs/theme/_base.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var gray = require('../tokens/colors/gray.js');
+
+var basePalette = {
+  grey: {
+    50: gray.gray[50],
+    100: gray.gray[100],
+    200: gray.gray[200],
+    300: gray.gray[300],
+    400: gray.gray[400],
+    500: gray.gray[500],
+    600: gray.gray[600],
+    700: gray.gray[700],
+    800: gray.gray[800],
+    900: gray.gray[900]
+  }
+};
+
+exports.basePalette = basePalette;

package/cjs/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/cjs/theme/createAIDTTheme.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var material = require('@mui/material');
+var common = require('../tokens/colors/common.js');
+var typography = require('../typography/typography.js');
+var _base = require('./_base.js');
+var AIDTTheme = require('./AIDTTheme.js');
+var breakpoints = require('../breakpoints/breakpoints.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 = AIDTTheme.getThemeColors(palettePublisher, paletteSubject, paletteLevel);
+  return material.createTheme(Object.assign(Object.assign({}, _base.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.common.white,
+        black: common.common.black
+      }
+    },
+    breakpoints: breakpoints.AIDTBreakpoints,
+    typography: typography.createAIDTTypography(typographyFontFamily)
+  }));
+};
+
+exports.createAIDTTheme = createAIDTTheme;

package/cjs/theme/index.d.ts

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

package/cjs/theme/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var createAIDTTheme = require('./createAIDTTheme.js');
+
+
+
+exports.createAIDTTheme = createAIDTTheme.createAIDTTheme;

package/cjs/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/cjs/tokens/breakpoints/breakpoints.js

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

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

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

package/cjs/tokens/breakpoints/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var breakpoints = require('./breakpoints.js');
+
+
+
+exports.breakpoints = breakpoints.breakpoints;

package/cjs/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/cjs/tokens/colors/bluepurple.d.ts

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

package/cjs/tokens/colors/bluepurple.js

@@ -0,0 +1,18 @@
+'use strict';
+
+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
+});
+
+exports.bluepurple = bluepurple;

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

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

package/cjs/tokens/colors/bluesky.js

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

package/cjs/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/cjs/tokens/colors/common.js

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

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

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

package/cjs/tokens/colors/gray.js

@@ -0,0 +1,18 @@
+'use strict';
+
+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: '#'
+});
+
+exports.gray = gray;

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

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

package/cjs/tokens/colors/green.js

@@ -0,0 +1,18 @@
+'use strict';
+
+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
+});
+
+exports.green = green;

package/cjs/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';