Skip to content

Commit 8b9fd0e

Browse files
j-mesj-mes
committed
chore: update to include error/success colours
1 parent 4e0b304 commit 8b9fd0e

File tree

18 files changed

+133
-81
lines changed

18 files changed

+133
-81
lines changed

‎apps/dictionary/tokens/core/components/o3-form.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
},
1414
"error": {
1515
"value": {
16-
"color": "{o3.color.use-case.error}",
16+
"color": "{o3.color.use-case.error-foreground}",
1717
"width": "1.5px",
1818
"style": "solid"
1919
},
@@ -39,4 +39,4 @@
3939
}
4040
}
4141
}
42-
}
42+
}

‎apps/dictionary/tokens/core/professional/components/o3-form.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
},
1414
"error": {
1515
"value": {
16-
"color": "{o3.color.use-case.error}",
16+
"color": "{o3.color.use-case.error-foreground}",
1717
"width": "1.5px",
1818
"style": "solid"
1919
},
@@ -39,4 +39,4 @@
3939
}
4040
}
4141
}
42-
}
42+
}

‎apps/dictionary/tokens/core/use-case/color.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -141,21 +141,21 @@
141141
"type": "color"
142142
}
143143
},
144-
"error-text": {
145-
"value": "#972217",
146-
"type": "color"
147-
},
148144
"error-background": {
149145
"value": "#F7EBE5",
150146
"type": "color"
151147
},
152-
"success-text": {
153-
"value": "#00572C",
148+
"error-foreground": {
149+
"value": "#972217",
154150
"type": "color"
155151
},
156152
"success-background": {
157153
"value": "#D7F0D1",
158154
"type": "color"
155+
},
156+
"success-foreground": {
157+
"value": "#00572C",
158+
"type": "color"
159159
}
160160
}
161161
}

‎apps/dictionary/tokens/internal/components/o3-form.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,4 @@
3939
}
4040
}
4141
}
42-
}
42+
}

‎apps/dictionary/tokens/internal/use-case/color.json

+9-5
Original file line numberDiff line numberDiff line change
@@ -130,15 +130,19 @@
130130
}
131131
},
132132
"error-background": {
133-
"value": "rgba(204,0,0,0.06)",
133+
"value": "#F7EBE5",
134134
"type": "color"
135135
},
136-
"error-text": {
137-
"value": "{o3.color.palette.crimson}",
136+
"error-foreground": {
137+
"value": "#972217",
138138
"type": "color"
139139
},
140-
"error": {
141-
"value": "{o3.color.palette.crimson}",
140+
"success-background": {
141+
"value": "#D7F0D1",
142+
"type": "color"
143+
},
144+
"success-foreground": {
145+
"value": "#00572C",
142146
"type": "color"
143147
}
144148
}

‎apps/dictionary/tokens/sustainable-views/use-case/color.json

+9-5
Original file line numberDiff line numberDiff line change
@@ -118,15 +118,19 @@
118118
}
119119
},
120120
"error-background": {
121-
"value": "rgba(204,0,0,0.06)",
121+
"value": "#F7EBE5",
122122
"type": "color"
123123
},
124-
"error-text": {
125-
"value": "{o3.color.palette.crimson}",
124+
"error-foreground": {
125+
"value": "#972217",
126126
"type": "color"
127127
},
128-
"error": {
129-
"value": "{o3.color.palette.crimson}",
128+
"success-background": {
129+
"value": "#D7F0D1",
130+
"type": "color"
131+
},
132+
"success-foreground": {
133+
"value": "#00572C",
130134
"type": "color"
131135
}
132136
}

‎apps/dictionary/tokens/whitelabel/use-case/color.json

+9-5
Original file line numberDiff line numberDiff line change
@@ -129,15 +129,19 @@
129129
}
130130
},
131131
"error-background": {
132-
"value": "rgba(204,0,0,0.06)",
132+
"value": "#F7EBE5",
133133
"type": "color"
134134
},
135-
"error-text": {
136-
"value": "{o3.color.palette.crimson}",
135+
"error-foreground": {
136+
"value": "#972217",
137137
"type": "color"
138138
},
139-
"error": {
140-
"value": "{o3.color.palette.crimson}",
139+
"success-background": {
140+
"value": "#D7F0D1",
141+
"type": "color"
142+
},
143+
"success-foreground": {
144+
"value": "#00572C",
141145
"type": "color"
142146
}
143147
}

‎components/o-private-foundation/src/scss/tokens/core.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -105,9 +105,10 @@ $tokens: (
105105
'o3-color-use-case-button-hover': #0a5e66,
106106
'o3-color-use-case-button-pressed': #052f33,
107107
'o3-color-use-case-button-disabled': #9ec0bd,
108-
'o3-color-use-case-error-background': rgba(204, 0, 0, 0.06),
109-
'o3-color-use-case-error-text': #cc0000,
110-
'o3-color-use-case-error': #cc0000,
108+
'o3-color-use-case-error-background': #f7ebe5,
109+
'o3-color-use-case-error-foreground': #972217,
110+
'o3-color-use-case-success-background': #d7f0d1,
111+
'o3-color-use-case-success-foreground': #00572c,
111112
'_o3-button-primary-standard-color': #ffffff,
112113
'_o3-button-primary-standard-background': #0d7680,
113114
'_o3-button-primary-standard-border': rgba(255, 255, 255, 0),
@@ -404,7 +405,7 @@ $tokens: (
404405
'_o3-form-color-use-case-selected-active': #052f33,
405406
'_o3-form-color-use-case-selected-disabled': #9ec0bd,
406407
'_o3-form-input-border': 1.5px solid #b3a9a0,
407-
'_o3-form-input-border-error': 1.5px solid #cc0000,
408+
'_o3-form-input-border-error': 1.5px solid #972217,
408409
'_o3-form-input-border-radius': 0.125rem,
409410
'_o3-form-error-summary-background-color': rgba(204, 0, 0, 0.14),
410411
'_o3-form-icon-error': url("data:image/svg+xml,%3Csvg%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M17.4528%2011.25C17.4528%2010.9739%2017.229%2010.75%2016.9528%2010.75H7.04718C6.77104%2010.75%206.54718%2010.9739%206.54718%2011.25V12.75C6.54718%2013.0261%206.77104%2013.25%207.04718%2013.25H16.9528C17.229%2013.25%2017.4528%2013.0261%2017.4528%2012.75V11.25Z%22%20fill=%22black%22/%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M22%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012C2%206.47715%206.47715%202%2012%202C17.5228%202%2022%206.47715%2022%2012ZM20%2012C20%2016.4183%2016.4183%2020%2012%2020C7.58172%2020%204%2016.4183%204%2012C4%207.58172%207.58172%204%2012%204C16.4183%204%2020%207.58172%2020%2012Z%22%20fill=%22black%22/%3E%3C/svg%3E"),

‎components/o-private-foundation/src/scss/tokens/professional.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -114,9 +114,10 @@ $tokens: (
114114
'o3-color-use-case-button-hover': #515257,
115115
'o3-color-use-case-button-pressed': #7d7a7a,
116116
'o3-color-use-case-button-disabled': #d4c9c1,
117-
'o3-color-use-case-error-background': rgba(204, 0, 0, 0.06),
118-
'o3-color-use-case-error-text': #cc0000,
119-
'o3-color-use-case-error': #cc0000,
117+
'o3-color-use-case-error-background': #f7ebe5,
118+
'o3-color-use-case-error-foreground': #972217,
119+
'o3-color-use-case-success-background': #d7f0d1,
120+
'o3-color-use-case-success-foreground': #00572c,
120121
'o3-spacing-5xs': 0.25rem,
121122
'o3-spacing-4xs': 0.5rem,
122123
'o3-spacing-3xs': 0.75rem,
@@ -445,7 +446,7 @@ $tokens: (
445446
'_o3-form-color-use-case-selected-active': #7d7a7a,
446447
'_o3-form-color-use-case-selected-disabled': #d4c9c1,
447448
'_o3-form-input-border': 1.5px solid #b3a9a0,
448-
'_o3-form-input-border-error': 1.5px solid #cc0000,
449+
'_o3-form-input-border-error': 1.5px solid #972217,
449450
'_o3-form-input-border-radius': 0.125rem,
450451
'_o3-form-error-summary-background-color': rgba(204, 0, 0, 0.14),
451452
'_o3-form-icon-error': url("data:image/svg+xml,%3Csvg%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M17.4528%2011.25C17.4528%2010.9739%2017.229%2010.75%2016.9528%2010.75H7.04718C6.77104%2010.75%206.54718%2010.9739%206.54718%2011.25V12.75C6.54718%2013.0261%206.77104%2013.25%207.04718%2013.25H16.9528C17.229%2013.25%2017.4528%2013.0261%2017.4528%2012.75V11.25Z%22%20fill=%22black%22/%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M22%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012C2%206.47715%206.47715%202%2012%202C17.5228%202%2022%206.47715%2022%2012ZM20%2012C20%2016.4183%2016.4183%2020%2012%2020C7.58172%2020%204%2016.4183%204%2012C4%207.58172%207.58172%204%2012%204C16.4183%204%2020%207.58172%2020%2012Z%22%20fill=%22black%22/%3E%3C/svg%3E"),

‎components/o3-form/src/css/tokens/core/o3-form/_variables.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@
1313
--_o3-form-color-use-case-border-disabled: var(--o3-color-palette-black-10);
1414
--_o3-form-color-use-case-selected-disabled: var(--o3-color-use-case-button-disabled);
1515
--_o3-form-input-border: 1.5px solid #b3a9a0;
16+
--_o3-form-input-border-error: 1.5px solid #972217;
1617
--_o3-form-input-border-radius: var(--o3-border-radius-1);
1718
--_o3-form-color-use-case-border-hover: var(--o3-color-use-case-button-hover);
1819
--_o3-form-color-use-case-border-active: var(--o3-color-use-case-button-pressed);
1920
--_o3-form-color-use-case-selected: var(--o3-color-use-case-button-default);
2021
--_o3-form-color-use-case-selected-hover: var(--o3-color-use-case-button-hover);
2122
--_o3-form-color-use-case-selected-active: var(--o3-color-use-case-button-pressed);
22-
--_o3-form-input-border-error: 1.5px solid #cc0000;
2323
}

‎components/o3-form/src/css/tokens/core/professional/o3-form/_variables.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
--_o3-form-color-use-case-selected-active: var(--o3-color-use-case-button-pressed);
1818
--_o3-form-color-use-case-selected-disabled: var(--o3-color-use-case-button-disabled);
1919
--_o3-form-input-border: 1.5px solid #b3a9a0;
20+
--_o3-form-input-border-error: 1.5px solid #972217;
2021
--_o3-form-input-border-radius: var(--o3-border-radius-1);
2122
--_o3-form-color-use-case-selected: var(--o3-color-use-case-button-default);
22-
--_o3-form-input-border-error: 1.5px solid #cc0000;
2323
}

‎components/o3-foundation/src/css/tokens/core/_variables.css

+4-3
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,10 @@
8484
--o3-color-use-case-link-inverse-underline-hover: #d4d4d6;
8585
--o3-color-use-case-muted-inverse-text: #a8aaad; /* "Muted" text is less prominent, for example credits and captions. */
8686
--o3-color-use-case-button-disabled: #9ec0bd;
87-
--o3-color-use-case-error-background: rgba(204, 0, 0, 0.06);
87+
--o3-color-use-case-error-background: #f7ebe5;
88+
--o3-color-use-case-error-foreground: #972217;
89+
--o3-color-use-case-success-background: #d7f0d1;
90+
--o3-color-use-case-success-foreground: #00572c;
8891
--o3-spacing-5xs: 0.25rem;
8992
--o3-spacing-4xs: 0.5rem;
9093
--o3-spacing-3xs: 0.75rem;
@@ -182,8 +185,6 @@
182185
--o3-color-use-case-button-default: var(--o3-color-palette-teal);
183186
--o3-color-use-case-button-hover: var(--o3-color-palette-teal-40);
184187
--o3-color-use-case-button-pressed: var(--o3-color-palette-teal-20);
185-
--o3-color-use-case-error-text: var(--o3-color-palette-crimson);
186-
--o3-color-use-case-error: var(--o3-color-palette-crimson);
187188
--o3-type-display-lg-font-family: var(--o3-font-family-financier-display); /* Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
188189
--o3-type-display-lg-font-weight: var(--o3-font-weight-bold); /* Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
189190
--o3-type-display-lg-font-size: var(--o3-font-size-7); /* Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */

‎components/o3-foundation/src/css/tokens/core/professional/_variables.css

+4-3
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,10 @@
8989
--o3-color-use-case-button-hover: #515257;
9090
--o3-color-use-case-button-pressed: #7d7a7a;
9191
--o3-color-use-case-button-disabled: #d4c9c1;
92-
--o3-color-use-case-error-background: rgba(204, 0, 0, 0.06);
92+
--o3-color-use-case-error-background: #f7ebe5;
93+
--o3-color-use-case-error-foreground: #972217;
94+
--o3-color-use-case-success-background: #d7f0d1;
95+
--o3-color-use-case-success-foreground: #00572c;
9396
--o3-spacing-5xs: 0.25rem;
9497
--o3-spacing-4xs: 0.5rem;
9598
--o3-spacing-3xs: 0.75rem;
@@ -193,8 +196,6 @@
193196
--o3-color-use-case-caption-text: var(--o3-color-palette-black-80);
194197
--o3-color-use-case-button-foreground: var(--o3-color-palette-white);
195198
--o3-color-use-case-button-default: var(--o3-color-palette-slate);
196-
--o3-color-use-case-error-text: var(--o3-color-palette-crimson);
197-
--o3-color-use-case-error: var(--o3-color-palette-crimson);
198199
--o3-type-display-lg-font-family: var(--o3-font-family-financier-display); /* Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
199200
--o3-type-display-lg-font-weight: var(--o3-font-weight-bold); /* Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */
200201
--o3-type-display-lg-font-size: var(--o3-font-size-7); /* Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages. */

‎libraries/o3-tooling-token/build/core/_variables.js

+36-18
Original file line numberDiff line numberDiff line change
@@ -1937,8 +1937,8 @@ export default {
19371937
},
19381938
"o3-color-use-case-error-background": {
19391939
"shortName": "error-background",
1940-
"value": "rgba(204, 0, 0, 0.06)",
1941-
"originalValue": "rgba(204,0,0,0.06)",
1940+
"value": "#f7ebe5",
1941+
"originalValue": "#F7EBE5",
19421942
"type": "color",
19431943
"attributes": {
19441944
"item": "use-case",
@@ -1953,41 +1953,59 @@ export default {
19531953
"css": "--o3-color-use-case-error-background",
19541954
"figma": "o3/color/use-case/error-background"
19551955
},
1956-
"o3-color-use-case-error-text": {
1957-
"shortName": "error-text",
1958-
"value": "#cc0000",
1959-
"originalValue": "{o3.color.palette.crimson}",
1956+
"o3-color-use-case-error-foreground": {
1957+
"shortName": "error-foreground",
1958+
"value": "#972217",
1959+
"originalValue": "#972217",
19601960
"type": "color",
19611961
"attributes": {
19621962
"item": "use-case",
1963-
"subitem": "error-text"
1963+
"subitem": "error-foreground"
19641964
},
19651965
"path": [
19661966
"o3",
19671967
"color",
19681968
"use-case",
1969-
"error-text"
1969+
"error-foreground"
19701970
],
1971-
"css": "--o3-color-use-case-error-text",
1972-
"figma": "o3/color/use-case/error-text"
1971+
"css": "--o3-color-use-case-error-foreground",
1972+
"figma": "o3/color/use-case/error-foreground"
19731973
},
1974-
"o3-color-use-case-error": {
1975-
"shortName": "error",
1976-
"value": "#cc0000",
1977-
"originalValue": "{o3.color.palette.crimson}",
1974+
"o3-color-use-case-success-background": {
1975+
"shortName": "success-background",
1976+
"value": "#d7f0d1",
1977+
"originalValue": "#D7F0D1",
1978+
"type": "color",
1979+
"attributes": {
1980+
"item": "use-case",
1981+
"subitem": "success-background"
1982+
},
1983+
"path": [
1984+
"o3",
1985+
"color",
1986+
"use-case",
1987+
"success-background"
1988+
],
1989+
"css": "--o3-color-use-case-success-background",
1990+
"figma": "o3/color/use-case/success-background"
1991+
},
1992+
"o3-color-use-case-success-foreground": {
1993+
"shortName": "success-foreground",
1994+
"value": "#00572c",
1995+
"originalValue": "#00572C",
19781996
"type": "color",
19791997
"attributes": {
19801998
"item": "use-case",
1981-
"subitem": "error"
1999+
"subitem": "success-foreground"
19822000
},
19832001
"path": [
19842002
"o3",
19852003
"color",
19862004
"use-case",
1987-
"error"
2005+
"success-foreground"
19882006
],
1989-
"css": "--o3-color-use-case-error",
1990-
"figma": "o3/color/use-case/error"
2007+
"css": "--o3-color-use-case-success-foreground",
2008+
"figma": "o3/color/use-case/success-foreground"
19912009
},
19922010
"o3-spacing-5xs": {
19932011
"shortName": "5xs",

0 commit comments

Comments
 (0)