Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix color manipulation and alignment issues #361

Merged
merged 2 commits into from
Feb 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions build-storybook.log
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
$ storybook build --output-dir /var/folders/xj/ffsl9ps93hl3d6bm37h33dkw0000gn/T/chromatic--39777-cLUQ9tqb0TVD
$ storybook build --output-dir /var/folders/xj/ffsl9ps93hl3d6bm37h33dkw0000gn/T/chromatic--33489-TcgBlV67EnGB
@storybook/cli v7.5.1

info => Cleaning outputDir: /var/folders/xj/ffsl9ps93hl3d6bm37h33dkw0000gn/T/chromatic--39777-cLUQ9tqb0TVD
info => Cleaning outputDir: /var/folders/xj/ffsl9ps93hl3d6bm37h33dkw0000gn/T/chromatic--33489-TcgBlV67EnGB
info => Loading presets
WARN Could not resolve addon "@storybook/addon-jest", skipping. Is it installed?
WARN Could not resolve addon "@storybook/addon-jest", skipping. Is it installed?
info => Building manager..
info => Manager built (209 ms)
info => Manager built (219 ms)
info => Building preview..
info => Copying static files: /Users/filipwitosz/Projects/reqore/node_modules/@storybook/manager/static at /var/folders/xj/ffsl9ps93hl3d6bm37h33dkw0000gn/T/chromatic--39777-cLUQ9tqb0TVD/sb-common-assets
info => Copying static files: /Users/filipwitosz/Projects/reqore/node_modules/@storybook/manager/static at /var/folders/xj/ffsl9ps93hl3d6bm37h33dkw0000gn/T/chromatic--33489-TcgBlV67EnGB/sb-common-assets
info Addon-docs: using MDX2
info => Using implicit CSS loaders
info => Using default Webpack5 setup
Expand Down Expand Up @@ -112,10 +112,10 @@ WARN No story files found for the specified pattern: src/**/*.stories.mdx
<s> [webpack.Progress] 19% building import loader ./node_modules/@storybook/builder-webpack5/node_modules/babel-loader/lib/index.js
<s> [webpack.Progress] 19% building 0/1 entries 17/96 dependencies 4/17 modules
<s> [webpack.Progress] 16% building import loader ./node_modules/unplugin/dist/webpack/loaders/load.js
<s> [webpack.Progress] 16% building 0/1 entries 110/135 dependencies 7/64 modules
<s> [webpack.Progress] 24% building 0/1 entries 357/468 dependencies 34/132 modules
<s> [webpack.Progress] 29% building 0/1 entries 1495/1600 dependencies 157/443 modules
<s> [webpack.Progress] 44% building 0/1 entries 2595/2700 dependencies 515/828 modules
<s> [webpack.Progress] 16% building 0/1 entries 109/133 dependencies 7/64 modules
<s> [webpack.Progress] 26% building 0/1 entries 368/407 dependencies 41/140 modules
<s> [webpack.Progress] 33% building 0/1 entries 1562/1668 dependencies 200/469 modules
<s> [webpack.Progress] 45% building 0/1 entries 2627/2700 dependencies 539/843 modules
<s> [webpack.Progress] 65% building 1/1 entries 3958/3958 dependencies 1349/1349 modules
<s> [webpack.Progress] 65% building
<s> [webpack.Progress] 69% building finish
Expand Down Expand Up @@ -217,8 +217,8 @@ WARN No story files found for the specified pattern: src/**/*.stories.mdx
<s> [webpack.Progress] 92% sealing asset processing TerserPlugin
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin main.552df0cc.iframe.bundle.js generate SourceMap
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin main.552df0cc.iframe.bundle.js generated SourceMap
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin main.d955c194.iframe.bundle.js generate SourceMap
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin main.d955c194.iframe.bundle.js generated SourceMap
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin runtime~main.a4522560.iframe.bundle.js generate SourceMap
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin runtime~main.a4522560.iframe.bundle.js generated SourceMap
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin stories-Breadcrumbs-Breadcrumbs-stories.e4c57132.iframe.bundle.js generate SourceMap
Expand Down Expand Up @@ -324,8 +324,8 @@ WARN No story files found for the specified pattern: src/**/*.stories.mdx
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin 3566.e0a2c01a.iframe.bundle.js generate SourceMap
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin 3566.e0a2c01a.iframe.bundle.js generated SourceMap
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin resolve sources
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin main.552df0cc.iframe.bundle.js attach SourceMap
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin main.552df0cc.iframe.bundle.js attached SourceMap
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin main.d955c194.iframe.bundle.js attach SourceMap
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin main.d955c194.iframe.bundle.js attached SourceMap
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin 269.2fe781ea.iframe.bundle.js attach SourceMap
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin 269.2fe781ea.iframe.bundle.js attached SourceMap
<s> [webpack.Progress] 92% sealing asset processing SourceMapDevToolPlugin 3426.4422feb5.iframe.bundle.js attach SourceMap
Expand Down Expand Up @@ -471,7 +471,7 @@ WARN asset size limit: The following asset(s) exceed the recommended size limit
WARN This can impact web performance.
WARN Assets:
WARN 7596.1dddc107.iframe.bundle.js (550 KiB)
WARN main.6f968b20.iframe.bundle.js (342 KiB)
WARN main.c1b4dd03.iframe.bundle.js (342 KiB)
WARN 269.888a11b6.iframe.bundle.js (707 KiB)
WARN 3426.d81c726b.iframe.bundle.js (583 KiB)
WARN 8517.e59c6460.iframe.bundle.js (433 KiB)
Expand All @@ -481,11 +481,11 @@ WARN Entrypoints:
WARN main (3.58 MiB)
WARN runtime~main.d3fedac4.iframe.bundle.js
WARN 8615.1446206f.iframe.bundle.js
WARN main.6f968b20.iframe.bundle.js
WARN main.c1b4dd03.iframe.bundle.js
WARN
<s> [webpack.Progress] 99% cache shutdown
<s> [webpack.Progress] 99% cache shutdown
<s> [webpack.Progress] 100%

info => Preview built (12 s)
info => Output directory: /var/folders/xj/ffsl9ps93hl3d6bm37h33dkw0000gn/T/chromatic--39777-cLUQ9tqb0TVD
info => Preview built (11 s)
info => Output directory: /var/folders/xj/ffsl9ps93hl3d6bm37h33dkw0000gn/T/chromatic--33489-TcgBlV67EnGB
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@qoretechnologies/reqore",
"version": "0.38.6",
"version": "0.38.7",
"description": "ReQore is a highly theme-able and modular UI library for React",
"main": "dist/index.js",
"types": "dist/index.d.ts",
Expand Down
33 changes: 23 additions & 10 deletions src/components/Effect/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,35 @@ import { IWithReqoreMinimal } from '../../types/global';

export type TReqoreEffectColorManipulation = 'darken' | 'lighten';
export type TReqoreEffectColorManipulationMultiplier = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
export type TReqoreEffectColorManipulationAlpha =
| 0.1
| 0.2
| 0.3
| 0.4
| 0.5
| 0.6
| 0.7
| 0.8
| 0.9
| 1;
export type TReqoreHexColor = `#${string}`;
export type TReqoreColor = TReqoreHexColor | 'transparent';
export type TReqoreEffectColor =
| TReqoreColor
| TReqoreIntent
| `${TReqoreIntent}:${TReqoreEffectColorManipulation}`
| `${TReqoreIntent}:${TReqoreEffectColorManipulation}:${TReqoreEffectColorManipulationMultiplier}`
| 'main'
| `main:${TReqoreEffectColorManipulation}`
| `main:${TReqoreEffectColorManipulation}:${TReqoreEffectColorManipulationMultiplier}`
| `${TReqoreHexColor}:${TReqoreEffectColorManipulation}`
| `${TReqoreHexColor}:${TReqoreEffectColorManipulation}:${TReqoreEffectColorManipulationMultiplier}`;
| (TReqoreColor | TReqoreHexColor | 'main' | TReqoreIntent)
| `${TReqoreIntent | 'main' | TReqoreHexColor}:${TReqoreEffectColorManipulation}`
| `${
| TReqoreIntent
| 'main'
| TReqoreHexColor}:${TReqoreEffectColorManipulation}:${TReqoreEffectColorManipulationMultiplier}`
| `${
| TReqoreIntent
| 'main'
| TReqoreHexColor}:${TReqoreEffectColorManipulation}:${TReqoreEffectColorManipulationMultiplier}:${TReqoreEffectColorManipulationAlpha}`;
export type TReqoreEffectColorList = [
'main' | TReqoreIntent | TReqoreColor,
TReqoreEffectColorManipulation | undefined,
TReqoreEffectColorManipulationMultiplier | undefined
TReqoreEffectColorManipulationMultiplier | undefined,
TReqoreEffectColorManipulationAlpha | undefined
];
export type TReqoreEffectGradientColors =
| 'main'
Expand Down
4 changes: 4 additions & 0 deletions src/components/Tag/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,10 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
? theme.intents[itemIntent]
: getColorFromMaybeString(theme, color);

if (customColor?.length === 9) {
return customColor;
}

customColor = minimal ? `${customColor || '#000000'}40` : customColor;

return customColor;
Expand Down
1 change: 1 addition & 0 deletions src/components/Textarea/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
padding: ${({ _size }) => PADDING_FROM_SIZE[_size] / 2}px;
min-height: ${({ _size }) => SIZE_TO_PX[_size]}px;
line-height: ${({ _size }) => SIZE_TO_PX[_size] - CONTROL_TEXT_FROM_SIZE[_size]}px;
vertical-align: middle;

background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
minimal ? 'transparent' : rgba(theme.main, 0.1)};
Expand Down
37 changes: 30 additions & 7 deletions src/helpers/colors.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { cloneDeep, merge, reduce } from 'lodash';
import { darken, getLuminance, lighten, mix, readableColor } from 'polished';
import { darken, getLuminance, lighten, mix, readableColor, transparentize } from 'polished';
import {
TReqoreEffectColor,
TReqoreEffectColorList,
Expand Down Expand Up @@ -51,6 +51,23 @@ export const percentToHexAlpha = (p: number) => {
return hexValue.padStart(2, '0').toUpperCase(); // format with leading 0 and upper case characters
};

export const RGBAToHexA = (rgba, forceRemoveAlpha = false): TReqoreHexColor => {
if (isValidSixCharHex(rgba)) {
return rgba as TReqoreHexColor;
}

return ('#' +
rgba
.replace(/^rgba?\(|\s+|\)$/g, '') // Get's rgba / rgb string values
.split(',') // splits them at ","
.filter((_string, index) => !forceRemoveAlpha || index !== 3)
.map((string) => parseFloat(string)) // Converts them to numbers
.map((number, index) => (index === 3 ? Math.round(number * 255) : number)) // Converts alpha to 255 number
.map((number) => number.toString(16)) // Converts numbers to hex
.map((string) => (string.length === 1 ? '0' + string : string)) // Adds 0 when length of one number is 1
.join('')) as TReqoreHexColor; // Puts the array to togehter to a string
};

export const shouldDarken = (mainColor: TReqoreHexColor): boolean => {
return getLuminance(mainColor) > 0.2;
};
Expand Down Expand Up @@ -165,7 +182,7 @@ export const getColorFromMaybeString = (
return undefined;
}

const [providedColor, shading, multiplier = 1]: TReqoreEffectColorList = color.split(
const [providedColor, shading, multiplier = 1, alpha = 1]: TReqoreEffectColorList = color.split(
':'
) as TReqoreEffectColorList;

Expand Down Expand Up @@ -196,6 +213,10 @@ export const getColorFromMaybeString = (
}
}

if (_color && _color.length === 7 && alpha < 1) {
_color = RGBAToHexA(transparentize(1 - alpha, _color));
}

return _color;
};

Expand Down Expand Up @@ -277,11 +298,13 @@ export const getGradientMix = (
const gradientColor1: TReqoreHexColor = getNthGradientColor(theme, _colors);
const gradientColor2: TReqoreHexColor = getNthGradientColor(theme, _colors, 2);

return mix(
0.5,
gradientColor1 === '#00000000' ? theme.main : gradientColor1,
gradientColor2 === '#00000000' ? theme.main : gradientColor2
) as TReqoreHexColor;
return RGBAToHexA(
mix(
0.5,
gradientColor1 === '#00000000' ? theme.main : gradientColor1,
gradientColor2 === '#00000000' ? theme.main : gradientColor2
) as TReqoreHexColor
);
}

return fallback;
Expand Down
2 changes: 1 addition & 1 deletion src/stories/Button/Button.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
{
effect: {
gradient: {
colors: { 0: 'danger', 100: 'danger:darken' },
colors: { 0: 'danger', 100: 'danger:darken:1:0.1' },
direction: 'to right bottom',
},
},
Expand Down
4 changes: 3 additions & 1 deletion src/stories/Menu/Menu.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,9 @@ const Template: StoryFn<IReqoreMenuProps> = (args) => {
rightIcon='EditLine'
onRightIconClick={() => alert('Icon clicked')}
description='Button with right icon and description'
intent='info'
customTheme={{
main: 'info:darken:1:0.3',
}}
>
Some button
</ReqoreMenuItem>
Expand Down
Loading