@indico-data/design-system 3.2.1 → 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 (25) hide show
  1. package/lib/index.css +279 -407
  2. package/lib/index.esm.css +279 -407
  3. package/lib/stylesAndAnimations/colors/constants.d.ts +34 -4
  4. package/package.json +1 -1
  5. package/src/components/badge/styles/Badge.scss +3 -20
  6. package/src/components/button/styles/_variables.scss +11 -11
  7. package/src/components/card/styles/Card.scss +8 -29
  8. package/src/components/floatUI/styles/FloatUI.scss +3 -4
  9. package/src/components/forms/date/datePicker/styles/DatePicker.scss +19 -16
  10. package/src/components/menu/styles/Menu.scss +9 -11
  11. package/src/components/tanstackTable/components/NoResults/NoResults.scss +2 -2
  12. package/src/components/tanstackTable/styles/table.scss +24 -26
  13. package/src/styles/_colors.scss +1 -1
  14. package/src/styles/globals.scss +48 -59
  15. package/src/styles/variables/_borders.scss +1 -1
  16. package/src/styles/variables/_colors.scss +60 -77
  17. package/src/styles/variables/_dropshadows.scss +4 -3
  18. package/src/stylesAndAnimations/colors/BaseColorPalette.mdx +56 -0
  19. package/src/stylesAndAnimations/colors/Colors.tsx +34 -9
  20. package/src/stylesAndAnimations/colors/constants.ts +211 -351
  21. package/src/stylesAndAnimations/utilityClasses/UtilityClassesData.ts +11 -1
  22. package/src/components/floatUI/styles/_variables.scss +0 -18
  23. package/src/components/menu/styles/_variables.scss +0 -20
  24. package/src/components/tanstackTable/styles/_variables.scss +0 -41
  25. package/src/stylesAndAnimations/colors/Colors.mdx +0 -32
package/src/components/tanstackTable/styles/_variables.scss DELETED
@@ -1,41 +0,0 @@
1
- // Light Theme Specific Variables
2
-
3
- :root [data-theme='light'] {
4
- --pf-tanstack-table-background-color: var(--pf-page-background-color);
5
- --pf-tanstack-table-header-background-color: var(--pf-background-color-primary);
6
-
7
- --pf-tanstack-table-font-color: var(--pf-font-color);
8
- --pf-tanstack-table-border-color: var(--pf-border-color-secondary);
9
- --pf-tanstack-table-stripe-color: var(--pf-background-color-secondary);
10
- --pf-tanstack-table-hover-color: var(--pf-background-color-tertiary);
11
- --pf-tanstack-table-disabled-color: var(--pf-background-color-quaternary);
12
- --pf-tanstack-table-checked-color: var(--pf-background-color-accent);
13
- --pf-tanstack-table-clicked-color: var(--pf-background-color-highlight);
14
- --pf-tanstack-table-highlighted-color: var(--pf-tanstack-table-font-color);
15
- --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
16
- 0 4px 8px rgba(0, 0, 0, 0.1);
17
- --pf-tanstack-table-font-size: var(--pf-font-size-body2);
18
- --pf-tanstack-table-pagination-background-color: var(--pf-tanstack-table-background-color);
19
- --pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
20
- }
21
-
22
- // Dark Theme Specific Variables
23
- :root [data-theme='dark'],
24
- :root {
25
- --pf-tanstack-table-background-color: var(--pf-page-background-color);
26
- --pf-tanstack-table-header-background-color: var(--pf-background-color-primary);
27
-
28
- --pf-tanstack-table-font-color: var(--pf-font-color);
29
- --pf-tanstack-table-border-color: var(--pf-border-color-secondary);
30
- --pf-tanstack-table-stripe-color: var(--pf-background-color-secondary);
31
- --pf-tanstack-table-hover-color: var(--pf-background-color-tertiary);
32
- --pf-tanstack-table-disabled-color: var(--pf-background-color-quaternary);
33
- --pf-tanstack-table-checked-color: var(--pf-background-color-accent);
34
- --pf-tanstack-table-clicked-color: var(--pf-background-color-highlight);
35
- --pf-tanstack-table-highlighted-color: var(--pf-tanstack-table-font-color);
36
- --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
37
- 0 4px 8px rgba(0, 0, 0, 0.1);
38
- --pf-tanstack-table-font-size: var(--pf-font-size-body2);
39
- --pf-tanstack-table-pagination-background-color: var(--pf-tanstack-table-background-color);
40
- --pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
41
- }
package/src/stylesAndAnimations/colors/Colors.mdx DELETED
@@ -1,32 +0,0 @@
1
- import { Canvas, Meta, Controls } from '@storybook/blocks';
2
- import * as Colors from './Colors.stories';
3
-
4
- <Meta title="Styles And Animations/Colors And Swatches" />
5
- # Colors
6
-
7
- Click on the swatch to copy the color to your clipboard.
8
- <Canvas of={Colors.Default} />
9
-
10
- ## CSS Variable Syntax
11
-
12
- In order to use or override a color listed above, you would use the following syntax.
13
-
14
- ### Using A Variable
15
-
16
- The syntax for invoking a variable in your CSS code follows this pattern.
17
-
18
- ```css
19
- .myElement {
20
- color: var(--pf-primary-color-100);
21
- }
22
- ```
23
-
24
- ### Overriding A Variable
25
-
26
- The syntax for overriding a variable in your CSS code follows this pattern.
27
-
28
- ```css
29
- :root {
30
- --pf-primary-color-100: #ff0000;
31
- }
32
- ```