@rededor/cura 0.2.1 → 0.3.1

package/dist/types/api/theme-presets/theme-default.d.ts

@@ -4,37 +4,43 @@
 export declare const ThemeDefault: {
   color: {
     primary: {
-      depth100: string;
-      depth300: string;
-      base: string;
-      depth700: string;
-      depth900: string;
+      '100': string;
+      '300': string;
+      '500': string;
+      '700': string;
+      '900': string;
     };
     secondary: {
-      depth100: string;
-      depth300: string;
-      base: string;
-      depth700: string;
-      depth900: string;
+      '100': string;
+      '300': string;
+      '500': string;
+      '700': string;
+      '900': string;
     };
     accent: {
-      depth100: string;
-      depth300: string;
-      base: string;
-      depth700: string;
-      depth900: string;
+      '100': string;
+      '300': string;
+      '500': string;
+      '700': string;
+      '900': string;
     };
   };
   spacing: {
-    base: string;
+    base: number;
   };
   font: {
-    family: {
-      title: string;
-      body: string;
-    };
-    size: {
-      base: string;
+    size: string;
+    color: string;
+    body: string;
+    heading: string;
+    display: string;
+    weights: {
+      thin: number;
+      light: number;
+      regular: number;
+      medium: number;
+      bold: number;
+      black: number;
     };
   };
 };

package/dist/types/api/theme-presets/theme-maternity.d.ts

@@ -1,32 +1,36 @@
 export declare const ThemeMaternity: {
   color: {
     primary: {
-      base: string;
-      depth100: string;
-      depth300: string;
-      depth500: string;
-      depth700: string;
-      depth900: string;
+      '100': string;
+      '300': string;
+      '500': string;
+      '700': string;
+      '900': string;
     };
     secondary: {
-      base: string;
-      depth100: string;
-      depth300: string;
-      depth500: string;
-      depth700: string;
-      depth900: string;
+      '100': string;
+      '300': string;
+      '500': string;
+      '700': string;
+      '900': string;
     };
   };
   spacing: {
-    base: string;
+    base: number;
   };
   font: {
-    family: {
-      title: string;
-      body: string;
-    };
-    size: {
-      base: string;
+    size: string;
+    color: string;
+    body: string;
+    heading: string;
+    display: string;
+    weights: {
+      thin: number;
+      light: number;
+      regular: number;
+      medium: number;
+      bold: number;
+      black: number;
     };
   };
 };

package/dist/types/api/theme-presets/theme-presets.d.ts

@@ -2,69 +2,79 @@ export declare const ThemePresets: {
   default: {
     color: {
       primary: {
-        depth100: string;
-        depth300: string;
-        base: string;
-        depth700: string;
-        depth900: string;
+        '100': string;
+        '300': string;
+        '500': string;
+        '700': string;
+        '900': string;
       };
       secondary: {
-        depth100: string;
-        depth300: string;
-        base: string;
-        depth700: string;
-        depth900: string;
+        '100': string;
+        '300': string;
+        '500': string;
+        '700': string;
+        '900': string;
       };
       accent: {
-        depth100: string;
-        depth300: string;
-        base: string;
-        depth700: string;
-        depth900: string;
+        '100': string;
+        '300': string;
+        '500': string;
+        '700': string;
+        '900': string;
       };
     };
     spacing: {
-      base: string;
+      base: number;
     };
     font: {
-      family: {
-        title: string;
-        body: string;
-      };
-      size: {
-        base: string;
+      size: string;
+      color: string;
+      body: string;
+      heading: string;
+      display: string;
+      weights: {
+        thin: number;
+        light: number;
+        regular: number;
+        medium: number;
+        bold: number;
+        black: number;
       };
     };
   };
   maternidade: {
     color: {
       primary: {
-        base: string;
-        depth100: string;
-        depth300: string;
-        depth500: string;
-        depth700: string;
-        depth900: string;
+        '100': string;
+        '300': string;
+        '500': string;
+        '700': string;
+        '900': string;
       };
       secondary: {
-        base: string;
-        depth100: string;
-        depth300: string;
-        depth500: string;
-        depth700: string;
-        depth900: string;
+        '100': string;
+        '300': string;
+        '500': string;
+        '700': string;
+        '900': string;
       };
     };
     spacing: {
-      base: string;
+      base: number;
     };
     font: {
-      family: {
-        title: string;
-        body: string;
-      };
-      size: {
-        base: string;
+      size: string;
+      color: string;
+      body: string;
+      heading: string;
+      display: string;
+      weights: {
+        thin: number;
+        light: number;
+        regular: number;
+        medium: number;
+        bold: number;
+        black: number;
       };
     };
   };

package/dist/types/components/cura-icon/cura-icon.d.ts

@@ -48,9 +48,9 @@ export declare class CuraIcon {
     };
   };
   sizeHandler(size: string | number): void;
+  colorHandler(): void;
   assetsPath: string;
   connectedCallback(): void;
-  getClasses(): {};
   setHostProperty(prop: string, value: string): void;
   render(): any;
 }

package/dist/types/components/text/cura-display/cura-display.d.ts

@@ -0,0 +1,28 @@
+export declare class CuraDisplay {
+  /**
+   * Heading level for semantics.
+   * Values: 1(default)-6.
+   */
+  level: number;
+  /**
+   * Heading style size.
+   * Values: small | regular(default) | large.
+   */
+  size: string;
+  /**
+   * Host element <cura-heading>
+   */
+  host: HTMLElement;
+  /**
+   * Internal Props
+   */
+  weights: any;
+  styles: any;
+  connectedCallback(): void;
+  getClasses(): {};
+  setFontProperties(): void;
+  setColors(): void;
+  setHostProperty(prop: string, value: string): void;
+  getHeadingTag(): any;
+  render(): any;
+}

package/dist/types/components/text/cura-heading/cura-heading.d.ts

@@ -0,0 +1,33 @@
+export declare class CuraHeading {
+  /**
+   * Heading level for semantics.
+   * Values: 1(default)-6.
+   */
+  level: number;
+  /**
+   * Heading style size.
+   * Values: small | regular(default) | large.
+   */
+  size: string;
+  /**
+   * Heading font weight.
+   * Values: regular(default) | bold.
+   */
+  weight: string;
+  /**
+   * Host element <cura-heading>
+   */
+  host: HTMLElement;
+  /**
+   * Internal Props
+   */
+  weights: any;
+  styles: any;
+  connectedCallback(): void;
+  getClasses(): {};
+  setFontProperties(): void;
+  setColors(): void;
+  setHostProperty(prop: string, value: string): void;
+  getHeadingTag(): any;
+  render(): any;
+}

package/dist/types/components/text/cura-paragraph/cura-paragraph.d.ts

@@ -0,0 +1,22 @@
+export declare class CuraParagraph {
+  /**
+   * Set size of body text.
+   * Values: regular (default) | large | small | caption.
+   */
+  size: string;
+  /**
+   * Host element <cura-paragraph>
+   */
+  host: HTMLElement;
+  /**
+   * Internal Props
+   */
+  weights: any;
+  styles: any;
+  connectedCallback(): void;
+  setsizeClass(): {};
+  setFontProperties(): void;
+  setColors(): void;
+  setHostProperty(prop: string, value: string): void;
+  render(): any;
+}

package/dist/types/components.d.ts

@@ -6,6 +6,30 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
+    interface CuraDisplay {
+        /**
+          * Heading level for semantics. Values: 1(default)-6.
+         */
+        "level": number;
+        /**
+          * Heading style size. Values: small | regular(default) | large.
+         */
+        "size": string;
+    }
+    interface CuraHeading {
+        /**
+          * Heading level for semantics. Values: 1(default)-6.
+         */
+        "level": number;
+        /**
+          * Heading style size. Values: small | regular(default) | large.
+         */
+        "size": string;
+        /**
+          * Heading font weight. Values: regular(default) | bold.
+         */
+        "weight": string;
+    }
     interface CuraIcon {
         "color": string;
         "disabled": boolean;
@@ -15,10 +39,26 @@ export namespace Components {
     }
     interface CuraIconsView {
     }
-    interface DummyComponent {
+    interface CuraParagraph {
+        /**
+          * Set size of body text. Values: regular (default) | large | small | caption.
+         */
+        "size": string;
     }
 }
 declare global {
+    interface HTMLCuraDisplayElement extends Components.CuraDisplay, HTMLStencilElement {
+    }
+    var HTMLCuraDisplayElement: {
+        prototype: HTMLCuraDisplayElement;
+        new (): HTMLCuraDisplayElement;
+    };
+    interface HTMLCuraHeadingElement extends Components.CuraHeading, HTMLStencilElement {
+    }
+    var HTMLCuraHeadingElement: {
+        prototype: HTMLCuraHeadingElement;
+        new (): HTMLCuraHeadingElement;
+    };
     interface HTMLCuraIconElement extends Components.CuraIcon, HTMLStencilElement {
     }
     var HTMLCuraIconElement: {
@@ -31,19 +71,45 @@ declare global {
         prototype: HTMLCuraIconsViewElement;
         new (): HTMLCuraIconsViewElement;
     };
-    interface HTMLDummyComponentElement extends Components.DummyComponent, HTMLStencilElement {
+    interface HTMLCuraParagraphElement extends Components.CuraParagraph, HTMLStencilElement {
     }
-    var HTMLDummyComponentElement: {
-        prototype: HTMLDummyComponentElement;
-        new (): HTMLDummyComponentElement;
+    var HTMLCuraParagraphElement: {
+        prototype: HTMLCuraParagraphElement;
+        new (): HTMLCuraParagraphElement;
     };
     interface HTMLElementTagNameMap {
+        "cura-display": HTMLCuraDisplayElement;
+        "cura-heading": HTMLCuraHeadingElement;
         "cura-icon": HTMLCuraIconElement;
         "cura-icons-view": HTMLCuraIconsViewElement;
-        "dummy-component": HTMLDummyComponentElement;
+        "cura-paragraph": HTMLCuraParagraphElement;
     }
 }
 declare namespace LocalJSX {
+    interface CuraDisplay {
+        /**
+          * Heading level for semantics. Values: 1(default)-6.
+         */
+        "level"?: number;
+        /**
+          * Heading style size. Values: small | regular(default) | large.
+         */
+        "size"?: string;
+    }
+    interface CuraHeading {
+        /**
+          * Heading level for semantics. Values: 1(default)-6.
+         */
+        "level"?: number;
+        /**
+          * Heading style size. Values: small | regular(default) | large.
+         */
+        "size"?: string;
+        /**
+          * Heading font weight. Values: regular(default) | bold.
+         */
+        "weight"?: string;
+    }
     interface CuraIcon {
         "color"?: string;
         "disabled"?: boolean;
@@ -53,21 +119,29 @@ declare namespace LocalJSX {
     }
     interface CuraIconsView {
     }
-    interface DummyComponent {
+    interface CuraParagraph {
+        /**
+          * Set size of body text. Values: regular (default) | large | small | caption.
+         */
+        "size"?: string;
     }
     interface IntrinsicElements {
+        "cura-display": CuraDisplay;
+        "cura-heading": CuraHeading;
         "cura-icon": CuraIcon;
         "cura-icons-view": CuraIconsView;
-        "dummy-component": DummyComponent;
+        "cura-paragraph": CuraParagraph;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "cura-display": LocalJSX.CuraDisplay & JSXBase.HTMLAttributes<HTMLCuraDisplayElement>;
+            "cura-heading": LocalJSX.CuraHeading & JSXBase.HTMLAttributes<HTMLCuraHeadingElement>;
             "cura-icon": LocalJSX.CuraIcon & JSXBase.HTMLAttributes<HTMLCuraIconElement>;
             "cura-icons-view": LocalJSX.CuraIconsView & JSXBase.HTMLAttributes<HTMLCuraIconsViewElement>;
-            "dummy-component": LocalJSX.DummyComponent & JSXBase.HTMLAttributes<HTMLDummyComponentElement>;
+            "cura-paragraph": LocalJSX.CuraParagraph & JSXBase.HTMLAttributes<HTMLCuraParagraphElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rededor/cura",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Cura Design System",
   "author": "Rede D`Or São Luiz",
   "license": "MIT",
@@ -38,5 +38,5 @@
     "puppeteer": "^10.0.0",
     "svgo": "^3.0.1"
   },
-  "gitHead": "32b1af547e44e568efa9ce8067db1e57202fe759"
+  "gitHead": "0edc0ee0a6d9d02338dbc939898ca6892a913e38"
 }

package/dist/cjs/app-globals-af978331.js

@@ -1,175 +0,0 @@
-'use strict';
-
-/**
- * Cura Default Theme
- */
-const ThemeDefault = {
-  /* Colors */
-  color: {
-    primary: {
-      depth100: '#CCD9E7',
-      depth300: '#5580AE',
-      base: '#004186',
-      depth700: '#002B59',
-      depth900: '#00133B'
-    },
-    secondary: {
-      depth100: '#EEE8CE',
-      depth300: '#C6B45C',
-      base: '#AA8E0B',
-      depth700: '#715F07',
-      depth900: '#221C02'
-    },
-    accent: {
-      depth100: '#F9E8D5',
-      depth300: '#E4A04F',
-      base: '#DF8D2C',
-      depth700: '#955E1D',
-      depth900: '#2D1C09'
-    }
-  },
-  /* Spacing */
-  spacing: {
-    base: '8px',
-  },
-  /* Fonts */
-  font: {
-    family: {
-      title: 'serif',
-      body: '"Roboto", Helvetica, Arial, sans-serif'
-    },
-    size: {
-      base: '16px',
-    }
-  }
-};
-
-/**
- * Maternity Theme
- */
-const ThemeMaternity = Object.assign(Object.assign({}, ThemeDefault), { 
-  /* Custom */
-  /* Colors */
-  color: {
-    primary: {
-      base: '#CD4D9A',
-      depth100: '#FCEFF6',
-      depth300: '#FFBFE5',
-      depth500: '#FF7FCB',
-      depth700: '#99126C',
-      depth900: '#00133B'
-    },
-    secondary: {
-      base: '#189AB4',
-      depth100: '#EDF3FF',
-      depth300: '#BDD2FF',
-      depth500: '#496BB6',
-      depth700: '#001C58',
-      depth900: '#430E31'
-    }
-  } });
-
-const ThemePresets = {
-  'default': ThemeDefault,
-  'maternidade': ThemeMaternity
-};
-
-class CuraThemeModule {
-  constructor() {
-    this.prefix = '--cura';
-    /* Private */
-    /** Set css var based on object structure */
-    this.setCssVar = (prop, path) => {
-      const varName = this.groupPath(path, prop[0]);
-      this.body.style.setProperty(varName, prop[1]);
-    };
-    this.groupPath = (a, b) => `${a}-${b}`;
-    this.isObject = (val) => {
-      return val && typeof val === 'object' && !Array.isArray(val);
-    };
-    /** Deep merge objects */
-    this.mergeObject = (from, to) => {
-      const entries = Object.entries(from);
-      for (let e of entries) {
-        if (this.isObject(e[1])) {
-          this.mergeObject(e[1], to[e[0]]);
-        }
-        else {
-          to[e[0]] = e[1];
-        }
-      }
-    };
-    /** Set css vars from preset object */
-    this.buildCssVars = (path, obj) => {
-      const entries = Object.entries(obj);
-      for (let e of entries) {
-        if (this.isObject(e[1])) {
-          this.buildCssVars(this.groupPath(path, e[0]), e[1]);
-        }
-        else {
-          this.setCssVar(e, path);
-        }
-      }
-    };
-    this.body = window.document.documentElement.querySelector('body');
-  }
-  /**
-   * Load a theme.
-   * @param theme Theme tag.
-   */
-  load(theme = 'default') {
-    const preset = ThemePresets[theme] ? ThemePresets[theme] : ThemePresets.default;
-    this.buildCssVars(this.prefix, preset);
-  }
-  /**
-   * Define a custom theme
-   * @param customTheme Custom theme object definition
-   */
-  setCustom(customTheme) {
-    const customTag = customTheme.name;
-    if (customTag in ThemePresets) {
-      console.log('Error building custom theme. Theme %s already exists. Loading default theme.', customTag);
-      this.load('default');
-    }
-    else {
-      const preset = customTheme.fromPreset && customTheme.fromPreset in ThemePresets
-        ? ThemePresets[customTheme.fromPreset]
-        : ThemePresets.default;
-      const newTheme = Object.assign({}, JSON.parse(JSON.stringify(preset)));
-      this.mergeObject(customTheme.definitions, newTheme);
-      ThemePresets[customTag] = newTheme;
-      this.load(customTag);
-    }
-  }
-}
-
-class CuraAPI {
-  constructor(config) {
-    this.localAssetsPath = config && config.localAssetsPath ? config.localAssetsPath : `/assets`;
-    const themeModule = new CuraThemeModule();
-    this.theme = {
-      load: function (themeTag) { themeModule.load(themeTag); },
-      setCustom: function (customThemeDefinitions) { themeModule.setCustom(customThemeDefinitions); }
-    };
-    if (config && config.customTheme) {
-      this.theme.setCustom(config.customTheme);
-    }
-    else {
-      const theme = config && config.theme ? config.theme : 'default';
-      this.theme.load(theme);
-    }
-  }
-}
-
-function appGlobalScript () {
-  const config = window.CuraInit;
-  window.CuraAPI = config ? new CuraAPI(config) : new CuraAPI();
-  const api = window.CuraAPI;
-  window.dispatchEvent(new CustomEvent("CuraAPIReady", { detail: { api } }));
-  if (config && typeof config.onReady === 'function')
-    config.onReady(api);
-}
-
-const globalScripts = appGlobalScript;
-
-exports.globalScripts = globalScripts;