@expressive-code/plugin-frames - npm Package Compare versions

Comparing version 0.23.0 to 0.24.0

dist/index.d.ts

 import { StyleSettings, PluginTexts, ExpressiveCodePlugin, AttachedPluginData } from '@expressive-code/core';
 
-declare const framesStyleSettings: StyleSettings<"shadowColor" | "frameBoxShadowCssValue" | "editorActiveTabBackground" | "editorActiveTabForeground" | "editorActiveTabBorder" | "editorActiveTabBorderTop" | "editorActiveTabBorderBottom" | "editorActiveTabMarginInlineStart" | "editorActiveTabMarginBlockStart" | "editorTabBorderRadius" | "editorTabBarBackground" | "editorTabBarBorderColor" | "editorTabBarBorderBottom" | "editorBackground" | "terminalTitlebarDotsForeground" | "terminalTitlebarDotsOpacity" | "terminalTitlebarBackground" | "terminalTitlebarForeground" | "terminalTitlebarBorderBottom" | "terminalBackground" | "inlineButtonBackground" | "inlineButtonBackgroundIdleOpacity" | "inlineButtonBackgroundHoverOrFocusOpacity" | "inlineButtonBackgroundActiveOpacity" | "inlineButtonForeground" | "inlineButtonBorder" | "inlineButtonBorderOpacity" | "tooltipSuccessBackground" | "tooltipSuccessForeground">;
+declare const framesStyleSettings: StyleSettings<"shadowColor" | "frameBoxShadowCssValue" | "editorActiveTabBackground" | "editorActiveTabForeground" | "editorActiveTabBorder" | "editorActiveTabHighlightHeight" | "editorActiveTabBorderTop" | "editorActiveTabBorderBottom" | "editorActiveTabMarginInlineStart" | "editorActiveTabMarginBlockStart" | "editorTabBorderRadius" | "editorTabBarBackground" | "editorTabBarBorderColor" | "editorTabBarBorderBottom" | "editorBackground" | "terminalTitlebarDotsForeground" | "terminalTitlebarDotsOpacity" | "terminalTitlebarBackground" | "terminalTitlebarForeground" | "terminalTitlebarBorderBottom" | "terminalBackground" | "inlineButtonBackground" | "inlineButtonBackgroundIdleOpacity" | "inlineButtonBackgroundHoverOrFocusOpacity" | "inlineButtonBackgroundActiveOpacity" | "inlineButtonForeground" | "inlineButtonBorder" | "inlineButtonBorderOpacity" | "tooltipSuccessBackground" | "tooltipSuccessForeground">;
 declare module '@expressive-code/core' {
@@ -5,0 +5,0 @@ interface StyleOverrides {

dist/index.js

@@ -13,2 +13,3 @@ // src/index.ts
   editorActiveTabBorder: "transparent",
+  editorActiveTabHighlightHeight: ({ coreStyles }) => coreStyles.borderWidth,
   editorActiveTabBorderTop: ({ theme }) => theme.colors["tab.activeBorderTop"],
@@ -39,7 +40,7 @@ editorActiveTabBorderBottom: ({ theme }) => theme.colors["tab.activeBorder"],
 });
-function getFramesBaseStyles(theme, coreStyles, options) {
+function getFramesBaseStyles(theme, coreStyles, styleOverrides, options) {
   const framesStyles = framesStyleSettings.resolve({
     theme,
     coreStyles,
-    styleOverrides: options.styleOverrides,
+    styleOverrides,
     themeStyleOverrides: theme.styleOverrides.frames
@@ -66,6 +67,10 @@ });
   if (framesStyles.editorActiveTabBorderTop) {
-    activeTabBackgrounds.push(`linear-gradient(to bottom, ${framesStyles.editorActiveTabBorderTop} ${coreStyles.borderWidth}, transparent ${coreStyles.borderWidth})`);
+    activeTabBackgrounds.push(
+      `linear-gradient(to bottom, ${framesStyles.editorActiveTabBorderTop} ${framesStyles.editorActiveTabHighlightHeight}, transparent ${framesStyles.editorActiveTabHighlightHeight})`
+    );
   }
   if (framesStyles.editorActiveTabBorderBottom) {
-    activeTabBackgrounds.push(`linear-gradient(to top, ${framesStyles.editorActiveTabBorderBottom} ${coreStyles.borderWidth}, transparent ${coreStyles.borderWidth})`);
+    activeTabBackgrounds.push(
+      `linear-gradient(to top, ${framesStyles.editorActiveTabBorderBottom} ${framesStyles.editorActiveTabHighlightHeight}, transparent ${framesStyles.editorActiveTabHighlightHeight})`
+    );
   }
@@ -78,2 +83,6 @@ if (activeTabBackgrounds.length) {
   const activeTabBackground = activeTabBackgrounds.join(",");
+  const tabBarBackground = [
+    `linear-gradient(to top, ${framesStyles.editorTabBarBorderBottom} ${coreStyles.borderWidth}, transparent ${coreStyles.borderWidth})`,
+    `linear-gradient(${framesStyles.editorTabBarBackground}, ${framesStyles.editorTabBarBackground})`
+  ].join(",");
   const frameStyles = `.frame {
@@ -84,2 +93,3 @@ all: unset;
 		--header-border-radius: calc(${coreStyles.borderRadius} + ${coreStyles.borderWidth});
+		--tab-border-radius: calc(${framesStyles.editorTabBorderRadius} + ${coreStyles.borderWidth});
 		--button-spacing: 0.4rem;
@@ -95,4 +105,2 @@ --code-background: ${framesStyles.editorBackground};
 
-			border: ${coreStyles.borderWidth} solid ${coreStyles.borderColor};
-			border-bottom: none;
 			border-radius: var(--header-border-radius) var(--header-border-radius) 0 0;
@@ -104,4 +112,2 @@ }
 		&.is-terminal {
-			--button-spacing: 2.4rem;
-
 			& pre, & code {
@@ -121,2 +127,4 @@ border-top: none;
 		&.has-title:not(.is-terminal) {
+			--button-spacing: calc(1.9rem + 2 * (${coreStyles.uiPaddingBlock} + ${framesStyles.editorActiveTabHighlightHeight}));
+
 			/* Active editor tab */
@@ -130,5 +138,5 @@ & .title {
 				margin-block-start: ${framesStyles.editorActiveTabMarginBlockStart};
-				padding: ${coreStyles.uiPaddingBlock} ${coreStyles.uiPaddingInline};
-				border-radius: ${framesStyles.editorTabBorderRadius} ${framesStyles.editorTabBorderRadius} 0 0;
+				padding: calc(${coreStyles.uiPaddingBlock} + ${framesStyles.editorActiveTabHighlightHeight}) ${coreStyles.uiPaddingInline};
 				border: ${coreStyles.borderWidth} solid ${framesStyles.editorActiveTabBorder};
+				border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0;
 				border-bottom: none;
@@ -139,16 +147,16 @@ }
 			& .header {
-				border-color: ${framesStyles.editorTabBarBorderColor};
 				display: flex;
-				background: ${framesStyles.editorTabBarBackground};
-				background-clip: padding-box;
-				&::before {
-					padding-inline-start: ${framesStyles.editorActiveTabMarginInlineStart};
-				}
+
+				background: ${tabBarBackground};
+				background-repeat: no-repeat;
+
+				padding-inline-start: ${framesStyles.editorActiveTabMarginInlineStart};
+
 				&::after {
-					flex-grow: 1;
-				}
-				&::before,
-				&::after {
 					content: '';
-					border-bottom: ${coreStyles.borderWidth} solid ${framesStyles.editorTabBarBorderBottom};
+					position: absolute;
+					inset: 0;
+					border: ${coreStyles.borderWidth} solid ${framesStyles.editorTabBarBorderColor};
+					border-radius: inherit;
+					border-bottom: none;
 				}
@@ -160,2 +168,3 @@ }
 		&.is-terminal {
+			--button-spacing: calc(1.9rem + ${coreStyles.borderWidth} + 2 * ${coreStyles.uiPaddingBlock});
 			--code-background: ${framesStyles.terminalBackground};
@@ -169,2 +178,3 @@
 				padding-block: ${coreStyles.uiPaddingBlock};
+				padding-block-end: calc(${coreStyles.uiPaddingBlock} + ${coreStyles.borderWidth});
 				position: relative;
@@ -177,3 +187,4 @@
 				background: ${framesStyles.terminalTitlebarBackground};
-				background-clip: padding-box;
+				border: ${coreStyles.borderWidth} solid ${coreStyles.borderColor};
+				border-bottom: none;
 
@@ -208,3 +219,2 @@ /* Display three dots at the left side of the header */
 			background: var(--code-background);
-			background-clip: padding-box;
 		}
@@ -583,3 +593,3 @@ }`;
     name: "Frames",
-    baseStyles: ({ theme, coreStyles }) => getFramesBaseStyles(theme, coreStyles, options),
+    baseStyles: ({ theme, coreStyles, styleOverrides }) => getFramesBaseStyles(theme, coreStyles, { ...styleOverrides.frames, ...options.styleOverrides }, options),
     jsModules: options.showCopyToClipboardButton ? [getCopyJsModule(`.expressive-code .copy button`)] : void 0,
@@ -586,0 +596,0 @@ hooks: {

package.json

 {
   "name": "@expressive-code/plugin-frames",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Frames plugin for Expressive Code. Wraps code blocks in a styled editor or terminal frame with support for titles, multiple tabs and more.",
@@ -26,3 +26,3 @@ "keywords": [],
   "dependencies": {
-    "@expressive-code/core": "^0.23.0",
+    "@expressive-code/core": "^0.24.0",
     "hastscript": "^7.2.0"
@@ -33,4 +33,4 @@ },
     "hast-util-to-html": "^8.0.4",
-    "@expressive-code/plugin-shiki": "^0.23.0",
-    "@internal/test-utils": "^0.2.16"
+    "@expressive-code/plugin-shiki": "^0.24.0",
+    "@internal/test-utils": "^0.2.17"
   },
@@ -37,0 +37,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

180147

increased by2.74%

Lines of code

2045

increased by1.04%

Dependency changes

• + Added@expressive-code/core@0.24.0(transitive)

• - Removed@expressive-code/core@0.23.0(transitive)

• Updated@expressive-code/core@^0.24.0