refactor / CLOUD-28090 / update colors and headings fontWeight

testing/src/views/Colors.tsx

@@ -24,52 +24,62 @@ const BORDER_WIDTH_IN_PIXEL = 2
 export function Colors({ withText = false }: { withText?: boolean }) {
   const ELEMENT_WIDTH = (withText ? 100 : 50) - BORDER_WIDTH_IN_PIXEL
 
+  // the following colors are deprecated, but still available for now.
+  // Let's not show them on this test page
+  const deprecatedColors = ['amber', 'neutrals']
+
   return (
     <>
       <VStack alignItems="start" gap={withText ? 8 : 2}>
-        {Object.entries(colors).map(([_key, value]) => {
-          return (
-            <VStack alignItems="start" key={_key + value}>
-              {withText && <Heading variant="h2">{_key}</Heading>}
+        {Object.entries(colors)
+          .filter(([key, _value]) => !deprecatedColors.includes(key))
+          .map(([_key, value]) => {
+            return (
+              <VStack alignItems="start" key={_key + value}>
+                {withText && <Heading variant="h2">{_key}</Heading>}
 
-              <HStack>
-                {Object.entries(value).map(([weight, colorValue]) => {
-                  const styles = {
-                    backgroundColor: chakraTokenToCssVar(_key, weight),
-                    width: ELEMENT_WIDTH,
-                    height: ELEMENT_WIDTH,
-                  }
+                <HStack>
+                  {Object.entries(value).map(([weight, colorValue]) => {
+                    const styles = {
+                      backgroundColor: chakraTokenToCssVar(_key, weight),
+                      width: ELEMENT_WIDTH,
+                      height: ELEMENT_WIDTH,
+                    }
 
-                  return (
-                    <VStack
-                      alignItems="start"
-                      gap={1}
-                      key={_key + weight}
-                      onClick={() =>
-                        copy(colorValue, {
-                          message: `Color ${colorValue} copied.`,
-                        })
-                      }
-                    >
-                      <div style={styles} />
-                      {withText && (
-                        <div>
-                          <Text fontFamily="monospace" fontSize="xs">
-                            {_key}.{weight}
-                          </Text>
-                          <Text fontFamily="monospace" fontSize="xs" color={colors.neutrals['500']}>
-                            {colorValue}
-                          </Text>
-                        </div>
-                      )}
-                    </VStack>
-                  )
-                })}
-                <br />
-              </HStack>
-            </VStack>
-          )
-        })}
+                    return (
+                      <VStack
+                        alignItems="start"
+                        gap={1}
+                        key={_key + weight}
+                        onClick={() =>
+                          copy(colorValue, {
+                            message: `Color ${colorValue} copied.`,
+                          })
+                        }
+                      >
+                        <div style={styles} />
+                        {withText && (
+                          <div>
+                            <Text fontFamily="monospace" fontSize="xs">
+                              {_key}.{weight}
+                            </Text>
+                            <Text
+                              fontFamily="monospace"
+                              fontSize="xs"
+                              color={colors.neutrals['500']}
+                            >
+                              {colorValue}
+                            </Text>
+                          </div>
+                        )}
+                      </VStack>
+                    )
+                  })}
+                  <br />
+                </HStack>
+              </VStack>
+            )
+          })}
       </VStack>
     </>
   )

theme/src/components/headings.ts

@@ -20,7 +20,7 @@ function headingStyle(fontSizeRem: number, lineHeightRem: number) {
   return defineStyle({
     fontFamily: 'Raleway',
     fontStyle: 'normal',
-    fontWeight: '800',
+    fontWeight: '700',
     fontSize: `${fontSizeRem}rem`,
     lineHeight: `${lineHeightRem}rem`,
     letterSpacing: `-${0.02 * fontSizeRem}rem`, // -2%
@@ -31,7 +31,7 @@ const h1 = headingStyle(2.25, 2.75)
 
 const h2 = headingStyle(1.875, 2.25)
 
-const h3 = headingStyle(1.125, 1.5)
+const h3 = headingStyle(1.5, 2)
 
 const h4 = headingStyle(1, 1.25)
 

theme/src/foundations/colors.ts

@@ -17,6 +17,7 @@ limitations under the License.
 import { percentageToHex } from '../utils'
 
 export const amber = {
+  // DEPRECATED
   700: '#3B2C00',
   600: '#4D3900',
   500: '#8B6A08',
@@ -29,30 +30,49 @@ export const amber = {
 } as const
 
 export const blue = {
-  700: '#00162B',
-  600: '#001E3B',
-  500: '#002F5C',
-  400: '#0061BD',
-  300: '#006ED6',
-  200: '#BCD7F1',
-  100: '#E8F3FC',
-  50: '#F2F7FC',
-  alpha: `#006ED6${percentageToHex(15)}`,
+  950: '#001237',
+  900: '#001F4D',
+  800: '#02356E',
+  700: '#05529B',
+  600: '#006AC4',
+  500: '#228EF0',
+  400: '#6FB4FE',
+  300: '#98CFF7',
+  200: '#CCE5FB',
+  100: '#E8F2FF',
+  50: '#F7FAFE',
+} as const
+
+export const gray = {
+  950: '#111111',
+  900: '#18181B',
+  800: '#27272A',
+  700: '#3F3F46',
+  600: '#52525B',
+  500: '#71717A',
+  400: '#A1A1AA',
+  300: '#D4D4D8',
+  200: '#E4E4E7',
+  100: '#F4F4F5',
+  50: '#FAFAFA',
 } as const
 
 export const green = {
-  700: '#0B210F',
-  600: '#13371A',
-  500: '#22592C',
-  400: '#4FBF64',
-  300: '#5DDF75',
-  200: '#D5F8DB',
-  100: '#EBFCEE',
-  50: '#F4FCF5',
-  alpha: `#5DDF75${percentageToHex(25)}`,
+  950: '#011B07',
+  900: '#0A2E15',
+  800: '#114922',
+  700: '#186631',
+  600: '#03893C',
+  500: '#01AD4D',
+  400: '#2AD066',
+  300: '#72EE91',
+  200: '#A6F9B6',
+  100: '#D5FCDB',
+  50: '#F0FCF2',
 } as const
 
 export const neutrals = {
+  // DEPRECATED
   950: '#0E0D0A',
   900: '#171612',
   800: '#2A2925',
@@ -69,37 +89,57 @@ export const neutrals = {
 } as const
 
 export const orange = {
-  700: '#381E00',
-  600: '#3F2200',
-  500: '#643500',
-  400: '#D37100',
-  300: '#FF8800',
-  200: '#FDE0BE',
-  100: '#FCF1E3',
-  50: '#FCF7F0',
-  alpha: `#FF8800${percentageToHex(20)}`,
+  950: '#2E0800',
+  900: '#4A1506',
+  800: '#77290E',
+  700: '#A03810',
+  600: '#CC4C0A',
+  500: '#F56D00',
+  400: '#FF973A',
+  300: '#FFB76B',
+  200: '#FFDCB3',
+  100: '#FFF0DC',
+  50: '#FFF7ED',
 } as const
 
 export const purple = {
-  700: '#170C3D',
-  600: '#1B0E47',
-  500: '#291766',
-  400: '#5C38D9',
-  300: '#6D47F7',
-  200: '#D9D3F0',
-  100: '#F3F0FC',
-  50: '#F8F7FC',
-  alpha: `#6D47F7${percentageToHex(15)}`,
+  950: '#1F0933',
+  900: '#310C54',
+  800: '#4C0F77',
+  700: '#6C20AF',
+  600: '#9227EB',
+  500: '#B068FA',
+  400: '#C590FD',
+  300: '#DBBEFB',
+  200: '#E8D8F9',
+  100: '#F4ECFD',
+  50: '#FBF6FF',
 } as const
 
 export const red = {
-  700: '#2E060C',
-  600: '#400811',
-  500: '#660314',
-  400: '#C70C2C',
-  300: '#E80E34',
-  200: '#F0D5DA',
-  100: '#FCF2F4',
-  50: '#FCF7F8',
-  alpha: `#E80E34${percentageToHex(15)}`,
+  950: '#2F0001',
+  900: '#4F0001',
+  800: '#78120E',
+  700: '#9E1815',
+  600: '#CB010B',
+  500: '#E92823',
+  400: '#FE6456',
+  300: '#FEA599',
+  200: '#FFD5CF',
+  100: '#FFE9E6',
+  50: '#FFF4F2',
+} as const
+
+export const yellow = {
+  950: '#291101',
+  900: '#411E01',
+  800: '#6C3602',
+  700: '#A96801',
+  600: '#E49B1A',
+  500: '#FFC000',
+  400: '#FFD238',
+  300: '#FDE269',
+  200: '#FAED93',
+  100: '#FBF7C4',
+  50: '#FDFBE7',
 } as const