Rename atoms.css.ts to sprinkles.css.ts (#137)

Author: markdalgleish

examples/webpack-react/src/App.css.ts

@@ -1,5 +1,5 @@
 import { style, composeStyles } from '@vanilla-extract/css';
-import { atoms } from './atoms.css';
+import { atoms } from './sprinkles.css';
 
 export const card = composeStyles(
   atoms({

examples/webpack-react/src/App.tsx

@@ -1,4 +1,4 @@
-import { atoms } from './atoms.css';
+import { atoms } from './sprinkles.css';
 import * as styles from './App.css';
 
 export const App = () => (

examples/webpack-react/src/atoms.css.ts renamed to examples/webpack-react/src/sprinkles.css.ts

@@ -32,7 +32,7 @@ export const className = atoms({
 ```ts
 // app.ts
 
-import { atoms } from './atoms.css.ts';
+import { atoms } from './sprinkles.css.ts';
 
 const flexDirection = Math.random() > 0.5 ? 'column' : 'row';
 
@@ -67,7 +67,7 @@ document.write(`
 
 ---
 
-🖥   [Try it out for yourself in CodeSandbox.](https://codesandbox.io/s/github/seek-oss/vanilla-extract/tree/master/examples/webpack-react?file=/src/atoms.css.ts)
+🖥   [Try it out for yourself in CodeSandbox.](https://codesandbox.io/s/github/seek-oss/vanilla-extract/tree/master/examples/webpack-react?file=/src/sprinkles.css.ts)
 
 ---
 
@@ -81,12 +81,12 @@ Install Sprinkles.
 $ npm install @vanilla-extract/sprinkles
 ```
 
-Create an `atoms.css.ts` file, then configure and export your `atoms` function.
+Create a `sprinkles.css.ts` file, then configure and export your `atoms` function.
 
 > 💡 This is just an example! Feel free to customise properties, values and conditions to match your requirements.
 
 ```ts
-// atoms.css.ts
+// sprinkles.css.ts
 import { createAtomicStyles, createAtomsFn } from '@vanilla-extract/sprinkles';
 
 const space = {
@@ -157,7 +157,7 @@ You can now use your `atoms` function in `.css.ts` files for zero-runtime usage.
 
 ```ts
 // styles.css.ts
-import { atoms } from './atoms.css.ts';
+import { atoms } from './sprinkles.css.ts';
 
 export const container = atoms({
   display: 'flex',
@@ -180,7 +180,7 @@ Combine with any custom styles using vanilla-extract’s [`composeStyles`](https
 ```ts
 // styles.css.ts
 import { style, composeStyles } from '@vanilla-extract/css';
-import { atoms } from './atoms.css.ts';
+import { atoms } from './sprinkles.css.ts';
 
 export const container = composeStyles(
   atoms({
@@ -199,7 +199,7 @@ If you want, you can even use your `atoms` function at runtime! 🏃‍♂️
 
 ```tsx
 // app.ts
-import { atoms } from './atoms.css.ts';
+import { atoms } from './sprinkles.css.ts';
 
 const flexDirection = Math.random() > 0.5 ? 'column' : 'row';
 
@@ -500,7 +500,7 @@ Creates a function for mapping over conditional values.
 
 > 💡 This is useful for converting high-level prop values to low-level atoms, e.g. converting left/right to flex-start/end.
 
-This function should be created and exported from your `atoms.css.ts` file using the conditions from your atomic styles.
+This function should be created and exported from your `sprinkles.css.ts` file using the conditions from your atomic styles.
 
 You can name the generated function whatever you like, typically based on the name of your conditions.
 
@@ -520,7 +520,7 @@ export const mapResponsiveValue = createMapValueFn(responsiveStyles);
 You can then import the generated function in your app code.
 
 ```ts
-import { mapResponsiveValue } from './atoms.css.ts';
+import { mapResponsiveValue } from './sprinkles.css.ts';
 
 const alignToFlexAlign = {
   left: 'flex-start',
@@ -552,7 +552,7 @@ mapResponsiveValue([
 
 Creates a function for normalizing conditional values into a consistent object stucture. Any primitive values or responsive arrays will be converted to conditional objects.
 
-This function should be created and exported from your `atoms.css.ts` file using the conditions from your atomic styles.
+This function should be created and exported from your `sprinkles.css.ts` file using the conditions from your atomic styles.
 
 > 💡 You can name the generated function whatever you like, typically based on the name of your conditions.
 
@@ -572,7 +572,7 @@ export const normalizeResponsiveValue = createNormalizeValueFn(responsiveStyles)
 You can then import the generated function in your app code.
 
 ```ts
-import { normalizeResponsiveValue } from './atoms.css.ts';
+import { normalizeResponsiveValue } from './sprinkles.css.ts';
 
 normalizeResponsiveValue('block');
 // -> { mobile: 'block' }
@@ -592,7 +592,7 @@ Creates a custom conditional value type.
 
 > 💡 This is useful for typing high-level prop values that are [mapped to low-level atoms,](#createmapvaluefn) e.g. supporting left/right prop values that map to flex-start/end.
 
-This type should be created and exported from your `atoms.css.ts` file using the conditions from your atomic styles.
+This type should be created and exported from your `sprinkles.css.ts` file using the conditions from your atomic styles.
 
 You can name the generated type whatever you like, typically based on the name of your conditions.
 
@@ -607,7 +607,7 @@ export type ResponsiveValue<Value extends string | number> = ConditionalValue<ty
 You can then import the generated type in your app code.
 
 ```ts
-import { ResponsiveValue } from './atoms.css.ts';
+import { ResponsiveValue } from './sprinkles.css.ts';
 
 type ResponsiveAlign = ResponsiveValue<'left' | 'center' | 'right'>;
 

packages/sprinkles/README.md

@@ -1,5 +1,5 @@
 import { globalStyle } from '@vanilla-extract/css';
-import { darkMode } from './system/styles/atoms.css';
+import { darkMode } from './system/styles/sprinkles.css';
 import { vars } from './themes.css';
 
 globalStyle('html, body', {

site/src/App.css.ts

@@ -1,5 +1,5 @@
 import { globalStyle, style, createVar } from '@vanilla-extract/css';
-import { darkMode } from '../system/styles/atoms.css';
+import { darkMode } from '../system/styles/sprinkles.css';
 import { vars } from '../themes.css';
 
 const borderColorVar = createVar();

site/src/Blockquote/Blockquote.css.ts

@@ -1,5 +1,5 @@
 import { style, globalStyle } from '@vanilla-extract/css';
-import { darkMode } from '../system/styles/atoms.css';
+import { darkMode } from '../system/styles/sprinkles.css';
 import { vars } from '../themes.css';
 
 export const root = style({

site/src/Code/Code.css.ts

@@ -12,7 +12,7 @@ import Text from '../Typography/Text';
 import InlineCode from '../InlineCode/InlineCode';
 import * as styles from './Code.css';
 import { useRef, useEffect } from 'react';
-import { Atoms } from '../system/styles/atoms.css';
+import { Atoms } from '../system/styles/sprinkles.css';
 export interface CodeProps {
   language: string;
   errorTokens?: Array<string>;

site/src/Code/Code.tsx

@@ -1,5 +1,5 @@
 import { createVar, style } from '@vanilla-extract/css';
-import { darkMode } from '../system/styles/atoms.css';
+import { darkMode } from '../system/styles/sprinkles.css';
 
 const toggleBrightness = createVar();
 const toggleContent = createVar();

site/src/ColorModeToggle/ColorModeToggle.css.ts

@@ -1,5 +1,5 @@
 import { style, createVar, fallbackVar } from '@vanilla-extract/css';
-import { darkMode } from '../system/styles/atoms.css';
+import { darkMode } from '../system/styles/sprinkles.css';
 import { vars } from '../themes.css';
 
 export const focusColorVar = createVar();