Merge pull request #473 from sima-land/472-gradients-and-colors-upd

.template/build.mjs

@@ -1,70 +1,46 @@
-import { readFile, writeFile } from 'fs/promises';
-import Handlebars from 'handlebars';
+/* eslint-disable jsdoc/require-jsdoc */
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import handlebars from 'handlebars';
+import { colorGroups, gradients } from './data.mjs';
 
-const colorsByGroups = {
-  basic: {
-    blue: '#1f84db',
-    gray87: '#212121',
-    gray76: '#3a3a3b',
-    gray66: '#545455',
-    gray54: '#757575',
-    gray38: '#9e9e9e',
-    gray24: '#c2c2c2',
-    gray12: '#e0e0e0',
-    gray8: '#ebebeb',
-    gray4: '#f5f5f5',
-    gray2: '#fafafa',
-    white: '#fff',
+const items = [
+  {
+    templatePath: 'colors.ts.handlebars',
+    templateData: { colorGroups },
+    outputPath: '../src/colors/index.ts',
   },
-  additional: {
-    'deep-red': '#d50000',
-    red: '#fb3a2f',
-    'light-red': '#feebea',
-    'dark-teal': '#089176',
-    teal: '#09ab8b',
-    green: '#00c853',
-    'light-green': '#64dd17',
-    lime: '#aeea00',
-    'faded-green': '#eff9ea',
-    pink: '#e82e5c',
-    purple: '#b52ea8',
-    violet: '#902bd0',
-    'deep-purple': '#634bdf',
-    'electric-blue': '#2962ff',
-    'light-blue': '#0091ea',
-    cyan: '#00b8d4',
-    sky: '#e4f1f9',
-    'deep-orange': '#ff7200',
-    amber: '#ffab00',
-    yellow: '#ffd600',
-    gold: '#d5a43b',
-    brown: '#795548',
-    'blue-gray': '#607d8b',
-    'deep-blue': '#00599d',
-    'dark-blue': '#002b41',
-    'unlit-blue': '#1b75c2',
-    crimson: '#f4446b',
+  {
+    templatePath: 'colors.scss.handlebars',
+    templateData: { colorGroups },
+    outputPath: '../src/colors.scss',
   },
-};
+  {
+    templatePath: 'gradients.ts.handlebars',
+    templateData: { gradients },
+    outputPath: '../src/gradients/index.ts',
+  },
+  {
+    templatePath: 'gradients.scss.handlebars',
+    templateData: { gradients },
+    outputPath: '../src/gradients.scss',
+  },
+];
 
-async function main() {
-  const styleTemplateSource = await readFile(
-    new URL('./colors.scss.handlebars', import.meta.url),
-    'utf-8',
-  );
-  const scriptTemplateSource = await readFile(
-    new URL('./colors.ts.handlebars', import.meta.url),
-    'utf-8',
-  );
+function relative(pathname) {
+  return path.resolve(import.meta.dirname, pathname);
+}
 
-  const styleTemplate = Handlebars.compile(styleTemplateSource);
-  const scriptTemplate = Handlebars.compile(scriptTemplateSource);
+async function outputFile(filename, content) {
+  await fs.mkdir(path.dirname(relative(filename)), { recursive: true });
+  await fs.writeFile(relative(filename), content);
+}
 
-  const stylePath = new URL('../src/colors.scss', import.meta.url);
-  const scriptPath = new URL('../src/colors/index.ts', import.meta.url);
+async function buildSource({ templatePath, templateData, outputPath }) {
+  const templateSrc = await fs.readFile(relative(templatePath), 'utf-8');
+  const template = handlebars.compile(templateSrc);
 
-  await writeFile(stylePath, styleTemplate({ colorsByGroups }));
-  await writeFile(scriptPath, scriptTemplate({ colorsByGroups }));
+  await outputFile(relative(outputPath), template(templateData));
 }
 
-main();
+await Promise.all(items.map(buildSource));

.template/colors.scss.handlebars

@@ -1,6 +1,6 @@
 // GENERATED FILE - DO NOT CHANGE IT MANUALLY
 
-{{#each colorsByGroups}}
+{{#each colorGroups}}
 // {{@key}}
 {{#each this}}
 ${{@../key}}-{{@key}}: {{this}};
@@ -9,3 +9,15 @@ ${{@../key}}-{{@key}}: {{this}};
 
 {{/unless}}
 {{/each}}
+
+@mixin properties() {
+  {{#each colorGroups}}
+  // {{@key}}
+  {{#each this}}
+  --color-{{@../key}}-{{@key}}: {{this}};
+  {{/each}}
+  {{#unless @last}}
+
+  {{/unless}}
+  {{/each}}
+}

.template/colors.ts.handlebars

@@ -2,7 +2,7 @@
 
 /** Цвета дизайн-системы. */
 export const COLOR = {
-  {{#each colorsByGroups}}
+  {{#each colorGroups}}
   // {{@key}}
   {{#each this}}
   '{{@../key}}-{{@key}}': '{{this}}',

.template/data.mjs

@@ -0,0 +1,58 @@
+export const colorGroups = {
+  basic: {
+    blue: '#1f84db',
+    black: '#000',
+    gray87: '#212121',
+    gray76: '#3a3a3b',
+    gray66: '#545455',
+    gray54: '#757575',
+    gray38: '#9e9e9e',
+    gray24: '#c2c2c2',
+    gray12: '#e0e0e0',
+    gray8: '#ebebeb',
+    gray4: '#f5f5f5',
+    gray2: '#fafafa',
+    white: '#fff',
+  },
+  additional: {
+    'deep-red': '#d50000',
+    red: '#fb3a2f',
+    'light-red': '#feebea',
+    'dark-teal': '#089176',
+    teal: '#09ab8b',
+    green: '#00c853',
+    'light-green': '#64dd17',
+    lime: '#aeea00',
+    'faded-green': '#eff9ea',
+    pink: '#e82e5c',
+    purple: '#b52ea8',
+    violet: '#902bd0',
+    'deep-purple': '#634bdf',
+    'electric-blue': '#2962ff',
+    'light-blue': '#0091ea',
+    cyan: '#00b8d4',
+    sky: '#e4f1f9',
+    'deep-orange': '#ff7200',
+    amber: '#ffab00',
+    yellow: '#ffd600',
+    gold: '#d5a43b',
+    brown: '#795548',
+    'blue-gray': '#607d8b',
+    'deep-blue': '#00599d',
+    'dark-blue': '#002b41',
+    'unlit-blue': '#1b75c2',
+    crimson: '#f4446b',
+  },
+};
+
+export const gradients = {
+  sunrise: 'linear-gradient(135deg, #bf16af 0%, #ff9b8d 100%)',
+  twilight: 'linear-gradient(135deg, #4d74ff 0%, #e546ff 100%)',
+  sunset: 'linear-gradient(315deg, #ffb571 0%, #f2000f 100%)',
+  sunshine: 'linear-gradient(135deg, #ff7200 0%, #f5d00b 100%)',
+  gold: 'linear-gradient(315deg, #f1d18c 0%, #da9c3b 100%)',
+  foliage: 'linear-gradient(135deg, #09ab8b 0%, #a9e007 100%)',
+  sky: 'linear-gradient(135deg, #3777fe 0%, #21e3e4 100%)',
+  'polar-light': 'linear-gradient(135deg, #46007c 0%, #008dc9 100%)',
+  night: 'linear-gradient(135deg, #0f0f0f 0%, #757575 100%)',
+};

.template/gradients.scss.handlebars

@@ -0,0 +1,11 @@
+// GENERATED FILE - DO NOT CHANGE IT MANUALLY
+
+{{#each gradients}}
+${{@key}}: {{this}};
+{{/each}}
+
+@mixin properties() {
+  {{#each gradients}}
+  --gradient-{{@key}}: {{this}};
+  {{/each}}
+}

.template/gradients.ts.handlebars

@@ -0,0 +1,10 @@
+// GENERATED FILE - DO NOT CHANGE IT MANUALLY
+
+/** Градиенты дизайн-системы. */
+export const GRADIENT = {
+{{#each gradients}}
+  '{{@key}}': '{{this}}',
+{{/each}}
+} as const;
+
+export const GRADIENTS = new Map(Object.entries(GRADIENT)) as Map<keyof typeof GRADIENT, string>;

src/colors.scss

@@ -13,6 +13,7 @@ $basic-gray8: #ebebeb;
 $basic-gray4: #f5f5f5;
 $basic-gray2: #fafafa;
 $basic-white: #fff;
+$basic-black: #000;
 
 // additional
 $additional-deep-red: #d50000;
@@ -42,3 +43,49 @@ $additional-deep-blue: #00599d;
 $additional-dark-blue: #002b41;
 $additional-unlit-blue: #1b75c2;
 $additional-crimson: #f4446b;
+
+@mixin properties() {
+  // basic
+  --color-basic-blue: #1f84db;
+  --color-basic-gray87: #212121;
+  --color-basic-gray76: #3a3a3b;
+  --color-basic-gray66: #545455;
+  --color-basic-gray54: #757575;
+  --color-basic-gray38: #9e9e9e;
+  --color-basic-gray24: #c2c2c2;
+  --color-basic-gray12: #e0e0e0;
+  --color-basic-gray8: #ebebeb;
+  --color-basic-gray4: #f5f5f5;
+  --color-basic-gray2: #fafafa;
+  --color-basic-white: #fff;
+  --color-basic-black: #000;
+
+  // additional
+  --color-additional-deep-red: #d50000;
+  --color-additional-red: #fb3a2f;
+  --color-additional-light-red: #feebea;
+  --color-additional-dark-teal: #089176;
+  --color-additional-teal: #09ab8b;
+  --color-additional-green: #00c853;
+  --color-additional-light-green: #64dd17;
+  --color-additional-lime: #aeea00;
+  --color-additional-faded-green: #eff9ea;
+  --color-additional-pink: #e82e5c;
+  --color-additional-purple: #b52ea8;
+  --color-additional-violet: #902bd0;
+  --color-additional-deep-purple: #634bdf;
+  --color-additional-electric-blue: #2962ff;
+  --color-additional-light-blue: #0091ea;
+  --color-additional-cyan: #00b8d4;
+  --color-additional-sky: #e4f1f9;
+  --color-additional-deep-orange: #ff7200;
+  --color-additional-amber: #ffab00;
+  --color-additional-yellow: #ffd600;
+  --color-additional-gold: #d5a43b;
+  --color-additional-brown: #795548;
+  --color-additional-blue-gray: #607d8b;
+  --color-additional-deep-blue: #00599d;
+  --color-additional-dark-blue: #002b41;
+  --color-additional-unlit-blue: #1b75c2;
+  --color-additional-crimson: #f4446b;
+}

src/colors/index.ts

@@ -15,6 +15,7 @@ export const COLOR = {
   'basic-gray4': '#f5f5f5',
   'basic-gray2': '#fafafa',
   'basic-white': '#fff',
+  'basic-black': '#000',
 
   // additional
   'additional-deep-red': '#d50000',

src/gradients.scss

@@ -0,0 +1,23 @@
+// GENERATED FILE - DO NOT CHANGE IT MANUALLY
+
+$sunrise: linear-gradient(135deg, #bf16af 0%, #ff9b8d 100%);
+$twilight: linear-gradient(135deg, #4d74ff 0%, #e546ff 100%);
+$sunset: linear-gradient(315deg, #ffb571 0%, #f2000f 100%);
+$sunshine: linear-gradient(135deg, #ff7200 0%, #f5d00b 100%);
+$gold: linear-gradient(315deg, #f1d18c 0%, #da9c3b 100%);
+$foliage: linear-gradient(135deg, #09ab8b 0%, #a9e007 100%);
+$sky: linear-gradient(135deg, #3777fe 0%, #21e3e4 100%);
+$polar-light: linear-gradient(135deg, #46007c 0%, #008dc9 100%);
+$night: linear-gradient(135deg, #0f0f0f 0%, #757575 100%);
+
+@mixin properties() {
+  --gradient-sunrise: linear-gradient(135deg, #bf16af 0%, #ff9b8d 100%);
+  --gradient-twilight: linear-gradient(135deg, #4d74ff 0%, #e546ff 100%);
+  --gradient-sunset: linear-gradient(315deg, #ffb571 0%, #f2000f 100%);
+  --gradient-sunshine: linear-gradient(135deg, #ff7200 0%, #f5d00b 100%);
+  --gradient-gold: linear-gradient(315deg, #f1d18c 0%, #da9c3b 100%);
+  --gradient-foliage: linear-gradient(135deg, #09ab8b 0%, #a9e007 100%);
+  --gradient-sky: linear-gradient(135deg, #3777fe 0%, #21e3e4 100%);
+  --gradient-polar-light: linear-gradient(135deg, #46007c 0%, #008dc9 100%);
+  --gradient-night: linear-gradient(135deg, #0f0f0f 0%, #757575 100%);
+}

src/gradients/index.ts

@@ -0,0 +1,16 @@
+// GENERATED FILE - DO NOT CHANGE IT MANUALLY
+
+/** Градиенты дизайн-системы. */
+export const GRADIENT = {
+  sunrise: 'linear-gradient(135deg, #bf16af 0%, #ff9b8d 100%)',
+  twilight: 'linear-gradient(135deg, #4d74ff 0%, #e546ff 100%)',
+  sunset: 'linear-gradient(315deg, #ffb571 0%, #f2000f 100%)',
+  sunshine: 'linear-gradient(135deg, #ff7200 0%, #f5d00b 100%)',
+  gold: 'linear-gradient(315deg, #f1d18c 0%, #da9c3b 100%)',
+  foliage: 'linear-gradient(135deg, #09ab8b 0%, #a9e007 100%)',
+  sky: 'linear-gradient(135deg, #3777fe 0%, #21e3e4 100%)',
+  'polar-light': 'linear-gradient(135deg, #46007c 0%, #008dc9 100%)',
+  night: 'linear-gradient(135deg, #0f0f0f 0%, #757575 100%)',
+} as const;
+
+export const GRADIENTS = new Map(Object.entries(GRADIENT)) as Map<keyof typeof GRADIENT, string>;