npm - @indico-data/design-system - Versions diffs - 3.3.0 → 3.4.0 - Mend

@indico-data/design-system 3.3.0 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/lib/index.css +165 -180
package/lib/index.esm.css +165 -180
package/lib/stylesAndAnimations/colors/constants.d.ts +34 -4
package/package.json +1 -1
package/src/components/button/styles/_variables.scss +11 -11
package/src/styles/_colors.scss +1 -1
package/src/styles/globals.scss +9 -9
package/src/styles/variables/_borders.scss +1 -1
package/src/styles/variables/_colors.scss +60 -77
package/src/stylesAndAnimations/colors/BaseColorPalette.mdx +56 -0
package/src/stylesAndAnimations/colors/Colors.tsx +34 -9
package/src/stylesAndAnimations/colors/constants.ts +211 -351
package/src/stylesAndAnimations/colors/Colors.mdx +0 -32

package/src/stylesAndAnimations/colors/constants.ts CHANGED Viewed

@@ -1,19 +1,147 @@
+// Type definitions for color palettes
+interface ColorPalette {
+  base: string;
+  50: string;
+  100: string;
+  150: string;
+  200: string;
+  250: string;
+  300: string;
+  400: string;
+  450: string;
+  500: string;
+  550?: string; // Optional since not all colors have this shade
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+}
+interface UtilityColors {
+  success: string;
+  info: string;
+  neutral: string;
+  warning: string;
+  error: string;
+  brand: string;
+}
+interface ThemeColors {
+  [key: string]: ColorPalette | UtilityColors;
+  utilityDark: UtilityColors;
+  utilityLight: UtilityColors;
+}
 export const colorList = [
   'primary',
   'secondary',
   'tertiary',
+  'blue',
   'gray',
-  'red',
-  'orange',
-  'yellow',
   'green',
-  'purple',
+  'orange',
   'pink',
+  'purple',
+  'red',
   'teal',
+  'yellow',
+] as const;
+export const utilityColorList = [
+  'success',
+  'info',
+  'neutral',
+  'warning',
+  'error',
   'brand',
-];
-export const utilityColorList = ['success', 'info', 'neutral', 'warning', 'error', 'brand'];
-export const lightThemeColors = {
+] as const;
+export const themeColors: ThemeColors = {
+  blue: {
+    base: '#2989ff',
+    50: '#f6fafd',
+    100: '#eef4fc',
+    150: '#e5effa',
+    200: '#d8e9fd',
+    250: '#bbd8fb',
+    300: '#9ec7fa',
+    400: '#2989ff',
+    450: '#0070f5',
+    500: '#005ccc',
+    550: '#0054b8',
+    600: '#004599',
+    700: '#06356f',
+    800: '#082345',
+    900: '#061323',
+  },
+  gray: {
+    base: '#808080',
+    50: '#ffffff',
+    100: '#f7f7f7',
+    150: '#f2f2f2',
+    200: '#e6e6e6',
+    250: '#d9d9d9',
+    300: '#cccccc',
+    400: '#b2b2b2',
+    450: '#949494',
+    500: '#808080',
+    550: '#666666',
+    600: '#606060',
+    700: '#4d4d4d',
+    800: '#333333',
+    900: '#000000',
+  },
+  green: {
+    base: '#14b869',
+    50: '#f7fdfa',
+    100: '#effbf5',
+    150: '#e7f9f0',
+    200: '#def7eb',
+    250: '#c2f4dc',
+    300: '#a8f0cd',
+    400: '#3eea97',
+    450: '#18dc7e',
+    500: '#14b869',
+    550: '#129e45',
+    600: '#17824e',
+    700: '#175e3c',
+    800: '#173627',
+    900: '#0e1b15',
+  },
+  orange: {
+    base: '#994733',
+    50: '#fffbfa',
+    100: '#faf2f0',
+    150: '#f7ebe8',
+    200: '#f7e3de',
+    250: '#f4ccc2',
+    300: '#f5b4a3',
+    400: '#ea603e',
+    450: '#c44e31',
+    500: '#994733',
+    550: '#863f2a',
+    600: '#6b3a2e',
+    700: '#522d23',
+    800: '#321f1b',
+    900: '#1b110e',
+  },
+  pink: {
+    base: '#a3292d',
+    50: '#fbf8f9',
+    100: '#f8f2f4',
+    150: '#f4ebee',
+    200: '#f1e4e9',
+    250: '#eacdd7',
+    300: '#ebadc3',
+    400: '#e6417b',
+    450: '#c3285e',
+    500: '#a32954',
+    550: '#922149',
+    600: '#6b2e43',
+    700: '#4c2935',
+    800: '#321b23',
+    900: '#1b0e13',
+  },
   primary: {
     base: '#50647c',
     50: '#f9fafb',
@@ -30,53 +158,22 @@ export const lightThemeColors = {
     800: '#111b28',
     900: '#0c141d',
   },
-  secondary: {
-    base: '#1474b8',
-    50: '#f8fafc',
-    100: '#f1f5f9',
-    150: '#e8f1f7',
-    200: '#deedf7',
-    250: '#c6dff1',
-    300: '#add1eb',
-    400: '#3ea2ea',
-    450: '#188bdc',
-    500: '#1474b8',
-    600: '#0f578a',
-    700: '#1d4058',
-    800: '#132939',
-    900: '#0e151b',
-  },
-  tertiary: {
-    base: '#6a7798',
-    50: '#f8fafb',
-    100: '#f4f7f9',
-    150: '#ebf0f4',
-    200: '#dae3eb',
-    250: '#c3d2de',
-    300: '#aabbcf',
-    400: '#94a5c0',
-    450: '#8593b3',
-    500: '#6a7798',
-    600: '#58637b',
-    700: '#4b5364',
-    800: '#2c303a',
-    900: '#111317',
-  },
-  gray: {
-    base: '#b2b2b2',
-    50: '#ffffff',
-    100: '#fafafa',
-    150: '#f5f5f5',
-    200: '#f0f0f0',
-    250: '#ebebeb',
-    300: '#e6e6e6',
-    400: '#dedede',
-    450: '#c7c7c7',
-    500: '#b2b2b2',
-    600: '#8f8f8f',
-    700: '#5e5959',
-    800: '#272525',
-    900: '#000000',
+  purple: {
+    base: '#5c29a3',
+    50: '#f9f6fc',
+    100: '#f4f0fa',
+    150: '#eee8f7',
+    200: '#e9def7',
+    250: '#d8c6f1',
+    300: '#c7adeb',
+    400: '#8849df',
+    450: '#6e31c4',
+    500: '#5c29a3',
+    550: '#4e218f',
+    600: '#451f7a',
+    700: '#361d58',
+    800: '#241736',
+    900: '#130e1b',
   },
   red: {
     base: '#a3292d',
@@ -89,74 +186,28 @@ export const lightThemeColors = {
     400: '#ea3e44',
     450: '#d0252a',
     500: '#a3292d',
+    550: '#8f2428',
     600: '#732629',
     700: '#522325',
     800: '#321b1c',
     900: '#181011',
   },
-  pink: {
-    base: '#a3292d',
-    50: '#fbf8f9',
-    100: '#f8f2f4',
-    150: '#f4ebee',
-    200: '#f1e4e9',
-    250: '#eacdd7',
-    300: '#ebadc3',
-    400: '#e6417b',
-    450: '#c3285e',
-    500: '#a32954',
-    600: '#6b2e43',
-    700: '#4c2935',
-    800: '#321b23',
-    900: '#1b0e13',
-  },
-  orange: {
-    base: '#994b33',
-    50: '#fcf9f7',
-    100: '#faf2f0',
-    150: '#f7ece8',
-    200: '#f7e4de',
-    250: '#f4cec2',
-    300: '#f5b6a3',
-    400: '#ea673e',
-    450: '#c45331',
-    500: '#994b33',
-    600: '#6b3c2e',
-    700: '#522e23',
-    800: '#32201b',
-    900: '#1b110e',
-  },
-  yellow: {
-    base: '#ad791f',
-    50: '#fdfbf7',
-    100: '#fcf7ee',
-    150: '#faf3e5',
-    200: '#f9eedc',
-    250: '#f4e2c2',
-    300: '#f0d6a8',
-    400: '#eaab3e',
-    450: '#dc9518',
-    500: '#ad791f',
-    600: '#825b17',
-    700: '#58421d',
-    800: '#32291b',
-    900: '#1b160e',
-  },
-  green: {
-    base: '#14b869',
-    50: '#f7fdfa',
-    100: '#effbf5',
-    150: '#e7f9f0',
-    200: '#def7eb',
-    250: '#c2f4dc',
-    300: '#a8f0cd',
-    400: '#3eea97',
-    450: '#18dc7e',
-    500: '#14b869',
-    600: '#17824e',
-    700: '#175e3c',
-    800: '#173627',
-    900: '#0e1b15',
+  secondary: {
+    base: '#1474b8',
+    50: '#f8fafc',
+    100: '#f1f5f9',
+    150: '#e8f1f7',
+    200: '#deedf7',
+    250: '#c6dff1',
+    300: '#add1eb',
+    400: '#3ea2ea',
+    450: '#188bdc',
+    500: '#1474b8',
+    550: '#1268a5',
+    600: '#0f578a',
+    700: '#1d4058',
+    800: '#132939',
+    900: '#0e151b',
   },
   teal: {
     base: '#29a3a3',
@@ -166,250 +217,50 @@ export const lightThemeColors = {
     200: '#dcf9f9',
     250: '#bff8f8',
     300: '#a3f5f5',
-    400: '#3eeaea',
+    400: '#4edada',
     450: '#25d0d0',
     500: '#29a3a3',
-    600: '#267373',
+    550: '#267373',
+    600: '#1c5656',
     700: '#235252',
     800: '#1b3232',
     900: '#101818',
   },
-  brand: {
-    base: '#2960a3',
-    50: '#f6fafd',
-    100: '#eef4fc',
-    150: '#dce9f9',
-    200: '#eef4fc',
-    250: '#accdf6',
-    300: '#8cbaf2',
-    400: '#3e8bea',
-    450: '#0070f5',
-    500: '#2960a3',
-    600: '#264973',
-    700: '#233852',
-    800: '#1b2532',
-    900: '#101418',
-  },
-  purple: {
-    base: '#5c29a3',
-    50: '#f9f6fc',
-    100: '#f4f0fa',
-    150: '#eee8f7',
-    200: '#e9def7',
-    250: '#d8c6f1',
-    300: '#c7adeb',
-    400: '#8849df',
-    450: '#6e31c4',
-    500: '#5c29a3',
-    600: '#451f7a',
-    700: '#361d58',
-    800: '#241736',
-    900: '#130e1b',
-  },
-  utility: {
-    success: '#14b869',
-    info: '#1474b8',
-    neutral: '#b2b2b2',
-    warning: '#ad791f',
-    error: '#a3292d',
-    brand: '#2960a3',
-  },
-} as Record<string, any>;
-export const darkThemeColors = {
-  primary: {
-    base: '#394c6b',
-    50: '#bcc7da',
-    100: '#7989b5',
-    150: '#8593b3',
-    200: '#7488a4',
-    250: '#5c708c',
-    300: '#4d5667',
-    400: '#334154',
-    450: '#233346',
-    500: '#394c6b',
-    600: '#182432',
-    700: '#101a26',
-    800: '#141b24',
-    900: '#0c141d',
-  },
-  secondary: {
-    base: '#198bdc',
-    50: '#bddffa',
-    100: '#83c5f6',
-    150: '#68afee',
-    200: '#66a2d5',
-    250: '#36a1ea',
-    300: '#2f6a98',
-    400: '#0c6ebd',
-    450: '#0070f5',
-    500: '#198bdc',
-    600: '#0b5899',
-    700: '#002c4e',
-    800: '#112341',
-    900: '#0e151b',
-  },
   tertiary: {
-    base: '#40464e',
-    50: '#dae3eb',
-    100: '#c2d4df',
-    150: '#a3b2c9',
-    200: '#8593b3',
-    250: '#656f82',
-    300: '#4d5667',
-    400: '#334154',
-    450: '#3b415b',
-    500: '#40464e',
-    600: '#344152',
-    700: '#2d3444',
-    800: '#283243',
+    base: '#6a7798',
+    50: '#f8fafb',
+    100: '#f4f7f9',
+    150: '#ebf0f4',
+    200: '#dae3eb',
+    250: '#c3d2de',
+    300: '#aabbcf',
+    400: '#94a5c0',
+    450: '#8593b3',
+    500: '#6a7798',
+    550: '#5f6a85',
+    600: '#58637b',
+    700: '#4b5364',
+    800: '#2c303a',
     900: '#111317',
   },
-  gray: {
-    base: '#525252',
-    50: '#f6f6f6',
-    100: '#efefef',
-    150: '#dcdcdc',
-    200: '#bdbdbd',
-    250: '#989898',
-    300: '#737373',
-    400: '#525252',
-    450: '#404040',
-    500: '#525252',
-    600: '#262626',
-    700: '#171717',
-    800: '#0a0a0a',
-    900: '#000000',
-  },
-  red: {
-    base: '#ce6068',
-    50: '#fcf5f4',
-    100: '#fae9e9',
-    150: '#f4d7d8',
-    200: '#ebb6b8',
-    250: '#f39bb9',
-    300: '#ef76a0',
-    400: '#df8d91',
-    450: '#b94553',
-    500: '#ce6068',
-    600: '#9b3544',
-    700: '#822f3e',
-    800: '#702b39',
-    900: '#510e2b',
-  },
-  pink: {
-    base: '#ce6068',
-    50: '#fcf5f4',
-    100: '#fae9e9',
-    150: '#f4d7d8',
-    200: '#ebb6b8',
-    250: '#f39bb9',
-    300: '#ef76a0',
-    400: '#df8d91',
-    450: '#b94553',
-    500: '#ce6068',
-    600: '#9b3544',
-    700: '#822f3e',
-    800: '#702b39',
-    900: '#510e2b',
-  },
-  orange: {
-    base: '#f46325',
-    50: '#fff5ed',
-    100: '#fee9d6',
-    150: '#fcceac',
-    200: '#faac77',
-    250: '#f67e41',
-    300: '#c88e2a',
-    400: '#ac6e22',
-    450: '#80670c',
-    500: '#f46325',
-    600: '#e54311',
-    700: '#be3010',
-    800: '#972815',
-    900: '#792315',
-  },
   yellow: {
-    base: '#f29c22',
-    50: '#fbf7eb',
-    100: '#f5edcc',
-    150: '#ecd99c',
-    200: '#deb650',
-    250: '#d7a438',
-    300: '#c88e2a',
-    400: '#ac6e22',
-    450: '#80670c',
-    500: '#f29c22',
-    600: '#463703',
-    700: '#312602',
-    800: '#1b160e',
-    900: '#0e151b',
-  },
-  green: {
-    base: '#15b77d',
-    50: '#a9f1ce',
-    100: '#71e4b3',
-    150: '#14b8a6',
-    200: '#03aaaa',
-    250: '#38cf94',
-    300: '#099263',
-    400: '#087950',
-    450: '#085d43',
-    500: '#15b77d',
-    600: '#084c38',
-    700: '#032b20',
-    800: '#173627',
-    900: '#0e1b15',
-  },
-  teal: {
-    base: '#29a3a3',
-    50: '#a9f1ce',
-    100: '#71e4b3',
-    150: '#14b8a6',
-    200: '#03aaaa',
-    250: '#38cf94',
-    300: '#099263',
-    400: '#087950',
-    450: '#085d43',
-    500: '#29a3a3',
-    600: '#084c38',
-    700: '#032b20',
-    800: '#1b3232',
-    900: '#101818',
-  },
-  brand: {
-    base: '#2960a3',
-    50: '#bddffa',
-    100: '#83c5f6',
-    150: '#68afee',
-    200: '#66a2d5',
-    250: '#36a1ea',
-    300: '#2f6a98',
-    400: '#0c6ebd',
-    450: '#0070f5',
-    500: '#2960a3',
-    600: '#0b5899',
-    700: '#002c4e',
-    800: '#112341',
-    900: '#101418',
-  },
-  purple: {
-    base: '#9776d3',
-    50: '#f7f6fc',
-    100: '#f1edfa',
-    150: '#e4dff5',
-    200: '#cfc4ee',
-    250: '#b6a3e2',
-    300: '#8b60c7',
-    400: '#7a4eb3',
-    450: '#664196',
-    500: '#9776d3',
-    600: '#55377b',
-    700: '#291a40',
-    800: '#241736',
-    900: '#130e1b',
+    base: '#ad871f',
+    50: '#fdfbf7',
+    100: '#fcf8ee',
+    150: '#faf5e5',
+    200: '#f9f1dc',
+    250: '#f4e7c2',
+    300: '#f0dda8',
+    400: '#eabc3e',
+    450: '#dca818',
+    500: '#ad871f',
+    550: '#976f00',
+    600: '#826517',
+    700: '#58481d',
+    800: '#322c1b',
+    900: '#1b160e',
   },
-  utility: {
+  utilityDark: {
     success: '#15b77d',
     info: '#198bdc',
     neutral: '#dcdcdc',
@@ -417,4 +268,13 @@ export const darkThemeColors = {
     error: '#ce6068',
     brand: '#0070f5',
   },
-} as Record<string, any>;
+  // light mode utility colors
+  utilityLight: {
+    success: '#14b869',
+    info: '#1474b8',
+    neutral: '#b2b2b2',
+    warning: '#ad791f',
+    error: '#a3292d',
+    brand: '#2960a3',
+  },
+};

package/src/stylesAndAnimations/colors/Colors.mdx DELETED Viewed

@@ -1,32 +0,0 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as Colors from './Colors.stories';
- <Meta title="Styles And Animations/Colors And Swatches" />
- # Colors
-Click on the swatch to copy the color to your clipboard.
- <Canvas of={Colors.Default} />
-## CSS Variable Syntax
-In order to use or override a color listed above, you would use the following syntax.
-### Using A Variable
-The syntax for invoking a variable in your CSS code follows this pattern.
-```css
-.myElement {
-  color: var(--pf-primary-color-100);
-}
-```
-### Overriding A Variable
-The syntax for overriding a variable in your CSS code follows this pattern.
-```css
-:root {
-  --pf-primary-color-100: #ff0000;
-}
-```