Skip to content
This repository was archived by the owner on Nov 26, 2024. It is now read-only.

Commit 86cde74

Browse files
georgewrmarshallgeorgewrmarshall
committed
fix: resolving merge conflict in brand color stories
2 parents ab1c530 + 9bb60a2 commit 86cde74

File tree

14 files changed

+980
-101
lines changed

14 files changed

+980
-101
lines changed

‎docs/BrandColors.stories.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React from 'react';
22
import type { Meta, StoryObj } from '@storybook/react';
33
import tokens from '../src/figma/tokens.json';
4+
import { brandColor } from '../src/js';
45
import getCSSVariablesFromStylesheet from './utils/getCSSVariablesFromStylesheet';
5-
66
import { ColorSwatchGroup, ColorSwatch } from './components';
7-
87
import README from './BrandColors.mdx';
98

109
const meta: Meta<typeof ColorSwatchGroup> = {
@@ -46,5 +45,18 @@ export const CSS: Story = {
4645
};
4746

4847
export const JS: Story = {
49-
render: () => <h1>Coming soon</h1>,
48+
render: () => (
49+
<div
50+
style={{
51+
display: 'grid',
52+
gap: '16px',
53+
gridTemplateColumns: 'repeat(auto-fill, 300px)',
54+
}}
55+
>
56+
{/* Mapping through each brand color and rendering a ColorSwatch component for it */}
57+
{Object.entries(brandColor).map(([name, color]) => (
58+
<ColorSwatch key={name} color={color} name={`brandColor.${name}`} />
59+
))}
60+
</div>
61+
),
5062
};

‎src/css/design-tokens.css‎

Lines changed: 37 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
--brand-colors-orange-orange300: #faa66c;
3838
--brand-colors-orange-orange400: #f8883b;
3939
--brand-colors-orange-orange500: #f66a0a;
40-
--brand-colors-orange-orange600: #c65507;
40+
--brand-colors-orange-orange600: #bf5208;
4141
--brand-colors-orange-orange700: #954005;
4242
--brand-colors-orange-orange800: #632b04;
4343
--brand-colors-orange-orange900: #321602;
@@ -47,7 +47,7 @@
4747
--brand-colors-green-green300: #86e29b;
4848
--brand-colors-green-green400: #5dd879;
4949
--brand-colors-green-green500: #28a745;
50-
--brand-colors-green-green600: #1e7e34;
50+
--brand-colors-green-green600: #1c8234;
5151
--brand-colors-green-green700: #145523;
5252
--brand-colors-green-green800: #0a2c12;
5353
--brand-colors-green-green900: #041007;
@@ -293,36 +293,44 @@
293293
--color-overlay-inverse: var(--brand-colors-white-white010);
294294
--color-shadow-default: #0000001a;
295295
--color-primary-default: var(--brand-colors-blue-blue500);
296+
--color-primary-default-hover: #0379ce;
297+
--color-primary-default-pressed: #036db9;
296298
--color-primary-alternative: var(--brand-colors-blue-blue600);
297299
--color-primary-muted: #0376c919;
298-
--color-primary-inverse: var(--brand-colors-white-white010);
300+
--color-primary-inverse: var(--brand-colors-white-white000);
299301
--color-primary-disabled: #0376c980;
300302
--color-primary-shadow: #0376c933;
301303
--color-secondary-default: var(--brand-colors-orange-orange500);
302304
--color-secondary-alternative: var(--brand-colors-orange-orange600);
303305
--color-secondary-muted: #f66a0a19;
304-
--color-secondary-inverse: var(--brand-colors-white-white010);
306+
--color-secondary-inverse: var(--brand-colors-white-white000);
305307
--color-secondary-disabled: #f66a0a80;
306308
--color-error-default: var(--brand-colors-red-red500);
309+
--color-error-default-hover: #cd4250;
310+
--color-error-default-pressed: #c63441;
307311
--color-error-alternative: var(--brand-colors-red-red600);
308312
--color-error-muted: #d7384719;
309-
--color-error-inverse: var(--brand-colors-white-white010);
313+
--color-error-inverse: var(--brand-colors-white-white000);
310314
--color-error-disabled: #d7384780;
311315
--color-error-shadow: #d7384766;
312-
--color-warning-default: var(--brand-colors-orange-orange500);
316+
--color-warning-default: var(--brand-colors-orange-orange600);
317+
--color-warning-default-hover: #c2540a;
318+
--color-warning-default-pressed: #a24507;
313319
--color-warning-alternative: var(--brand-colors-yellow-yellow600);
314-
--color-warning-muted: #ffd33d19;
315-
--color-warning-inverse: var(--brand-colors-white-white010);
320+
--color-warning-muted: #bf520819;
321+
--color-warning-inverse: var(--brand-colors-white-white000);
316322
--color-warning-disabled: #ffd33d80;
317-
--color-success-default: var(--brand-colors-green-green500);
323+
--color-success-default: var(--brand-colors-green-green600);
324+
--color-success-default-hover: #208838;
325+
--color-success-default-pressed: #1b7431;
318326
--color-success-alternative: var(--brand-colors-green-green500);
319-
--color-success-muted: #28a74519;
320-
--color-success-inverse: var(--brand-colors-white-white010);
327+
--color-success-muted: #1c823419;
328+
--color-success-inverse: var(--brand-colors-white-white000);
321329
--color-success-disabled: #28a74580;
322330
--color-info-default: var(--brand-colors-blue-blue500);
323331
--color-info-alternative: var(--brand-colors-blue-blue600);
324332
--color-info-muted: #0376c919;
325-
--color-info-inverse: var(--brand-colors-white-white010);
333+
--color-info-inverse: var(--brand-colors-white-white000);
326334
--color-info-disabled: #0376c980;
327335
--color-network-goerli-default: var(--brand-colors-blue-blue400);
328336
--color-network-goerli-inverse: var(--brand-colors-white-white010);
@@ -368,35 +376,43 @@
368376
--color-shadow-default: #00000080;
369377
--color-overlay-inverse: var(--brand-colors-white-white010);
370378
--color-primary-default: var(--brand-colors-blue-blue400);
379+
--color-primary-default-hover: #0092fa;
380+
--color-primary-default-pressed: #54b6fc;
371381
--color-primary-alternative: var(--brand-colors-blue-blue300);
372382
--color-primary-muted: #1098fc26;
373-
--color-primary-inverse: var(--brand-colors-white-white010);
383+
--color-primary-inverse: var(--brand-colors-grey-grey900);
374384
--color-primary-disabled: #1098fc80;
375385
--color-primary-shadow: #0376c933;
376386
--color-secondary-default: var(--brand-colors-orange-orange400);
377387
--color-secondary-alternative: var(--brand-colors-orange-orange300);
378388
--color-secondary-muted: #f8883b26;
379-
--color-secondary-inverse: var(--brand-colors-white-white010);
389+
--color-secondary-inverse: var(--brand-colors-grey-grey900);
380390
--color-secondary-disabled: #f8883b80;
381-
--color-error-default: var(--brand-colors-red-red500);
382-
--color-error-alternative: var(--brand-colors-red-red400);
383-
--color-error-muted: #d7384726;
384-
--color-error-inverse: var(--brand-colors-white-white010);
391+
--color-error-default: #ff5263;
392+
--color-error-default-hover: #ff4d58;
393+
--color-error-default-pressed: #f9868e;
394+
--color-error-alternative: var(--brand-colors-red-red300);
395+
--color-error-muted: #ff526326;
396+
--color-error-inverse: var(--brand-colors-grey-grey900);
385397
--color-error-disabled: #d7384780;
386-
--color-error-shadow: #d7384766;
398+
--color-error-shadow: #ff526366;
387399
--color-warning-default: var(--brand-colors-yellow-yellow500);
400+
--color-warning-default-hover: #ffc60a;
401+
--color-warning-default-pressed: #ffeaa3d1;
388402
--color-warning-alternative: var(--brand-colors-yellow-yellow400);
389403
--color-warning-muted: #ffd33d26;
390404
--color-warning-inverse: var(--brand-colors-grey-grey900);
391405
--color-warning-disabled: #ffd33d80;
392406
--color-success-default: var(--brand-colors-green-green500);
407+
--color-success-default-hover: #05b82f;
408+
--color-success-default-pressed: #6aec88;
393409
--color-success-alternative: var(--brand-colors-green-green400);
394410
--color-success-muted: #28a74526;
395-
--color-success-inverse: var(--brand-colors-white-white010);
411+
--color-success-inverse: var(--brand-colors-grey-grey900);
396412
--color-success-disabled: #28a74580;
397413
--color-info-default: var(--brand-colors-blue-blue400);
398414
--color-info-alternative: var(--brand-colors-blue-blue300);
399415
--color-info-muted: #1098fc26;
400-
--color-info-inverse: var(--brand-colors-white-white010);
416+
--color-info-inverse: var(--brand-colors-grey-grey900);
401417
--color-info-disabled: #0376c980;
402418
}

0 commit comments

Comments
 (0)