Skip to content

Commit cd595ed

Browse files
adamalstonadamalston
authored
feat: migrate @carbon/colors to TypeScript (#22014)
1 parent e294a23 commit cd595ed

9 files changed

Lines changed: 53 additions & 29 deletions

File tree

‎packages/colors/package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"version": "11.50.0",
55
"license": "Apache-2.0",
66
"main": "lib/index.js",
7+
"types": "lib/index.d.ts",
78
"module": "es/index.js",
89
"sass": "index.scss",
910
"repository": {
@@ -35,7 +36,8 @@
3536
"provenance": true
3637
},
3738
"scripts": {
38-
"build": "yarn clean && carbon-cli bundle src/index.js --name CarbonColors && node tasks/build.js && carbon-cli check \"scss/*.scss\"",
39+
"build:types": "tsc -p tsconfig.types.json",
40+
"build": "yarn clean && carbon-cli bundle src/index.ts --name CarbonColors && node tasks/build.js && yarn build:types && carbon-cli check \"scss/*.scss\"",
3941
"clean": "rimraf css es lib umd scss index.scss",
4042
"postinstall": "ibmtelemetry --config=telemetry.yml"
4143
},
@@ -46,7 +48,9 @@
4648
"@carbon/test-utils": "^10.41.0",
4749
"change-case-all": "^2.1.0",
4850
"fs-extra": "^11.0.0",
49-
"rimraf": "^6.0.1"
51+
"rimraf": "^6.0.1",
52+
"typescript": "^5.7.3",
53+
"typescript-config-carbon": "workspace:^0.9.0"
5054
},
5155
"sideEffects": false,
5256
"eyeglass": {

packages/colors/src/colors.js renamed to packages/colors/src/colors.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp. 2018, 2023
2+
* Copyright IBM Corp. 2018, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
@@ -566,7 +566,11 @@ export const warmGrayHover = {
566566
100: warmGray100Hover,
567567
};
568568

569-
export const colors = {
569+
export type ColorScale = Record<number, string>;
570+
export type ColorGroup = Record<string, ColorScale>;
571+
export type HoverColorGroup = Record<string, string | ColorScale>;
572+
573+
export const colors: ColorGroup = {
570574
black: {
571575
100: black,
572576
},
@@ -587,7 +591,7 @@ export const colors = {
587591
yellow,
588592
};
589593

590-
export const hoverColors = {
594+
export const hoverColors: HoverColorGroup = {
591595
whiteHover,
592596
blackHover,
593597
blueHover,

packages/colors/src/index.js renamed to packages/colors/src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp. 2018, 2023
2+
* Copyright IBM Corp. 2018, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.

‎packages/colors/src/rgb.js‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎packages/colors/src/rgb.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* Copyright IBM Corp. 2018, 2026
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
/**
9+
* Parses a hex code string into an RGBA color string with the given opacity.
10+
*/
11+
export const rgba = (hexCode: string, opacity: number) => {
12+
const values = [
13+
hexCode.substring(1, 3),
14+
hexCode.substring(3, 5),
15+
hexCode.substring(5, 7),
16+
].map((string) => parseInt(string, 16));
17+
return `rgba(${values[0]}, ${values[1]}, ${values[2]}, ${opacity})`;
18+
};

‎packages/colors/tasks/build.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/**
2-
* Copyright IBM Corp. 2015, 2023
2+
* Copyright IBM Corp. 2015, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
66
*/
77

88
'use strict';
99

10-
const { colors, hoverColors } = require('@carbon/colors');
10+
const { colors, hoverColors } = require('../lib/index.js');
1111
const { types: t, generate } = require('@carbon/scss-generator');
1212
const { paramCase } = require('change-case-all');
1313
const fs = require('fs-extra');

‎packages/colors/tsconfig.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "typescript-config-carbon/tsconfig.base.json",
3+
"compilerOptions": {
4+
"declaration": false,
5+
"emitDeclarationOnly": false
6+
},
7+
"include": ["src/**/*"]
8+
}

‎packages/colors/tsconfig.types.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"compilerOptions": {
4+
"declaration": true,
5+
"emitDeclarationOnly": true,
6+
"declarationDir": "./lib"
7+
},
8+
"include": ["src/**/*"]
9+
}

‎yarn.lock‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1745,6 +1745,8 @@ __metadata:
17451745
change-case-all: "npm:^2.1.0"
17461746
fs-extra: "npm:^11.0.0"
17471747
rimraf: "npm:^6.0.1"
1748+
typescript: "npm:^5.7.3"
1749+
typescript-config-carbon: "workspace:^0.9.0"
17481750
languageName: unknown
17491751
linkType: soft
17501752

0 commit comments

Comments
 (0)