@codecademy/styleguide 79.0.1-alpha.42d772.0 → 79.0.1-alpha.4aeb6d.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.
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
### [79.0.1-alpha.
|
|
6
|
+
### [79.0.1-alpha.4aeb6d.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.0.1-alpha.4aeb6d.0) (2026-01-30)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @codecademy/styleguide
|
|
9
9
|
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/styleguide",
|
|
3
3
|
"description": "Styleguide & Component library for codecademy.com",
|
|
4
|
-
"version": "79.0.1-alpha.
|
|
4
|
+
"version": "79.0.1-alpha.4aeb6d.0",
|
|
5
5
|
"author": "Codecademy Engineering",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
10
10
|
"repository": "git@github.com:Codecademy/gamut.git",
|
|
11
|
-
"gitHead": "
|
|
11
|
+
"gitHead": "c3bacad29ba252b1df9328296dd76c713cd2df16"
|
|
12
12
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { Meta } from '@storybook/blocks';
|
|
1
|
+
import { Canvas, Meta } from '@storybook/blocks';
|
|
2
2
|
|
|
3
|
-
import { AboutHeader, TokenTable } from '~styleguide/blocks';
|
|
3
|
+
import { AboutHeader, Callout, TokenTable } from '~styleguide/blocks';
|
|
4
4
|
|
|
5
5
|
import { defaultColumns, getPropRows } from '../../shared/elements';
|
|
6
|
+
import * as ColorStories from './Color.stories';
|
|
6
7
|
|
|
7
8
|
export const parameters = {
|
|
8
9
|
title: 'Color',
|
|
@@ -10,7 +11,7 @@ export const parameters = {
|
|
|
10
11
|
status: 'current',
|
|
11
12
|
};
|
|
12
13
|
|
|
13
|
-
<Meta title="Foundations/System/Props/Color" />
|
|
14
|
+
<Meta of={ColorStories} title="Foundations/System/Props/Color" />
|
|
14
15
|
|
|
15
16
|
<AboutHeader {...parameters} />
|
|
16
17
|
|
|
@@ -25,4 +26,17 @@ const ColorExample = styled.div(system.color);
|
|
|
25
26
|
<ColorExample bg="navy" textColor="gray-100" borderColor="blue" />;
|
|
26
27
|
```
|
|
27
28
|
|
|
29
|
+
These color props support both physical and logical CSS properties and will render the appropriate properties based on `useLogicalProperties`'s value passed into the `<GamutProvider>` at the root of your application.
|
|
30
|
+
|
|
31
|
+
<Callout
|
|
32
|
+
text={
|
|
33
|
+
<>
|
|
34
|
+
You can use the <strong>LogicalProps</strong> button in the toolbar to
|
|
35
|
+
switch between modes.
|
|
36
|
+
</>
|
|
37
|
+
}
|
|
38
|
+
/>
|
|
39
|
+
|
|
40
|
+
<Canvas of={ColorStories.BorderColorExample} />
|
|
41
|
+
|
|
28
42
|
<TokenTable rows={getPropRows('color')} columns={defaultColumns} />
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { Box, FlexBox, Markdown } from '@codecademy/gamut';
|
|
2
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
+
|
|
4
|
+
const meta: Meta<typeof Box> = {
|
|
5
|
+
title: 'Foundations/System/Props/Color',
|
|
6
|
+
component: Box,
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export default meta;
|
|
10
|
+
type Story = StoryObj<typeof Box>;
|
|
11
|
+
|
|
12
|
+
export const BorderColorExample: Story = {
|
|
13
|
+
render: () => (
|
|
14
|
+
<FlexBox gap={16} row>
|
|
15
|
+
<Box
|
|
16
|
+
bg="background-selected"
|
|
17
|
+
border={1}
|
|
18
|
+
borderColorX="feedback-success"
|
|
19
|
+
borderColorY="feedback-error"
|
|
20
|
+
borderWidth="4px"
|
|
21
|
+
p={16}
|
|
22
|
+
textAlign="center"
|
|
23
|
+
>
|
|
24
|
+
This box has{' '}
|
|
25
|
+
<Markdown text="`borderColorX='feedback-success'` and `borderColorY='feedback-error'`." />{' '}
|
|
26
|
+
Inspect the example to see what CSS properties are rendered based on the
|
|
27
|
+
logical properties mode.
|
|
28
|
+
</Box>
|
|
29
|
+
<Box
|
|
30
|
+
bg="background-selected"
|
|
31
|
+
border={1}
|
|
32
|
+
borderColorBottom="feedback-warning"
|
|
33
|
+
borderColorLeft="feedback-success"
|
|
34
|
+
borderColorRight="feedback-error"
|
|
35
|
+
borderColorTop="interface"
|
|
36
|
+
borderWidth="4px"
|
|
37
|
+
p={16}
|
|
38
|
+
textAlign="center"
|
|
39
|
+
>
|
|
40
|
+
This box has{' '}
|
|
41
|
+
<Markdown text="`borderColorBottom='feedback-warning'`, `borderColorLeft='feedback-success'`, `borderColorRight='feedback-error'`, and `borderColorTop='interface'`." />{' '}
|
|
42
|
+
Inspect the example to see what CSS properties are rendered based on the
|
|
43
|
+
logical properties mode.
|
|
44
|
+
</Box>
|
|
45
|
+
</FlexBox>
|
|
46
|
+
),
|
|
47
|
+
};
|