feat: Blade Visual Refresh 💅🏼

.changeset/empty-hairs-tie.md

@@ -0,0 +1,12 @@
+---
+'@razorpay/blade': major
+---
+
+feat: revamp Blade with brand refresh changes
+
+> [!WARNING]
+>
+> Breaking Change!
+> This is a breaking change for all components in the library.
+>
+> Refer the [detailed v11 upgrade guide](https://github.com/razorpay/blade/blob/master/packages/blade/upgrade-v11.md) that contains instructions on how to use codemods for auto-upgrade along with manual steps if required

.github/pull_request_template.md

@@ -0,0 +1,21 @@
+## Description
+
+<!-- Briefly explain the purpose of your PR -->
+
+## Changes
+
+<!-- List the specific changes made, consider adding screenshots if relevant -->
+
+## Additional Information
+
+<!-- Include any relevant details, links to issues, or additional messages -->
+
+## Component Checklist
+
+<!-- Ensure that the following tasks are completed before submitting your PR. Tick the applicable boxes -->
+
+- [ ] Update Component Status Page
+- [ ] Perform Manual Testing in Other Browsers
+- [ ] Add KitchenSink Story
+- [ ] Add Interaction Tests (if applicable)
+- [ ] Add changeset

package.json

@@ -9,7 +9,6 @@
   "workspaces": {
     "packages": [
       "packages/blade",
-      "packages/razorsharp",
       "packages/eslint-plugin-blade"
     ],
     "nohoist": [

packages/blade-coverage-extension/src/App.tsx

@@ -13,12 +13,9 @@ import {
   Text,
   Checkbox,
 } from '@razorpay/blade/components';
-import { paymentTheme } from '@razorpay/blade/tokens';
+import { bladeTheme } from '@razorpay/blade/tokens';
 import styled from 'styled-components';
-import '@fontsource/lato/400.css';
-import '@fontsource/lato/400-italic.css';
-import '@fontsource/lato/700.css';
-import '@fontsource/lato/700-italic.css';
+import '@razorpay/blade/fonts.css';
 import BarChartImg from './bar-chart.png';
 import { useMediaQuery } from './useMediaQuery';
 
@@ -55,7 +52,7 @@ const App = (): ReactElement => {
     },
   );
   return (
-    <BladeProvider themeTokens={paymentTheme} colorScheme={isDarkMode ? 'dark' : 'light'}>
+    <BladeProvider themeTokens={bladeTheme} colorScheme={isDarkMode ? 'dark' : 'light'}>
       <Box height="312px" width="500px">
         <Card elevation="lowRaised" padding="spacing.7" surfaceLevel={2}>
           <CardBody>

packages/blade-coverage-extension/src/index.css

@@ -3,8 +3,6 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 code {

packages/blade/.storybook/react-native/Storybook.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { AppRegistry } from 'react-native';
 import { getStorybookUI } from '@storybook/react-native';
 import { BladeProvider } from '../../src/components/BladeProvider';
-import { paymentTheme } from '../../src/tokens/theme';
+import { bladeTheme } from '../../src/tokens/theme';
 import './storybook.requires';
 
 import { name as appName } from '../../app.json';
@@ -12,21 +12,21 @@ const App = (): React.ReactElement => {
   const Storybook = getStorybookUI({
     shouldPersistSelection: true,
     // keeping in comments becuase this is not documented properly in the docs
-    // theme: {
-    //   backgroundColor: 'white',
-    //   headerTextColor: 'black',
-    //   labelColor: 'black',
-    //   borderColor: '#e6e6e6',
-    //   previewBorderColor: '#b3b3b3',
-    //   buttonTextColor: '#999999',
-    //   buttonActiveTextColor: '#444444',
-    // },
+    theme: {
+      backgroundColor: bladeTheme.colors.onLight.surface.background.gray.subtle,
+      // headerTextColor: 'black',
+      // labelColor: 'black',
+      // borderColor: '#e6e6e6',
+      // previewBorderColor: '#b3b3b3',
+      // buttonTextColor: '#999999',
+      // buttonActiveTextColor: '#444444',
+    },
   });
 
   return (
     <BladeProvider
       // key={`${context.globals.themeTokens}-${context.globals.colorScheme}`}
-      themeTokens={paymentTheme}
+      themeTokens={bladeTheme}
     >
       <Storybook />
     </BladeProvider>

packages/blade/.storybook/react-native/main.tsx

@@ -1,6 +1,6 @@
 module.exports = {
   stories: [
-    '../../src/**/!(_KitchenSink)*.stories.?(ts|tsx|js|jsx)',
+    '../../src/**/!(_KitchenSink|*.test)*.stories.?(ts|tsx|js|jsx)',
     '../../src/**/*.stories.internal.?(ts|tsx|js|jsx)',
   ],
   addons: [

packages/blade/.storybook/react/global.css

@@ -7,4 +7,6 @@ body {
   width: 100%;
   height: 100%;
   padding: 0 !important;
+  -webkit-font-smoothing: unset !important;
+  -moz-osx-font-smoothing: unset !important;
 }

packages/blade/.storybook/react/main.ts

@@ -29,7 +29,7 @@ const config: StorybookConfig = {
     '@storybook/addon-docs',
     '@storybook/addon-a11y',
     '@storybook/preset-create-react-app',
-    '@storybook/addon-interactions'
+    '@storybook/addon-interactions',
   ],
   framework: {
     name: '@storybook/react-webpack5',

packages/blade/.storybook/react/manager-head.html

@@ -1,6 +1,4 @@
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
+<link href="https://pkg.csb.dev/razorpay/blade/commit/09774406/@razorpay/blade/fonts.css" rel="stylesheet">
 <link rel="stylesheet"
   href="https://cdn.jsdelivr.net/gh/katorlys/prism-theme-github/themes/prism-theme-github-light.css">
 <link rel="icon"

packages/blade/.storybook/react/manager.tsx

@@ -8,11 +8,15 @@ import { addons, types } from '@storybook/manager-api';
 
 const surafaceTextNormal = 'rgba(19, 38, 68, 1)';
 const bladePrimary = 'rgba(21, 102, 241, 1)';
+const bladeTextFont =
+  '"Inter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif';
+
+const bladeCodeFont = '"Menlo", San Francisco Mono, Courier New, Roboto Mono, monospace';
 
 export const theme = create({
   base: 'light',
 
-  colorPrimary: 'red',
+  colorPrimary: bladePrimary,
   colorSecondary: bladePrimary,
 
   // UI
@@ -22,9 +26,8 @@ export const theme = create({
   appBorderRadius: 4,
 
   // Typography
-  fontBase:
-    'Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-  fontCode: 'monospace',
+  fontBase: bladeTextFont,
+  fontCode: bladeCodeFont,
 
   // Text colors
   textColor: surafaceTextNormal,

packages/blade/.storybook/react/preview-head.html

@@ -1,18 +1,39 @@
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-
-<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+<link href="https://pkg.csb.dev/razorpay/blade/commit/f2ca3f2f/@razorpay/blade/fonts.css" rel="stylesheet">
 <style>
-* :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)),
-* :where(h1:not(.sb-anchor, .sb-unstyled, .sb-unstyled h1)),
-* :where(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)),
-* :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)),
-* :where(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)),
-* :where(ul:not(.sb-anchor, .sb-unstyled, .sb-unstyled ul)),
-* :where(ol:not(.sb-anchor, .sb-unstyled, .sb-unstyled ol)),
-* :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
-    font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;
-}
+  /* 
+    Fix these overrides when there is better resolution to this issue-
+    https://github.com/storybookjs/storybook/discussions/21109
+  */
+  * :where(p:not([data-blade-component="base-text"], .sb-anchor, .sb-unstyled, .sb-unstyled p)),
+  * :where(a:not(.sb-anchor, .sb-unstyled, .sb-unstyled a)),
+  * :where(div:not([data-blade-component="base-text"], .sb-anchor, .sb-unstyled, .sb-unstyled div)),
+  * :where(span:not([data-blade-component="base-text"], .sb-anchor, .sb-unstyled, .sb-unstyled span)),
+  * :where(ul:not(.sb-anchor, .sb-unstyled, .sb-unstyled ul)),
+  * :where(ol:not(.sb-anchor, .sb-unstyled, .sb-unstyled ol)),
+  * :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !important;
+  }
+
+  * :where(h1:not(.sb-anchor, .sb-unstyled, .sb-unstyled h1)),
+  * :where(h1:not(.sb-anchor, .sb-unstyled, .sb-unstyled h1)) *,
+  * :where(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)),
+  * :where(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)) *,
+  * :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)),
+  * :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)) *,
+  * :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)),
+  * :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)) *,
+  * :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h5)),
+  * :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h5)) *,
+  * :where(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h6)),
+  * :where(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h6)) * {
+    font-family: "TASA Orbiter", -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !important;
+  }
+
+  * pre :where(span:not(.sb-anchor, .sb-unstyled, .sb-unstyled span)) {
+    font-family: "Menlo", San Francisco Mono, Courier New, Roboto Mono, monospace !important;
+    font-size: 14px !important;
+  }
+
   body pre.prismjs {
     color: unset !important;
   }
@@ -21,4 +42,4 @@
   .css-1dt41f3 {
     background-color: #111218 !important;
   }
-</style>
+</style>