6298939233

Committed 25 Sep 2023 11:51AM UTC coverage: 42.697% (-4.1%) from 46.818%

Build # 6298939233

Build Type

Pull #7

github

Committed by

mohsen-deriv

Commit Message

chore: added new semantic viewport tokens

Pull Request Pull Request #7: update-raw-token-2023-09-25-08-12-07

Run Details

21 of 71 branches covered (0.0%)

Branch coverage included in aggregate %.

35 of 35 new or added lines in 4 files covered. (100.0%)

93 of 196 relevant lines covered (47.45%)

162.01 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

53.49

/src/generators/tailwind/index.ts

import StyleDictionary from 'style-dictionary';
import { registerTransforms, transforms as TokenStudioTransforms } from '@tokens-studio/sd-transforms';
import {
  BASE_VARIANT_SOURCE_INCLUDES,
  QUILL_TAILWIND_BUILD_PATH,
  RAW_CORE_SOURCE_FOLDER,
  RAW_TOKENS_BASE_FOLDER,
} from '../../utils';
import { TailwindCjsFormatter, TailwindEsmFormatter } from '../../formatters/tailwind.formatter';
import {
  paragraphSpacingTransformer,
  spacingNameTransformer,
  stringValueTransformer,
  tailwindTransforms,
  tokenPathTransformer,
} from '../../transformers/tailwind.transformers';
import { makeFontStylesAction, makeStylesAction } from '../../actions/tailwind.actions';
import { desktopTargetFormatter } from '../../formatters/desktop-target.formatter';
import { TokenNamesFormatter } from '../../formatters/token-names.fomatter';

registerTransforms(StyleDictionary);

StyleDictionary.registerTransform(paragraphSpacingTransformer);
StyleDictionary.registerTransform(spacingNameTransformer);
StyleDictionary.registerTransform(tokenPathTransformer);
StyleDictionary.registerFormat(TailwindCjsFormatter);
StyleDictionary.registerFormat(TailwindEsmFormatter);
StyleDictionary.registerAction(makeStylesAction);
StyleDictionary.registerAction(makeFontStylesAction);
StyleDictionary.registerFormat(desktopTargetFormatter);
StyleDictionary.registerTransform(stringValueTransformer);
StyleDictionary.registerFormat(TokenNamesFormatter);

export const CoreSdConfig = StyleDictionary.extend({
  source: [RAW_CORE_SOURCE_FOLDER],
  platforms: {
    core_css: {
      transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
      buildPath: QUILL_TAILWIND_BUILD_PATH,
      files: [
        {
          destination: '_core.css',
          format: 'css/variables',
          options: {
            outputReferences: false,
            showFileHeader: false,
          },
        },
      ],
    },
  },
});

export const SemanticLightSdConfig = StyleDictionary.extend({
  source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/color/light.json`],
  platforms: {
    semantic_light: {
      transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
      buildPath: QUILL_TAILWIND_BUILD_PATH,
      files: [
        {
          destination: '_light.css',
          format: 'css/variables',
          filter: (token) => token.path.includes('semantic'),
          options: {
            selector: 'html',
            outputReferences: false,
            showFileHeader: false,
          },
        },
      ],
    },
  },
});

export const SemanticDarkSdConfig = StyleDictionary.extend({
  source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/color/dark.json`],
  platforms: {
    semantic_dark: {
      transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
      buildPath: QUILL_TAILWIND_BUILD_PATH,
      files: [
        {
          destination: '_dark.css',
          format: 'css/variables',
          filter: (token) => token.path.includes('semantic'),
          options: {
            selector: 'html.dark',
            outputReferences: false,
            showFileHeader: false,
          },
        },
      ],
    },
  },
});

export const SemanticMobileSdConfig = StyleDictionary.extend({
  source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/viewPort/default.json`],
  platforms: {
    semantic_mobile: {
      transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
      buildPath: QUILL_TAILWIND_BUILD_PATH,
      files: [
        {
          destination: '_mobile.css',
          format: 'css/variables',
          filter: (token) => token.path.includes('semantic') && token.type !== 'typography',
          options: {
            selector: ':root',
            outputReferences: false,
            showFileHeader: false,
          },
        },
      ],
    },
  },
});

export const SemanticSmSdConfig = StyleDictionary.extend({
  source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/viewPort/640-plus.json`],
  platforms: {
    semantic_sm: {
      transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
      buildPath: QUILL_TAILWIND_BUILD_PATH,
      files: [
        {
          destination: '_sm.css',
          format: 'css/target-desktop',
          filter: (token) => token.path.includes('semantic') && token.type !== 'typography',
          options: {
            outputReferences: false,
            showFileHeader: false,
            viewPort: 640,
          },
        },
      ],
    },
  },
});

export const SemanticMdSdConfig = StyleDictionary.extend({
  source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/viewPort/768-plus.json`],
  platforms: {
    semantic_md: {
      transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
      buildPath: QUILL_TAILWIND_BUILD_PATH,
      files: [
        {
          destination: '_tablet.css',
          format: 'css/target-desktop',
          filter: (token) => token.path.includes('semantic') && token.type !== 'typography',
          options: {
            outputReferences: false,
            showFileHeader: false,
            viewPort: 768,
          },
        },
      ],
    },
  },
});

export const SemanticLgSdConfig = StyleDictionary.extend({
  source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/viewPort/1024-plus.json`],
  platforms: {
    semantic_lg: {
      transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
      buildPath: QUILL_TAILWIND_BUILD_PATH,
      files: [
        {
          destination: '_lg.css',
          format: 'css/target-desktop',
          filter: (token) => token.path.includes('semantic') && token.type !== 'typography',
          options: {
            outputReferences: false,
            showFileHeader: false,
            viewPort: 1024,
          },
        },
      ],
    },
  },
});

export const SemanticXlSdConfig = StyleDictionary.extend({
  source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/viewPort/1280-plus.json`],
  platforms: {
    semantic_xl: {
      transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
      buildPath: QUILL_TAILWIND_BUILD_PATH,
      files: [
        {
          destination: '_laptop.css',
          format: 'css/target-desktop',
          filter: (token) => token.path.includes('semantic') && token.type !== 'typography',
          options: {
            outputReferences: false,
            showFileHeader: false,
            viewPort: 1280,
          },
        },
      ],
    },
  },
});

export const Semantic2xlSdConfig = StyleDictionary.extend({
  source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/viewPort/1440-plus.json`],
  platforms: {
    semantic_2xl: {
      transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
      buildPath: QUILL_TAILWIND_BUILD_PATH,
      files: [
        {
          destination: '_desktop.css',
          format: 'css/target-desktop',
          filter: (token) => token.path.includes('semantic') && token.type !== 'typography',
          options: {
            outputReferences: false,
            showFileHeader: false,
            viewPort: 1440,
          },
        },
      ],
    },
  },
});

export const TailWindEsmSdConfig = StyleDictionary.extend({
  source: [RAW_CORE_SOURCE_FOLDER],
  include: [...BASE_VARIANT_SOURCE_INCLUDES],
  platforms: {
    tailwind: {
      actions: ['deriv/tw/make-style'],
      transforms: [...TokenStudioTransforms, ...tailwindTransforms, 'name/cti/kebab'],
      buildPath: QUILL_TAILWIND_BUILD_PATH,
      files: [
        {
          destination: 'tailwind.config.js',
          format: 'deriv/tailwind-esm-formatter',
          options: {
            useCoreVariables: false,
          },
        },
      ],
    },
  },
});

export const TailWindCjsSdConfig = StyleDictionary.extend({
  source: [RAW_CORE_SOURCE_FOLDER],
  include: [...BASE_VARIANT_SOURCE_INCLUDES],
  platforms: {
    tailwind: {
      actions: ['deriv/tw/make-style', 'deriv/tw/make-font-style'],
      transforms: [...TokenStudioTransforms, ...tailwindTransforms, 'name/cti/kebab'],
      buildPath: QUILL_TAILWIND_BUILD_PATH,
      files: [
        {
          destination: 'tailwind.config.cjs',
          format: 'deriv/tailwind-cjs-formatter',
          options: {
            useCoreVariables: false,
          },
        },
      ],
    },
  },
});

export const TokenNamesSdConfig = StyleDictionary.extend({
  source: [RAW_CORE_SOURCE_FOLDER],
  include: [...BASE_VARIANT_SOURCE_INCLUDES],
  platforms: {
    tailwind: {
      transforms: [...TokenStudioTransforms, ...tailwindTransforms, 'name/cti/kebab'],
      buildPath: QUILL_TAILWIND_BUILD_PATH,
      files: [
        {
          destination: 'token-names.js',
          format: 'deriv/token-names',
          options: {
            useCoreVariables: false,
          },
        },
      ],
    },
  },
});

1	import StyleDictionary from 'style-dictionary';
2	import { registerTransforms, transforms as TokenStudioTransforms } from '@tokens-studio/sd-transforms';
3	import {
4	BASE_VARIANT_SOURCE_INCLUDES,
5	QUILL_TAILWIND_BUILD_PATH,
6	RAW_CORE_SOURCE_FOLDER,
7	RAW_TOKENS_BASE_FOLDER,
8	} from '../../utils';
9	import { TailwindCjsFormatter, TailwindEsmFormatter } from '../../formatters/tailwind.formatter';
10	import {
11	paragraphSpacingTransformer,
12	spacingNameTransformer,
13	stringValueTransformer,
14	tailwindTransforms,
15	tokenPathTransformer,
16	} from '../../transformers/tailwind.transformers';
17	import { makeFontStylesAction, makeStylesAction } from '../../actions/tailwind.actions';
18	import { desktopTargetFormatter } from '../../formatters/desktop-target.formatter';
19	import { TokenNamesFormatter } from '../../formatters/token-names.fomatter';
20
21	registerTransforms(StyleDictionary);	1✔
22
23	StyleDictionary.registerTransform(paragraphSpacingTransformer);	1✔
24	StyleDictionary.registerTransform(spacingNameTransformer);	1✔
25	StyleDictionary.registerTransform(tokenPathTransformer);	1✔
26	StyleDictionary.registerFormat(TailwindCjsFormatter);	1✔
27	StyleDictionary.registerFormat(TailwindEsmFormatter);	1✔
28	StyleDictionary.registerAction(makeStylesAction);	1✔
29	StyleDictionary.registerAction(makeFontStylesAction);	1✔
30	StyleDictionary.registerFormat(desktopTargetFormatter);	1✔
31	StyleDictionary.registerTransform(stringValueTransformer);	1✔
32	StyleDictionary.registerFormat(TokenNamesFormatter);	1✔
33
34	export const CoreSdConfig = StyleDictionary.extend({	1✔
35	source: [RAW_CORE_SOURCE_FOLDER],
36	platforms: {
37	core_css: {
38	transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
39	buildPath: QUILL_TAILWIND_BUILD_PATH,
40	files: [
41	{
42	destination: '_core.css',
43	format: 'css/variables',
44	options: {
45	outputReferences: false,
46	showFileHeader: false,
47	},
48	},
49	],
50	},
51	},
52	});
53
54	export const SemanticLightSdConfig = StyleDictionary.extend({	1✔
55	source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/color/light.json`],
56	platforms: {
57	semantic_light: {
58	transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
59	buildPath: QUILL_TAILWIND_BUILD_PATH,
60	files: [
61	{
62	destination: '_light.css',
63	format: 'css/variables',
64	filter: (token) => token.path.includes('semantic'),	×
65	options: {
66	selector: 'html',
67	outputReferences: false,
68	showFileHeader: false,
69	},
70	},
71	],
72	},
73	},
74	});
75
76	export const SemanticDarkSdConfig = StyleDictionary.extend({	1✔
77	source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/color/dark.json`],
78	platforms: {
79	semantic_dark: {
80	transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
81	buildPath: QUILL_TAILWIND_BUILD_PATH,
82	files: [
83	{
84	destination: '_dark.css',
85	format: 'css/variables',
86	filter: (token) => token.path.includes('semantic'),	×
87	options: {
88	selector: 'html.dark',
89	outputReferences: false,
90	showFileHeader: false,
91	},
92	},
93	],
94	},
95	},
96	});
97
98	export const SemanticMobileSdConfig = StyleDictionary.extend({	1✔
99	source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/viewPort/default.json`],
100	platforms: {
101	semantic_mobile: {
102	transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
103	buildPath: QUILL_TAILWIND_BUILD_PATH,
104	files: [
105	{
106	destination: '_mobile.css',
107	format: 'css/variables',
108	filter: (token) => token.path.includes('semantic') && token.type !== 'typography',	×
109	options: {
110	selector: ':root',
111	outputReferences: false,
112	showFileHeader: false,
113	},
114	},
115	],
116	},
117	},
118	});
119
120	export const SemanticSmSdConfig = StyleDictionary.extend({	1✔
121	source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/viewPort/640-plus.json`],
122	platforms: {
123	semantic_sm: {
124	transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
125	buildPath: QUILL_TAILWIND_BUILD_PATH,
126	files: [
127	{
128	destination: '_sm.css',
129	format: 'css/target-desktop',
130	filter: (token) => token.path.includes('semantic') && token.type !== 'typography',	×
131	options: {
132	outputReferences: false,
133	showFileHeader: false,
134	viewPort: 640,
135	},
136	},
137	],
138	},
139	},
140	});
141
142	export const SemanticMdSdConfig = StyleDictionary.extend({	1✔
143	source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/viewPort/768-plus.json`],
144	platforms: {
145	semantic_md: {
146	transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
147	buildPath: QUILL_TAILWIND_BUILD_PATH,
148	files: [
149	{
150	destination: '_tablet.css',
151	format: 'css/target-desktop',
152	filter: (token) => token.path.includes('semantic') && token.type !== 'typography',	×
153	options: {
154	outputReferences: false,
155	showFileHeader: false,
156	viewPort: 768,
157	},
158	},
159	],
160	},
161	},
162	});
163
164	export const SemanticLgSdConfig = StyleDictionary.extend({	1✔
165	source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/viewPort/1024-plus.json`],
166	platforms: {
167	semantic_lg: {
168	transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
169	buildPath: QUILL_TAILWIND_BUILD_PATH,
170	files: [
171	{
172	destination: '_lg.css',
173	format: 'css/target-desktop',
174	filter: (token) => token.path.includes('semantic') && token.type !== 'typography',	×
175	options: {
176	outputReferences: false,
177	showFileHeader: false,
178	viewPort: 1024,
179	},
180	},
181	],
182	},
183	},
184	});
185
186	export const SemanticXlSdConfig = StyleDictionary.extend({	1✔
187	source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/viewPort/1280-plus.json`],
188	platforms: {
189	semantic_xl: {
190	transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
191	buildPath: QUILL_TAILWIND_BUILD_PATH,
192	files: [
193	{
194	destination: '_laptop.css',
195	format: 'css/target-desktop',
196	filter: (token) => token.path.includes('semantic') && token.type !== 'typography',	×
197	options: {
198	outputReferences: false,
199	showFileHeader: false,
200	viewPort: 1280,
201	},
202	},
203	],
204	},
205	},
206	});
207
208	export const Semantic2xlSdConfig = StyleDictionary.extend({	1✔
209	source: [RAW_CORE_SOURCE_FOLDER, `${RAW_TOKENS_BASE_FOLDER}/semantic/viewPort/1440-plus.json`],
210	platforms: {
211	semantic_2xl: {
212	transforms: [...TokenStudioTransforms, 'deriv/paragraph-spacing', 'name/cti/kebab'],
213	buildPath: QUILL_TAILWIND_BUILD_PATH,
214	files: [
215	{
216	destination: '_desktop.css',
217	format: 'css/target-desktop',
218	filter: (token) => token.path.includes('semantic') && token.type !== 'typography',	×
219	options: {
220	outputReferences: false,
221	showFileHeader: false,
222	viewPort: 1440,
223	},
224	},
225	],
226	},
227	},
228	});
229
230	export const TailWindEsmSdConfig = StyleDictionary.extend({	1✔
231	source: [RAW_CORE_SOURCE_FOLDER],
232	include: [...BASE_VARIANT_SOURCE_INCLUDES],
233	platforms: {
234	tailwind: {
235	actions: ['deriv/tw/make-style'],
236	transforms: [...TokenStudioTransforms, ...tailwindTransforms, 'name/cti/kebab'],
237	buildPath: QUILL_TAILWIND_BUILD_PATH,
238	files: [
239	{
240	destination: 'tailwind.config.js',
241	format: 'deriv/tailwind-esm-formatter',
242	options: {
243	useCoreVariables: false,
244	},
245	},
246	],
247	},
248	},
249	});
250
251	export const TailWindCjsSdConfig = StyleDictionary.extend({	1✔
252	source: [RAW_CORE_SOURCE_FOLDER],
253	include: [...BASE_VARIANT_SOURCE_INCLUDES],
254	platforms: {
255	tailwind: {
256	actions: ['deriv/tw/make-style', 'deriv/tw/make-font-style'],
257	transforms: [...TokenStudioTransforms, ...tailwindTransforms, 'name/cti/kebab'],
258	buildPath: QUILL_TAILWIND_BUILD_PATH,
259	files: [
260	{
261	destination: 'tailwind.config.cjs',
262	format: 'deriv/tailwind-cjs-formatter',
263	options: {
264	useCoreVariables: false,
265	},
266	},
267	],
268	},
269	},
270	});
271
272	export const TokenNamesSdConfig = StyleDictionary.extend({	1✔
273	source: [RAW_CORE_SOURCE_FOLDER],
274	include: [...BASE_VARIANT_SOURCE_INCLUDES],
275	platforms: {
276	tailwind: {
277	transforms: [...TokenStudioTransforms, ...tailwindTransforms, 'name/cti/kebab'],
278	buildPath: QUILL_TAILWIND_BUILD_PATH,
279	files: [
280	{
281	destination: 'token-names.js',
282	format: 'deriv/token-names',
283	options: {
284	useCoreVariables: false,
285	},
286	},
287	],
288	},
289	},
290	});

deriv-com / quill-tokens / 6298939233

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous