@gataca/design-system 4.2.0 → 4.3.1

package/dist/styles/Colors.d.ts

@@ -1,7 +1,7 @@
 export type ColorsType = {
     fundationWhite: string;
     fundationBlack: string;
-    neutra100: string;
+    neutral100: string;
     neutral200: string;
     neutral300: string;
     neutral400: string;
@@ -78,4 +78,173 @@ export type ColorsType = {
     buttonsWhiteShadow: string;
     buttonsGreyShadow: string;
 };
+export type ThemeColorsType = {
+    generalPage: string;
+    generalPageSecondary: string;
+    generalDefaultCard: string;
+    generalDefaultSecondaryCard: string;
+    generalDefaultTertiaryCard: string;
+    transparent: string;
+    textDefaultHeading: string;
+    textDefaultBody: string;
+    textDefaultCaption: string;
+    textDefaultPlaceholder: string;
+    textOnColorHeading: string;
+    textOnColorBody: string;
+    textOnColorCaption: string;
+    textOnColorPlaceholder: string;
+    textPrimaryDefault: string;
+    textPrimaryDefaultHover: string;
+    textPrimaryOnColor: string;
+    textPrimaryOnColorHover: string;
+    textSecondaryDefault: string;
+    textSecondaryDefaultHover: string;
+    textSecondaryOnColor: string;
+    textSecondaryOnColorHover: string;
+    textAlertDefault: string;
+    textAlertDefaultHover: string;
+    textAlertOnColor: string;
+    textAlertOnColorHover: string;
+    textWarningDefault: string;
+    textWarningDefaultHover: string;
+    textWarningOnColor: string;
+    textWarningOnColorHover: string;
+    textSuccessDefault: string;
+    textSuccessDefaultHover: string;
+    textSuccessOnColor: string;
+    textSuccessOnColorHover: string;
+    textInfoDefault: string;
+    textInfoDefaultHover: string;
+    textInfoOnColor: string;
+    textInfoOnColorHover: string;
+    textNeutralDefault: string;
+    textNeutralDefaultHover: string;
+    textNeutralOnColor: string;
+    textNeutralOnColorHover: string;
+    textContentDefault: string;
+    textContentDefaultHover: string;
+    textContentOnColor: string;
+    textContentOnColorHover: string;
+    textDisableDefault: string;
+    textDisableOnColor: string;
+    iconsPrimaryDefault: string;
+    iconsPrimaryDefaultHover: string;
+    iconsPrimaryOnColor: string;
+    iconsPrimaryOnColorHover: string;
+    iconsSecondaryDefault: string;
+    iconsSecondaryDefaultHover: string;
+    iconsSecondaryOnColor: string;
+    iconsSecondaryOnColorHover: string;
+    iconsAlertDefault: string;
+    iconsAlertDefaultHover: string;
+    iconsAlertOnColor: string;
+    iconsAlertOnColorHover: string;
+    iconsWarningDefault: string;
+    iconsWarningDefaultHover: string;
+    iconsWarningOnColor: string;
+    iconsWarningOnColorHover: string;
+    iconsSuccessDefault: string;
+    iconsSuccessDefaultHover: string;
+    iconsSuccessOnColor: string;
+    iconsSuccessOnColorHover: string;
+    iconsInfoDefault: string;
+    iconsInfoDefaultHover: string;
+    iconsInfoOnColor: string;
+    iconsInfoOnColorHover: string;
+    iconsNeutralDefault: string;
+    iconsNeutralDefaultHover: string;
+    iconsNeutralOnColor: string;
+    iconsNeutralOnColorHover: string;
+    iconsDisabledDefault: string;
+    iconsDisabledOnColor: string;
+    iconsContentDefault: string;
+    iconsContentDefaultHover: string;
+    iconsContentOnColor: string;
+    iconsContentOnColorHover: string;
+    surfacePrimaryDefault: string;
+    surfacePrimaryDefaultHover: string;
+    surfacePrimaryDefaultSubtle: string;
+    surfacePrimaryDefaultSubtleHover: string;
+    surfaceSecondaryDefault: string;
+    surfaceSecondaryDefaultHover: string;
+    surfaceSecondaryDefaultSubtle: string;
+    surfaceSecondaryDefaultSubtleHover: string;
+    surfaceAlertDefault: string;
+    surfaceAlertDefaultHover: string;
+    surfaceAlertDefaultSubtle: string;
+    surfaceAlertDefaultSubtleHover: string;
+    surfaceWarningDefault: string;
+    surfaceWarningDefaultHover: string;
+    surfaceWarningDefaultSubtle: string;
+    surfaceWarningDefaultSubtleHover: string;
+    surfaceSuccessDefault: string;
+    surfaceSuccessDefaultHover: string;
+    surfaceSuccessDefaultSubtle: string;
+    surfaceSuccessDefaultSubtleHover: string;
+    surfaceInfoDefault: string;
+    surfaceInfoDefaultHover: string;
+    surfaceInfoDefaultSubtle: string;
+    surfaceInfoDefaultSubtleHover: string;
+    surfaceNeutralDefault: string;
+    surfaceNeutralDefaultHover: string;
+    surfaceNeutralDefaultSubtle: string;
+    surfaceNeutralDefaultSubtleHover: string;
+    surfaceNeutralDefaultMedium: string;
+    surfaceNeutralDefaultMediumHover: string;
+    surfaceDisableDisable: string;
+    surfaceSkeletonDefault: string;
+    surfaceSkeletonDefaultOnColor: string;
+    bordersGeneralDefault: string;
+    bordersGeneralOnColor: string;
+    bordersPrimaryDefault: string;
+    bordersPrimaryDefaultHover: string;
+    bordersPrimaryDefaultFocus: string;
+    bordersPrimaryDefaultSubtle: string;
+    bordersPrimaryDefaultSubtleHover: string;
+    bordersPrimaryDefaultSubtleFocus: string;
+    bordersSecondaryDefault: string;
+    bordersSecondaryDefaultHover: string;
+    bordersSecondaryDefaultFocus: string;
+    bordersSecondaryDefaultSubtle: string;
+    bordersSecondaryDefaultSubtleHover: string;
+    bordersSecondaryDefaultSubtleFocus: string;
+    bordersAlertDefault: string;
+    bordersAlertDefaultHover: string;
+    bordersAlertDefaultFocus: string;
+    bordersAlertDefaultSubtle: string;
+    bordersAlertDefaultSubtleHover: string;
+    bordersAlertDefaultSubtleFocus: string;
+    bordersWarningDefault: string;
+    bordersWarningDefaultHover: string;
+    bordersWarningDefaultFocus: string;
+    bordersWarningDefaultSubtle: string;
+    bordersWarningDefaultSubtleHover: string;
+    bordersWarningDefaultSubtleFocus: string;
+    bordersSuccessDefault: string;
+    bordersSuccessDefaultHover: string;
+    bordersSuccessDefaultFocus: string;
+    bordersSuccessDefaultSubtle: string;
+    bordersSuccessDefaultSubtleHover: string;
+    bordersSuccessDefaultSubtleFocus: string;
+    bordersInfoDefault: string;
+    bordersInfoDefaultHover: string;
+    bordersInfoDefaultFocus: string;
+    bordersInfoDefaultSubtle: string;
+    bordersInfoDefaultSubtleHover: string;
+    bordersInfoDefaultSubtleFocus: string;
+    bordersNeutralDefault: string;
+    bordersNeutralDefaultHover: string;
+    bordersNeutralDefaultFocus: string;
+    bordersNeutralDefaultSubtle: string;
+    bordersNeutralDefaultSubtleHover: string;
+    bordersNeutralDefaultSubtleFocus: string;
+    bordersNeutralDefaultMedium: string;
+    bordersNeutralDefaultMediumHover: string;
+    bordersNeutralDefaultMediumFocus: string;
+    bordersDisableDisable: string;
+    shadowColorDefault: string;
+    shadowColorMd: string;
+};
 export declare const colorsByLabel: Record<string, ColorsType>;
+export declare const themeLightColors: (brand: string) => ThemeColorsType;
+export declare const themeDarkColors: (brand: string) => ThemeColorsType;

package/dist/utils/theming/themeProvider.d.ts

@@ -1,15 +1,20 @@
 import { ReactNode } from 'react';
-import { ColorsType } from '../../styles/Colors';
+import { ColorsType, ThemeColorsType } from '../../styles/Colors';
 import { FontsType, StyleType } from '../../styles/Fonts';
+export type ThemeMode = 'light' | 'dark';
 type ThemeType = {
     fonts: FontsType;
     fontStyles: StyleType;
     colors: ColorsType;
+    themeColors: ThemeColorsType;
+    themeMode: ThemeMode;
 };
 type ThemeProviderProps = {
     label: 'PRIMARY' | 'SECONDARY' | 'TERTIARY';
+    /** Overrides the default theme mode. Defaults to 'dark' for TERTIARY, 'light' otherwise. */
+    theme?: ThemeMode;
     children: ReactNode;
 };
-export declare const ThemeProvider: ({ label, children }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeProvider: ({ label, theme, children, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useTheme: () => ThemeType;
 export default ThemeProvider;

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "https://gataca-io.github.io/design-system",
   "name": "@gataca/design-system",
-  "version": "4.2.0",
+  "version": "4.3.1",
   "files": [
     "dist"
   ],
@@ -29,6 +29,7 @@
     }
   },
   "description": "Gataca design system components",
+  "license": "MIT",
   "author": "Gataca <it@gataca.io>",
   "licenses": [
     {
@@ -48,14 +49,24 @@
     "storybook:web": "storybook dev -p 6006 -c .storybook-web",
     "build-storybook:web": "storybook build -c .storybook-web -o dist/storybook",
     "storybook": "sb dev",
-    "build-storybook": "sb build"
+    "build-storybook": "sb build",
+    "format": "prettier --write 'src/**/*.{ts,tsx,js,jsx}'",
+    "typescript": "tsc --noEmit --composite false",
+    "licenses": "npx license-checker --direct --relativeLicensePath > ./precommit/licenses.txt && npx license-checker --direct --summary > ./precommit/licenses-summary.txt",
+    "audit": "./precommit/audit.sh"
   },
+  "pre-commit": [
+    "format",
+    "typescript",
+    "audit",
+    "licenses"
+  ],
   "peerDependencies": {
     "@babel/preset-react": "^7.24.7",
     "@expo/metro-config": "^0.18.11",
     "@react-native-community/cli": "^14.1.1",
     "@storybook/addon-react-native-web": "^0.0.25",
-    "@storybook/addon-themes": "^8.3.4",
+    "@storybook/addon-themes": "8.6.18",
     "@types/react-native-web": "^0.19.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "react": "18.3.1",
@@ -67,7 +78,7 @@
     "react-native-web-linear-gradient": "^1.1.2",
     "rollup-plugin-glob": "^1.0.2",
     "rollup-plugin-rebase": "^4.1.1",
-    "storybook": "8.2.4",
+    "storybook": "8.6.18",
     "storybook-multilevel-sort": "^2.0.0",
     "styled-components": "^6.1.13"
   },
@@ -75,7 +86,7 @@
     "@babel/core": "^7.20.0",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@babel/preset-env": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
+    "@babel/runtime": "^7.26.10",
     "@chromatic-com/storybook": "^1",
     "@react-native-async-storage/async-storage": "^2.0.0",
     "@react-native-community/datetimepicker": "^8.2.0",
@@ -88,18 +99,18 @@
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.0",
-    "@storybook/addon-actions": "8.1.11",
-    "@storybook/addon-essentials": "8.2.5",
-    "@storybook/addon-links": "8.2.5",
+    "@storybook/addon-actions": "8.6.18",
+    "@storybook/addon-essentials": "8.6.18",
+    "@storybook/addon-links": "8.6.18",
     "@storybook/addon-ondevice-actions": "^7.6.20",
     "@storybook/addon-ondevice-controls": "^7.6.20",
     "@storybook/addons": "^7.6.17",
-    "@storybook/cli": "8.3.5",
-    "@storybook/manager-api": "^8.3.4",
-    "@storybook/react": "8.2.5",
+    "@storybook/cli": "8.6.18",
+    "@storybook/manager-api": "8.6.18",
+    "@storybook/react": "8.6.18",
     "@storybook/react-native": "^7.6.20",
-    "@storybook/react-webpack5": "8.2.5",
-    "@storybook/theming": "^8.3.4",
+    "@storybook/react-webpack5": "8.6.18",
+    "@storybook/theming": "8.6.18",
     "@types/node": "^14.14.35",
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
@@ -110,13 +121,13 @@
     "gh-pages": "^6.1.1",
     "jest": "^29.6.3",
     "postcss": "^8.4.47",
-    "prettier": "2.8.8",
+    "prettier": "^3.5.3",
     "react-dom": "^18.3.1",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-safe-area-context": "^4.11.0",
     "react-native-web": "^0.19.12",
     "react-test-renderer": "18.3.1",
-    "rollup": "^4.22.4",
+    "rollup": "4.59.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-multi-input": "^1.5.0",
@@ -125,17 +136,80 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
     "tslib": "^2.1.0",
-    "typescript": "^5.6.2"
+    "typescript": "^5.8.3",
+    "pre-commit": "^1.2.2"
   },
   "engines": {
     "node": ">=18"
   },
+  "overrides": {
+    "cross-spawn": "^7.0.6",
+    "image-size": "^1.2.1",
+    "webpack": "^5.104.1",
+    "@storybook/react": {
+      "webpack": "^5.104.1"
+    },
+    "@storybook/core-common": {
+      "webpack": "^5.104.1"
+    },
+    "@storybook/core-server": {
+      "webpack": "^5.104.1"
+    },
+    "@storybook/builder-webpack4": {
+      "webpack": "^5.104.1"
+    },
+    "@storybook/manager-webpack4": {
+      "webpack": "^5.104.1"
+    },
+    "minimatch": "^9.0.7",
+    "lodash": "^4.17.23",
+    "qs": "^6.14.2",
+    "js-yaml": "^4.1.1",
+    "yaml": "^2.8.3",
+    "fast-xml-parser": "^5.5.7",
+    "handlebars": "^4.7.9",
+    "picomatch": "^4.0.4",
+    "flatted": "^3.4.2",
+    "path-to-regexp": "^0.1.13",
+    "node-forge": "^1.4.0",
+    "form-data": "^4.0.4",
+    "tar-fs": "^2.1.4",
+    "tar": "^7.5.11",
+    "on-headers": "^1.1.0",
+    "esbuild": "^0.25.0",
+    "svgo": "^2.8.1",
+    "brace-expansion": "^2.0.3",
+    "store2": "^2.14.4",
+    "min-document": "^2.19.1"
+  },
   "resolutions": {
-    "webpack": "5",
+    "cross-spawn": "^7.0.6",
+    "image-size": "^1.2.1",
+    "webpack": "^5.104.1",
     "@storybook/react/webpack": "^5",
     "@storybook/core-common/webpack": "^5",
     "@storybook/core-server/webpack": "^5",
     "@storybook/builder-webpack4/webpack": "^5",
-    "@storybook/manager-webpack4/webpack": "^5"
+    "@storybook/manager-webpack4/webpack": "^5",
+    "minimatch": "^9.0.7",
+    "lodash": "^4.17.23",
+    "qs": "^6.14.2",
+    "js-yaml": "^4.1.1",
+    "yaml": "^2.8.3",
+    "fast-xml-parser": "^5.5.7",
+    "handlebars": "^4.7.9",
+    "picomatch": "^4.0.4",
+    "flatted": "^3.4.2",
+    "path-to-regexp": "^0.1.13",
+    "node-forge": "^1.4.0",
+    "form-data": "^4.0.4",
+    "tar-fs": "^2.1.4",
+    "tar": "^7.5.11",
+    "on-headers": "^1.1.0",
+    "esbuild": "^0.25.0",
+    "svgo": "^2.8.1",
+    "brace-expansion": "^2.0.3",
+    "store2": "^2.14.4",
+    "min-document": "^2.19.1"
   }
 }