@ttoss/theme 1.3.0 → 1.4.1

package/dist/themes/Bruttal/Bruttal.js

@@ -0,0 +1,481 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/themes/Bruttal/Bruttal.ts
+var Bruttal_exports = {};
+__export(Bruttal_exports, {
+  BruttalFonts: () => BruttalFonts,
+  BruttalTheme: () => BruttalTheme
+});
+module.exports = __toCommonJS(Bruttal_exports);
+
+// src/themes/Bruttal/BruttalIcons.ts
+var import_react = require("@iconify-icon/react");
+var import_add_filled = __toESM(require("@iconify/icons-carbon/add-filled"));
+var import_calendar = __toESM(require("@iconify/icons-carbon/calendar"));
+var import_checkbox_checked_filled = __toESM(require("@iconify/icons-carbon/checkbox-checked-filled"));
+var import_checkbox = __toESM(require("@iconify/icons-carbon/checkbox"));
+var import_checkbox_indeterminate_filled = __toESM(require("@iconify/icons-carbon/checkbox-indeterminate-filled"));
+var import_chevron_down = __toESM(require("@iconify/icons-carbon/chevron-down"));
+var import_chevron_left = __toESM(require("@iconify/icons-carbon/chevron-left"));
+var import_chevron_right = __toESM(require("@iconify/icons-carbon/chevron-right"));
+var import_chevron_up = __toESM(require("@iconify/icons-carbon/chevron-up"));
+var import_close_filled = __toESM(require("@iconify/icons-carbon/close-filled"));
+var import_copy = __toESM(require("@iconify/icons-carbon/copy"));
+var import_error_filled = __toESM(require("@iconify/icons-carbon/error-filled"));
+var import_information_filled = __toESM(require("@iconify/icons-carbon/information-filled"));
+var import_paste = __toESM(require("@iconify/icons-carbon/paste"));
+var import_radio_button_checked = __toESM(require("@iconify/icons-carbon/radio-button-checked"));
+var import_radio_button = __toESM(require("@iconify/icons-carbon/radio-button"));
+var import_renew = __toESM(require("@iconify/icons-carbon/renew"));
+var import_time = __toESM(require("@iconify/icons-carbon/time"));
+var import_trash_can = __toESM(require("@iconify/icons-carbon/trash-can"));
+var import_user_avatar_filled_alt = __toESM(require("@iconify/icons-carbon/user-avatar-filled-alt"));
+var import_view_filled = __toESM(require("@iconify/icons-carbon/view-filled"));
+var import_view_off_filled = __toESM(require("@iconify/icons-carbon/view-off-filled"));
+var import_warning_filled = __toESM(require("@iconify/icons-carbon/warning-filled"));
+var replicateIcon = {
+  body: `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M42 15V42H15V15H42ZM42 12H15C14.2044 12 13.4413 12.3161 12.8787 12.8787C12.3161 13.4413 12 14.2044 12 15V42C12 42.7956 12.3161 43.5587 12.8787 44.1213C13.4413 44.6839 14.2044 45 15 45H42C42.7956 45 43.5587 44.6839 44.1213 44.1213C44.6839 43.5587 45 42.7956 45 42V15C45 14.2044 44.6839 13.4413 44.1213 12.8787C43.5587 12.3161 42.7956 12 42 12Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3 5.76389C3 4.23744 4.26071 3 5.81588 3H29V5.57963H5.81588C5.71221 5.57963 5.62816 5.66213 5.62816 5.76389V28.994C5.62816 29.0957 5.71221 29.1782 5.81588 29.1782H22.2607L18.7784 25.7602L20.6368 23.9361L27.2916 30.4681L20.6368 37L18.7784 35.1759L22.2607 31.7579H5.81588C4.26071 31.7579 3 30.5204 3 28.994V5.76389Z" fill="currentColor"/>
+  </svg>`,
+  width: 48,
+  height: 48
+};
+(0, import_react.addIcon)("add", import_add_filled.default);
+(0, import_react.addIcon)("avatar", import_user_avatar_filled_alt.default);
+(0, import_react.addIcon)("calendar", import_calendar.default);
+(0, import_react.addIcon)("checkbox-checked", import_checkbox_checked_filled.default);
+(0, import_react.addIcon)("checkbox-indeterminate", import_checkbox_indeterminate_filled.default);
+(0, import_react.addIcon)("checkbox-unchecked", import_checkbox.default);
+(0, import_react.addIcon)("close", import_close_filled.default);
+(0, import_react.addIcon)("copy", import_copy.default);
+(0, import_react.addIcon)("delete", import_trash_can.default);
+(0, import_react.addIcon)("error", import_error_filled.default);
+(0, import_react.addIcon)("info", import_information_filled.default);
+(0, import_react.addIcon)("paste", import_paste.default);
+(0, import_react.addIcon)("picker-down", import_chevron_down.default);
+(0, import_react.addIcon)("picker-up", import_chevron_up.default);
+(0, import_react.addIcon)("picker-left", import_chevron_left.default);
+(0, import_react.addIcon)("picker-right", import_chevron_right.default);
+(0, import_react.addIcon)("radio-not-selected", import_radio_button.default);
+(0, import_react.addIcon)("radio-selected", import_radio_button_checked.default);
+(0, import_react.addIcon)("refresh", import_renew.default);
+(0, import_react.addIcon)("replicate", replicateIcon);
+(0, import_react.addIcon)("small-close", import_close_filled.default);
+(0, import_react.addIcon)("time", import_time.default);
+(0, import_react.addIcon)("view-off", import_view_off_filled.default);
+(0, import_react.addIcon)("view-on", import_view_filled.default);
+(0, import_react.addIcon)("warning", import_warning_filled.default);
+
+// src/themes/Bruttal/BruttalFonts.ts
+var BruttalFonts = [
+  "https://fonts.googleapis.com/css?family=Inconsolata:wght@100;200;300;400;500;700;800;900",
+  "https://fonts.googleapis.com/css?family=Work+Sans:wght@100;200;300;400;500;700;800;900",
+  "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+];
+
+// src/tokens/fontSizes.ts
+var fontSizes = {
+  "2xs": "0.5rem",
+  xs: "0.75rem",
+  sm: "0.875rem",
+  base: "1rem",
+  lg: "1.125rem",
+  xl: "1.25rem",
+  "2xl": "1.5rem",
+  "3xl": "1.875rem",
+  "4xl": "2.25rem",
+  "5xl": "3rem",
+  "6xl": "3.75rem",
+  "7xl": "4.5rem",
+  "8xl": "6rem",
+  "9xl": "8rem"
+};
+
+// src/tokens/fontWeights.ts
+var fontWeights = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800
+};
+
+// src/tokens/letterSpacings.ts
+var letterSpacings = {
+  tighter: "-0.05em",
+  tight: "-0.025em",
+  normal: "0em",
+  wide: "0.025em",
+  wider: "0.05em",
+  widest: "0.1em"
+};
+
+// src/tokens/space.ts
+var space = {
+  none: 0,
+  "2xs": "2px",
+  xs: "3px",
+  sm: "5px",
+  md: "8px",
+  lg: "13px",
+  xl: "21px",
+  "2xl": "34px",
+  "3xl": "55px",
+  "4xl": "89px",
+  "5xl": "144px",
+  "6xl": "233px",
+  "7xl": "377px"
+};
+
+// src/themes/Bruttal/BruttalTheme.ts
+var coreFonts = {
+  main: '"Atkinson Hyperlegible", sans-serif',
+  contrast: '"Work Sans", sans-serif',
+  monospace: '"Inconsolata", sans-serif'
+};
+var brandColors = {
+  complimentary: "#f4f3f3",
+  main: "#292C2a",
+  darkNeutral: "#325C82",
+  accent: "#0469E3",
+  lightNeutral: "#F8F8F8"
+};
+var coreColors = {
+  ...brandColors,
+  gray100: "#f9f9f9",
+  gray200: "#dedede",
+  gray300: "#c4c4c4",
+  gray400: "#ababab",
+  gray500: "#929292",
+  gray600: "#7a7a7a",
+  gray700: "#626262",
+  gray800: "#4c4c4c",
+  gray900: "#323232",
+  black: "#000000",
+  red100: "#ffebeb",
+  red200: "#fdbfbf",
+  red300: "#f99595",
+  red400: "#f56c6c",
+  red500: "#ef4444",
+  red600: "#e42828",
+  red700: "#c62121",
+  white: "#ffffff",
+  amber600: "#d97706",
+  teal600: "#0d9488"
+};
+var coreBorders = {
+  none: "0px solid",
+  thin: "1px solid",
+  medium: "2px solid",
+  thick: "4px solid"
+};
+var coreRadii = {
+  sharp: "0px",
+  xs: "2px",
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "12px",
+  "2xl": "16px",
+  "3xl": "24px",
+  circle: "9999px"
+};
+var BruttalTheme = {
+  /**
+   * Tokens
+   */
+  fontSizes,
+  fontWeights,
+  letterSpacings,
+  space,
+  colors: {
+    background: coreColors.white,
+    text: coreColors.black,
+    muted: coreColors.gray200,
+    onMuted: coreColors.gray500,
+    mutedOutline: coreColors.gray300,
+    danger: coreColors.red700,
+    onDanger: coreColors.white,
+    notice: coreColors.amber600,
+    positive: coreColors.teal600,
+    surface: coreColors.white,
+    contentHeader: coreColors.gray200,
+    onContentHeader: coreColors.black,
+    outline: coreColors.gray500,
+    primary: coreColors.main,
+    onPrimary: coreColors.white,
+    secondary: coreColors.gray500,
+    onSecondary: coreColors.complimentary,
+    highlight: coreColors.darkNeutral,
+    onHighlight: coreColors.complimentary,
+    accent: coreColors.accent,
+    onAccent: coreColors.white,
+    neutral: coreColors.darkNeutral,
+    onNeutral: coreColors.lightNeutral,
+    underemphasize: coreColors.gray300
+  },
+  fonts: {
+    h1: coreFonts.contrast,
+    h2: coreFonts.contrast,
+    h3: coreFonts.contrast,
+    h4: coreFonts.contrast,
+    h5: coreFonts.contrast,
+    h6: coreFonts.contrast,
+    body: coreFonts.main,
+    highlight: coreFonts.main,
+    caption: coreFonts.monospace
+  },
+  borders: {
+    default: coreBorders.medium
+  },
+  radii: {
+    default: coreRadii.sm
+  },
+  /**
+   * Global styles
+   */
+  styles: {
+    root: {
+      fontFamily: "body",
+      fontWeight: "normal",
+      fontSize: "base",
+      margin: 0,
+      padding: 0
+    }
+  },
+  /**
+   * Components
+   */
+  badges: {
+    primary: {
+      color: "onPrimary",
+      bg: "primary",
+      fontSize: "sm",
+      paddingX: "sm",
+      borderRadius: "default"
+    }
+  },
+  buttons: {
+    accent: {
+      backgroundColor: "accent",
+      color: "onAccent",
+      fontFamily: "highlight",
+      fontWeight: "bold",
+      border: "default",
+      borderRadius: "default",
+      borderColor: "accent",
+      ":hover:not(:active,[disabled])": {
+        backgroundColor: "highlight",
+        color: "onHighlight",
+        borderColor: "highlight"
+      },
+      ":disabled": {
+        cursor: "default",
+        backgroundColor: "muted",
+        borderColor: "muted"
+      }
+    },
+    primary: {
+      backgroundColor: "primary",
+      color: "onPrimary",
+      fontFamily: "body",
+      border: "default",
+      borderRadius: "default",
+      borderColor: "outline",
+      ":hover:not(:active,[disabled])": {
+        backgroundColor: "highlight",
+        color: "onHighlight",
+        borderColor: "highlight"
+      },
+      ":active": {
+        backgroundColor: "primary",
+        color: "onPrimary",
+        borderColor: "outline"
+      },
+      ":disabled": {
+        cursor: "default",
+        backgroundColor: "muted",
+        borderColor: "muted"
+      }
+    },
+    secondary: {
+      backgroundColor: "secondary",
+      color: "onSecondary",
+      fontFamily: "body",
+      border: "default",
+      borderRadius: "default",
+      borderColor: "outline",
+      ":hover:not(:active,[disabled])": {
+        backgroundColor: "highlight",
+        color: "onHighlight",
+        borderColor: "highlight"
+      },
+      ":disabled": {
+        cursor: "default",
+        backgroundColor: "muted",
+        borderColor: "muted"
+      }
+    },
+    neutral: {
+      backgroundColor: "neutral",
+      color: "onNeutral",
+      fontFamily: "body",
+      border: "default",
+      borderRadius: "default",
+      borderColor: "outline",
+      ":hover:not(:active,[disabled])": {
+        backgroundColor: "highlight",
+        color: "onHighlight",
+        borderColor: "highlight"
+      },
+      ":disabled": {
+        cursor: "default",
+        backgroundColor: "muted",
+        borderColor: "muted"
+      }
+    },
+    danger: {
+      color: "white",
+      backgroundColor: "danger"
+    }
+  },
+  cards: {
+    primary: {
+      backgroundColor: "primary",
+      border: "1px solid black",
+      padding: [4, 5],
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      width: "fit-content"
+    }
+  },
+  forms: {
+    label: {
+      "&:has(+ div > input.error)": {
+        "span > iconify-icon": {
+          color: "danger"
+        }
+      },
+      '&:has(input[type="checkbox"]:disabled)': {
+        color: "onMuted"
+      }
+    },
+    checkbox: {
+      "input:not(:checked) ~ &": {
+        color: "primary"
+      },
+      "input:disabled ~ &": {
+        color: "muted"
+      },
+      "input:disabled ~ & path": {
+        backgroundColor: "onMuted"
+      }
+    },
+    input: {
+      fontFamily: "body",
+      color: "text",
+      paddingY: "md",
+      paddingX: "lg",
+      "::placeholder": {
+        color: "underemphasize"
+      },
+      ":focus-within": {
+        outlineColor: "neutral"
+      },
+      ":disabled": {
+        backgroundColor: "onMuted",
+        borderColor: "muted"
+      },
+      "&.error": {
+        borderColor: "danger"
+      },
+      "&.error+span>iconify-icon": {
+        color: "danger"
+      }
+    }
+  },
+  text: {
+    default: {
+      color: "text",
+      fontFamily: "body"
+    },
+    title: {
+      fontFamily: "heading",
+      fontSize: 4,
+      lineSpace: "3.5"
+    },
+    error: {
+      '&[role="alert"]': {
+        color: "danger"
+      }
+    },
+    h1: {
+      fontFamily: "heading",
+      fontSize: "6xl",
+      fontWeight: "bold",
+      letterSpacing: "normal"
+    },
+    h2: {
+      fontFamily: "heading",
+      fontSize: "5xl",
+      fontWeight: "bold",
+      letterSpacing: "normal"
+    },
+    h3: {
+      fontFamily: "heading",
+      fontSize: "4xl",
+      fontWeight: "bold",
+      letterSpacing: "normal"
+    },
+    h4: {
+      fontFamily: "heading",
+      fontSize: "2xl",
+      fontWeight: "bold",
+      letterSpacing: "normal"
+    },
+    h5: {
+      fontFamily: "heading",
+      fontSize: "xl",
+      fontWeight: "bold",
+      letterSpacing: "normal"
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BruttalFonts,
+  BruttalTheme
+});

package/package.json

@@ -1,14 +1,22 @@
 {
   "name": "@ttoss/theme",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "Theme for packages.",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
     "Rayza Oliveira <rayza.ocr@gmail.com>"
   ],
-  "main": "dist/index.js",
-  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js"
+    },
+    "./Bruttal": {
+      "import": "./dist/esm/themes/Bruttal/Bruttal.js",
+      "require": "./dist/themes/Bruttal/Bruttal.js"
+    }
+  },
   "files": [
     "dist",
     "src",
@@ -18,18 +26,29 @@
     "build": "tsup",
     "test": "jest"
   },
-  "sideEffects": false,
-  "typings": "dist/index.d.ts",
+  "sideEffects": true,
   "dependencies": {
-    "deepmerge": "^4.3.0"
+    "@iconify-icon/react": "^1.0.7",
+    "@iconify/icons-carbon": "^1.2.16",
+    "deepmerge": "^4.3.1"
   },
   "devDependencies": {
-    "@ttoss/config": "^1.28.4",
-    "@ttoss/test-utils": "^1.20.6"
+    "@ttoss/config": "^1.29.1",
+    "@ttoss/test-utils": "^1.20.8"
   },
   "keywords": [],
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9606dd531340e86f6e0a2c90e69a3526e74583b2"
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/index.d.ts"
+      ],
+      "Bruttal": [
+        "./dist/themes/Bruttal/Bruttal.d.ts"
+      ]
+    }
+  },
+  "gitHead": "ee0c2e51d38f37f997c020d4303cf90be720ecb0"
 }

package/src/createTheme.ts

@@ -1,4 +1,4 @@
-import { BruttalTheme } from './themes/Bruttal/BruttalTheme';
+import { BruttalTheme } from './themes/Bruttal/Bruttal';
 import deepmerge from 'deepmerge';
 import type { Theme } from 'theme-ui';
 

package/src/index.ts

@@ -1,4 +1 @@
 export { createTheme } from './createTheme';
-
-export { BruttalTheme } from './themes/Bruttal/BruttalTheme';
-export { BruttalFonts } from './themes/Bruttal/BruttalFonts';

package/src/themes/Bruttal/Bruttal.ts

@@ -0,0 +1,4 @@
+import './BruttalIcons';
+
+export { BruttalFonts } from './BruttalFonts';
+export { BruttalTheme } from './BruttalTheme';

package/src/themes/Bruttal/BruttalIcons.ts

@@ -0,0 +1,60 @@
+import { addIcon } from '@iconify-icon/react';
+import addFilledIcon from '@iconify/icons-carbon/add-filled';
+import calendarIcon from '@iconify/icons-carbon/calendar';
+import checkboxCheckedFilled from '@iconify/icons-carbon/checkbox-checked-filled';
+import checkboxIcon from '@iconify/icons-carbon/checkbox';
+import checkboxIndeterminateFilledIcon from '@iconify/icons-carbon/checkbox-indeterminate-filled';
+import chevronDownIcon from '@iconify/icons-carbon/chevron-down';
+import chevronLeftIcon from '@iconify/icons-carbon/chevron-left';
+import chevronRightIcon from '@iconify/icons-carbon/chevron-right';
+import chevronUpIcon from '@iconify/icons-carbon/chevron-up';
+import closeFilledIcon from '@iconify/icons-carbon/close-filled';
+import copyIcon from '@iconify/icons-carbon/copy';
+import errorFilledIcon from '@iconify/icons-carbon/error-filled';
+import informationFilledIcon from '@iconify/icons-carbon/information-filled';
+import pasteIcon from '@iconify/icons-carbon/paste';
+import radioButtonCheckedIcon from '@iconify/icons-carbon/radio-button-checked';
+import radioButtonIcon from '@iconify/icons-carbon/radio-button';
+import renewIcon from '@iconify/icons-carbon/renew';
+import timeIcon from '@iconify/icons-carbon/time';
+import trashCanIcon from '@iconify/icons-carbon/trash-can';
+import userAvatarFilledAltIcon from '@iconify/icons-carbon/user-avatar-filled-alt';
+import viewFilledIcon from '@iconify/icons-carbon/view-filled';
+import viewOffFilledIcon from '@iconify/icons-carbon/view-off-filled';
+import warningFilledIcon from '@iconify/icons-carbon/warning-filled';
+import type { IconifyIcon } from '@iconify/types';
+
+const replicateIcon: IconifyIcon = {
+  body: `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M42 15V42H15V15H42ZM42 12H15C14.2044 12 13.4413 12.3161 12.8787 12.8787C12.3161 13.4413 12 14.2044 12 15V42C12 42.7956 12.3161 43.5587 12.8787 44.1213C13.4413 44.6839 14.2044 45 15 45H42C42.7956 45 43.5587 44.6839 44.1213 44.1213C44.6839 43.5587 45 42.7956 45 42V15C45 14.2044 44.6839 13.4413 44.1213 12.8787C43.5587 12.3161 42.7956 12 42 12Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3 5.76389C3 4.23744 4.26071 3 5.81588 3H29V5.57963H5.81588C5.71221 5.57963 5.62816 5.66213 5.62816 5.76389V28.994C5.62816 29.0957 5.71221 29.1782 5.81588 29.1782H22.2607L18.7784 25.7602L20.6368 23.9361L27.2916 30.4681L20.6368 37L18.7784 35.1759L22.2607 31.7579H5.81588C4.26071 31.7579 3 30.5204 3 28.994V5.76389Z" fill="currentColor"/>
+  </svg>`,
+  width: 48,
+  height: 48,
+};
+
+addIcon('add', addFilledIcon);
+addIcon('avatar', userAvatarFilledAltIcon);
+addIcon('calendar', calendarIcon);
+addIcon('checkbox-checked', checkboxCheckedFilled);
+addIcon('checkbox-indeterminate', checkboxIndeterminateFilledIcon);
+addIcon('checkbox-unchecked', checkboxIcon);
+addIcon('close', closeFilledIcon);
+addIcon('copy', copyIcon);
+addIcon('delete', trashCanIcon);
+addIcon('error', errorFilledIcon);
+addIcon('info', informationFilledIcon);
+addIcon('paste', pasteIcon);
+addIcon('picker-down', chevronDownIcon);
+addIcon('picker-up', chevronUpIcon);
+addIcon('picker-left', chevronLeftIcon);
+addIcon('picker-right', chevronRightIcon);
+addIcon('radio-not-selected', radioButtonIcon);
+addIcon('radio-selected', radioButtonCheckedIcon);
+addIcon('refresh', renewIcon);
+addIcon('replicate', replicateIcon);
+addIcon('small-close', closeFilledIcon);
+addIcon('time', timeIcon);
+addIcon('view-off', viewOffFilledIcon);
+addIcon('view-on', viewFilledIcon);
+addIcon('warning', warningFilledIcon);