urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-11-24 13:06:09 +03:00
Code Issues Packages Projects Releases Wiki Activity

color: fixing color normalization and adding to avatars

Browse Source
This commit is contained in:
Hunter Miller 2021-09-21 21:53:39 -05:00
parent e7890f093d
commit 86038e089c
3 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pkg/grid/src/components/Avatar.tsx
View File

@ -4,6 +4,7 @@ import { sigil, reactRenderer } from '@tlon/sigil-js';
import { deSig, Contact } from '@urbit/api';
import { darken, lighten, parseToHsla } from 'color2k';
import { useCurrentTheme } from '../state/local';
import { normalizeUrbitColor } from '../state/util';
export type AvatarSizes = 'xs' | 'small' | 'default';
@ -66,7 +67,7 @@ export const Avatar = ({ size, className, ...ship }: AvatarProps) => {
const currentTheme = useCurrentTheme();
const { shipName, color, avatar } = { ...emptyContact, ...ship };
const { classes, size: sigilSize } = sizeMap[size];
const adjustedColor = themeAdjustColor(color, currentTheme);
const adjustedColor = themeAdjustColor(normalizeUrbitColor(color), currentTheme);
const foregroundColor = foregroundFromBackground(adjustedColor);
const sigilElement = useMemo(() => {
if (shipName.match(/[_^]/)) {

8
pkg/grid/src/state/docket.ts
View File

@ -23,7 +23,7 @@ import {
} from '@urbit/api';
import api from './api';
import { mockAllies, mockCharges, mockTreaties } from './mock-data';
import { fakeRequest, useMockData } from './util';
import { fakeRequest, normalizeUrbitColor, useMockData } from './util';
export interface ChargeWithDesk extends Charge {
desk: string;
@ -155,14 +155,10 @@ const useDocketState = create<DocketState>((set, get) => ({
}));
function normalizeDocket<T extends Docket>(docket: T, desk: string): T {
const color = docket?.color?.startsWith('#')
? docket.color
: `#${docket.color.slice(2).replace('.', '')}`.toUpperCase();
return {
...docket,
desk,
color
color: normalizeUrbitColor(docket.color)
};
}

11
pkg/grid/src/state/util.ts
View File

@ -1,5 +1,6 @@
import { DocketHref } from '@urbit/api/docket';
import { hsla, parseToHsla } from 'color2k';
import _ from 'lodash';
export const useMockData = import.meta.env.MODE === 'mock';
@ -35,6 +36,16 @@ export function deSig(ship: string): string {
return ship.replace('~', '');
}
export function normalizeUrbitColor(color: string): string {
if (color.startsWith('#')) {
return color;
}
const colorString = color.slice(2).replace('.', '').toUpperCase();
const lengthAdjustedColor = _.padEnd(colorString, 6, _.last(colorString));
return `#${lengthAdjustedColor}`;
}
export function getDarkColor(color: string): string {
const hslaColor = parseToHsla(color);
return hsla(hslaColor[0], hslaColor[1], 1 - hslaColor[2], 1);