@primer/styled-react 0.0.0-20251022053901 → 0.0.0-20251022090042

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}

package/dist/theme.js

@@ -0,0 +1,50 @@
+import { fontStack } from './theme-utils.js';
+import { colorSchemes } from './legacy-theme/ts/color-schemes.js';
+
+const animation = {
+  easeOutCubic: 'cubic-bezier(0.33, 1, 0.68, 1)'
+};
+const breakpoints = ['544px', '768px', '1012px', '1280px'];
+const fonts = {
+  normal: fontStack(['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Noto Sans', 'Helvetica', 'Arial', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji']),
+  mono: `var(--fontStack-monospace, ${fontStack(['SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', 'monospace'])})`
+};
+const lineHeights = {
+  condensedUltra: 1,
+  condensed: 1.25,
+  default: 1.5
+};
+const fontWeights = {
+  light: 300,
+  normal: 400,
+  semibold: 500,
+  bold: 600
+};
+const borderWidths = [0, '1px'];
+const radii = ['0', '3px', '6px', '100px'];
+const sizes = {
+  small: '544px',
+  medium: '768px',
+  large: '1012px',
+  xlarge: '1280px'
+};
+const fontSizes = ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px', '56px'];
+const space = ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px', '80px', '96px', '112px', '128px'];
+const theme = {
+  animation,
+  borderWidths,
+  breakpoints,
+  fonts,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  radii,
+  sizes,
+  space,
+  colorSchemes
+};
+
+// NOTE: for now, ThemeColors and ThemeShadows are handcrafted types. It would be nice if these
+// were exports from primitives (or a different shape but derived from those exports).
+
+export { theme as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/styled-react",
-  "version": "0.0.0-20251022053901",
+  "version": "0.0.0-20251022090042",
   "type": "module",
   "exports": {
     ".": {
@@ -23,6 +23,7 @@
   ],
   "scripts": {
     "build": "script/build",
+    "build:precompile-color-schemes": "tsx script/precompile-color-schemes.ts",
     "clean": "rimraf dist",
     "lint:npm": "publint --types",
     "type-check": "tsc --noEmit"
@@ -30,12 +31,17 @@
   "devDependencies": {
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@primer/react": "0.0.0-20251022053901",
+    "@primer/react": "0.0.0-20251022090042",
     "@rollup/plugin-babel": "^6.0.4",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
+    "@types/styled-components": "^5.1.34",
+    "@types/styled-system": "^5.1.24",
+    "@types/styled-system__css": "^5.0.21",
+    "@types/styled-system__theme-get": "^5.0.4",
     "@vitejs/plugin-react": "^4.3.3",
     "babel-plugin-styled-components": "2.1.4",
+    "deepmerge": "^4.3.1",
     "publint": "^0.3.12",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -43,10 +49,11 @@
     "rollup": "4.50.1",
     "rollup-plugin-typescript2": "^0.36.0",
     "styled-components": "5.3.11",
+    "tsx": "^4.20.6",
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@primer/react": "0.0.0-20251022053901",
+    "@primer/react": "0.0.0-20251022090042",
     "@types/react": "18.x || 19.x",
     "@types/react-dom": "18.x || 19.x",
     "@types/react-is": "18.x || 19.x",
@@ -69,5 +76,14 @@
     "@types/styled-components": {
       "optional": true
     }
+  },
+  "dependencies": {
+    "@styled-system/css": "^5.1.5",
+    "@styled-system/theme-get": "^5.1.2",
+    "clsx": "^2.1.1",
+    "focus-visible": "^5.2.1",
+    "lodash.isempty": "^4.4.0",
+    "lodash.isobject": "^3.0.2",
+    "styled-system": "^5.1.5"
   }
 }

package/dist/components/FeatureFlaggedTheming.d.ts

@@ -1,9 +0,0 @@
-import { useTheme as primerReactUseTheme, useColorSchemeVar as primerReactUseColorSchemeVar } from '@primer/react';
-import { type ThemeProviderProps } from './ThemeProvider';
-import { type BaseStylesProps } from './BaseStyles';
-export declare const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>>;
-export declare const BaseStyles: React.FC<React.PropsWithChildren<BaseStylesProps>>;
-export declare const useTheme: typeof primerReactUseTheme;
-export declare const useColorSchemeVar: typeof primerReactUseColorSchemeVar;
-export type { ThemeProviderProps, BaseStylesProps };
-//# sourceMappingURL=FeatureFlaggedTheming.d.ts.map

package/dist/components/FeatureFlaggedTheming.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FeatureFlaggedTheming.d.ts","sourceRoot":"","sources":["../../src/components/FeatureFlaggedTheming.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,QAAQ,IAAI,mBAAmB,EAC/B,iBAAiB,IAAI,4BAA4B,EAClD,MAAM,eAAe,CAAA;AACtB,OAAO,EAIL,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAsC,KAAK,eAAe,EAAC,MAAM,cAAc,CAAA;AAGtF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAO/E,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAOzE,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,OAAO,mBAM7B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,OAAO,4BAMtC,CAAA;AAED,YAAY,EAAC,kBAAkB,EAAE,eAAe,EAAC,CAAA"}

package/dist/components/FeatureFlaggedTheming.js

@@ -1,54 +0,0 @@
-import { ThemeProvider as ThemeProvider$2, useTheme as useTheme$2, useColorSchemeVar as useColorSchemeVar$2, BaseStyles as BaseStyles$2 } from '@primer/react';
-import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, useColorSchemeVar as useColorSchemeVar$1 } from './ThemeProvider.js';
-import { BaseStyles as BaseStyles$1 } from './BaseStyles.js';
-import { useFeatureFlag } from '@primer/react/experimental';
-import { jsx } from 'react/jsx-runtime';
-
-const ThemeProvider = ({
-  children,
-  ...props
-}) => {
-  const enabled = useFeatureFlag('primer_react_use_styled_react_theming');
-  if (enabled) {
-    return /*#__PURE__*/jsx(ThemeProvider$1, {
-      ...props,
-      children: children
-    });
-  } else {
-    return /*#__PURE__*/jsx(ThemeProvider$2, {
-      ...props,
-      children: children
-    });
-  }
-};
-const BaseStyles = ({
-  children,
-  ...props
-}) => {
-  const enabled = useFeatureFlag('primer_react_use_styled_react_theming');
-  if (enabled) {
-    return /*#__PURE__*/jsx(BaseStyles$1, {
-      ...props,
-      children: children
-    });
-  } else {
-    return /*#__PURE__*/jsx(BaseStyles$2, {
-      ...props,
-      children: children
-    });
-  }
-};
-const useTheme = () => {
-  const enabled = useFeatureFlag('primer_react_use_styled_react_theming');
-  const styledReactResults = useTheme$1();
-  const primerReactResults = useTheme$2();
-  return enabled ? styledReactResults : primerReactResults;
-};
-const useColorSchemeVar = (values, fallback) => {
-  const enabled = useFeatureFlag('primer_react_use_styled_react_theming');
-  const styledReactResults = useColorSchemeVar$1(values, fallback);
-  const primerReactResults = useColorSchemeVar$2(values, fallback);
-  return enabled ? styledReactResults : primerReactResults;
-};
-
-export { BaseStyles, ThemeProvider, useColorSchemeVar, useTheme };