feat: export standardized color palette object

README.md

@@ -96,6 +96,10 @@ The following table lists the supported CSS variables for color overriding, extr
 | `--color-hover-dark`       | No                         | #0C57A7      |
 | `--color-hover-light`      | No                         | #D4E5FA      |
 | `--color-hover-neutral`    | No                         | #DCE4EC      |
+| `--color-border-focus-ring`| No                         | rgba(29, 101, 212, 0.15) |
+| `--color-icon-default-dark`| No                         | rgba(255, 255, 255, 0.35) |
+| `--color-overlay`          | No                         | rgba(0, 0, 0, 0.75) |
+| `--color-shadow-default`   | No                         | rgb(0 35 11 / 20%) |
 
 **Example Usage**:
 ```css
@@ -107,6 +111,28 @@ The following table lists the supported CSS variables for color overriding, extr
 
 If you need to override colors for specific components or add new variables, refer to the component's `styles.ts` file for implementation details.
 
+### Importing Color Tokens in JS
+
+In addition to CSS variables, the same color tokens used internally by every component are also
+exported as a nested `colors` object, for use directly in JS/TS (e.g. in your own
+styled-components):
+
+```jsx
+// From the package root
+import { colors } from '@bigbluebutton/bbb-ui-components-react';
+
+// Or from the dedicated, tree-shakeable subpath
+import { colors } from '@bigbluebutton/bbb-ui-components-react/colors';
+
+const StyledDiv = styled.div`
+  color: ${colors.text.default};
+  background: ${colors.background.white};
+`;
+```
+
+`colors` is grouped the same way as the table above: `neutral`, `brand`, `semantic`, `background`,
+`border`, `text`, `icon`, `hover`.
+
 ## Installation
 
 You can install the library directly from npm:

package.json

@@ -120,6 +120,13 @@
       "require": "./dist/components/Typography.js",
       "default": "./dist/components/Typography.js"
     },
+    "./colors": {
+      "types": "./dist/types/stylesheets/colors.d.ts",
+      "node": "./dist/components/colors.js",
+      "import": "./dist/esm/stylesheets/colors.js",
+      "require": "./dist/components/colors.js",
+      "default": "./dist/components/colors.js"
+    },
     "./dist/components": {
       "types": "./dist/types/index.d.ts",
       "require": "./dist/components/index.js",
@@ -208,6 +215,9 @@
       ],
       "Typography": [
         "dist/types/components/Typography/index.d.ts"
+      ],
+      "colors": [
+        "dist/types/stylesheets/colors.d.ts"
       ]
     }
   },

src/components/Input/styles.ts

@@ -3,6 +3,7 @@ import {
   colorBorderDefault,
   colorBorderSelected,
   colorBorderError,
+  colorBorderFocusRing,
   colorTextDefault,
   colorTextLight,
   colorError,
@@ -41,7 +42,7 @@ export const FieldContainer = styled.div<StyledContainerProps>`
 
   &:focus-within {
     border-color: ${colorBorderSelected};
-    box-shadow: 0 0 0 3px var(--color-border-focus-ring, rgba(29, 101, 212, 0.15));
+    box-shadow: 0 0 0 3px ${colorBorderFocusRing};
   }
 
   ${({ $error }) =>

src/components/Modal/styles.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { Styles } from 'react-modal';
 import * as React from 'react';
 import { spacingLarge, spacingMedium, spacingSmallMedium, borderRadiusDefault } from '../../stylesheets/sizing';
-import { colorWhite } from '../../stylesheets/palette';
+import { colorWhite, colorOverlay } from '../../stylesheets/palette';
 import { StyledModalBodyProps, StyledModalFooterProps } from './types';
 
 export const modalStyles: Styles = {
@@ -12,7 +12,7 @@ export const modalStyles: Styles = {
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    backgroundColor: colorOverlay,
     zIndex: 100,
     display: 'flex',
     alignItems: 'center',

src/components/Search/styles.ts

@@ -2,6 +2,7 @@ import styled, { css } from 'styled-components';
 import {
   colorBorderDefault,
   colorBorderSelected,
+  colorBorderFocusRing,
   colorTextDefault,
   colorTextLight,
   colorIconDefault,
@@ -36,7 +37,7 @@ export const Container = styled.div<ContainerProps>`
 
   &:focus-within {
     border-color: ${colorBorderSelected};
-    box-shadow: 0 0 0 3px var(--color-border-focus-ring, rgba(29, 101, 212, 0.15));
+    box-shadow: 0 0 0 3px ${colorBorderFocusRing};
   }
 
   ${({ $disabled }) =>

src/components/Toggle/styles.ts

@@ -1,7 +1,10 @@
 import { Switch } from '@mui/material';
 import { styled as materialStyled } from '@mui/material/styles';
 import styled, { css } from 'styled-components';
-import { colorBrand1, colorIconDefault, colorTextDefault, colorTextLight, colorWhite } from '../../stylesheets/palette';
+import {
+  colorBrand1, colorIconDefault, colorTextDefault, colorTextLight, colorWhite,
+  colorShadowDefault, colorIconDefaultDark,
+} from '../../stylesheets/palette';
 import { TEXT_POSITIONS } from './constants';
 import { StyledTextWrapperProps, StyledToggleWrapperProps } from './types';
 import { fontSizeBig, fontSizeDefault } from '../../stylesheets/typography';
@@ -103,7 +106,7 @@ export const MaterialToggle = materialStyled(Switch)(({ theme }) => ({
     },
   },
   '& .MuiSwitch-thumb': {
-    boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)',
+    boxShadow: `0 2px 4px 0 ${colorShadowDefault}`,
     width: '0.6rem',
     height: '0.6rem',
     borderRadius: '0.5rem',
@@ -118,7 +121,7 @@ export const MaterialToggle = materialStyled(Switch)(({ theme }) => ({
     backgroundColor: colorIconDefault,
     boxSizing: 'border-box',
     ...theme.applyStyles('dark', {
-      backgroundColor: 'rgba(255,255,255,.35)',
+      backgroundColor: colorIconDefaultDark,
     }),
   },
 }));

src/index.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './stylesheets/palette';
 export * from './stylesheets/sizing';
+export * from './stylesheets/colors';

src/stylesheets/colors.ts

@@ -0,0 +1,71 @@
+import {
+  colorNeutral2, colorNeutral3, colorNeutral4, colorWhite, colorLightGray, colorGray, colorDarkGray,
+  colorBrand1, colorBrand2, colorBrand3, colorBrandLight, colorBrandAux,
+  colorSuccess, colorWarning, colorError, colorErrorDark,
+  colorBackgroundWhite, colorBackgroundLight, colorBackgroundBlue,
+  colorBorderDefault, colorBorderSelected, colorBorderError, colorBorderFocusRing,
+  colorTextDefault, colorTextLight,
+  colorIconDefault, colorIconBlue, colorIconWhite, colorIconDefaultDark,
+  colorHoverDark, colorHoverLight, colorHoverNeutral,
+  colorOverlay,
+  colorShadowDefault,
+} from './palette';
+
+export const colors = {
+  neutral: {
+    neutral2: colorNeutral2,
+    neutral3: colorNeutral3,
+    neutral4: colorNeutral4,
+    white: colorWhite,
+    lightGray: colorLightGray,
+    gray: colorGray,
+    darkGray: colorDarkGray,
+  },
+  brand: {
+    brand1: colorBrand1,
+    brand2: colorBrand2,
+    brand3: colorBrand3,
+    light: colorBrandLight,
+    aux: colorBrandAux,
+  },
+  semantic: {
+    success: colorSuccess,
+    warning: colorWarning,
+    error: colorError,
+    errorDark: colorErrorDark,
+  },
+  background: {
+    white: colorBackgroundWhite,
+    light: colorBackgroundLight,
+    blue: colorBackgroundBlue,
+  },
+  border: {
+    default: colorBorderDefault,
+    selected: colorBorderSelected,
+    error: colorBorderError,
+    focusRing: colorBorderFocusRing,
+  },
+  text: {
+    default: colorTextDefault,
+    light: colorTextLight,
+  },
+  icon: {
+    default: colorIconDefault,
+    blue: colorIconBlue,
+    white: colorIconWhite,
+    defaultDark: colorIconDefaultDark,
+  },
+  hover: {
+    dark: colorHoverDark,
+    light: colorHoverLight,
+    neutral: colorHoverNeutral,
+  },
+  overlay: {
+    default: colorOverlay,
+  },
+  shadow: {
+    default: colorShadowDefault,
+  },
+} as const;
+
+export type Colors = typeof colors;

src/stylesheets/palette.ts

@@ -43,6 +43,7 @@ export const colorBorderSelected = `var(--color-border-selected, ${colorBrand1_b
 export const colorBorderError = `var(--color-border-error, ${colorError_base})`;
 // Mapped to core css vars
 export const colorBorderDefault = `var(--default-border, ${colorBorderDefault_base})`;
+export const colorBorderFocusRing = 'var(--color-border-focus-ring, rgba(29, 101, 212, 0.15))';
 
 
 // Text colors
@@ -53,8 +54,15 @@ export const colorTextLight = `var(--color-text-light, ${colorNeutral2})`;
 export const colorIconDefault = `var(--color-icon-default, ${colorNeutral2})`;
 export const colorIconBlue = `var(--color-icon-blue, ${colorBrand1_base})`;
 export const colorIconWhite = `var(--color-icon-white, ${colorWhite})`;
+export const colorIconDefaultDark = 'var(--color-icon-default-dark, rgba(255, 255, 255, 0.35))';
 
 //Hover colors
 export const colorHoverDark = 'var(--color-hover-dark, #0C57A7)';
 export const colorHoverLight = 'var(--color-hover-light, #D4E5FA)';
 export const colorHoverNeutral = `var(--color-hover-neutral, ${colorNeutral4})`;
+
+//Overlay colors
+export const colorOverlay = 'var(--color-overlay, rgba(0, 0, 0, 0.75))';
+
+//Shadow colors
+export const colorShadowDefault = 'var(--color-shadow-default, rgb(0 35 11 / 20%))';

webpack.config.babel.js

@@ -17,6 +17,7 @@ export default {
     TextInput: './src/components/TextInput/index.ts',
     Toggle: './src/components/Toggle/index.ts',
     Typography: './src/components/Typography/index.ts',
+    colors: './src/stylesheets/colors.ts',
     index: './src/index.ts',
   },
   output: {