Skip to content

Commit 9265f37

Browse files
oscarcarlstromoscarcarlstrom
committed
Merge branch 'main' into colors-docs
2 parents ef0df63 + 74702be commit 9265f37

File tree

9 files changed

+115
-63
lines changed

9 files changed

+115
-63
lines changed

‎.changeset/grumpy-ducks-turn.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@obosbbl/grunnmuren-react': patch
3+
---
4+
5+
Adding support for all RAC Link props on the CardLink component. This makes it possible to pass props like `onPress` and other events, which again enables tracking and so on.

‎.changeset/moody-sloths-run.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@obosbbl/grunnmuren-tailwind': patch
3+
---
4+
5+
Fixes the custom colors so they work with tailwinds [opacity modifier](https://tailwindcss.com/docs/text-color#changing-the-opacity)

‎.changeset/pre.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"good-ducks-relax",
3838
"green-stingrays-vanish",
3939
"green-ways-tease",
40+
"grumpy-ducks-turn",
4041
"grumpy-pans-design",
4142
"grumpy-parents-cough",
4243
"grumpy-rabbits-fry",
@@ -58,6 +59,7 @@
5859
"modern-apricots-invite",
5960
"moody-crabs-train",
6061
"moody-rice-tie",
62+
"moody-sloths-run",
6163
"neat-hotels-smile",
6264
"odd-bees-matter",
6365
"olive-coins-shake",

‎packages/react/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# @obosbbl/grunnmuren-react
22

3+
## 2.0.0-canary.44
4+
5+
### Patch Changes
6+
7+
- 8cea558: Adding support for all RAC Link props on the CardLink component. This makes it possible to pass props like `onPress` and other events, which again enables tracking and so on.
8+
39
## 2.0.0-canary.43
410

511
### Patch Changes

‎packages/react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@obosbbl/grunnmuren-react",
3-
"version": "2.0.0-canary.43",
3+
"version": "2.0.0-canary.44",
44
"description": "Grunnmuren components in React",
55
"repository": {
66
"url": "https://github.com/code-obos/grunnmuren"

‎packages/react/src/card/card.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { type VariantProps, cva } from 'cva';
2-
import { Link, type LinkProps } from 'react-aria-components';
2+
import { Link, type LinkProps as RACLinkProps } from 'react-aria-components';
33

44
type CardProps = VariantProps<typeof cardVariants> & {
55
children?: React.ReactNode;
@@ -101,16 +101,18 @@ const Card = ({
101101
);
102102
};
103103

104-
type RACLinkProps = Pick<LinkProps, 'href' | 'routerOptions' | 'children'>;
105-
106-
type CardLinkWrapperProps = RACLinkProps & {
107-
// Override children type of LinkProps as it also allows a callback which is not allowed in HTMLProps
108-
children: React.ReactNode;
104+
type CardLinkWrapperProps = {
105+
children?: React.ReactNode;
106+
className?: string;
107+
} & {
108+
[K in keyof Omit<RACLinkProps, 'className' | 'children'>]?: never;
109109
};
110110

111-
type CardLinkProps = {
112-
className?: string;
113-
} & (RACLinkProps | CardLinkWrapperProps);
111+
type S = Pick<RACLinkProps, 'href'>;
112+
113+
type CardLinkProps =
114+
| (Omit<RACLinkProps, 'href'> & Required<Pick<RACLinkProps, 'href'>>)
115+
| CardLinkWrapperProps;
114116

115117
const cardLinkVariants = cva({
116118
base: 'w-fit max-w-full',
@@ -168,7 +170,7 @@ const CardLink = ({
168170
return href ? (
169171
<Link
170172
data-slot="card-link"
171-
{...restProps}
173+
{...(restProps as RACLinkProps)}
172174
href={href}
173175
className={className}
174176
/>
@@ -177,9 +179,9 @@ const CardLink = ({
177179
// because it still renders with role="link" and tabindex="0" which makes it focusable.
178180
// So we need to render a div instead.
179181
<div
182+
{...(restProps as CardLinkWrapperProps)}
180183
data-slot="card-link"
181184
className={className}
182-
{...(restProps as CardLinkWrapperProps)}
183185
/>
184186
);
185187
};

‎packages/tailwind/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# @obosbbl/grunnmuren-tailwind
22

3+
## 2.0.0-canary.10
4+
5+
### Patch Changes
6+
7+
- 585e6da: Fixes the custom colors so they work with tailwinds [opacity modifier](https://tailwindcss.com/docs/text-color#changing-the-opacity)
8+
39
## 2.0.0-canary.9
410

511
### Patch Changes

‎packages/tailwind/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@obosbbl/grunnmuren-tailwind",
3-
"version": "2.0.0-canary.9",
3+
"version": "2.0.0-canary.10",
44
"description": "Grunnmuren Tailwind preset",
55
"repository": {
66
"url": "https://github.com/code-obos/grunnmuren"

‎packages/tailwind/tailwind-base.cjs‎

Lines changed: 76 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -179,39 +179,39 @@ module.exports = (options = {}) => {
179179
'--gm-container-width': '92rem',
180180
'--gm-container-gutter-width': '1rem',
181181

182-
'--gm-color-black': '#333',
183-
'--gm-color-white': '#fff',
182+
'--gm-color-black': hexToRgb('#333'),
183+
'--gm-color-white': hexToRgb('#fff'),
184184

185-
'--gm-color-gray': '#818181',
186-
'--gm-color-gray-dark': '#595959',
187-
'--gm-color-gray-light': '#e6e6e6',
188-
'--gm-color-gray-lightest': '#f1f1f1',
185+
'--gm-color-gray': hexToRgb('#818181'),
186+
'--gm-color-gray-dark': hexToRgb('#595959'),
187+
'--gm-color-gray-light': hexToRgb('#e6e6e6'),
188+
'--gm-color-gray-lightest': hexToRgb('#f1f1f1'),
189189

190-
'--gm-color-sky': '#bedfec',
191-
'--gm-color-sky-light': '#deeff5',
192-
'--gm-color-sky-lightest': '#ebf5f9',
190+
'--gm-color-sky': hexToRgb('#bedfec'),
191+
'--gm-color-sky-light': hexToRgb('#deeff5'),
192+
'--gm-color-sky-lightest': hexToRgb('#ebf5f9'),
193193

194-
'--gm-color-mint': '#cdece2',
195-
'--gm-color-mint-light': '#e6f5f0',
196-
'--gm-color-mint-lightest': '#f0f9f6',
194+
'--gm-color-mint': hexToRgb('#cdece2'),
195+
'--gm-color-mint-light': hexToRgb('#e6f5f0'),
196+
'--gm-color-mint-lightest': hexToRgb('#f0f9f6'),
197197

198-
'--gm-color-blue': '#0047ba',
199-
'--gm-color-blue-light': '#bedfec',
200-
'--gm-color-blue-lightest': '#deeff5',
201-
'--gm-color-blue-dark': '#002169',
198+
'--gm-color-blue': hexToRgb('#0047ba'),
199+
'--gm-color-blue-light': hexToRgb('#bedfec'),
200+
'--gm-color-blue-lightest': hexToRgb('#deeff5'),
201+
'--gm-color-blue-dark': hexToRgb('#002169'),
202202

203-
'--gm-color-green': '#008761',
204-
'--gm-color-green-dark': '#00524c',
205-
'--gm-color-green-light': '#cdece2',
206-
'--gm-color-green-lightest': '#e6f5f0',
203+
'--gm-color-green': hexToRgb('#008761'),
204+
'--gm-color-green-dark': hexToRgb('#00524c'),
205+
'--gm-color-green-light': hexToRgb('#cdece2'),
206+
'--gm-color-green-lightest': hexToRgb('#e6f5f0'),
207207

208-
'--gm-color-red': '#c0385d',
209-
'--gm-color-red-light': '#faedef',
208+
'--gm-color-red': hexToRgb('#c0385d'),
209+
'--gm-color-red-light': hexToRgb('#faedef'),
210210

211-
'--gm-color-orange': '#e8a74a',
212-
'--gm-color-orange-light': '#f8e5c9',
211+
'--gm-color-orange': hexToRgb('#e8a74a'),
212+
'--gm-color-orange-light': hexToRgb('#f8e5c9'),
213213

214-
'--gm-color-yellow': '#fff5d2',
214+
'--gm-color-yellow': hexToRgb('#fff5d2'),
215215
},
216216
});
217217

@@ -386,52 +386,52 @@ module.exports = (options = {}) => {
386386
inherit: 'inherit',
387387
current: 'currentColor',
388388
transparent: 'transparent',
389-
black: 'var(--gm-color-black)',
390-
white: 'var(--gm-color-white)',
389+
black: 'rgb(var(--gm-color-black))',
390+
white: 'rgb(var(--gm-color-white))',
391391
gray: {
392-
DEFAULT: 'var(--gm-color-gray)',
393-
dark: 'var(--gm-color-gray-dark)',
394-
light: 'var(--gm-color-gray-light)',
395-
lightest: 'var(--gm-color-gray-lightest)',
392+
DEFAULT: 'rgb(var(--gm-color-gray))',
393+
dark: 'rgb(var(--gm-color-gray-dark))',
394+
light: 'rgb(var(--gm-color-gray-light))',
395+
lightest: 'rgb(var(--gm-color-gray-lightest))',
396396
},
397397
sky: {
398-
DEFAULT: 'var(--gm-color-sky)',
399-
light: 'var(--gm-color-sky-light)',
400-
lightest: 'var(--gm-color-sky-lightest)',
398+
DEFAULT: 'rgb(var(--gm-color-sky))',
399+
light: 'rgb(var(--gm-color-sky-light))',
400+
lightest: 'rgb(var(--gm-color-sky-lightest))',
401401
},
402402
mint: {
403-
DEFAULT: 'var(--gm-color-mint)',
404-
light: 'var(--gm-color-mint-light)',
405-
lightest: 'var(--gm-color-mint-lightest)',
403+
DEFAULT: 'rgb(var(--gm-color-mint))',
404+
light: 'rgb(var(--gm-color-mint-light))',
405+
lightest: 'rgb(var(--gm-color-mint-lightest))',
406406
},
407407
blue: {
408408
// OBOS Blue/Primary brand
409-
DEFAULT: 'var(--gm-color-blue)',
409+
DEFAULT: 'rgb(var(--gm-color-blue))',
410410
// OBOS Ocean
411-
dark: 'var(--gm-color-blue-dark)',
412-
light: 'var(--gm-color-blue-light)',
413-
lightest: 'var(--gm-color-blue-lightest)',
411+
dark: 'rgb(var(--gm-color-blue-dark))',
412+
light: 'rgb(var(--gm-color-blue-light))',
413+
lightest: 'rgb(var(--gm-color-blue-lightest))',
414414
},
415415
green: {
416416
// OBOS Green/Primary brand
417-
DEFAULT: 'var(--gm-color-green)',
417+
DEFAULT: 'rgb(var(--gm-color-green))',
418418
// OBOS Forest
419-
dark: 'var(--gm-color-green-dark)',
420-
light: 'var(--gm-color-green-light)',
421-
lightest: 'var(--gm-color-green-lightest)',
419+
dark: 'rgb(var(--gm-color-green-dark))',
420+
light: 'rgb(var(--gm-color-green-light))',
421+
lightest: 'rgb(var(--gm-color-green-lightest))',
422422
},
423423
red: {
424-
DEFAULT: 'var(--gm-color-red)',
424+
DEFAULT: 'rgb(var(--gm-color-red))',
425425
// error red
426-
light: 'var(--gm-color-red-light)',
426+
light: 'rgb(var(--gm-color-red-light))',
427427
},
428428
orange: {
429-
DEFAULT: 'var(--gm-color-orange)',
430-
light: 'var(--gm-color-orange-light)',
429+
DEFAULT: 'rgb(var(--gm-color-orange))',
430+
light: 'rgb(var(--gm-color-orange-light))',
431431
},
432432
yellow: {
433433
// open house
434-
DEFAULT: 'var(--gm-color-yellow)',
434+
DEFAULT: 'rgb(var(--gm-color-yellow))',
435435
},
436436
},
437437
fontFamily: {
@@ -572,6 +572,32 @@ module.exports = (options = {}) => {
572572
};
573573
};
574574

575+
/**
576+
* A function that takes in a hex color as a string and returns a string with the color's rgb values.
577+
* @param {string} hex
578+
* @returns {string} The rgb values of the color.
579+
*/
580+
function hexToRgb(hex) {
581+
// Remove the hash (#) at the start if it's there
582+
let hexValue = hex.replace(/^#/, '');
583+
584+
// If the hex value is shorthand (3 characters), expand it to 6 characters
585+
if (hexValue.length === 3) {
586+
hexValue = hexValue
587+
.split('')
588+
.map((char) => char + char)
589+
.join('');
590+
}
591+
592+
// Parse the r, g, and b values from the hex string
593+
const r = Number.parseInt(hexValue.substring(0, 2), 16);
594+
const g = Number.parseInt(hexValue.substring(2, 4), 16);
595+
const b = Number.parseInt(hexValue.substring(4, 6), 16);
596+
597+
// Return the RGB values as a whitespace-separated string
598+
return `${r} ${g} ${b}`;
599+
}
600+
575601
// These custom components are only used for v1 compat
576602
const button = plugin(({ addComponents, theme }) => {
577603
const hoverLoadingBgColor = 'rgba(0, 0, 0, 0.1)';

0 commit comments

Comments
 (0)