@n3/css-base - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/esm/themes/theme-1/index.js

@@ -30,2 +30,3 @@ import {
   PROGRESS_DEFAULT: () => PROGRESS_DEFAULT,
+  SIDEBAR_LINK_BACKGROUND_COLOR: () => SIDEBAR_LINK_BACKGROUND_COLOR,
   SUCCESS_BACKGROUND: () => SUCCESS_BACKGROUND,
@@ -60,2 +61,3 @@ SUCCESS_DEFAULT: () => SUCCESS_DEFAULT,
 var TH_COLOR = "#78909c";
+var SIDEBAR_LINK_BACKGROUND_COLOR = "#dde5f2";
 
@@ -227,37 +229,2 @@ // src/themes/theme-1/dropdown.ts
 
-// src/themes/theme-1/input.ts
-var input_exports = {};
-__export(input_exports, {
-  BG_COLOR: () => BG_COLOR,
-  BG_COLOR_DISABLED: () => BG_COLOR_DISABLED,
-  BG_COLOR_ERROR: () => BG_COLOR_ERROR,
-  BG_COLOR_FOCUS: () => BG_COLOR_FOCUS,
-  BG_COLOR_WARNING: () => BG_COLOR_WARNING,
-  BORDER_COLOR: () => BORDER_COLOR,
-  BORDER_COLOR_ERROR: () => BORDER_COLOR_ERROR,
-  BORDER_COLOR_FOCUS: () => BORDER_COLOR_FOCUS,
-  BORDER_COLOR_HOVER: () => BORDER_COLOR_HOVER,
-  BORDER_COLOR_WARNING: () => BORDER_COLOR_WARNING,
-  BORDER_RADIUS: () => BORDER_RADIUS,
-  HEIGHT: () => HEIGHT,
-  HEIGHT_SMALL: () => HEIGHT_SMALL,
-  PLACEHOLDER_COLOR: () => PLACEHOLDER_COLOR,
-  TEXT_COLOR: () => TEXT_COLOR
-});
-var BORDER_COLOR = NEUTRAL_INACTIVE;
-var BORDER_COLOR_HOVER = NEUTRAL_INPUT;
-var BORDER_COLOR_FOCUS = ACTION_DEFAULT;
-var BORDER_COLOR_WARNING = PROGRESS_DEFAULT;
-var BORDER_COLOR_ERROR = ERROR_DEFAULT;
-var BORDER_RADIUS = 2;
-var BG_COLOR = NEUTRAL_WHITE;
-var BG_COLOR_WARNING = PROGRESS_BACKGROUND;
-var BG_COLOR_ERROR = ERROR_BACKGROUND;
-var BG_COLOR_FOCUS = NEUTRAL_WHITE;
-var BG_COLOR_DISABLED = NEUTRAL_BACKGROUND;
-var PLACEHOLDER_COLOR = NEUTRAL_INPUT;
-var TEXT_COLOR = NEUTRAL_DEFAULT;
-var HEIGHT = 40;
-var HEIGHT_SMALL = 32;
-
 // src/themes/theme-1/layout.ts
@@ -285,3 +252,3 @@ var layout_exports = {};
   breadcrumbs: {
-    FONT: DEFAULT,
+    FONT: "DEFAULT",
     HOME_ICON: /* @__PURE__ */ jsx(
@@ -316,3 +283,9 @@ FontAwesomeIcon,
     BACKGROUND_COLOR: "NEUTRAL_WHITE",
-    BORDER_BOTTOM: `1px solid ${NEUTRAL_INACTIVE}`
+    BORDER_BOTTOM: `1px solid ${NEUTRAL_INACTIVE}`,
+    CONTENT_OFFSET_LEFT: 30,
+    CONTENT_OFFSET_RIGHT: 30,
+    LOGO_OFFSET_LEFT: 15,
+    LOGO_OFFSET_LEFT_COLLAPSED: 5,
+    LOGO_OFFSET_RIGHT: 15,
+    LOGO_OFFSET_RIGHT_COLLAPSED: 5
   },
@@ -324,3 +297,19 @@ global: {
   indents: indents_exports,
-  input: input_exports,
+  input: {
+    BORDER_COLOR: "NEUTRAL_INACTIVE",
+    BORDER_COLOR_HOVER: "NEUTRAL_INPUT",
+    BORDER_COLOR_FOCUS: "ACTION_DEFAULT",
+    BORDER_COLOR_WARNING: "PROGRESS_DEFAULT",
+    BORDER_COLOR_ERROR: "ERROR_DEFAULT",
+    BORDER_RADIUS: 2,
+    BG_COLOR: "NEUTRAL_WHITE",
+    BG_COLOR_WARNING: "PROGRESS_BACKGROUND",
+    BG_COLOR_ERROR: "ERROR_BACKGROUND",
+    BG_COLOR_FOCUS: "NEUTRAL_WHITE",
+    BG_COLOR_DISABLED: "NEUTRAL_BACKGROUND",
+    PLACEHOLDER_COLOR: "NEUTRAL_INPUT",
+    TEXT_COLOR: "NEUTRAL_DEFAULT",
+    HEIGHT: 40,
+    HEIGHT_SMALL: 32
+  },
   layout: layout_exports,
@@ -338,10 +327,17 @@ modal: {
   },
+  pageTitle: {
+    ACTIONS_GAP: 20,
+    STATUS_GAP: 20,
+    STATUS_MARGIN_TOP: 10
+  },
   sidebar: {
-    ACTIVE_GROUP_LINK_BACKGROUND_COLOR: "#dde5f2",
-    ACTIVE_FIRST_LEVEL_LINK_BACKGROUND_COLOR: "#dde5f2",
-    ACTIVE_GROUP_BACKGROUND_COLOR: NEUTRAL_BACKGROUND,
-    INACTIVE_GROUP_BACKGROUND_COLOR: NEUTRAL_BACKGROUND,
+    ACTIVE_GROUP_LINK_BACKGROUND_COLOR: "SIDEBAR_LINK_BACKGROUND_COLOR",
+    ACTIVE_FIRST_LEVEL_LINK_BACKGROUND_COLOR: "SIDEBAR_LINK_BACKGROUND_COLOR",
+    ACTIVE_GROUP_BACKGROUND_COLOR: "NEUTRAL_BACKGROUND",
+    INACTIVE_GROUP_BACKGROUND_COLOR: "NEUTRAL_BACKGROUND",
     FIRST_LEVEL_MARGIN_BOTTOM: 5,
-    ICON_COLOR_OPENED: NEUTRAL_DEFAULT,
-    ICON_COLOR_CLOSED: NEUTRAL_DEFAULT
+    ICON_COLOR_OPENED_ACTIVE: "ACTION_DEFAULT",
+    ICON_COLOR_OPENED_INACTIVE: "NEUTRAL_DEFAULT",
+    ICON_COLOR_CLOSED_ACTIVE: "ACTION_DEFAULT",
+    ICON_COLOR_CLOSED_INACTIVE: "NEUTRAL_DEFAULT"
   },
@@ -353,2 +349,4 @@ table: {
     TH_BACKGROUND_COLOR: "NEUTRAL_WHITE",
+    TH_BACKGROUND_COLOR_HOVER: "NEUTRAL_BACKGROUND",
+    TH_FONT: "LABEL",
     TH_SIDE_BORDER_WIDTH: 0,
@@ -372,8 +370,14 @@ TD_PADDING: "15px 20px",
     ICON_ACTIVE_COLOR: "NEUTRAL_DEFAULT",
-    ICON_INACTIVE_COLOR: "NEUTRAL_SECONDARY"
+    ICON_INACTIVE_COLOR: "NEUTRAL_SECONDARY",
+    BORDER_BOTTOM_WIDTH: 1,
+    GAP: 30
   },
   tag: {
+    FONT_DEFAULT: "LABEL",
+    FONT_SMALL: "DEFAULT",
     BORDER_RADIUS: 2,
     SMALL_DOT_WIDTH: 12,
-    SMALL_DOT_OFFSET: 4
+    SMALL_DOT_OFFSET: 4,
+    SIDE_PADDING: 4,
+    HEIGHT: 20
   }
@@ -380,0 +384,0 @@ };

dist/esm/themes/theme-2/index.js

@@ -220,37 +220,2 @@ import {
 
-// src/themes/theme-2/input.ts
-var input_exports = {};
-__export(input_exports, {
-  BG_COLOR: () => BG_COLOR,
-  BG_COLOR_DISABLED: () => BG_COLOR_DISABLED,
-  BG_COLOR_ERROR: () => BG_COLOR_ERROR,
-  BG_COLOR_FOCUS: () => BG_COLOR_FOCUS,
-  BG_COLOR_WARNING: () => BG_COLOR_WARNING,
-  BORDER_COLOR: () => BORDER_COLOR,
-  BORDER_COLOR_ERROR: () => BORDER_COLOR_ERROR,
-  BORDER_COLOR_FOCUS: () => BORDER_COLOR_FOCUS,
-  BORDER_COLOR_HOVER: () => BORDER_COLOR_HOVER,
-  BORDER_COLOR_WARNING: () => BORDER_COLOR_WARNING,
-  BORDER_RADIUS: () => BORDER_RADIUS,
-  HEIGHT: () => HEIGHT,
-  HEIGHT_SMALL: () => HEIGHT_SMALL,
-  PLACEHOLDER_COLOR: () => PLACEHOLDER_COLOR,
-  TEXT_COLOR: () => TEXT_COLOR
-});
-var BORDER_COLOR = NEUTRAL_INPUT;
-var BORDER_COLOR_HOVER = ACTION_DEFAULT;
-var BORDER_COLOR_FOCUS = ACTION_PRESSED;
-var BORDER_COLOR_WARNING = PROGRESS_DEFAULT;
-var BORDER_COLOR_ERROR = ERROR_DEFAULT;
-var BORDER_RADIUS = 4;
-var BG_COLOR = NEUTRAL_WHITE;
-var BG_COLOR_WARNING = PROGRESS_BACKGROUND;
-var BG_COLOR_ERROR = ERROR_BACKGROUND;
-var BG_COLOR_FOCUS = NEUTRAL_WHITE;
-var BG_COLOR_DISABLED = NEUTRAL_BACKGROUND;
-var PLACEHOLDER_COLOR = NEUTRAL_INPUT;
-var TEXT_COLOR = NEUTRAL_DEFAULT;
-var HEIGHT = 40;
-var HEIGHT_SMALL = 32;
-
 // src/themes/theme-2/layout.ts
@@ -278,3 +243,3 @@ var layout_exports = {};
   breadcrumbs: {
-    FONT: CAPTION,
+    FONT: "CAPTION",
     HOME_ICON: /* @__PURE__ */ jsx(
@@ -308,3 +273,9 @@ FontAwesomeIcon,
   header: {
-    BACKGROUND_COLOR: "NEUTRAL_BACKGROUND"
+    BACKGROUND_COLOR: "NEUTRAL_BACKGROUND",
+    CONTENT_OFFSET_LEFT: 32,
+    CONTENT_OFFSET_RIGHT: 32,
+    LOGO_OFFSET_LEFT: 32,
+    LOGO_OFFSET_LEFT_COLLAPSED: 8,
+    LOGO_OFFSET_RIGHT: 16,
+    LOGO_OFFSET_RIGHT_COLLAPSED: 8
   },
@@ -316,3 +287,19 @@ global: {
   indents: indents_exports,
-  input: input_exports,
+  input: {
+    BORDER_COLOR: "NEUTRAL_INPUT",
+    BORDER_COLOR_HOVER: "ACTION_DEFAULT",
+    BORDER_COLOR_FOCUS: "ACTION_PRESSED",
+    BORDER_COLOR_WARNING: "PROGRESS_DEFAULT",
+    BORDER_COLOR_ERROR: "ERROR_DEFAULT",
+    BORDER_RADIUS: 4,
+    BG_COLOR: "NEUTRAL_WHITE",
+    BG_COLOR_WARNING: "PROGRESS_BACKGROUND",
+    BG_COLOR_ERROR: "ERROR_BACKGROUND",
+    BG_COLOR_FOCUS: "NEUTRAL_WHITE",
+    BG_COLOR_DISABLED: "NEUTRAL_BACKGROUND",
+    PLACEHOLDER_COLOR: "NEUTRAL_INPUT",
+    TEXT_COLOR: "NEUTRAL_DEFAULT",
+    HEIGHT: 40,
+    HEIGHT_SMALL: 32
+  },
   layout: layout_exports,
@@ -329,10 +316,17 @@ modal: {
   },
+  pageTitle: {
+    ACTIONS_GAP: 32,
+    STATUS_GAP: 32,
+    STATUS_MARGIN_TOP: 10
+  },
   sidebar: {
-    ACTIVE_GROUP_LINK_BACKGROUND_COLOR: NEUTRAL_INACTIVE,
-    ACTIVE_FIRST_LEVEL_LINK_BACKGROUND_COLOR: NEUTRAL_BACKGROUND,
-    ACTIVE_GROUP_BORDER_TOP_COLOR: NEUTRAL_INACTIVE,
-    ACTIVE_GROUP_BACKGROUND_COLOR: NEUTRAL_BACKGROUND,
+    ACTIVE_GROUP_LINK_BACKGROUND_COLOR: "NEUTRAL_INACTIVE",
+    ACTIVE_FIRST_LEVEL_LINK_BACKGROUND_COLOR: "NEUTRAL_BACKGROUND",
+    ACTIVE_GROUP_BORDER_TOP_COLOR: "NEUTRAL_INACTIVE",
+    ACTIVE_GROUP_BACKGROUND_COLOR: "NEUTRAL_BACKGROUND",
     FIRST_LEVEL_MARGIN_BOTTOM: 0,
-    ICON_COLOR_OPENED: ACTION_INACTIVE,
-    ICON_COLOR_CLOSED: ACTION_DEFAULT
+    ICON_COLOR_OPENED_ACTIVE: "ACTION_DEFAULT",
+    ICON_COLOR_OPENED_INACTIVE: "ACTION_INACTIVE",
+    ICON_COLOR_CLOSED_ACTIVE: "ACTION_DEFAULT",
+    ICON_COLOR_CLOSED_INACTIVE: "NEUTRAL_INACTIVE"
   },
@@ -344,2 +338,4 @@ table: {
     TH_BACKGROUND_COLOR: "NEUTRAL_WHITE",
+    TH_BACKGROUND_COLOR_HOVER: "NEUTRAL_BACKGROUND",
+    TH_FONT: "LABEL",
     TH_SIDE_BORDER_WIDTH: 1,
@@ -363,8 +359,14 @@ TD_PADDING: "16px 8px",
     ICON_ACTIVE_COLOR: "ACTION_DEFAULT",
-    ICON_INACTIVE_COLOR: "NEUTRAL_INPUT"
+    ICON_INACTIVE_COLOR: "NEUTRAL_INPUT",
+    BORDER_BOTTOM_WIDTH: 1,
+    GAP: 32
   },
   tag: {
+    FONT_DEFAULT: "LABEL",
+    FONT_SMALL: "DEFAULT",
     BORDER_RADIUS: 4,
     SMALL_DOT_WIDTH: 12,
-    SMALL_DOT_OFFSET: 4
+    SMALL_DOT_OFFSET: 4,
+    SIDE_PADDING: 8,
+    HEIGHT: 20
   }
@@ -371,0 +373,0 @@ };

dist/index.d.ts

@@ -1,3 +0,4 @@
-import { T as ThemeType } from './types-36caaa14.js';
+import { T as ThemeType } from './types-0db5ed74.js';
 import 'react';
+import 'csstype';
 
@@ -4,0 +5,0 @@ declare const getTheme: () => ThemeType;

dist/themes/theme-1/index.d.ts

@@ -1,3 +0,4 @@
-import { T as ThemeType } from '../../types-36caaa14.js';
+import { T as ThemeType } from '../../types-0db5ed74.js';
 import 'react';
+import 'csstype';
 
@@ -4,0 +5,0 @@ declare const theme: ThemeType;

dist/themes/theme-1/index.js

@@ -50,2 +50,3 @@ "use strict";
   PROGRESS_DEFAULT: () => PROGRESS_DEFAULT,
+  SIDEBAR_LINK_BACKGROUND_COLOR: () => SIDEBAR_LINK_BACKGROUND_COLOR,
   SUCCESS_BACKGROUND: () => SUCCESS_BACKGROUND,
@@ -80,2 +81,3 @@ SUCCESS_DEFAULT: () => SUCCESS_DEFAULT,
 var TH_COLOR = "#78909c";
+var SIDEBAR_LINK_BACKGROUND_COLOR = "#dde5f2";
 
@@ -247,37 +249,2 @@ // src/themes/theme-1/dropdown.ts
 
-// src/themes/theme-1/input.ts
-var input_exports = {};
-__export(input_exports, {
-  BG_COLOR: () => BG_COLOR,
-  BG_COLOR_DISABLED: () => BG_COLOR_DISABLED,
-  BG_COLOR_ERROR: () => BG_COLOR_ERROR,
-  BG_COLOR_FOCUS: () => BG_COLOR_FOCUS,
-  BG_COLOR_WARNING: () => BG_COLOR_WARNING,
-  BORDER_COLOR: () => BORDER_COLOR,
-  BORDER_COLOR_ERROR: () => BORDER_COLOR_ERROR,
-  BORDER_COLOR_FOCUS: () => BORDER_COLOR_FOCUS,
-  BORDER_COLOR_HOVER: () => BORDER_COLOR_HOVER,
-  BORDER_COLOR_WARNING: () => BORDER_COLOR_WARNING,
-  BORDER_RADIUS: () => BORDER_RADIUS,
-  HEIGHT: () => HEIGHT,
-  HEIGHT_SMALL: () => HEIGHT_SMALL,
-  PLACEHOLDER_COLOR: () => PLACEHOLDER_COLOR,
-  TEXT_COLOR: () => TEXT_COLOR
-});
-var BORDER_COLOR = NEUTRAL_INACTIVE;
-var BORDER_COLOR_HOVER = NEUTRAL_INPUT;
-var BORDER_COLOR_FOCUS = ACTION_DEFAULT;
-var BORDER_COLOR_WARNING = PROGRESS_DEFAULT;
-var BORDER_COLOR_ERROR = ERROR_DEFAULT;
-var BORDER_RADIUS = 2;
-var BG_COLOR = NEUTRAL_WHITE;
-var BG_COLOR_WARNING = PROGRESS_BACKGROUND;
-var BG_COLOR_ERROR = ERROR_BACKGROUND;
-var BG_COLOR_FOCUS = NEUTRAL_WHITE;
-var BG_COLOR_DISABLED = NEUTRAL_BACKGROUND;
-var PLACEHOLDER_COLOR = NEUTRAL_INPUT;
-var TEXT_COLOR = NEUTRAL_DEFAULT;
-var HEIGHT = 40;
-var HEIGHT_SMALL = 32;
-
 // src/themes/theme-1/layout.ts
@@ -305,3 +272,3 @@ var layout_exports = {};
   breadcrumbs: {
-    FONT: DEFAULT,
+    FONT: "DEFAULT",
     HOME_ICON: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -336,3 +303,9 @@ import_react_fontawesome.FontAwesomeIcon,
     BACKGROUND_COLOR: "NEUTRAL_WHITE",
-    BORDER_BOTTOM: `1px solid ${NEUTRAL_INACTIVE}`
+    BORDER_BOTTOM: `1px solid ${NEUTRAL_INACTIVE}`,
+    CONTENT_OFFSET_LEFT: 30,
+    CONTENT_OFFSET_RIGHT: 30,
+    LOGO_OFFSET_LEFT: 15,
+    LOGO_OFFSET_LEFT_COLLAPSED: 5,
+    LOGO_OFFSET_RIGHT: 15,
+    LOGO_OFFSET_RIGHT_COLLAPSED: 5
   },
@@ -344,3 +317,19 @@ global: {
   indents: indents_exports,
-  input: input_exports,
+  input: {
+    BORDER_COLOR: "NEUTRAL_INACTIVE",
+    BORDER_COLOR_HOVER: "NEUTRAL_INPUT",
+    BORDER_COLOR_FOCUS: "ACTION_DEFAULT",
+    BORDER_COLOR_WARNING: "PROGRESS_DEFAULT",
+    BORDER_COLOR_ERROR: "ERROR_DEFAULT",
+    BORDER_RADIUS: 2,
+    BG_COLOR: "NEUTRAL_WHITE",
+    BG_COLOR_WARNING: "PROGRESS_BACKGROUND",
+    BG_COLOR_ERROR: "ERROR_BACKGROUND",
+    BG_COLOR_FOCUS: "NEUTRAL_WHITE",
+    BG_COLOR_DISABLED: "NEUTRAL_BACKGROUND",
+    PLACEHOLDER_COLOR: "NEUTRAL_INPUT",
+    TEXT_COLOR: "NEUTRAL_DEFAULT",
+    HEIGHT: 40,
+    HEIGHT_SMALL: 32
+  },
   layout: layout_exports,
@@ -358,10 +347,17 @@ modal: {
   },
+  pageTitle: {
+    ACTIONS_GAP: 20,
+    STATUS_GAP: 20,
+    STATUS_MARGIN_TOP: 10
+  },
   sidebar: {
-    ACTIVE_GROUP_LINK_BACKGROUND_COLOR: "#dde5f2",
-    ACTIVE_FIRST_LEVEL_LINK_BACKGROUND_COLOR: "#dde5f2",
-    ACTIVE_GROUP_BACKGROUND_COLOR: NEUTRAL_BACKGROUND,
-    INACTIVE_GROUP_BACKGROUND_COLOR: NEUTRAL_BACKGROUND,
+    ACTIVE_GROUP_LINK_BACKGROUND_COLOR: "SIDEBAR_LINK_BACKGROUND_COLOR",
+    ACTIVE_FIRST_LEVEL_LINK_BACKGROUND_COLOR: "SIDEBAR_LINK_BACKGROUND_COLOR",
+    ACTIVE_GROUP_BACKGROUND_COLOR: "NEUTRAL_BACKGROUND",
+    INACTIVE_GROUP_BACKGROUND_COLOR: "NEUTRAL_BACKGROUND",
     FIRST_LEVEL_MARGIN_BOTTOM: 5,
-    ICON_COLOR_OPENED: NEUTRAL_DEFAULT,
-    ICON_COLOR_CLOSED: NEUTRAL_DEFAULT
+    ICON_COLOR_OPENED_ACTIVE: "ACTION_DEFAULT",
+    ICON_COLOR_OPENED_INACTIVE: "NEUTRAL_DEFAULT",
+    ICON_COLOR_CLOSED_ACTIVE: "ACTION_DEFAULT",
+    ICON_COLOR_CLOSED_INACTIVE: "NEUTRAL_DEFAULT"
   },
@@ -373,2 +369,4 @@ table: {
     TH_BACKGROUND_COLOR: "NEUTRAL_WHITE",
+    TH_BACKGROUND_COLOR_HOVER: "NEUTRAL_BACKGROUND",
+    TH_FONT: "LABEL",
     TH_SIDE_BORDER_WIDTH: 0,
@@ -392,8 +390,14 @@ TD_PADDING: "15px 20px",
     ICON_ACTIVE_COLOR: "NEUTRAL_DEFAULT",
-    ICON_INACTIVE_COLOR: "NEUTRAL_SECONDARY"
+    ICON_INACTIVE_COLOR: "NEUTRAL_SECONDARY",
+    BORDER_BOTTOM_WIDTH: 1,
+    GAP: 30
   },
   tag: {
+    FONT_DEFAULT: "LABEL",
+    FONT_SMALL: "DEFAULT",
     BORDER_RADIUS: 2,
     SMALL_DOT_WIDTH: 12,
-    SMALL_DOT_OFFSET: 4
+    SMALL_DOT_OFFSET: 4,
+    SIDE_PADDING: 4,
+    HEIGHT: 20
   }
@@ -400,0 +404,0 @@ };

dist/themes/theme-2/index.d.ts

@@ -1,3 +0,4 @@
-import { T as ThemeType } from '../../types-36caaa14.js';
+import { T as ThemeType } from '../../types-0db5ed74.js';
 import 'react';
+import 'csstype';
 
@@ -4,0 +5,0 @@ declare const theme: ThemeType;

dist/themes/theme-2/index.js

@@ -240,37 +240,2 @@ "use strict";
 
-// src/themes/theme-2/input.ts
-var input_exports = {};
-__export(input_exports, {
-  BG_COLOR: () => BG_COLOR,
-  BG_COLOR_DISABLED: () => BG_COLOR_DISABLED,
-  BG_COLOR_ERROR: () => BG_COLOR_ERROR,
-  BG_COLOR_FOCUS: () => BG_COLOR_FOCUS,
-  BG_COLOR_WARNING: () => BG_COLOR_WARNING,
-  BORDER_COLOR: () => BORDER_COLOR,
-  BORDER_COLOR_ERROR: () => BORDER_COLOR_ERROR,
-  BORDER_COLOR_FOCUS: () => BORDER_COLOR_FOCUS,
-  BORDER_COLOR_HOVER: () => BORDER_COLOR_HOVER,
-  BORDER_COLOR_WARNING: () => BORDER_COLOR_WARNING,
-  BORDER_RADIUS: () => BORDER_RADIUS,
-  HEIGHT: () => HEIGHT,
-  HEIGHT_SMALL: () => HEIGHT_SMALL,
-  PLACEHOLDER_COLOR: () => PLACEHOLDER_COLOR,
-  TEXT_COLOR: () => TEXT_COLOR
-});
-var BORDER_COLOR = NEUTRAL_INPUT;
-var BORDER_COLOR_HOVER = ACTION_DEFAULT;
-var BORDER_COLOR_FOCUS = ACTION_PRESSED;
-var BORDER_COLOR_WARNING = PROGRESS_DEFAULT;
-var BORDER_COLOR_ERROR = ERROR_DEFAULT;
-var BORDER_RADIUS = 4;
-var BG_COLOR = NEUTRAL_WHITE;
-var BG_COLOR_WARNING = PROGRESS_BACKGROUND;
-var BG_COLOR_ERROR = ERROR_BACKGROUND;
-var BG_COLOR_FOCUS = NEUTRAL_WHITE;
-var BG_COLOR_DISABLED = NEUTRAL_BACKGROUND;
-var PLACEHOLDER_COLOR = NEUTRAL_INPUT;
-var TEXT_COLOR = NEUTRAL_DEFAULT;
-var HEIGHT = 40;
-var HEIGHT_SMALL = 32;
-
 // src/themes/theme-2/layout.ts
@@ -298,3 +263,3 @@ var layout_exports = {};
   breadcrumbs: {
-    FONT: CAPTION,
+    FONT: "CAPTION",
     HOME_ICON: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -328,3 +293,9 @@ import_react_fontawesome.FontAwesomeIcon,
   header: {
-    BACKGROUND_COLOR: "NEUTRAL_BACKGROUND"
+    BACKGROUND_COLOR: "NEUTRAL_BACKGROUND",
+    CONTENT_OFFSET_LEFT: 32,
+    CONTENT_OFFSET_RIGHT: 32,
+    LOGO_OFFSET_LEFT: 32,
+    LOGO_OFFSET_LEFT_COLLAPSED: 8,
+    LOGO_OFFSET_RIGHT: 16,
+    LOGO_OFFSET_RIGHT_COLLAPSED: 8
   },
@@ -336,3 +307,19 @@ global: {
   indents: indents_exports,
-  input: input_exports,
+  input: {
+    BORDER_COLOR: "NEUTRAL_INPUT",
+    BORDER_COLOR_HOVER: "ACTION_DEFAULT",
+    BORDER_COLOR_FOCUS: "ACTION_PRESSED",
+    BORDER_COLOR_WARNING: "PROGRESS_DEFAULT",
+    BORDER_COLOR_ERROR: "ERROR_DEFAULT",
+    BORDER_RADIUS: 4,
+    BG_COLOR: "NEUTRAL_WHITE",
+    BG_COLOR_WARNING: "PROGRESS_BACKGROUND",
+    BG_COLOR_ERROR: "ERROR_BACKGROUND",
+    BG_COLOR_FOCUS: "NEUTRAL_WHITE",
+    BG_COLOR_DISABLED: "NEUTRAL_BACKGROUND",
+    PLACEHOLDER_COLOR: "NEUTRAL_INPUT",
+    TEXT_COLOR: "NEUTRAL_DEFAULT",
+    HEIGHT: 40,
+    HEIGHT_SMALL: 32
+  },
   layout: layout_exports,
@@ -349,10 +336,17 @@ modal: {
   },
+  pageTitle: {
+    ACTIONS_GAP: 32,
+    STATUS_GAP: 32,
+    STATUS_MARGIN_TOP: 10
+  },
   sidebar: {
-    ACTIVE_GROUP_LINK_BACKGROUND_COLOR: NEUTRAL_INACTIVE,
-    ACTIVE_FIRST_LEVEL_LINK_BACKGROUND_COLOR: NEUTRAL_BACKGROUND,
-    ACTIVE_GROUP_BORDER_TOP_COLOR: NEUTRAL_INACTIVE,
-    ACTIVE_GROUP_BACKGROUND_COLOR: NEUTRAL_BACKGROUND,
+    ACTIVE_GROUP_LINK_BACKGROUND_COLOR: "NEUTRAL_INACTIVE",
+    ACTIVE_FIRST_LEVEL_LINK_BACKGROUND_COLOR: "NEUTRAL_BACKGROUND",
+    ACTIVE_GROUP_BORDER_TOP_COLOR: "NEUTRAL_INACTIVE",
+    ACTIVE_GROUP_BACKGROUND_COLOR: "NEUTRAL_BACKGROUND",
     FIRST_LEVEL_MARGIN_BOTTOM: 0,
-    ICON_COLOR_OPENED: ACTION_INACTIVE,
-    ICON_COLOR_CLOSED: ACTION_DEFAULT
+    ICON_COLOR_OPENED_ACTIVE: "ACTION_DEFAULT",
+    ICON_COLOR_OPENED_INACTIVE: "ACTION_INACTIVE",
+    ICON_COLOR_CLOSED_ACTIVE: "ACTION_DEFAULT",
+    ICON_COLOR_CLOSED_INACTIVE: "NEUTRAL_INACTIVE"
   },
@@ -364,2 +358,4 @@ table: {
     TH_BACKGROUND_COLOR: "NEUTRAL_WHITE",
+    TH_BACKGROUND_COLOR_HOVER: "NEUTRAL_BACKGROUND",
+    TH_FONT: "LABEL",
     TH_SIDE_BORDER_WIDTH: 1,
@@ -383,8 +379,14 @@ TD_PADDING: "16px 8px",
     ICON_ACTIVE_COLOR: "ACTION_DEFAULT",
-    ICON_INACTIVE_COLOR: "NEUTRAL_INPUT"
+    ICON_INACTIVE_COLOR: "NEUTRAL_INPUT",
+    BORDER_BOTTOM_WIDTH: 1,
+    GAP: 32
   },
   tag: {
+    FONT_DEFAULT: "LABEL",
+    FONT_SMALL: "DEFAULT",
     BORDER_RADIUS: 4,
     SMALL_DOT_WIDTH: 12,
-    SMALL_DOT_OFFSET: 4
+    SMALL_DOT_OFFSET: 4,
+    SIDE_PADDING: 8,
+    HEIGHT: 20
   }
@@ -391,0 +393,0 @@ };

package.json

 {
   "name": "@n3/css-base",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "css variables for n3 interfaces",
@@ -52,4 +52,5 @@ "main": "./dist/index.js",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/react-fontawesome": "^0.2.0"
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "csstype": "^3.1.2"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

114660

increased by2.26%

Lines of code

1811

increased by1.34%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Addedcsstype@^3.1.2

• + Addedcsstype@3.1.3(transitive)