@atlaskit/editor-shared-styles 2.13.4 → 3.0.0

package/src/overflow-shadow/overflow-shadow.ts

@@ -2,7 +2,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 
-import { N20 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 export const overflowShadow = ({
@@ -21,50 +20,50 @@ export const overflowShadow = ({
 /* shadow cover left */
   linear-gradient(
     to right,
-    ${token('color.background.neutral', N20)} ${leftCoverWidthResolved},
+    ${token('color.background.neutral')} ${leftCoverWidthResolved},
     transparent ${leftCoverWidthResolved}
   ),
 /* shadow cover background left */
   linear-gradient(
     to right,
-    ${token('elevation.surface.raised', 'transparent')} ${leftCoverWidthResolved},
+    ${token('elevation.surface.raised')} ${leftCoverWidthResolved},
     transparent ${leftCoverWidthResolved}
   ),
 /* shadow cover right */
   linear-gradient(
     to left,
-    ${token('color.background.neutral', N20)} ${rightCoverWidthResolved},
+    ${token('color.background.neutral')} ${rightCoverWidthResolved},
     transparent ${rightCoverWidthResolved}
   ),
 /* shadow cover background right */
   linear-gradient(
     to left,
-    ${token('elevation.surface.raised', 'transparent')} ${rightCoverWidthResolved},
+    ${token('elevation.surface.raised')} ${rightCoverWidthResolved},
     transparent ${rightCoverWidthResolved}
   ),
 /* overflow shadow right spread */
   linear-gradient(
     to left,
-    ${token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)')} 0,
-    ${token('utility.UNSAFE.transparent', 'rgba(99, 114, 130, 0)')}  ${width}
+    ${token('elevation.shadow.overflow.spread')} 0,
+    ${token('utility.UNSAFE.transparent')}  ${width}
   ),
   /* overflow shadow right perimeter */
   linear-gradient(
     to left,
-    ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
-    ${token('utility.UNSAFE.transparent', 'transparent')}  ${width}
+    ${token('elevation.shadow.overflow.perimeter')} 0,
+    ${token('utility.UNSAFE.transparent')}  ${width}
   ),
   /* overflow shadow left spread */
   linear-gradient(
     to right,
-    ${token('elevation.shadow.overflow.spread', 'rgba(9, 30, 66, 0.13)')} 0,
-    ${token('utility.UNSAFE.transparent', 'rgba(99, 114, 130, 0)')}  ${width}
+    ${token('elevation.shadow.overflow.spread')} 0,
+    ${token('utility.UNSAFE.transparent')}  ${width}
   ),
   /* overflow shadow left perimeter */
   linear-gradient(
     to right,
-    ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0,
-    ${token('utility.UNSAFE.transparent', 'transparent')}  ${width}
+    ${token('elevation.shadow.overflow.perimeter')} 0,
+    ${token('utility.UNSAFE.transparent')}  ${width}
   )
 `;
 };

package/src/scrollbar-styles.ts

@@ -13,15 +13,15 @@ export const scrollbarStyles = `
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: ${token('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)')};
+    background-color: ${token('color.background.neutral.subtle')};
   }
 
   &:hover::-webkit-scrollbar-thumb {
-    background-color: ${token('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)')};
+    background-color: ${token('color.background.neutral.bold')};
     border-radius: 8px;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: ${token('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)')};
+    background-color: ${token('color.background.neutral.bold.hovered')};
   }
 `;

package/src/selection/utils.ts

@@ -1,7 +1,6 @@
 import { token } from '@atlaskit/tokens';
 
 import {
-	akEditorSelectedBgColor,
 	akEditorSelectedBorder,
 	akEditorSelectedBorderColor,
 	akEditorSelectedBoxShadow,
@@ -61,7 +60,7 @@ const getSelectionStyle = (style: SelectionStyle): string => {
         border-color: transparent;
         `;
 		case SelectionStyle.Background:
-			return `background-color: ${token('color.background.selected', akEditorSelectedBgColor)};`;
+			return `background-color: ${token('color.background.selected')};`;
 		case SelectionStyle.Blanket:
 			return `
         position: relative;
@@ -80,7 +79,7 @@ const getSelectionStyle = (style: SelectionStyle): string => {
           width: 100%;
           pointer-events: none;
           z-index: ${akEditorSmallZIndex};
-          background-color: ${token('color.blanket.selected', '#B3D4FF4C')}
+          background-color: ${token('color.blanket.selected')}
         }`;
 		default:
 			return '';

package/src/shortcut/shortcut.ts

@@ -1,20 +1,15 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 
-import { N100 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 
 import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const shortcutStyle = css`
-	background-color: ${token(
-		'color.background.neutral',
-		'rgba(223, 225, 229, 0.5)',
-	)}; /* N60 at 50% */
-	color: ${token('color.text.subtle', N100)};
-	border-radius: ${borderRadius()}px;
+	background-color: ${token('color.background.neutral')};
+	color: ${token('color.text.subtle')};
+	border-radius: ${token('border.radius', '3px')};
 	padding: ${token('space.050', '4px')};
 	line-height: 12px;
 	font-size: ${relativeFontSizeToBase16(11.67)};

package/tsconfig.app.json

@@ -35,9 +35,6 @@
 		{
 			"path": "../../platform/feature-flags/tsconfig.app.json"
 		},
-		{
-			"path": "../../design-system/theme/tsconfig.app.json"
-		},
 		{
 			"path": "../../design-system/tokens/tsconfig.app.json"
 		}