@rededor/cura 0.2.0 → 0.3.0

package/dist/cjs/{cura-icon_2.cjs.entry.js → cura-icons-view.cjs.entry.js}

@@ -2,60 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9092c64d.js');
-
-const curaIconCss = ":host{--stroke-color:#B7B7B7}:host svg.icon-neutral{--stroke-color:#B7B7B7}:host svg.icon-primary{--stroke-color:var(--cura-color-primary-base, #004186)}:host svg.icon-secondary{--stroke-color:var(--cura-color-secondary-base, #AA8E0B)}:host svg.icon-accent{--stroke-color:var(--cura-color-accent-base, #DF8D2C)}:host svg.icon-success{--stroke-color:#5FD290}:host svg.icon-info{--stroke-color:#6EA8FF}:host svg.icon-error{--stroke-color:#EB5757}:host svg.icon-warning{--stroke-color:#FFCF3C}:host svg.icon-white{--stroke-color:#F6F6F6}:host svg.icon-black{--stroke-color:#262626}:host svg.icon-disabled{--stroke-color:#D4D4D4}:host{width:var(--size);height:var(--size)}:host svg{display:inline-block;stroke:var(--stroke-color);width:var(--size);height:var(--size);stroke-width:var(--stroke);fill:none}";
-
-const CuraIcon = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.name = '';
-    this.color = 'neutral';
-    this.iconset = 'default';
-    this.disabled = false;
-    this.sizes = {
-      "128": { size: 128, stroke: 5.25 },
-      "72": { size: 72, stroke: 3.5 },
-      "64": { size: 64, stroke: 3.25 },
-      "48": { size: 48, stroke: 2.75 },
-      "40": { size: 40, stroke: 2.5 },
-      "32": { size: 32, stroke: 2.25 },
-      "24": { size: 24, stroke: 2 },
-      "20": { size: 20, stroke: 1.75 },
-      "16": { size: 16, stroke: 1.5 },
-      "default": { size: 24, stroke: 2 }
-    };
-  }
-  sizeHandler(size) {
-    const scaledStroke = (iconSize) => {
-      return `${this.sizes[iconSize].stroke * (this.sizes.default.size / this.sizes[iconSize].size)}px`;
-    };
-    this.setHostProperty('--size', this.sizes[`${size}`] ? `${this.sizes[size].size}px` : `${this.sizes.default.size}px`);
-    this.setHostProperty('--stroke', this.sizes[`${size}`] ? scaledStroke(size) : scaledStroke("default"));
-  }
-  connectedCallback() {
-    this.assetsPath = window.CuraAPI.localAssetsPath;
-    this.sizeHandler(this.size);
-  }
-  getClasses() {
-    const classes = {};
-    classes[`icon-${this.color}`] = true;
-    if (this.disabled)
-      classes[`icon-disabled`] = true;
-    return classes;
-  }
-  setHostProperty(prop, value) {
-    this.host.style.setProperty(prop, value);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("svg", { version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", class: this.getClasses() }, index.h("use", { xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "size": ["sizeHandler"]
-  }; }
-};
-CuraIcon.style = curaIconCss;
+const index = require('./index-8686299e.js');
 
 const iconsetdefaulticons = ["360", "accessibility", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "delete", "desktop", "deslike", "download", "duplicate", "edit", "exam", "expand", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "hate", "healthPlan", "height", "height2", "home", "horizontalList", "imageUp", "info2", "infoCircle", "key", "language", "language2", "languageEN", "languagePT", "like", "link", "linkExternal", "list", "login", "logout", "love", "mail", "mail2", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "neutral", "news", "notification", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profile2", "pulldownG", "pulldownP", "pullupG", "pullupP", "questionCircle", "questionSquare", "range", "reload", "schedule", "search", "secure", "share", "share2", "sound", "soundOff", "subItem", "target", "team", "unLink", "unSecure", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "wifi", "zoomIn", "zoomOut"];
 
@@ -72,10 +19,9 @@ const CuraIconsView = class {
     };
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "iconDetail" }, index.h("h4", null, this.selected), index.h("div", { class: "iconSizes" }, this.sizes.map(size => index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, size: size }), index.h("span", null, size)))), index.h("div", { class: "iconSizes invert" }, this.sizes.map(size => index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, size: size, color: "white" }), index.h("span", null, size)))), index.h("div", { class: "iconSizes" }, this.colors.map(color => index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, color: color }), index.h("span", null, color))), index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, disabled: true }), index.h("span", null, "Disabled")))), index.h("div", { class: "icons" }, iconsetdefaulticons.map(icon => index.h("div", { class: "icon", onClick: () => this.setSelected(icon) }, index.h("cura-icon", { name: icon }), index.h("span", null, icon))))));
+    return (index.h(index.Host, null, index.h("div", { class: "iconDetail" }, index.h("h4", null, this.selected), index.h("div", { class: "iconSizes" }, this.sizes.map(size => index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, size: size }), index.h("span", null, size)))), index.h("div", { class: "iconSizes invert" }, this.sizes.map(size => index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), index.h("span", null, size)))), index.h("div", { class: "iconSizes" }, this.colors.map(color => index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, color: color }), index.h("span", null, color))), index.h("div", { class: "size" }, index.h("cura-icon", { name: this.selected, disabled: true }), index.h("span", null, "Disabled")))), index.h("div", { class: "icons" }, iconsetdefaulticons.map(icon => index.h("div", { class: "icon", onClick: () => this.setSelected(icon) }, index.h("cura-icon", { name: icon }), index.h("span", null, icon))))));
   }
 };
 CuraIconsView.style = curaIconsViewCss;
 
-exports.cura_icon = CuraIcon;
 exports.cura_icons_view = CuraIconsView;

package/dist/cjs/cura.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-9092c64d.js');
-const appGlobals = require('./app-globals-af978331.js');
+const index = require('./index-8686299e.js');
+const appGlobals = require('./app-globals-5f5b9fbf.js');
 
 /*
  Stencil Client Patch Browser v2.18.1 | MIT Licensed | https://stenciljs.com
@@ -17,5 +17,5 @@ const patchBrowser = () => {
 
 patchBrowser().then(options => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["dummy-component.cjs",[[1,"dummy-component"]]],["cura-icon_2.cjs",[[1,"cura-icons-view",{"selected":[32]}],[1,"cura-icon",{"name":[513],"color":[513],"size":[8],"iconset":[513],"disabled":[516]}]]]], options);
+  return index.bootstrapLazy([["cura-icon.cjs",[[1,"cura-icon",{"name":[513],"color":[1],"size":[8],"iconset":[513],"disabled":[4]}]]],["cura-icons-view.cjs",[[1,"cura-icons-view",{"selected":[32]}]]],["cura-display_3.cjs",[[1,"cura-display",{"level":[514],"size":[513]}],[1,"cura-heading",{"level":[514],"size":[513],"weight":[513]}],[1,"cura-paragraph",{"size":[513]}]]]], options);
 });

package/dist/cjs/{index-9092c64d.js → index-8686299e.js}

@@ -174,6 +174,10 @@ const parsePropertyValue = (propValue, propType) => {
             // but we'll cheat here and say that the string "false" is the boolean false
             return propValue === 'false' ? false : propValue === '' || !!propValue;
         }
+        if (propType & 2 /* MEMBER_FLAGS.Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
         if (propType & 1 /* MEMBER_FLAGS.String */) {
             // could have been passed as a number or boolean
             // but we still want it as a string
@@ -288,6 +292,31 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'style') {
+            // update style attribute, css properties and values
+            {
+                for (const prop in oldValue) {
+                    if (!newValue || newValue[prop] == null) {
+                        if (prop.includes('-')) {
+                            elm.style.removeProperty(prop);
+                        }
+                        else {
+                            elm.style[prop] = '';
+                        }
+                    }
+                }
+            }
+            for (const prop in newValue) {
+                if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                    if (prop.includes('-')) {
+                        elm.style.setProperty(prop, newValue[prop]);
+                    }
+                    else {
+                        elm.style[prop] = newValue[prop];
+                    }
+                }
+            }
+        }
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {

package/dist/cjs/loader.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9092c64d.js');
-const appGlobals = require('./app-globals-af978331.js');
+const index = require('./index-8686299e.js');
+const appGlobals = require('./app-globals-5f5b9fbf.js');
 
 /*
  Stencil Client Patch Esm v2.18.1 | MIT Licensed | https://stenciljs.com
@@ -16,7 +16,7 @@ const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["dummy-component.cjs",[[1,"dummy-component"]]],["cura-icon_2.cjs",[[1,"cura-icons-view",{"selected":[32]}],[1,"cura-icon",{"name":[513],"color":[513],"size":[8],"iconset":[513],"disabled":[516]}]]]], options);
+  return index.bootstrapLazy([["cura-icon.cjs",[[1,"cura-icon",{"name":[513],"color":[1],"size":[8],"iconset":[513],"disabled":[4]}]]],["cura-icons-view.cjs",[[1,"cura-icons-view",{"selected":[32]}]]],["cura-display_3.cjs",[[1,"cura-display",{"level":[514],"size":[513]}],[1,"cura-heading",{"level":[514],"size":[513],"weight":[513]}],[1,"cura-paragraph",{"size":[513]}]]]], options);
   });
 };
 

package/dist/collection/api/cura-api.js

@@ -5,7 +5,16 @@ export default class CuraAPI {
     const themeModule = new CuraThemeModule();
     this.theme = {
       load: function (themeTag) { themeModule.load(themeTag); },
-      setCustom: function (customThemeDefinitions) { themeModule.setCustom(customThemeDefinitions); }
+      setCustom: function (customThemeDefinitions) { themeModule.setCustom(customThemeDefinitions); },
+      colors: {
+        getColor: function (colorWithDepth) { return themeModule.colors.getColor(colorWithDepth); },
+      },
+      fonts: {
+        getFamily: function (type) { return themeModule.fonts.getFamily(type); },
+        getWeights: function () { return themeModule.fonts.getWeights(); },
+        getSize: function () { return themeModule.fonts.getSize(); },
+        getColor: function () { return themeModule.fonts.getColor(); }
+      }
     };
     if (config && config.customTheme) {
       this.theme.setCustom(config.customTheme);

package/dist/collection/api/modules/cura-theme-colors-module.js

@@ -0,0 +1,69 @@
+import { Static } from "../theme-presets/static";
+export default class CuraThemeColorsModule {
+  constructor() {
+    this.NeutralDepthAlias = {
+      'purewhite': '0',
+      'white': '100',
+      'pale': '200',
+      'lighter': '300',
+      'light': '400',
+      'base': '500',
+      'medium': '600',
+      'dark': '700',
+      'darker': '800',
+      'black': '900',
+    };
+    this.ColorDepthAlias = {
+      'lighter': '100',
+      'light': '300',
+      'base': '500',
+      'dark': '700',
+      'darker': '900'
+    };
+  }
+  /**
+   * Get theme color.
+   * @param colorWithDepth string Ex.: primary-light
+   * @returns css color property. Color definition or related css var from the theme.
+   */
+  getColor(colorWithDepth = "primary-base") {
+    const { color, depth } = this.splitColorDepth(colorWithDepth);
+    const staticColor = this.getStatic(color, depth);
+    if (staticColor)
+      return staticColor;
+    return this.getDynamic(color, depth);
+  }
+  /**
+   * Internal: Look for static color by name and depth.
+   * @param color Color name.
+   * @param depth Depth number or alias.
+   * @returns Static color definition.
+   */
+  getStatic(color, depth) {
+    var _a, _b;
+    return ((_a = Static.color[color]) === null || _a === void 0 ? void 0 : _a[depth]) || ((_b = Static.color[color]) === null || _b === void 0 ? void 0 : _b[this.NeutralDepthAlias[depth]]) || null;
+  }
+  /**
+   * Internal: Look for theme dynamic colors.
+   * @param color Color name.
+   * @param depth Depth number or alias.
+   * @returns Related CSS variable defined by the theme.
+   */
+  getDynamic(color, depth) {
+    const themeVar = this.ColorDepthAlias[depth]
+      ? `--cura-color-${color}-${this.ColorDepthAlias[depth]}`
+      : `--cura-color-${color}-${depth}`;
+    return getComputedStyle(document.body).getPropertyValue(themeVar)
+      ? `var(${themeVar})`
+      : `var(--cura-color-primary-500)`;
+  }
+  /**
+   * Internal: Split color strings
+   * @param colorWithDepth Color string [color]-[depth]. Ex.: primary-dark or primary-700.
+   * @returns Object { color: string, depth: string }.
+   */
+  splitColorDepth(colorWithDepth) {
+    const [color, depth] = colorWithDepth.toLowerCase().split(/-(.*)/);
+    return { color: color !== null && color !== void 0 ? color : "primary", depth: depth !== null && depth !== void 0 ? depth : "base" };
+  }
+}

package/dist/collection/api/modules/cura-theme-fonts-module.js

@@ -0,0 +1,35 @@
+import { ThemeDefault } from "../theme-presets/theme-default";
+export default class CuraThemeFontsModule {
+  constructor() {
+    /**
+     * Get the CSS variable related to the font size base defined by the theme.
+     * @returns Related CSS variable as a string.
+     */
+    this.getSize = () => `var(--cura-font-size)`;
+    /**
+     * Get CSS variable related to the font color defined by the theme.
+     * @returns Related CSS variable as a string.
+     */
+    this.getColor = () => `var(--cura-font-color)`;
+  }
+  /**
+   * Get the CSS variable related to the font family defined by the theme.
+   * @param type 'body' | 'heading' | 'display'
+   * @returns Related css variable as a string.
+   */
+  getFamily(type = "body") {
+    const curaFontFamilyCSSVar = `--cura-font-${type.toLowerCase()}`;
+    return getComputedStyle(document.body).getPropertyValue(curaFontFamilyCSSVar)
+      ? `var(${curaFontFamilyCSSVar})`
+      : 'var(--cura-font-body)';
+  }
+  /**
+   * Get the CSS variables related to font weights defined by the theme.
+   * @returns Object with CSS vars weights definitions for thin, light, regular, medium, bold and black fonts.
+   */
+  getWeights() {
+    const weights = {};
+    Object.keys(ThemeDefault.font.weights).forEach((key) => weights[key] = `var(--cura-font-weights-${key})`);
+    return weights;
+  }
+}

package/dist/collection/api/modules/cura-theme-module.js

@@ -1,7 +1,11 @@
 import { ThemePresets } from "../theme-presets/theme-presets";
+import CuraThemeColorsModule from "./cura-theme-colors-module";
+import CuraThemeFontsModule from "./cura-theme-fonts-module";
 export default class CuraThemeModule {
   constructor() {
     this.prefix = '--cura';
+    this.colors = new CuraThemeColorsModule();
+    this.fonts = new CuraThemeFontsModule();
     /* Private */
     /** Set css var based on object structure */
     this.setCssVar = (prop, path) => {

package/dist/collection/api/theme-presets/static.js

@@ -0,0 +1,103 @@
+/**
+ * Static
+ */
+export const Static = {
+  /* Colors */
+  color: {
+    success: {
+      lighter: '#DFF6E9',
+      light: '#94E1B5',
+      base: '#5FD290',
+      dark: '#3F8C60',
+      darker: '#132A1D',
+      depth100: '#DFF6E9',
+      depth300: '#94E1B5',
+      depth500: '#5FD290',
+      depth700: '#3F8C60',
+      depth900: '#132A1D',
+    },
+    info: {
+      lighter: '#CFE2FF',
+      light: '#95BFFF',
+      base: '#6EA8FF',
+      dark: '#517BBB',
+      darker: '#253855',
+      depth100: '#CFE2FF',
+      depth300: '#95BFFF',
+      depth500: '#6EA8FF',
+      depth700: '#517BBB',
+      depth900: '#253855',
+    },
+    error: {
+      lighter: '#FBDDDD',
+      light: '#F28F8F',
+      base: '#EB5757',
+      dark: '#9D3A3A',
+      darker: '#2F1111',
+      depth100: '#FBDDDD',
+      depth300: '#F28F8F',
+      depth500: '#EB5757',
+      depth700: '#9D3A3A',
+      depth900: '#2F1111',
+    },
+    warning: {
+      lighter: '#FCFAC4',
+      light: '#F8F489',
+      base: '#F5EF4E',
+      dark: '#A39F34',
+      darker: '#313010',
+      depth100: '#FCFAC4',
+      depth300: '#F8F489',
+      depth500: '#F5EF4E',
+      depth700: '#A39F34',
+      depth900: '#313010',
+    },
+    /* neutral: {
+      'pure-white': '#FFFFFF',
+      white: '#F6F6F6',
+      pale: '#E9E9E9',
+      lighter: '#E2E2E2',
+      light: '#D4D4D4',
+      base: '#B7B7B7',
+      medium: '#929292',
+      dark: '#6E6E6E',
+      darker: '#4A4A4A',
+      black: '#262626',
+      depth0: '#FFFFFF',
+      depth100: '#F6F6F6',
+      depth200: '#E9E9E9',
+      depth300: '#E2E2E2',
+      depth400: '#D4D4D4',
+      depth500: '#B7B7B7',
+      depth600: '#929292',
+      depth700: '#6E6E6E',
+      depth800: '#4A4A4A',
+      depth900: '#262626',
+    }, */
+    neutral: {
+      '0': '#FFFFFF',
+      '100': '#F6F6F6',
+      '200': '#E9E9E9',
+      '300': '#E2E2E2',
+      '400': '#D4D4D4',
+      '500': '#B7B7B7',
+      '600': '#929292',
+      '700': '#6E6E6E',
+      '800': '#4A4A4A',
+      '900': '#262626',
+    },
+  },
+  /* Icons */
+  icons: {
+    'sizes': ['128', '72', '64', '48', '40', '32', '24', '20', '16'],
+    'strokes': ['5.25', '3.5', '3.25', '2.75', '2.5', '2.25', '2', '1.75', '1.5'],
+    'default-size': '24',
+  },
+  /* Breakpoints */
+  breakpoints: {
+    small: '576px',
+    medium: '768px',
+    large: '992px',
+    xlarge: '1200px',
+  },
+};

package/dist/collection/api/theme-presets/theme-default.js

@@ -5,39 +5,45 @@ export const ThemeDefault = {
   /* Colors */
   color: {
     primary: {
-      depth100: '#CCD9E7',
-      depth300: '#5580AE',
-      base: '#004186',
-      depth700: '#002B59',
-      depth900: '#00133B'
+      '100': '#71C5E8',
+      '300': '#449CD5',
+      '500': '#005EB8',
+      '700': '#004890',
+      '900': '#002855'
     },
     secondary: {
-      depth100: '#EEE8CE',
-      depth300: '#C6B45C',
-      base: '#AA8E0B',
-      depth700: '#715F07',
-      depth900: '#221C02'
+      '100': '#F5ECE3',
+      '300': '#DDC0A2',
+      '500': '#CCA074',
+      '700': '#886B4D',
+      '900': '#292017'
     },
     accent: {
-      depth100: '#F9E8D5',
-      depth300: '#E4A04F',
-      base: '#DF8D2C',
-      depth700: '#955E1D',
-      depth900: '#2D1C09'
+      '100': '#F9E8D5',
+      '300': '#E4A04F',
+      '500': '#DF8D2C',
+      '700': '#955E1D',
+      '900': '#2D1C09'
     }
   },
   /* Spacing */
   spacing: {
-    base: '8px',
+    base: 4,
   },
   /* Fonts */
   font: {
-    family: {
-      title: 'serif',
-      body: '"Roboto", Helvetica, Arial, sans-serif'
+    size: '14px',
+    color: '#4A4A4A',
+    body: "'Roboto', Arial, Helvetica, sans-serif",
+    heading: "'Roboto', Arial, Helvetica, sans-serif",
+    display: "'Roboto', Arial, Helvetica, sans-serif",
+    weights: {
+      thin: 100,
+      light: 300,
+      regular: 400,
+      medium: 500,
+      bold: 700,
+      black: 900
     },
-    size: {
-      base: '16px',
-    }
   }
 };

package/dist/collection/api/theme-presets/theme-maternity.js

@@ -7,20 +7,18 @@ export const ThemeMaternity = Object.assign(Object.assign({}, ThemeDefault), {
   /* Colors */
   color: {
     primary: {
-      base: '#CD4D9A',
-      depth100: '#FCEFF6',
-      depth300: '#FFBFE5',
-      depth500: '#FF7FCB',
-      depth700: '#99126C',
-      depth900: '#00133B'
+      '100': '#FCEFF6',
+      '300': '#FFBFE5',
+      '500': '#CD4D9A',
+      '700': '#99126C',
+      '900': '#00133B'
     },
     secondary: {
-      base: '#189AB4',
-      depth100: '#EDF3FF',
-      depth300: '#BDD2FF',
-      depth500: '#496BB6',
-      depth700: '#001C58',
-      depth900: '#430E31'
+      '100': '#EDF3FF',
+      '300': '#BDD2FF',
+      '500': '#189AB4',
+      '700': '#001C58',
+      '900': '#430E31'
     }
   }
 });

package/dist/collection/collection-manifest.json

@@ -2,7 +2,9 @@
   "entries": [
     "./components/cura-icon/cura-icon.js",
     "./components/cura-icons-view/cura-icons-view.js",
-    "./components/dummy-component/dummy-component.js"
+    "./components/text/cura-display/cura-display.js",
+    "./components/text/cura-heading/cura-heading.js",
+    "./components/text/cura-paragraph/cura-paragraph.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/cura-icon/cura-icon.css

@@ -1,51 +1,10 @@
-/* SASS Variables Map */
-/* Private */
-/* Colors */
-/* Lists */
-:host {
-  --stroke-color: #B7B7B7;
-}
-:host svg.icon-neutral {
-  --stroke-color: #B7B7B7;
-}
-:host svg.icon-primary {
-  --stroke-color: var(--cura-color-primary-base, #004186);
-}
-:host svg.icon-secondary {
-  --stroke-color: var(--cura-color-secondary-base, #AA8E0B);
-}
-:host svg.icon-accent {
-  --stroke-color: var(--cura-color-accent-base, #DF8D2C);
-}
-:host svg.icon-success {
-  --stroke-color: #5FD290;
-}
-:host svg.icon-info {
-  --stroke-color: #6EA8FF;
-}
-:host svg.icon-error {
-  --stroke-color: #EB5757;
-}
-:host svg.icon-warning {
-  --stroke-color: #FFCF3C;
-}
-:host svg.icon-white {
-  --stroke-color: #F6F6F6;
-}
-:host svg.icon-black {
-  --stroke-color: #262626;
-}
-:host svg.icon-disabled {
-  --stroke-color: #D4D4D4;
-}
-
 :host {
   width: var(--size);
   height: var(--size);
 }
 :host svg {
   display: inline-block;
-  stroke: var(--stroke-color);
+  stroke: var(--color);
   width: var(--size);
   height: var(--size);
   stroke-width: var(--stroke);

package/dist/collection/components/cura-icon/cura-icon.js

@@ -2,7 +2,7 @@ import { Host, h } from '@stencil/core';
 export class CuraIcon {
   constructor() {
     this.name = '';
-    this.color = 'neutral';
+    this.color = 'neutral-base';
     this.iconset = 'default';
     this.disabled = false;
     this.sizes = {
@@ -25,22 +25,19 @@ export class CuraIcon {
     this.setHostProperty('--size', this.sizes[`${size}`] ? `${this.sizes[size].size}px` : `${this.sizes.default.size}px`);
     this.setHostProperty('--stroke', this.sizes[`${size}`] ? scaledStroke(size) : scaledStroke("default"));
   }
+  colorHandler() {
+    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color));
+  }
   connectedCallback() {
     this.assetsPath = window.CuraAPI.localAssetsPath;
     this.sizeHandler(this.size);
-  }
-  getClasses() {
-    const classes = {};
-    classes[`icon-${this.color}`] = true;
-    if (this.disabled)
-      classes[`icon-disabled`] = true;
-    return classes;
+    this.colorHandler();
   }
   setHostProperty(prop, value) {
     this.host.style.setProperty(prop, value);
   }
   render() {
-    return (h(Host, null, h("svg", { version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", class: this.getClasses() }, h("use", { xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
+    return (h(Host, null, h("svg", { version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
   }
   static get is() { return "cura-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -89,8 +86,8 @@ export class CuraIcon {
           "text": ""
         },
         "attribute": "color",
-        "reflect": true,
-        "defaultValue": "'neutral'"
+        "reflect": false,
+        "defaultValue": "'neutral-base'"
       },
       "size": {
         "type": "any",
@@ -142,7 +139,7 @@ export class CuraIcon {
           "text": ""
         },
         "attribute": "disabled",
-        "reflect": true,
+        "reflect": false,
         "defaultValue": "false"
       }
     };
@@ -152,6 +149,12 @@ export class CuraIcon {
     return [{
         "propName": "size",
         "methodName": "sizeHandler"
+      }, {
+        "propName": "color",
+        "methodName": "colorHandler"
+      }, {
+        "propName": "disabled",
+        "methodName": "colorHandler"
       }];
   }
 }

package/dist/collection/components/cura-icons-view/cura-icons-view.js

@@ -10,7 +10,7 @@ export class CuraIconsView {
     };
   }
   render() {
-    return (h(Host, null, h("div", { class: "iconDetail" }, h("h4", null, this.selected), h("div", { class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "white" }), h("span", null, size)))), h("div", { class: "iconSizes" }, this.colors.map(color => h("div", { class: "size" }, h("cura-icon", { name: this.selected, color: color }), h("span", null, color))), h("div", { class: "size" }, h("cura-icon", { name: this.selected, disabled: true }), h("span", null, "Disabled")))), h("div", { class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: "icon", onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon }), h("span", null, icon))))));
+    return (h(Host, null, h("div", { class: "iconDetail" }, h("h4", null, this.selected), h("div", { class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size)))), h("div", { class: "iconSizes" }, this.colors.map(color => h("div", { class: "size" }, h("cura-icon", { name: this.selected, color: color }), h("span", null, color))), h("div", { class: "size" }, h("cura-icon", { name: this.selected, disabled: true }), h("span", null, "Disabled")))), h("div", { class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: "icon", onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon }), h("span", null, icon))))));
   }
   static get is() { return "cura-icons-view"; }
   static get encapsulation() { return "shadow"; }