Skip to content

Commit ceed93a

Browse files
emlimlfemlimlf
authored
Merge pull request #3 from linuxfoundation/task/color-definitions
Task/color definitions
2 parents 575f664 + de043b7 commit ceed93a

File tree

10 files changed

+891
-11
lines changed

10 files changed

+891
-11
lines changed

‎angular.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@
4646
"browserTarget": "lfx-component-lib:build",
4747
"compodoc": true,
4848
"compodocArgs": ["-e", "json", "-d", "projects/lfx-component-lib"],
49-
"port": 6006
49+
"port": 6006,
50+
"styles": ["projects/lfx-component-lib/src/lib/styles/index.scss"]
5051
}
5152
},
5253
"build-storybook": {

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@
44
"scripts": {
55
"ng": "ng",
66
"build-palette": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/build-palette.ts",
7-
"build-colors": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/build-colors.ts",
87
"build-constants": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/build-constants.ts",
98
"start": "ng serve",
109
"increase-patch": "npm version patch --prefix projects/lfx-component-lib",
11-
"prebuild": "npm run increase-patch && npm run build-constants && npm run build-colors",
10+
"prebuild": "npm run increase-patch && npm run build-constants",
1211
"build": "ng build",
1312
"postbuild": "npm run build --prefix projects/lfx-component-lib",
1413
"watch": "ng build --watch --configuration development",

‎projects/lfx-component-lib/.storybook/main.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ const config: StorybookConfig = {
88
'@storybook/addon-essentials',
99
'@chromatic-com/storybook',
1010
'@storybook/addon-interactions',
11-
'@storybook/addon-designs'
11+
'@storybook/addon-designs',
12+
'@storybook/addon-docs',
1213
],
1314
framework: {
1415
name: '@storybook/angular',

‎projects/lfx-component-lib/.storybook/preview.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import type { Preview } from "@storybook/angular";
2-
import { setCompodocJson } from "@storybook/addon-docs/angular";
3-
import docJson from "../documentation.json";
1+
import type { Preview } from '@storybook/angular';
2+
import { setCompodocJson } from '@storybook/addon-docs/angular';
3+
import docJson from '../documentation.json';
44

55
setCompodocJson(docJson);
66

‎projects/lfx-component-lib/documentation.json‎

Lines changed: 592 additions & 0 deletions
Large diffs are not rendered by default.

‎projects/lfx-component-lib/src/lib/styles/colors.scss‎

Lines changed: 64 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,74 @@
33
* SPDX-License-Identifier: MIT
44
*/
55

6-
body {
7-
color: #282e32;
6+
@import "./constants.scss";
7+
8+
// default text colors
9+
*,
10+
.text-primary {
11+
color: $grey-1000;
12+
}
13+
14+
.text-secondary {
15+
color: #808b91;
816
}
917

18+
// background colors
1019
.primary {
11-
color: #282e32;
20+
color: $blue-500;
1221
}
1322

1423
.secondary {
15-
color: #808b91;
24+
color: $blue-50;
25+
}
26+
27+
a,
28+
.link-text {
29+
cursor: pointer;
30+
color: $blue-500;
31+
&:hover {
32+
color: $blue-700;
33+
}
34+
&:active {
35+
color: $blue-800;
36+
}
37+
}
38+
39+
.message {
40+
&.notice {
41+
color: $blue-500;
42+
}
43+
&.warning {
44+
color: $orange-500;
45+
}
46+
&.success {
47+
color: $green-500;
48+
}
49+
&.error {
50+
color: $red-500;
51+
}
52+
}
53+
54+
// background colors
55+
.bg-primary {
56+
background-color: $blue-500;
57+
}
58+
59+
.bg-secondary {
60+
background-color: $blue-50;
61+
}
62+
63+
.bg-message {
64+
&.notice {
65+
background-color: $blue-50;
66+
}
67+
&.warning {
68+
background-color: $orange-50;
69+
}
70+
&.success {
71+
background-color: $green-50;
72+
}
73+
&.error {
74+
background-color: $red-50;
75+
}
1676
}

‎projects/lfx-component-lib/src/lib/styles/index.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "./colors.scss";
2+
@import "./typography.scss";

‎projects/lfx-component-lib/src/lib/themes/color-palette.mdx‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
2+
import colors from "../configs/color-palette.json";
3+
4+
<Meta title="LFX Components/Themes/Color Palette" />
5+
6+
# Color Palette
7+
8+
Our design system's color palette helps maintain consistent styling across the application.
9+
10+
<ColorPalette>
11+
<ColorItem
12+
title="bg-primary"
13+
subtitle="Background Primary"
14+
colors={{
15+
WildWatermelon: colors.blue[500],
16+
}}
17+
/>
18+
<ColorItem
19+
title="bg-secondary"
20+
subtitle="Background Secondary"
21+
colors={{
22+
Blue: colors.blue[50],
23+
}}
24+
/>
25+
<ColorItem
26+
title="bg-message"
27+
subtitle="Background Message"
28+
colors={{
29+
Notice: colors.blue[50],
30+
Warning: colors.orange[50],
31+
Success: colors.green[50],
32+
Error: colors.red[50],
33+
}}
34+
/>
35+
36+
<ColorItem
37+
title="bg-grey"
38+
subtitle="Background Grey"
39+
colors={{
40+
50: colors.grey[50],
41+
100: colors.grey[100],
42+
200: colors.grey[200],
43+
300: colors.grey[300],
44+
400: colors.grey[400],
45+
500: colors.grey[500],
46+
600: colors.grey[600],
47+
700: colors.grey[700],
48+
800: colors.grey[800],
49+
900: colors.grey[900],
50+
1000: colors.grey[1000],
51+
}}
52+
/>
53+
54+
<ColorItem
55+
title="bg-blue"
56+
subtitle="Background Blue"
57+
colors={{
58+
50: colors.blue[50],
59+
100: colors.blue[100],
60+
200: colors.blue[200],
61+
300: colors.blue[300],
62+
400: colors.blue[400],
63+
500: colors.blue[500],
64+
600: colors.blue[600],
65+
700: colors.blue[700],
66+
800: colors.blue[800],
67+
900: colors.blue[900],
68+
1000: colors.blue[1000],
69+
}}
70+
/>
71+
72+
<ColorItem
73+
title="bg-green"
74+
subtitle="Background Green"
75+
colors={{
76+
50: colors.green[50],
77+
100: colors.green[100],
78+
200: colors.green[200],
79+
300: colors.green[300],
80+
400: colors.green[400],
81+
500: colors.green[500],
82+
600: colors.green[600],
83+
700: colors.green[700],
84+
800: colors.green[800],
85+
900: colors.green[900],
86+
1000: colors.green[1000],
87+
}}
88+
/>
89+
90+
<ColorItem
91+
title="bg-red"
92+
subtitle="Background Red"
93+
colors={{
94+
50: colors.red[50],
95+
100: colors.red[100],
96+
200: colors.red[200],
97+
300: colors.red[300],
98+
400: colors.red[400],
99+
500: colors.red[500],
100+
600: colors.red[600],
101+
700: colors.red[700],
102+
800: colors.red[800],
103+
900: colors.red[900],
104+
}}
105+
/>
106+
107+
<ColorItem
108+
title="bg-yellow"
109+
subtitle="Background Yellow"
110+
colors={{
111+
50: colors.yellow[50],
112+
100: colors.yellow[100],
113+
200: colors.yellow[200],
114+
300: colors.yellow[300],
115+
400: colors.yellow[400],
116+
500: colors.yellow[500],
117+
600: colors.yellow[600],
118+
700: colors.yellow[700],
119+
800: colors.yellow[800],
120+
900: colors.yellow[900],
121+
1000: colors.yellow[1000],
122+
}}
123+
/>
124+
125+
<ColorItem
126+
title="bg-orange"
127+
subtitle="Background Orange"
128+
colors={{
129+
50: colors.orange[50],
130+
100: colors.orange[100],
131+
200: colors.orange[200],
132+
300: colors.orange[300],
133+
400: colors.orange[400],
134+
500: colors.orange[500],
135+
600: colors.orange[600],
136+
700: colors.orange[700],
137+
800: colors.orange[800],
138+
900: colors.orange[900],
139+
1000: colors.orange[1000],
140+
}}
141+
/>
142+
</ColorPalette>

‎projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { Meta, StoryObj } from '@storybook/angular';
2+
3+
const meta: Meta = {
4+
title: 'LFX Components/Themes/Text Colors',
5+
tags: ['autodocs'],
6+
};
7+
8+
export default meta;
9+
type Story = StoryObj;
10+
11+
export const DefaultText: Story = {
12+
render: () => ({
13+
template: `
14+
<p class="text-primary">This is a paragraph of body text.</p>
15+
`,
16+
}),
17+
};
18+
19+
export const SecondaryText: Story = {
20+
render: () => ({
21+
template: `
22+
<p class="text-secondary">This is a paragraph of body text</p>
23+
`,
24+
}),
25+
};
26+
27+
export const LinkText: Story = {
28+
render: () => ({
29+
template: `
30+
<a>This is a link text</a> <br />
31+
<span class="link-text">This is a span with link text</span>
32+
`,
33+
}),
34+
};
35+
36+
export const MessageNotice: Story = {
37+
render: () => ({
38+
template: `
39+
<p class="message notice">This is a message notice</p>
40+
`,
41+
}),
42+
};
43+
44+
export const MessageWarning: Story = {
45+
render: () => ({
46+
template: `
47+
<p class="message warning">This is a message warning</p>
48+
`,
49+
}),
50+
};
51+
52+
export const MessageSuccess: Story = {
53+
render: () => ({
54+
template: `
55+
<p class="message success">This is a message success</p>
56+
`,
57+
}),
58+
};
59+
60+
export const MessageError: Story = {
61+
render: () => ({
62+
template: `
63+
<p class="message error">This is a message error</p>
64+
`,
65+
}),
66+
};
67+
68+
export const AllColors: Story = {
69+
render: () => ({
70+
template: `
71+
<p>This is a paragraph of body text.</p>
72+
<p class="text-secondary">This is a paragraph of body text.</p>
73+
<a>This is a link text</a><br />
74+
<span class="link-text">This is a span with link text</span>
75+
<p class="message notice">This is a message notice</p>
76+
<p class="message warning">This is a message warning</p>
77+
<p class="message success">This is a message success</p>
78+
<p class="message error">This is a message error</p>
79+
`,
80+
}),
81+
};

‎scripts/build-colors.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
// Copyright The Linux Foundation and each contributor to LFX.
22
// SPDX-License-Identifier: MIT
3+
4+
// TODO: revisit this script. Disabling this for now.
35
import { colorBase } from './helpers/base-css';
46
import { getPrimitiveValue } from './helpers/helper-functions';
57
import { primitives, lightMode } from './helpers/read-json';

0 commit comments

Comments
 (0)