@indico-data/design-system 3.4.0 → 3.5.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 (14) hide show
  1. package/lib/index.css +453 -166
  2. package/lib/index.esm.css +453 -166
  3. package/package.json +1 -1
  4. package/src/styles/index.scss +2 -0
  5. package/src/styles/primitives/_borderRadius.scss +20 -0
  6. package/src/styles/primitives/_breakpoints.scss +9 -0
  7. package/src/styles/{variables → primitives}/_colors.scss +26 -28
  8. package/src/styles/primitives/_iconSizes.scss +10 -0
  9. package/src/styles/primitives/_shadows.scss +9 -0
  10. package/src/styles/primitives/_spacing.scss +68 -0
  11. package/src/styles/primitives/_typography.scss +28 -0
  12. package/src/styles/primitives/index.scss +7 -0
  13. package/src/styles/tokens/_semantic-tokens.scss +172 -0
  14. package/src/styles/variables/index.scss +0 -1
package/src/styles/index.scss CHANGED
@@ -1,6 +1,8 @@
1
1
  // Globals
2
2
  @import './assets/fonts/noto/notosans.css';
3
3
  @import 'variables/index.scss';
4
+ @import 'primitives/index.scss';
5
+ @import 'tokens/semantic-tokens';
4
6
  @import 'utilities';
5
7
  @import 'sheets'; // Port to an sheets component when we build it
6
8
  @import 'typography';
package/src/styles/primitives/_borderRadius.scss ADDED
@@ -0,0 +1,20 @@
1
+ :root {
2
+ --pf-border-radius-0: 0;
3
+ --pf-border-radius-xxs: 2px;
4
+ --pf-border-radius-xs: 4px;
5
+ --pf-border-radius-sm: 6px;
6
+ --pf-border-radius-md: 8px;
7
+ --pf-border-radius-lg: 10px;
8
+ --pf-border-radius-xl: 12px;
9
+ --pf-border-radius-2xl: 16px;
10
+ --pf-border-radius-3xl: 24px;
11
+ --pf-border-radius-4xl: 32px;
12
+ --pf-border-radius-5xl: 40px;
13
+ --pf-border-radius-6xl: 48px;
14
+ --pf-border-radius-7xl: 56px;
15
+ --pf-border-radius-8xl: 64px;
16
+ --pf-border-radius-9xl: 72px;
17
+ --pf-border-radius-10xl: 80px;
18
+ --pf-border-radius-full: 999px;
19
+ --pf-border-radius-circle: 50%;
20
+ }
package/src/styles/primitives/_breakpoints.scss ADDED
@@ -0,0 +1,9 @@
1
+ :root {
2
+ /** BREAKPOINT PRIMITIVES **/
3
+ --pf-breakpoint-xs: 480px;
4
+ --pf-breakpoint-sm: 600px;
5
+ --pf-breakpoint-md: 768px;
6
+ --pf-breakpoint-lg: 1280px;
7
+ --pf-breakpoint-xl: 1440px;
8
+ --pf-breakpoint-2xl: 1920px;
9
+ }
package/src/styles/{variables → primitives}/_colors.scss RENAMED
@@ -145,36 +145,34 @@
145
145
  --pf-purple-color-900: #130e1b;
146
146
 
147
147
  --pf-white-color: #ffffff;
148
- --pf-white-color-1: rgba(255, 255, 255, 0.01);
149
- --pf-white-color-3: rgba(255, 255, 255, 0.03);
150
- --pf-white-color-5: rgba(255, 255, 255, 0.05);
151
- --pf-white-color-10: rgba(255, 255, 255, 0.1);
152
- --pf-white-color-15: rgba(255, 255, 255, 0.15);
153
- --pf-white-color-20: rgba(255, 255, 255, 0.2);
154
- --pf-white-color-30: rgba(255, 255, 255, 0.3);
155
- --pf-white-color-40: rgba(255, 255, 255, 0.4);
156
- --pf-white-color-50: rgba(255, 255, 255, 0.5);
157
- --pf-white-color-60: rgba(255, 255, 255, 0.6);
158
- --pf-white-color-70: rgba(255, 255, 255, 0.7);
159
- --pf-white-color-80: rgba(255, 255, 255, 0.8);
160
- --pf-white-color-90: rgba(255, 255, 255, 0.9);
161
- --pf-white-color-100: rgba(255, 255, 255, 1);
148
+ --pf-opacity-white-50: rgba(255, 255, 255, 0.01);
149
+ --pf-opacity-white-100: rgba(255, 255, 255, 0.03);
150
+ --pf-opacity-white-150: rgba(255, 255, 255, 0.05);
151
+ --pf-opacity-white-200: rgba(255, 255, 255, 0.1);
152
+ --pf-opacity-white-250: rgba(255, 255, 255, 0.15);
153
+ --pf-opacity-white-300: rgba(255, 255, 255, 0.2);
154
+ --pf-opacity-white-400: rgba(255, 255, 255, 0.3);
155
+ --pf-opacity-white-450: rgba(255, 255, 255, 0.4);
156
+ --pf-opacity-white-500: rgba(255, 255, 255, 0.5);
157
+ --pf-opacity-white-600: rgba(255, 255, 255, 0.6);
158
+ --pf-opacity-white-700: rgba(255, 255, 255, 0.7);
159
+ --pf-opacity-white-800: rgba(255, 255, 255, 0.8);
160
+ --pf-opacity-white-900: rgba(255, 255, 255, 0.9);
162
161
 
163
162
  --pf-black-color: #000000;
164
- --pf-black-color-1: rgba(0, 0, 0, 0.01);
165
- --pf-black-color-3: rgba(0, 0, 0, 0.03);
166
- --pf-black-color-5: rgba(0, 0, 0, 0.05);
167
- --pf-black-color-10: rgba(0, 0, 0, 0.1);
168
- --pf-black-color-15: rgba(0, 0, 0, 0.15);
169
- --pf-black-color-20: rgba(0, 0, 0, 0.2);
170
- --pf-black-color-30: rgba(0, 0, 0, 0.3);
171
- --pf-black-color-40: rgba(0, 0, 0, 0.4);
172
- --pf-black-color-50: rgba(0, 0, 0, 0.5);
173
- --pf-black-color-60: rgba(0, 0, 0, 0.6);
174
- --pf-black-color-70: rgba(0, 0, 0, 0.7);
175
- --pf-black-color-80: rgba(0, 0, 0, 0.8);
176
- --pf-black-color-90: rgba(0, 0, 0, 0.9);
177
- --pf-black-color-100: rgba(0, 0, 0, 1);
163
+ --pf-opacity-black-50: rgba(0, 0, 0, 0.01);
164
+ --pf-opacity-black-100: rgba(0, 0, 0, 0.03);
165
+ --pf-opacity-black-150: rgba(0, 0, 0, 0.05);
166
+ --pf-opacity-black-200: rgba(0, 0, 0, 0.1);
167
+ --pf-opacity-black-250: rgba(0, 0, 0, 0.15);
168
+ --pf-opacity-black-300: rgba(0, 0, 0, 0.2);
169
+ --pf-opacity-black-400: rgba(0, 0, 0, 0.3);
170
+ --pf-opacity-black-450: rgba(0, 0, 0, 0.4);
171
+ --pf-opacity-black-500: rgba(0, 0, 0, 0.5);
172
+ --pf-opacity-black-600: rgba(0, 0, 0, 0.6);
173
+ --pf-opacity-black-700: rgba(0, 0, 0, 0.7);
174
+ --pf-opacity-black-800: rgba(0, 0, 0, 0.8);
175
+ --pf-opacity-black-900: rgba(0, 0, 0, 0.9);
178
176
 
179
177
  /** COLOR FAMILIES **/
180
178
 
package/src/styles/primitives/_iconSizes.scss ADDED
@@ -0,0 +1,10 @@
1
+ :root {
2
+ --pf-icon-size-xs: 10px;
3
+ --pf-icon-size-sm: 12px;
4
+ --pf-icon-size-md: 16px;
5
+ // Figma has a 20
6
+ --pf-icon-size-lg: 24px;
7
+ --pf-icon-size-xl: 32px;
8
+ --pf-icon-size-2xl: 48px;
9
+ --pf-icon-size-3xl: 64px;
10
+ }
package/src/styles/primitives/_shadows.scss ADDED
@@ -0,0 +1,9 @@
1
+ :root {
2
+ --pf-shadow-xs: rgba(0, 0, 0, 0.1);
3
+ --pf-shadow-sm: rgba(0, 0, 0, 0.15);
4
+ --pf-shadow-md: rgba(0, 0, 0, 0.2);
5
+ --pf-shadow-lg: rgba(0, 0, 0, 0.25);
6
+ --pf-shadow-xl: rgba(0, 0, 0, 0.3);
7
+ --pf-shadow-2xl: rgba(0, 0, 0, 0.35);
8
+ --pf-shadow-inner: rgba(0, 0, 0, 0.2);
9
+ }
package/src/styles/primitives/_spacing.scss ADDED
@@ -0,0 +1,68 @@
1
+ :root {
2
+ --pf-spacing-negative-27xl: -384px;
3
+ --pf-spacing-negative-26xl: -320px;
4
+ --pf-spacing-negative-25xl: -288px;
5
+ --pf-spacing-negative-24xl: -256px;
6
+ --pf-spacing-negative-23xl: -240px;
7
+ --pf-spacing-negative-22xl: -224px;
8
+ --pf-spacing-negative-21xl: -208px;
9
+ --pf-spacing-negative-20xl: -192px;
10
+ --pf-spacing-negative-19xl: -176px;
11
+ --pf-spacing-negative-18xl: -160px;
12
+ --pf-spacing-negative-17xl: -144px;
13
+ --pf-spacing-negative-16xl: -128px;
14
+ --pf-spacing-negative-15xl: -112px;
15
+ --pf-spacing-negative-14xl: -96px;
16
+ --pf-spacing-negative-13xl: -80px;
17
+ --pf-spacing-negative-12xl: -64px;
18
+ --pf-spacing-negative-11xl: -56px;
19
+ --pf-spacing-negative-10xl: -48px;
20
+ --pf-spacing-negative-9xl: -44px;
21
+ --pf-spacing-negative-8xl: -40px;
22
+ --pf-spacing-negative-7xl: -36px;
23
+ --pf-spacing-negative-6xl: -32px;
24
+ --pf-spacing-negative-5xl: -28px;
25
+ --pf-spacing-negative-4xl: -24px;
26
+ --pf-spacing-negative-3xl: -20px;
27
+ --pf-spacing-negative-2xl: -16px;
28
+ --pf-spacing-negative-xl: -14px;
29
+ --pf-spacing-negative-lg: -12px;
30
+ --pf-spacing-negative-sm: -8px;
31
+ --pf-spacing-negative-xs: -6px;
32
+ --pf-spacing-negative-xxs: -4px;
33
+ --pf-spacing-negative-micro: -2px;
34
+ --pf-spacing-none: 0;
35
+ --pf-spacing-micro: 2px;
36
+ --pf-spacing-xxs: 4px;
37
+ --pf-spacing-xs: 6px;
38
+ --pf-spacing-sm: 8px;
39
+ --pf-spacing-md: 10px;
40
+ --pf-spacing-lg: 12px;
41
+ --pf-spacing-xl: 14px;
42
+ --pf-spacing-2xl: 16px;
43
+ --pf-spacing-3xl: 20px;
44
+ --pf-spacing-4xl: 24px;
45
+ --pf-spacing-5xl: 28px;
46
+ --pf-spacing-6xl: 32px;
47
+ --pf-spacing-7xl: 36px;
48
+ --pf-spacing-8xl: 40px;
49
+ --pf-spacing-9xl: 44px;
50
+ --pf-spacing-10xl: 48px;
51
+ --pf-spacing-11xl: 56px;
52
+ --pf-spacing-12xl: 64px;
53
+ --pf-spacing-13xl: 80px;
54
+ --pf-spacing-14xl: 96px;
55
+ --pf-spacing-15xl: 112px;
56
+ --pf-spacing-16xl: 128px;
57
+ --pf-spacing-17xl: 144px;
58
+ --pf-spacing-18xl: 160px;
59
+ --pf-spacing-19xl: 176px;
60
+ --pf-spacing-20xl: 192px;
61
+ --pf-spacing-21xl: 208px;
62
+ --pf-spacing-22xl: 224px;
63
+ --pf-spacing-23xl: 240px;
64
+ --pf-spacing-24xl: 256px;
65
+ --pf-spacing-25xl: 288px;
66
+ --pf-spacing-26xl: 320px;
67
+ --pf-spacing-27xl: 384px;
68
+ }
package/src/styles/primitives/_typography.scss ADDED
@@ -0,0 +1,28 @@
1
+ :root {
2
+ /** Font Family **/
3
+ --pf-font-family: Noto Sans;
4
+
5
+ /** Font Weights **/
6
+ --pf-font-weight-light: 300;
7
+ --pf-font-weight-regular: 400;
8
+ --pf-font-weight-medium: 500;
9
+ --pf-font-weight-semibold: 600;
10
+ --pf-font-weight-bold: 700;
11
+
12
+ /** Font Sizes **/
13
+ --pf-font-size-xs: 0.625rem; /* 10px */
14
+ --pf-font-size-sm: 0.75rem; /* 12px */
15
+ --pf-font-size-base: 0.8125rem; /* 13px */
16
+ --pf-font-size-md: 0.875rem; /* 14px */
17
+ --pf-font-size-lg: 0.9375rem; /* 15px */
18
+ --pf-font-size-xl: 1rem; /* 16px */
19
+ --pf-font-size-2xl: 1.125rem; /* 18px */
20
+ --pf-font-size-3xl: 1.25rem; /* 20px */
21
+ --pf-font-size-4xl: 1.5rem; /* 24px */
22
+ --pf-font-size-5xl: 1.875rem; /* 30px */
23
+ --pf-font-size-6xl: 2.125rem; /* 34px */
24
+ --pf-font-size-7xl: 2.25rem; /* 36px */
25
+ --pf-font-size-8xl: 3rem; /* 48px */
26
+ --pf-font-size-9xl: 3.75rem; /* 60px */
27
+ --pf-font-size-10xl: 6rem; /* 96px */
28
+ }
package/src/styles/primitives/index.scss ADDED
@@ -0,0 +1,7 @@
1
+ @import 'colors';
2
+ @import 'borderRadius';
3
+ @import 'breakpoints';
4
+ @import 'iconSizes';
5
+ @import 'shadows';
6
+ @import 'spacing';
7
+ @import 'typography';
package/src/styles/tokens/_semantic-tokens.scss ADDED
@@ -0,0 +1,172 @@
1
+ // ============================================================================
2
+ // SEMANTIC TOKENS - Following Figma's Exact Token Structure
3
+ // ============================================================================
4
+ // These tokens map semantic meaning to our base palette colors and align with Figma
5
+ // All tokens use --pf-semantic prefix. Eventually the word 'semantic' should be removed.
6
+ // In the meantime, it is helpful to distinguish existing tokens with figma aligned ones
7
+
8
+ // Light Theme
9
+ :root [data-theme='light'] {
10
+ // Utility Colors
11
+ --pf-semantic-utility-info-default: var(--pf-secondary-color-450);
12
+ --pf-semantic-utility-info-light: var(--pf-secondary-color-400);
13
+ --pf-semantic-utility-info-dark: var(--pf-secondary-color-550);
14
+ --pf-semantic-utility-warning-default: var(--pf-yellow-color-400);
15
+ --pf-semantic-utility-warning-light: var(--pf-yellow-color-300);
16
+ --pf-semantic-utility-warning-dark: var(--pf-yellow-color-550);
17
+ --pf-semantic-utility-error-default: var(--pf-red-color-450);
18
+ --pf-semantic-utility-error-light: var(--pf-red-color-300);
19
+ --pf-semantic-utility-error-dark: var(--pf-red-color-600);
20
+ --pf-semantic-utility-success-default: var(--pf-green-color-500);
21
+ --pf-semantic-utility-success-light: var(--pf-green-color-400);
22
+ --pf-semantic-utility-success-dark: var(--pf-green-color-600);
23
+ --pf-semantic-utility-neutral-default: var(--pf-gray-color-500);
24
+ --pf-semantic-utility-neutral-light: var(--pf-gray-color-400);
25
+ --pf-semantic-utility-neutral-dark: var(--pf-gray-color-600);
26
+ --pf-semantic-utility-brand-default: var(--pf-blue-color-450);
27
+ --pf-semantic-utility-brand-light: var(--pf-blue-color-300);
28
+ --pf-semantic-utility-brand-dark: var(--pf-blue-color-550);
29
+ --pf-semantic-utility-pending-default: var(--pf-pink-color-500);
30
+ --pf-semantic-utility-pending-light: var(--pf-pink-color-300);
31
+ --pf-semantic-utility-pending-dark: var(--pf-pink-color-600);
32
+ --pf-semantic-utility-orange-default: var(--pf-orange-color-400);
33
+ --pf-semantic-utility-orange-light: var(--pf-orange-color-300);
34
+ --pf-semantic-utility-orange-dark: var(--pf-orange-color-500);
35
+ --pf-semantic-utility-purple-default: var(--pf-purple-color-500);
36
+ --pf-semantic-utility-purple-light: var(--pf-purple-color-300);
37
+ --pf-semantic-utility-purple-dark: var(--pf-purple-color-600);
38
+ --pf-semantic-utility-teal-default: var(--pf-teal-color-550);
39
+ --pf-semantic-utility-teal-light: var(--pf-teal-color-300);
40
+ --pf-semantic-utility-teal-dark: var(--pf-teal-color-600);
41
+
42
+ // Background
43
+ --pf-semantic-page-background: var(--pf-gray-color-100);
44
+ --pf-semantic-background-primary: var(--pf-gray-color-150);
45
+ --pf-semantic-background-secondary: var(--pf-gray-color-50);
46
+ --pf-semantic-background-tertiary: var(--pf-gray-color-200);
47
+ --pf-semantic-background-quaternary: var(--pf-gray-color-250);
48
+ --pf-semantic-background-accent: var(--pf-secondary-color-200);
49
+ --pf-semantic-background-highlight: var(--pf-blue-color-250);
50
+ --pf-semantic-background-brand-solid: var(--pf-blue-color-500);
51
+ --pf-semantic-background-brand-hover: var(--pf-blue-color-600);
52
+ --pf-semantic-background-inverted: var(--pf-tertiary-color-900);
53
+
54
+ // Border
55
+ --pf-semantic-border-primary: var(--pf-gray-color-300);
56
+ --pf-semantic-border-secondary: var(--pf-gray-color-250);
57
+ --pf-semantic-border-hover: var(--pf-gray-color-400);
58
+ --pf-semantic-border-soft: var(--pf-secondary-color-450);
59
+ --pf-semantic-border-accent: var(--pf-blue-color-450);
60
+ --pf-semantic-border-error: var(--pf-red-color-450);
61
+ --pf-semantic-border-warning: var(--pf-yellow-color-400);
62
+ --pf-semantic-border-pending: var(--pf-orange-color-400);
63
+ --pf-semantic-border-success: var(--pf-green-color-500);
64
+ --pf-semantic-border-info: var(--pf-secondary-color-450);
65
+ --pf-semantic-border-neutral: var(--pf-gray-color-500);
66
+
67
+ // Brand Logo
68
+ --pf-semantic-logo-primary: var(--pf-blue-color-450);
69
+ --pf-semantic-logo-secondary: var(--pf-primary-color-800);
70
+
71
+ // Font & Icon
72
+ --pf-semantic-font-regular: var(--pf-primary-color-800);
73
+ --pf-semantic-font-inverted: var(--pf-gray-color-50);
74
+ --pf-semantic-font-soft: var(--pf-gray-color-700);
75
+ --pf-semantic-font-mute: var(--pf-gray-color-800);
76
+ --pf-semantic-font-link: var(--pf-blue-color-500);
77
+ --pf-semantic-font-placeholder: var(--pf-gray-color-450);
78
+ --pf-semantic-font-disabled: var(--pf-gray-color-400);
79
+ --pf-semantic-font-accent: var(--pf-blue-color-500);
80
+ --pf-semantic-font-error: var(--pf-red-color-450);
81
+ --pf-semantic-font-success: var(--pf-green-color-600);
82
+
83
+ // Elevation
84
+ --pf-semantic-elevation-1: var(--pf-opacity-black-100);
85
+ --pf-semantic-elevation-2: var(--pf-opacity-black-150);
86
+ --pf-semantic-elevation-3: var(--pf-opacity-black-200);
87
+ --pf-semantic-elevation-4: var(--pf-opacity-black-250);
88
+ --pf-semantic-elevation-5: var(--pf-opacity-black-300);
89
+ }
90
+
91
+ // Dark Theme
92
+ :root [data-theme='dark'] {
93
+ // Utility Colors
94
+ --pf-semantic-utility-info-default: var(--pf-secondary-color-450);
95
+ --pf-semantic-utility-info-light: var(--pf-secondary-color-400);
96
+ --pf-semantic-utility-info-dark: var(--pf-secondary-color-550);
97
+ --pf-semantic-utility-warning-default: var(--pf-yellow-color-400);
98
+ --pf-semantic-utility-warning-light: var(--pf-yellow-color-300);
99
+ --pf-semantic-utility-warning-dark: var(--pf-yellow-color-550);
100
+ --pf-semantic-utility-error-default: var(--pf-red-color-450);
101
+ --pf-semantic-utility-error-light: var(--pf-red-color-300);
102
+ --pf-semantic-utility-error-dark: var(--pf-red-color-500);
103
+ --pf-semantic-utility-success-default: var(--pf-green-color-500);
104
+ --pf-semantic-utility-success-light: var(--pf-green-color-400);
105
+ --pf-semantic-utility-success-dark: var(--pf-green-color-600);
106
+ --pf-semantic-utility-neutral-default: var(--pf-gray-color-500);
107
+ --pf-semantic-utility-neutral-light: var(--pf-gray-color-400);
108
+ --pf-semantic-utility-neutral-dark: var(--pf-gray-color-600);
109
+ --pf-semantic-utility-brand-default: var(--pf-blue-color-450);
110
+ --pf-semantic-utility-brand-light: var(--pf-blue-color-300);
111
+ --pf-semantic-utility-brand-dark: var(--pf-blue-color-550);
112
+ --pf-semantic-utility-pending-default: var(--pf-pink-color-500);
113
+ --pf-semantic-utility-pending-light: var(--pf-pink-color-300);
114
+ --pf-semantic-utility-pending-dark: var(--pf-pink-color-600);
115
+ --pf-semantic-utility-orange-default: var(--pf-orange-color-400);
116
+ --pf-semantic-utility-orange-light: var(--pf-orange-color-300);
117
+ --pf-semantic-utility-orange-dark: var(--pf-orange-color-500);
118
+ --pf-semantic-utility-purple-default: var(--pf-purple-color-500);
119
+ --pf-semantic-utility-purple-light: var(--pf-purple-color-300);
120
+ --pf-semantic-utility-purple-dark: var(--pf-purple-color-600);
121
+ --pf-semantic-utility-teal-default: var(--pf-teal-color-550);
122
+ --pf-semantic-utility-teal-light: var(--pf-teal-color-300);
123
+ --pf-semantic-utility-teal-dark: var(--pf-teal-color-600);
124
+
125
+ // Background
126
+ --pf-semantic-page-background: var(--pf-primary-color-700);
127
+ --pf-semantic-background-primary: var(--pf-primary-color-900);
128
+ --pf-semantic-background-secondary: var(--pf-primary-color-800);
129
+ --pf-semantic-background-tertiary: var(--pf-primary-color-600);
130
+ --pf-semantic-background-quaternary: var(--pf-primary-color-500);
131
+ --pf-semantic-background-accent: var(--pf-blue-color-800);
132
+ --pf-semantic-background-highlight: var(--pf-blue-color-700);
133
+ --pf-semantic-background-brand-solid: var(--pf-secondary-color-450);
134
+ --pf-semantic-background-brand-hover: var(--pf-secondary-color-600);
135
+ --pf-semantic-background-inverted: var(--pf-tertiary-color-100);
136
+
137
+ // Border
138
+ --pf-semantic-border-primary: var(--pf-tertiary-color-700);
139
+ --pf-semantic-border-secondary: var(--pf-primary-color-600);
140
+ --pf-semantic-border-hover: var(--pf-tertiary-color-600);
141
+ --pf-semantic-border-soft: var(--pf-secondary-color-600);
142
+ --pf-semantic-border-accent: var(--pf-secondary-color-400);
143
+ --pf-semantic-border-error: var(--pf-red-color-450);
144
+ --pf-semantic-border-warning: var(--pf-yellow-color-400);
145
+ --pf-semantic-border-pending: var(--pf-orange-color-400);
146
+ --pf-semantic-border-success: var(--pf-green-color-500);
147
+ --pf-semantic-border-info: var(--pf-secondary-color-450);
148
+ --pf-semantic-border-neutral: var(--pf-gray-color-500);
149
+
150
+ // Brand Logo
151
+ --pf-semantic-logo-primary: var(--pf-blue-color-450);
152
+ --pf-semantic-logo-secondary: var(--pf-gray-color-50);
153
+
154
+ // Font & Icon
155
+ --pf-semantic-font-regular: var(--pf-gray-color-50);
156
+ --pf-semantic-font-inverted: var(--pf-gray-color-900);
157
+ --pf-semantic-font-soft: var(--pf-tertiary-color-300);
158
+ --pf-semantic-font-mute: var(--pf-tertiary-color-400);
159
+ --pf-semantic-font-link: var(--pf-secondary-color-400);
160
+ --pf-semantic-font-placeholder: var(--pf-tertiary-color-450);
161
+ --pf-semantic-font-disabled: var(--pf-tertiary-color-700);
162
+ --pf-semantic-font-accent: var(--pf-secondary-color-400);
163
+ --pf-semantic-font-error: var(--pf-red-color-300);
164
+ --pf-semantic-font-success: var(--pf-green-color-400);
165
+
166
+ // Elevation
167
+ --pf-semantic-elevation-1: var(--pf-opacity-black-200);
168
+ --pf-semantic-elevation-2: var(--pf-opacity-black-250);
169
+ --pf-semantic-elevation-3: var(--pf-opacity-black-300);
170
+ --pf-semantic-elevation-4: var(--pf-opacity-black-400);
171
+ --pf-semantic-elevation-5: var(--pf-opacity-black-450);
172
+ }
package/src/styles/variables/index.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @import 'typography';
2
- @import 'colors';
3
2
  @import 'icons';
4
3
  @import 'borders';
5
4
  @import 'padding';