@grantbii/design-system 1.0.24 → 1.0.26

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.
Files changed (8) hide show
  1. package/README.md +1 -1
  2. package/core/atoms/colors.d.ts +11 -7
  3. package/core/atoms/colors.js +11 -7
  4. package/core/global/GlobalStyle.js +3 -3
  5. package/index.d.ts +3 -2
  6. package/index.js +3 -2
  7. package/package.json +2 -1
  8. package/tsconfig.tsbuildinfo +1 -1
package/README.md CHANGED
@@ -28,7 +28,7 @@ npm run storybook
28
28
 
29
29
  Open [http://localhost:6006](http://localhost:6006) with your browser to see the result.
30
30
 
31
- The pages auto-updates as you edit the files.
31
+ The pages auto-update as you edit the files.
32
32
 
33
33
  ## Develop
34
34
 
package/core/atoms/colors.d.ts CHANGED
@@ -1,16 +1,18 @@
1
- export declare const MAIN_COLOR: {
1
+ export declare const main: {
2
2
  grantbiiBlue: string;
3
3
  grantbiiOrange: string;
4
4
  };
5
- export declare const BLACK_COLOR = "#232022";
6
- export declare const WHITE_COLOR = "#ffffff";
7
- export declare const NEUTRAL_COLOR: {
5
+ export declare const base: {
6
+ black: string;
7
+ white: string;
8
+ };
9
+ export declare const neutral: {
8
10
  grey1: string;
9
11
  grey2: string;
10
12
  grey3: string;
11
13
  grey4: string;
12
14
  };
13
- export declare const ACCENT_COLOR: {
15
+ export declare const accent: {
14
16
  red1: string;
15
17
  red2: string;
16
18
  red3: string;
@@ -24,8 +26,7 @@ export declare const ACCENT_COLOR: {
24
26
  blue2: string;
25
27
  blue3: string;
26
28
  };
27
- export declare const OVERLAY_COLOR = "#13131366";
28
- export declare const TYPOGRAPHY_COLOR: {
29
+ export declare const typography: {
29
30
  blackHigh: string;
30
31
  blackMedium: string;
31
32
  blackLow: string;
@@ -33,3 +34,6 @@ export declare const TYPOGRAPHY_COLOR: {
33
34
  whiteMedium: string;
34
35
  whiteLow: string;
35
36
  };
37
+ export declare const semantic: {
38
+ overlay: string;
39
+ };
package/core/atoms/colors.js CHANGED
@@ -1,16 +1,18 @@
1
- export const MAIN_COLOR = {
1
+ export const main = {
2
2
  grantbiiBlue: "#16538a",
3
3
  grantbiiOrange: "#f3924d",
4
4
  };
5
- export const BLACK_COLOR = "#232022";
6
- export const WHITE_COLOR = "#ffffff";
7
- export const NEUTRAL_COLOR = {
5
+ export const base = {
6
+ black: "#232022",
7
+ white: "#ffffff",
8
+ };
9
+ export const neutral = {
8
10
  grey1: "#999999",
9
11
  grey2: "#cccccc",
10
12
  grey3: "#eeeeee",
11
13
  grey4: "#fafafa",
12
14
  };
13
- export const ACCENT_COLOR = {
15
+ export const accent = {
14
16
  // usually includes dangerous, wrong or rejected information
15
17
  red1: "#c02318",
16
18
  red2: "#f88e86",
@@ -28,8 +30,7 @@ export const ACCENT_COLOR = {
28
30
  blue2: "#74aeef",
29
31
  blue3: "#bad6f7",
30
32
  };
31
- export const OVERLAY_COLOR = "#13131366";
32
- export const TYPOGRAPHY_COLOR = {
33
+ export const typography = {
33
34
  blackHigh: "#000000e5",
34
35
  blackMedium: "#00000099",
35
36
  blackLow: "#0000004d",
@@ -37,3 +38,6 @@ export const TYPOGRAPHY_COLOR = {
37
38
  whiteMedium: "#ffffff99",
38
39
  whiteLow: "#0000001a",
39
40
  };
41
+ export const semantic = {
42
+ overlay: "#13131366",
43
+ };
package/core/global/GlobalStyle.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { createGlobalStyle } from "styled-components";
3
3
  import "../../public/fonts/satoshi/css/satoshi.css";
4
- import { TYPOGRAPHY_COLOR, WHITE_COLOR } from "../atoms/colors";
4
+ import * as Colors from "../atoms/colors";
5
5
  const GlobalStyle = createGlobalStyle `
6
6
  html,
7
7
  body {
@@ -9,8 +9,8 @@ const GlobalStyle = createGlobalStyle `
9
9
  }
10
10
 
11
11
  body {
12
- color: ${TYPOGRAPHY_COLOR.blackHigh};
13
- background: ${WHITE_COLOR};
12
+ color: ${Colors.typography.blackHigh};
13
+ background: ${Colors.base.white};
14
14
  font-family: Satoshi;
15
15
  -webkit-font-smoothing: antialiased;
16
16
  -moz-osx-font-smoothing: grayscale;
package/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- export * from "@phosphor-icons/react";
1
+ export * as Icons from "@phosphor-icons/react";
2
+ export * as Flags from "country-flag-icons/react/3x2";
2
3
  export { default as BrandLogo } from "./core/atoms/BrandLogo";
3
- export * from "./core/atoms/colors";
4
+ export * as Colors from "./core/atoms/colors";
4
5
  export { default as GlobalStyle } from "./core/global/GlobalStyle";
5
6
  export { default as StyledComponentsRegistry } from "./core/integrations/StyledComponentsRegistry";
package/index.js CHANGED
@@ -1,5 +1,6 @@
1
- export * from "@phosphor-icons/react";
1
+ export * as Icons from "@phosphor-icons/react";
2
+ export * as Flags from "country-flag-icons/react/3x2";
2
3
  export { default as BrandLogo } from "./core/atoms/BrandLogo";
3
- export * from "./core/atoms/colors";
4
+ export * as Colors from "./core/atoms/colors";
4
5
  export { default as GlobalStyle } from "./core/global/GlobalStyle";
5
6
  export { default as StyledComponentsRegistry } from "./core/integrations/StyledComponentsRegistry";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@grantbii/design-system",
3
- "version": "1.0.24",
3
+ "version": "1.0.26",
4
4
  "description": "Grantbii's Design System",
5
5
  "homepage": "https://design.grantbii.com",
6
6
  "repository": {
@@ -19,6 +19,7 @@
19
19
  },
20
20
  "dependencies": {
21
21
  "@phosphor-icons/react": "^2.1.10",
22
+ "country-flag-icons": "^1.5.19",
22
23
  "next": "^15.3.5",
23
24
  "react": "^19.1.0",
24
25
  "react-dom": "^19.1.0",