open-dsi
/
nextcloud-server
mirror of https://github.com/nextcloud/server
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: move icons building from core sources to build helpers

Browse Source 
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
pull/55432/head
Ferdinand Thiessen 8 months ago
parent f3383f9f90
commit da5e27917f
No known key found for this signature in database
GPG Key ID: 45FAE7268762B400
2 changed files with 381 additions and 379 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 381
      build/icons.mjs
  2. 379
      core/src/icons.cjs

381
build/icons.mjs
Unescape View File

@ -0,0 +1,381 @@
/**
* SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import { readFileSync, writeFileSync} from 'node:fs'
import { join, resolve } from 'node:path'
import { compileString } from 'sass'
const IMAGE_PATH = resolve(import.meta.dirname, '../core/img')
const colors = {
dark: '000',
white: 'fff',
// gold but for backwards compatibility called yellow
yellow: 'a08b00',
red: 'e9322d',
orange: 'eca700',
green: '46ba61',
grey: '969696',
}
const variables = {}
const icons = {
add: join(IMAGE_PATH, 'actions', 'add.svg'),
address: join(IMAGE_PATH, 'actions', 'address.svg'),
'alert-outline': join(IMAGE_PATH, 'actions', 'alert-outline.svg'),
'audio-off': join(IMAGE_PATH, 'actions', 'audio-off.svg'),
audio: join(IMAGE_PATH, 'actions', 'audio.svg'),
calendar: join(IMAGE_PATH, 'places', 'calendar.svg'),
caret: join(IMAGE_PATH, 'actions', 'caret.svg'),
'category-app-bundles': join(IMAGE_PATH, 'categories', 'bundles.svg'),
'category-auth': join(IMAGE_PATH, 'categories', 'auth.svg'),
'category-customization': join(IMAGE_PATH, 'categories', 'customization.svg'),
'category-dashboard': join(IMAGE_PATH, 'categories', 'dashboard.svg'),
'category-files': join(IMAGE_PATH, 'categories', 'files.svg'),
'category-games': join(IMAGE_PATH, 'categories', 'games.svg'),
'category-integration': join(IMAGE_PATH, 'categories', 'integration.svg'),
'category-monitoring': join(IMAGE_PATH, 'categories', 'monitoring.svg'),
'category-multimedia': join(IMAGE_PATH, 'categories', 'multimedia.svg'),
'category-office': join(IMAGE_PATH, 'categories', 'office.svg'),
'category-organization': join(IMAGE_PATH, 'categories', 'organization.svg'),
'category-social': join(IMAGE_PATH, 'categories', 'social.svg'),
'category-workflow': join(IMAGE_PATH, 'categories', 'workflow.svg'),
change: join(IMAGE_PATH, 'actions', 'change.svg'),
checkmark: join(IMAGE_PATH, 'actions', 'checkmark.svg'),
circles: join(IMAGE_PATH, 'apps', 'circles.svg'),
clippy: join(IMAGE_PATH, 'actions', 'clippy.svg'),
close: join(IMAGE_PATH, 'actions', 'close.svg'),
comment: join(IMAGE_PATH, 'actions', 'comment.svg'),
'confirm-fade': join(IMAGE_PATH, 'actions', 'confirm-fade.svg'),
confirm: join(IMAGE_PATH, 'actions', 'confirm.svg'),
contacts: join(IMAGE_PATH, 'places', 'contacts.svg'),
delete: join(IMAGE_PATH, 'actions', 'delete.svg'),
desktop: join(IMAGE_PATH, 'clients', 'desktop.svg'),
details: join(IMAGE_PATH, 'actions', 'details.svg'),
'disabled-user': join(IMAGE_PATH, 'actions', 'disabled-user.svg'),
'disabled-users': join(IMAGE_PATH, 'actions', 'disabled-users.svg'),
download: join(IMAGE_PATH, 'actions', 'download.svg'),
edit: join(IMAGE_PATH, 'actions', 'edit.svg'),
encryption: resolve(import.meta.dirname, '../apps/files_external/img', 'app.svg'),
error: join(IMAGE_PATH, 'actions', 'error.svg'),
external: join(IMAGE_PATH, 'actions', 'external.svg'),
favorite: join(IMAGE_PATH, 'actions', 'star-dark.svg'),
files: join(IMAGE_PATH, 'places', 'files.svg'),
filter: join(IMAGE_PATH, 'actions', 'filter.svg'),
folder: join(IMAGE_PATH, 'filetypes', 'folder.svg'),
fullscreen: join(IMAGE_PATH, 'actions', 'fullscreen.svg'),
group: join(IMAGE_PATH, 'actions', 'group.svg'),
history: join(IMAGE_PATH, 'actions', 'history.svg'),
home: join(IMAGE_PATH, 'places', 'home.svg'),
info: join(IMAGE_PATH, 'actions', 'info.svg'),
link: join(IMAGE_PATH, 'places', 'link.svg'),
logout: join(IMAGE_PATH, 'actions', 'logout.svg'),
mail: join(IMAGE_PATH, 'actions', 'mail.svg'),
'menu-sidebar': join(IMAGE_PATH, 'actions', 'menu-sidebar.svg'),
menu: join(IMAGE_PATH, 'actions', 'menu.svg'),
more: join(IMAGE_PATH, 'actions', 'more.svg'),
music: join(IMAGE_PATH, 'places', 'music.svg'),
password: join(IMAGE_PATH, 'actions', 'password.svg'),
pause: join(IMAGE_PATH, 'actions', 'pause.svg'),
phone: join(IMAGE_PATH, 'clients', 'phone.svg'),
picture: join(IMAGE_PATH, 'places', 'picture.svg'),
'play-add': join(IMAGE_PATH, 'actions', 'play-add.svg'),
'play-next': join(IMAGE_PATH, 'actions', 'play-next.svg'),
'play-previous': join(IMAGE_PATH, 'actions', 'play-previous.svg'),
play: join(IMAGE_PATH, 'actions', 'play.svg'),
projects: join(IMAGE_PATH, 'actions', 'projects.svg'),
public: join(IMAGE_PATH, 'actions', 'public.svg'),
quota: join(IMAGE_PATH, 'actions', 'quota.svg'),
recent: join(IMAGE_PATH, 'actions', 'recent.svg'),
rename: join(IMAGE_PATH, 'actions', 'rename.svg'),
'screen-off': join(IMAGE_PATH, 'actions', 'screen-off.svg'),
screen: join(IMAGE_PATH, 'actions', 'screen.svg'),
search: join(IMAGE_PATH, 'actions', 'search.svg'),
settings: join(IMAGE_PATH, 'actions', 'settings-dark.svg'),
share: join(IMAGE_PATH, 'actions', 'share.svg'),
shared: join(IMAGE_PATH, 'actions', 'share.svg'),
'sound-off': join(IMAGE_PATH, 'actions', 'sound-off.svg'),
sound: join(IMAGE_PATH, 'actions', 'sound.svg'),
star: join(IMAGE_PATH, 'actions', 'star.svg'),
starred: join(IMAGE_PATH, 'actions', 'star-dark.svg'),
'star-rounded': join(IMAGE_PATH, 'actions', 'star-rounded.svg'),
tablet: join(IMAGE_PATH, 'clients', 'tablet.svg'),
tag: join(IMAGE_PATH, 'actions', 'tag.svg'),
talk: join(IMAGE_PATH, 'apps', 'spreed.svg'),
teams: join(IMAGE_PATH, 'apps', 'circles.svg'),
'template-add': join(IMAGE_PATH, 'actions', 'template-add.svg'),
timezone: join(IMAGE_PATH, 'actions', 'timezone.svg'),
'toggle-background': join(IMAGE_PATH, 'actions', 'toggle-background.svg'),
'toggle-filelist': join(IMAGE_PATH, 'actions', 'toggle-filelist.svg'),
'toggle-pictures': join(IMAGE_PATH, 'actions', 'toggle-pictures.svg'),
toggle: join(IMAGE_PATH, 'actions', 'toggle.svg'),
'triangle-e': join(IMAGE_PATH, 'actions', 'triangle-e.svg'),
'triangle-n': join(IMAGE_PATH, 'actions', 'triangle-n.svg'),
'triangle-s': join(IMAGE_PATH, 'actions', 'triangle-s.svg'),
unshare: join(IMAGE_PATH, 'actions', 'unshare.svg'),
upload: join(IMAGE_PATH, 'actions', 'upload.svg'),
'user-admin': join(IMAGE_PATH, 'actions', 'user-admin.svg'),
user: join(IMAGE_PATH, 'actions', 'user.svg'),
'video-off': join(IMAGE_PATH, 'actions', 'video-off.svg'),
'video-switch': join(IMAGE_PATH, 'actions', 'video-switch.svg'),
video: join(IMAGE_PATH, 'actions', 'video.svg'),
'view-close': join(IMAGE_PATH, 'actions', 'view-close.svg'),
'view-download': join(IMAGE_PATH, 'actions', 'view-download.svg'),
'view-next': join(IMAGE_PATH, 'actions', 'arrow-right.svg'),
'view-pause': join(IMAGE_PATH, 'actions', 'view-pause.svg'),
'view-play': join(IMAGE_PATH, 'actions', 'view-play.svg'),
'view-previous': join(IMAGE_PATH, 'actions', 'arrow-left.svg'),
}
const iconsColor = {
'add-folder-description': {
path: join(IMAGE_PATH, 'actions', 'add-folder-description.svg'),
color: 'grey',
},
settings: {
path: join(IMAGE_PATH, 'actions', 'settings.svg'),
color: 'black',
},
'error-color': {
path: join(IMAGE_PATH, 'actions', 'error.svg'),
color: 'red',
},
'checkmark-color': {
path: join(IMAGE_PATH, 'actions', 'checkmark.svg'),
color: 'green',
},
starred: {
path: join(IMAGE_PATH, 'actions', 'star-dark.svg'),
color: 'yellow',
},
star: {
path: join(IMAGE_PATH, 'actions', 'star-dark.svg'),
color: 'grey',
},
'delete-color': {
path: join(IMAGE_PATH, 'actions', 'delete.svg'),
color: 'red',
},
file: {
path: join(IMAGE_PATH, 'filetypes', 'text.svg'),
color: 'grey',
},
'filetype-file': {
path: join(IMAGE_PATH, 'filetypes', 'file.svg'),
color: 'grey',
},
'filetype-folder': {
path: join(IMAGE_PATH, 'filetypes', 'folder.svg'),
// TODO: replace primary ?
color: 'primary',
},
'filetype-folder-drag-accept': {
path: join(IMAGE_PATH, 'filetypes', 'folder-drag-accept.svg'),
// TODO: replace primary ?
color: 'primary',
},
'filetype-text': {
path: join(IMAGE_PATH, 'filetypes', 'text.svg'),
color: 'grey',
},
'file-text': {
path: join(IMAGE_PATH, 'filetypes', 'text.svg'),
color: 'black',
},
}
// use this to define aliases to existing icons
// key is the css selector, value is the variable
const iconsAliases = {
'icon-caret': 'icon-caret-white',
// starring action
'icon-star:hover': 'icon-starred',
'icon-star:focus': 'icon-starred',
// Un-starring action
'icon-starred:hover': 'icon-star-grey',
'icon-starred:focus': 'icon-star-grey',
// Delete normal
'icon-delete.no-permission:hover': 'icon-delete-dark',
'icon-delete.no-permission:focus': 'icon-delete-dark',
'icon-delete.no-hover:hover': 'icon-delete-dark',
'icon-delete.no-hover:focus': 'icon-delete-dark',
'icon-delete:hover': 'icon-delete-color-red',
'icon-delete:focus': 'icon-delete-color-red',
// Delete white
'icon-delete-white.no-permission:hover': 'icon-delete-white',
'icon-delete-white.no-permission:focus': 'icon-delete-white',
'icon-delete-white.no-hover:hover': 'icon-delete-white',
'icon-delete-white.no-hover:focus': 'icon-delete-white',
'icon-delete-white:hover': 'icon-delete-color-red',
'icon-delete-white:focus': 'icon-delete-color-red',
// Default to white
'icon-view-close': 'icon-view-close-white',
'icon-view-download': 'icon-view-download-white',
'icon-view-pause': 'icon-view-pause-white',
'icon-view-play': 'icon-view-play-white',
// Default app place to white
'icon-calendar': 'icon-calendar-white',
'icon-contacts': 'icon-contacts-white',
'icon-files': 'icon-files-white',
// Re-using existing icons
'icon-category-installed': 'icon-user-dark',
'icon-category-enabled': 'icon-checkmark-dark',
'icon-category-disabled': 'icon-close-dark',
'icon-category-updates': 'icon-download-dark',
'icon-category-security': 'icon-password-dark',
'icon-category-search': 'icon-search-dark',
'icon-category-tools': 'icon-settings-dark',
'nav-icon-systemtagsfilter': 'icon-tag-dark',
}
/**
*
* @param svg
* @param color
*/
function colorSvg(svg = '', color = '000') {
if (!color.match(/^[0-9a-f]{3,6}$/i)) {
// Prevent not-sane colors from being written into the SVG
console.warn(color, 'does not match the required format')
color = '000'
}
// add fill (fill is not present on black elements)
const fillRe = /<((circle|rect|path)((?!fill=)[a-z0-9 =".\-#():;,])+)\/>/gmi
svg = svg.replace(fillRe, '<$1 fill="#' + color + '"/>')
// replace any fill or stroke colors
svg = svg.replace(/stroke="#([a-z0-9]{3,6})"/gmi, 'stroke="#' + color + '"')
svg = svg.replace(/fill="#([a-z0-9]{3,6})"/gmi, 'fill="#' + color + '"')
return svg
}
/**
*
* @param invert
*/
function generateVariablesAliases(invert = false) {
let css = ''
Object.keys(variables).forEach((variable) => {
if (variable.indexOf('original-') !== -1) {
let finalVariable = variable.replace('original-', '')
if (invert) {
finalVariable = finalVariable.replace('white', 'tempwhite')
.replace('dark', 'white')
.replace('tempwhite', 'dark')
}
css += `${finalVariable}: var(${variable});`
}
})
return css
}
/**
*
* @param icon
* @param invert
*/
function formatIcon(icon, invert = false) {
const color1 = invert ? 'white' : 'dark'
const color2 = invert ? 'dark' : 'white'
return `
.icon-${icon},
.icon-${icon}-dark {
background-image: var(--icon-${icon}-${color1});
}
.icon-${icon}-white,
.icon-${icon}.icon-white {
background-image: var(--icon-${icon}-${color2});
}`
}
/**
*
* @param icon
*/
function formatIconColor(icon) {
const { color } = iconsColor[icon]
return `
.icon-${icon} {
background-image: var(--icon-${icon}-${color});
}`
}
/**
*
* @param alias
* @param invert
*/
function formatAlias(alias, invert = false) {
let icon = iconsAliases[alias]
if (invert) {
icon = icon.replace('white', 'tempwhite')
.replace('dark', 'white')
.replace('tempwhite', 'dark')
}
return `
.${alias} {
background-image: var(--${icon})
}`
}
let css = ''
Object.keys(icons).forEach((icon) => {
const path = icons[icon]
const svg = readFileSync(path, 'utf8')
const darkSvg = colorSvg(svg, '000000')
const whiteSvg = colorSvg(svg, 'ffffff')
variables[`--original-icon-${icon}-dark`] = Buffer.from(darkSvg, 'utf-8').toString('base64')
variables[`--original-icon-${icon}-white`] = Buffer.from(whiteSvg, 'utf-8').toString('base64')
})
Object.keys(iconsColor).forEach((icon) => {
const { path, color } = iconsColor[icon]
const svg = readFileSync(path, 'utf8')
const coloredSvg = colorSvg(svg, colors[color])
variables[`--icon-${icon}-${color}`] = Buffer.from(coloredSvg, 'utf-8').toString('base64')
})
// ICONS VARIABLES LIST
css += ':root {'
Object.keys(variables).forEach((variable) => {
const data = variables[variable]
css += `${variable}: url(data:image/svg+xml;base64,${data});`
})
css += '}'
// DEFAULT THEME
css += 'body {'
css += generateVariablesAliases()
Object.keys(icons).forEach((icon) => {
css += formatIcon(icon)
})
Object.keys(iconsColor).forEach((icon) => {
css += formatIconColor(icon)
})
Object.keys(iconsAliases).forEach((alias) => {
css += formatAlias(alias)
})
css += '}'
// DARK THEME MEDIA QUERY
css += '@media (prefers-color-scheme: dark) { body {'
css += generateVariablesAliases(true)
css += '}}'
// DARK THEME
css += '[data-themes*=light] {'
css += generateVariablesAliases()
css += '}'
// DARK THEME
css += '[data-themes*=dark] {'
css += generateVariablesAliases(true)
css += '}'
// WRITE CSS
writeFileSync(join(import.meta.dirname, '../dist', 'icons.css'), compileString(css).css)

379
core/src/icons.cjs
Unescape View File

@ -1,379 +0,0 @@
/**
* SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
* SPDX-License-Identifier: AGPL-3.0-or-later
*/
import fs from 'fs'
import path from 'path'
import sass from 'sass'
const colors = {
dark: '000',
white: 'fff',
// gold but for backwards compatibility called yellow
yellow: 'a08b00',
red: 'e9322d',
orange: 'eca700',
green: '46ba61',
grey: '969696',
}
const variables = {}
const icons = {
add: path.join(__dirname, '../img', 'actions', 'add.svg'),
address: path.join(__dirname, '../img', 'actions', 'address.svg'),
'alert-outline': path.join(__dirname, '../img', 'actions', 'alert-outline.svg'),
'audio-off': path.join(__dirname, '../img', 'actions', 'audio-off.svg'),
audio: path.join(__dirname, '../img', 'actions', 'audio.svg'),
calendar: path.join(__dirname, '../img', 'places', 'calendar.svg'),
caret: path.join(__dirname, '../img', 'actions', 'caret.svg'),
'category-app-bundles': path.join(__dirname, '../img', 'categories', 'bundles.svg'),
'category-auth': path.join(__dirname, '../img', 'categories', 'auth.svg'),
'category-customization': path.join(__dirname, '../img', 'categories', 'customization.svg'),
'category-dashboard': path.join(__dirname, '../img', 'categories', 'dashboard.svg'),
'category-files': path.join(__dirname, '../img', 'categories', 'files.svg'),
'category-games': path.join(__dirname, '../img', 'categories', 'games.svg'),
'category-integration': path.join(__dirname, '../img', 'categories', 'integration.svg'),
'category-monitoring': path.join(__dirname, '../img', 'categories', 'monitoring.svg'),
'category-multimedia': path.join(__dirname, '../img', 'categories', 'multimedia.svg'),
'category-office': path.join(__dirname, '../img', 'categories', 'office.svg'),
'category-organization': path.join(__dirname, '../img', 'categories', 'organization.svg'),
'category-social': path.join(__dirname, '../img', 'categories', 'social.svg'),
'category-workflow': path.join(__dirname, '../img', 'categories', 'workflow.svg'),
change: path.join(__dirname, '../img', 'actions', 'change.svg'),
checkmark: path.join(__dirname, '../img', 'actions', 'checkmark.svg'),
circles: path.join(__dirname, '../img', 'apps', 'circles.svg'),
clippy: path.join(__dirname, '../img', 'actions', 'clippy.svg'),
close: path.join(__dirname, '../img', 'actions', 'close.svg'),
comment: path.join(__dirname, '../img', 'actions', 'comment.svg'),
'confirm-fade': path.join(__dirname, '../img', 'actions', 'confirm-fade.svg'),
confirm: path.join(__dirname, '../img', 'actions', 'confirm.svg'),
contacts: path.join(__dirname, '../img', 'places', 'contacts.svg'),
delete: path.join(__dirname, '../img', 'actions', 'delete.svg'),
desktop: path.join(__dirname, '../img', 'clients', 'desktop.svg'),
details: path.join(__dirname, '../img', 'actions', 'details.svg'),
'disabled-user': path.join(__dirname, '../img', 'actions', 'disabled-user.svg'),
'disabled-users': path.join(__dirname, '../img', 'actions', 'disabled-users.svg'),
download: path.join(__dirname, '../img', 'actions', 'download.svg'),
edit: path.join(__dirname, '../img', 'actions', 'edit.svg'),
encryption: path.join(__dirname, '../../', 'apps/files_external/img', 'app.svg'),
error: path.join(__dirname, '../img', 'actions', 'error.svg'),
external: path.join(__dirname, '../img', 'actions', 'external.svg'),
favorite: path.join(__dirname, '../img', 'actions', 'star-dark.svg'),
files: path.join(__dirname, '../img', 'places', 'files.svg'),
filter: path.join(__dirname, '../img', 'actions', 'filter.svg'),
folder: path.join(__dirname, '../img', 'filetypes', 'folder.svg'),
fullscreen: path.join(__dirname, '../img', 'actions', 'fullscreen.svg'),
group: path.join(__dirname, '../img', 'actions', 'group.svg'),
history: path.join(__dirname, '../img', 'actions', 'history.svg'),
home: path.join(__dirname, '../img', 'places', 'home.svg'),
info: path.join(__dirname, '../img', 'actions', 'info.svg'),
link: path.join(__dirname, '../img', 'places', 'link.svg'),
logout: path.join(__dirname, '../img', 'actions', 'logout.svg'),
mail: path.join(__dirname, '../img', 'actions', 'mail.svg'),
'menu-sidebar': path.join(__dirname, '../img', 'actions', 'menu-sidebar.svg'),
menu: path.join(__dirname, '../img', 'actions', 'menu.svg'),
more: path.join(__dirname, '../img', 'actions', 'more.svg'),
music: path.join(__dirname, '../img', 'places', 'music.svg'),
password: path.join(__dirname, '../img', 'actions', 'password.svg'),
pause: path.join(__dirname, '../img', 'actions', 'pause.svg'),
phone: path.join(__dirname, '../img', 'clients', 'phone.svg'),
picture: path.join(__dirname, '../img', 'places', 'picture.svg'),
'play-add': path.join(__dirname, '../img', 'actions', 'play-add.svg'),
'play-next': path.join(__dirname, '../img', 'actions', 'play-next.svg'),
'play-previous': path.join(__dirname, '../img', 'actions', 'play-previous.svg'),
play: path.join(__dirname, '../img', 'actions', 'play.svg'),
projects: path.join(__dirname, '../img', 'actions', 'projects.svg'),
public: path.join(__dirname, '../img', 'actions', 'public.svg'),
quota: path.join(__dirname, '../img', 'actions', 'quota.svg'),
recent: path.join(__dirname, '../img', 'actions', 'recent.svg'),
rename: path.join(__dirname, '../img', 'actions', 'rename.svg'),
'screen-off': path.join(__dirname, '../img', 'actions', 'screen-off.svg'),
screen: path.join(__dirname, '../img', 'actions', 'screen.svg'),
search: path.join(__dirname, '../img', 'actions', 'search.svg'),
settings: path.join(__dirname, '../img', 'actions', 'settings-dark.svg'),
share: path.join(__dirname, '../img', 'actions', 'share.svg'),
shared: path.join(__dirname, '../img', 'actions', 'share.svg'),
'sound-off': path.join(__dirname, '../img', 'actions', 'sound-off.svg'),
sound: path.join(__dirname, '../img', 'actions', 'sound.svg'),
star: path.join(__dirname, '../img', 'actions', 'star.svg'),
starred: path.join(__dirname, '../img', 'actions', 'star-dark.svg'),
'star-rounded': path.join(__dirname, '../img', 'actions', 'star-rounded.svg'),
tablet: path.join(__dirname, '../img', 'clients', 'tablet.svg'),
tag: path.join(__dirname, '../img', 'actions', 'tag.svg'),
talk: path.join(__dirname, '../img', 'apps', 'spreed.svg'),
teams: path.join(__dirname, '../img', 'apps', 'circles.svg'),
'template-add': path.join(__dirname, '../img', 'actions', 'template-add.svg'),
timezone: path.join(__dirname, '../img', 'actions', 'timezone.svg'),
'toggle-background': path.join(__dirname, '../img', 'actions', 'toggle-background.svg'),
'toggle-filelist': path.join(__dirname, '../img', 'actions', 'toggle-filelist.svg'),
'toggle-pictures': path.join(__dirname, '../img', 'actions', 'toggle-pictures.svg'),
toggle: path.join(__dirname, '../img', 'actions', 'toggle.svg'),
'triangle-e': path.join(__dirname, '../img', 'actions', 'triangle-e.svg'),
'triangle-n': path.join(__dirname, '../img', 'actions', 'triangle-n.svg'),
'triangle-s': path.join(__dirname, '../img', 'actions', 'triangle-s.svg'),
unshare: path.join(__dirname, '../img', 'actions', 'unshare.svg'),
upload: path.join(__dirname, '../img', 'actions', 'upload.svg'),
'user-admin': path.join(__dirname, '../img', 'actions', 'user-admin.svg'),
user: path.join(__dirname, '../img', 'actions', 'user.svg'),
'video-off': path.join(__dirname, '../img', 'actions', 'video-off.svg'),
'video-switch': path.join(__dirname, '../img', 'actions', 'video-switch.svg'),
video: path.join(__dirname, '../img', 'actions', 'video.svg'),
'view-close': path.join(__dirname, '../img', 'actions', 'view-close.svg'),
'view-download': path.join(__dirname, '../img', 'actions', 'view-download.svg'),
'view-next': path.join(__dirname, '../img', 'actions', 'arrow-right.svg'),
'view-pause': path.join(__dirname, '../img', 'actions', 'view-pause.svg'),
'view-play': path.join(__dirname, '../img', 'actions', 'view-play.svg'),
'view-previous': path.join(__dirname, '../img', 'actions', 'arrow-left.svg'),
}
const iconsColor = {
'add-folder-description': {
path: path.join(__dirname, '../img', 'actions', 'add-folder-description.svg'),
color: 'grey',
},
settings: {
path: path.join(__dirname, '../img', 'actions', 'settings.svg'),
color: 'black',
},
'error-color': {
path: path.join(__dirname, '../img', 'actions', 'error.svg'),
color: 'red',
},
'checkmark-color': {
path: path.join(__dirname, '../img', 'actions', 'checkmark.svg'),
color: 'green',
},
starred: {
path: path.join(__dirname, '../img', 'actions', 'star-dark.svg'),
color: 'yellow',
},
star: {
path: path.join(__dirname, '../img', 'actions', 'star-dark.svg'),
color: 'grey',
},
'delete-color': {
path: path.join(__dirname, '../img', 'actions', 'delete.svg'),
color: 'red',
},
file: {
path: path.join(__dirname, '../img', 'filetypes', 'text.svg'),
color: 'grey',
},
'filetype-file': {
path: path.join(__dirname, '../img', 'filetypes', 'file.svg'),
color: 'grey',
},
'filetype-folder': {
path: path.join(__dirname, '../img', 'filetypes', 'folder.svg'),
// TODO: replace primary ?
color: 'primary',
},
'filetype-folder-drag-accept': {
path: path.join(__dirname, '../img', 'filetypes', 'folder-drag-accept.svg'),
// TODO: replace primary ?
color: 'primary',
},
'filetype-text': {
path: path.join(__dirname, '../img', 'filetypes', 'text.svg'),
color: 'grey',
},
'file-text': {
path: path.join(__dirname, '../img', 'filetypes', 'text.svg'),
color: 'black',
},
}
// use this to define aliases to existing icons
// key is the css selector, value is the variable
const iconsAliases = {
'icon-caret': 'icon-caret-white',
// starring action
'icon-star:hover': 'icon-starred',
'icon-star:focus': 'icon-starred',
// Un-starring action
'icon-starred:hover': 'icon-star-grey',
'icon-starred:focus': 'icon-star-grey',
// Delete normal
'icon-delete.no-permission:hover': 'icon-delete-dark',
'icon-delete.no-permission:focus': 'icon-delete-dark',
'icon-delete.no-hover:hover': 'icon-delete-dark',
'icon-delete.no-hover:focus': 'icon-delete-dark',
'icon-delete:hover': 'icon-delete-color-red',
'icon-delete:focus': 'icon-delete-color-red',
// Delete white
'icon-delete-white.no-permission:hover': 'icon-delete-white',
'icon-delete-white.no-permission:focus': 'icon-delete-white',
'icon-delete-white.no-hover:hover': 'icon-delete-white',
'icon-delete-white.no-hover:focus': 'icon-delete-white',
'icon-delete-white:hover': 'icon-delete-color-red',
'icon-delete-white:focus': 'icon-delete-color-red',
// Default to white
'icon-view-close': 'icon-view-close-white',
'icon-view-download': 'icon-view-download-white',
'icon-view-pause': 'icon-view-pause-white',
'icon-view-play': 'icon-view-play-white',
// Default app place to white
'icon-calendar': 'icon-calendar-white',
'icon-contacts': 'icon-contacts-white',
'icon-files': 'icon-files-white',
// Re-using existing icons
'icon-category-installed': 'icon-user-dark',
'icon-category-enabled': 'icon-checkmark-dark',
'icon-category-disabled': 'icon-close-dark',
'icon-category-updates': 'icon-download-dark',
'icon-category-security': 'icon-password-dark',
'icon-category-search': 'icon-search-dark',
'icon-category-tools': 'icon-settings-dark',
'nav-icon-systemtagsfilter': 'icon-tag-dark',
}
/**
*
* @param svg
* @param color
*/
function colorSvg(svg = '', color = '000') {
if (!color.match(/^[0-9a-f]{3,6}$/i)) {
// Prevent not-sane colors from being written into the SVG
console.warn(color, 'does not match the required format')
color = '000'
}
// add fill (fill is not present on black elements)
const fillRe = /<((circle|rect|path)((?!fill=)[a-z0-9 =".\-#():;,])+)\/>/gmi
svg = svg.replace(fillRe, '<$1 fill="#' + color + '"/>')
// replace any fill or stroke colors
svg = svg.replace(/stroke="#([a-z0-9]{3,6})"/gmi, 'stroke="#' + color + '"')
svg = svg.replace(/fill="#([a-z0-9]{3,6})"/gmi, 'fill="#' + color + '"')
return svg
}
/**
*
* @param invert
*/
function generateVariablesAliases(invert = false) {
let css = ''
Object.keys(variables).forEach((variable) => {
if (variable.indexOf('original-') !== -1) {
let finalVariable = variable.replace('original-', '')
if (invert) {
finalVariable = finalVariable.replace('white', 'tempwhite')
.replace('dark', 'white')
.replace('tempwhite', 'dark')
}
css += `${finalVariable}: var(${variable});`
}
})
return css
}
/**
*
* @param icon
* @param invert
*/
function formatIcon(icon, invert = false) {
const color1 = invert ? 'white' : 'dark'
const color2 = invert ? 'dark' : 'white'
return `
.icon-${icon},
.icon-${icon}-dark {
background-image: var(--icon-${icon}-${color1});
}
.icon-${icon}-white,
.icon-${icon}.icon-white {
background-image: var(--icon-${icon}-${color2});
}`
}
/**
*
* @param icon
*/
function formatIconColor(icon) {
const { color } = iconsColor[icon]
return `
.icon-${icon} {
background-image: var(--icon-${icon}-${color});
}`
}
/**
*
* @param alias
* @param invert
*/
function formatAlias(alias, invert = false) {
let icon = iconsAliases[alias]
if (invert) {
icon = icon.replace('white', 'tempwhite')
.replace('dark', 'white')
.replace('tempwhite', 'dark')
}
return `
.${alias} {
background-image: var(--${icon})
}`
}
let css = ''
Object.keys(icons).forEach((icon) => {
const path = icons[icon]
const svg = fs.readFileSync(path, 'utf8')
const darkSvg = colorSvg(svg, '000000')
const whiteSvg = colorSvg(svg, 'ffffff')
variables[`--original-icon-${icon}-dark`] = Buffer.from(darkSvg, 'utf-8').toString('base64')
variables[`--original-icon-${icon}-white`] = Buffer.from(whiteSvg, 'utf-8').toString('base64')
})
Object.keys(iconsColor).forEach((icon) => {
const { path, color } = iconsColor[icon]
const svg = fs.readFileSync(path, 'utf8')
const coloredSvg = colorSvg(svg, colors[color])
variables[`--icon-${icon}-${color}`] = Buffer.from(coloredSvg, 'utf-8').toString('base64')
})
// ICONS VARIABLES LIST
css += ':root {'
Object.keys(variables).forEach((variable) => {
const data = variables[variable]
css += `${variable}: url(data:image/svg+xml;base64,${data});`
})
css += '}'
// DEFAULT THEME
css += 'body {'
css += generateVariablesAliases()
Object.keys(icons).forEach((icon) => {
css += formatIcon(icon)
})
Object.keys(iconsColor).forEach((icon) => {
css += formatIconColor(icon)
})
Object.keys(iconsAliases).forEach((alias) => {
css += formatAlias(alias)
})
css += '}'
// DARK THEME MEDIA QUERY
css += '@media (prefers-color-scheme: dark) { body {'
css += generateVariablesAliases(true)
css += '}}'
// DARK THEME
css += '[data-themes*=light] {'
css += generateVariablesAliases()
css += '}'
// DARK THEME
css += '[data-themes*=dark] {'
css += generateVariablesAliases(true)
css += '}'
// WRITE CSS
fs.writeFileSync(path.join(__dirname, '../../dist', 'icons.css'), sass.compileString(css).css)
Write Preview
Loading…
Cancel
Save