diff --git a/app/components/_variables.css b/app/components/_variables.css
index 2d238f86..266db0c9 100644
--- a/app/components/_variables.css
+++ b/app/components/_variables.css
@@ -3,6 +3,18 @@
@import "open-props/gray.shadow.min.css";
@import "open-props/gray-hsl.shadow.min.css";
+:root {
+ --layer-1: 10;
+ --theme-bd-2: #ffffff;
+ --theme-bg: #f0f0f0;
+ --theme-text_color: #333333;
+ --theme-icon_color: #666666;
+ --theme-icon_hover-bg: #e0e0e0;
+ --theme-icon_active-bg: #cccccc;
+ --neon-pink: #ff007f;
+ --shadow-2: 0 0.25em 0.5em hsla(0, 76%, 44%, 0.1);
+}
+
:host {
--theme-bg: white;
--theme-bd: hsl(0 0% 100% / var(--theme-bd-opacity));
diff --git a/app/components/_variables_dark.css b/app/components/_variables_dark.css
index a9d1ead8..1e1bc7c9 100644
--- a/app/components/_variables_dark.css
+++ b/app/components/_variables_dark.css
@@ -1,10 +1,10 @@
:host {
- --theme-bg: hsl(0 0% 10%);
+ --theme-bg: hsl(14, 96%, 49%);
--theme-bd: hsl(0 0% 10% / var(--theme-bd-opacity));
--theme-bd-2: hsl(0 0% 10% / var(--theme-bd-2-opacity));
--theme-color: hsl(330deg 65% 75%);
--theme-text_color: hsl(0 0% 90%);
--theme-icon_color: hsl(0 0% 80%);
- --theme-icon_hover-bg: hsl(0 0% 15%);
- --theme-icon_active-bg: hsl(0 0% 20%);
+ --theme-icon_hover-bg: hsl(0, 97%, 44%);
+ --theme-icon_active-bg: hsl(0, 100%, 46%);
}
diff --git a/app/components/hotkey-map/hotkeys.element.js b/app/components/hotkey-map/hotkeys.element.js
index 13446752..a7c90a69 100644
--- a/app/components/hotkey-map/hotkeys.element.js
+++ b/app/components/hotkey-map/hotkeys.element.js
@@ -1,5 +1,6 @@
import $ from 'blingblingjs'
import hotkeys from 'hotkeys-js'
+import { metaKey } from '../../utilities/'
import { GuidesHotkeys } from './guides.element'
import { InspectorHotkeys } from './inspector.element'
@@ -14,6 +15,7 @@ import { PositionHotkeys } from './position.element'
import { FontHotkeys } from './font.element'
import { TextHotkeys } from './text.element'
import { SearchHotkeys } from './search.element'
+import { undoLastEvent, redoLastEvent } from '../../features/history'
export class Hotkeys extends HTMLElement {
@@ -47,6 +49,8 @@ export class Hotkeys extends HTMLElement {
: this.showTool())
hotkeys('esc', e => this.hideTool())
+ hotkeys(`${metaKey}+z`, (e) => undoLastEvent());
+ hotkeys(`${metaKey}+shift+z`, (e) => redoLastEvent());
}
disconnectedCallback() {}
diff --git a/app/components/vis-bug/model.js b/app/components/vis-bug/model.js
index 25235620..adfddb34 100644
--- a/app/components/vis-bug/model.js
+++ b/app/components/vis-bug/model.js
@@ -3,25 +3,25 @@ import { metaKey, altKey } from '../../utilities/'
export const VisBugModel = {
g: {
- tool: 'guides',
+ tool: 'Régua',
icon: Icons.guides,
- label: 'Guides',
- description: 'Verify alignment & measure distances',
+ label: 'Guia',
+ description: 'Verifique o alinhamento e meça as distâncias',
instruction: `
- Element Guides:
+ Guias de elementos:
hover
- Measure:
+ Medida:
click+hover
- Measure many:
+ Medir vários:
shift+click
- Clear:
+ Limpar:
esc
`,
@@ -29,63 +29,63 @@ export const VisBugModel = {
i: {
tool: 'inspector',
icon: Icons.inspector,
- label: '
- Pin it:
- click
+ Fixar:
+ clique
- Pin many:
- shift+click
-
-
- Position it:
- click & drag by the header area
-
-
- Clear:
- esc
-
-
`,
- },
- x: {
- tool: 'accessibility',
- icon: Icons.accessibility,
- label: 'Accessibility',
- description: 'Inspect attributes & contrast compliance',
- instruction: `
-
- Pin it:
- click
+ Fixar vários:
+ shift+clique
- Pin many:
- shift+click
+ Posicionar:
+ clique e arraste pela área do cabeçalho
- Clear:
+ Limpar:
esc
`,
},
+ // x: {
+ // tool: 'accessibility',
+ // icon: Icons.accessibility,
+ // label: 'Acessibilidade',
+ // description: 'Inspect attributes & contrast compliance',
+ // instruction: `
+ //
+ // Fixar:
+ // clique
+ //
+ //
+ // Fixar vários:
+ // shift+clique
+ //
+ //
+ // Limpar:
+ // esc
+ //
+ //
`,
+ // },
l: {
tool: 'position',
icon: Icons.position,
- label: 'Position',
- description: 'Grab and position elements anywhere',
+ label: 'Posição',
+ description: 'Agarre e posicione elementos em qualquer lugar',
instruction: `
- Nudge:
+ Deslocar:
◀ ▶ ▲ ▼
- Place:
- Click & drag
+ Colocar:
+ Clique e arraste
- Restore:
+ Restaurar:
${altKey} + delete
`,
@@ -93,23 +93,23 @@ export const VisBugModel = {
m: {
tool: 'margin',
icon: Icons.margin,
- label: '
- + Margin:
+ + Margem:
◀ ▶ ▲ ▼
- - Margin:
+ - Margem:
${altKey} + ◀ ▶ ▲ ▼
- All Sides:
+ Todos os Lados:
${metaKey} + ▲ ▼
- Trainer:
+ Formador:
shift + /
`,
@@ -118,22 +118,22 @@ export const VisBugModel = {
tool: 'padding',
icon: Icons.padding,
label: '
- + Padding:
+ + Preenchimento:
◀ ▶ ▲ ▼
- - Padding:
+ - Preenchimento:
${altKey} + ◀ ▶ ▲ ▼
- All Sides:
+ Todos os Lados:
${metaKey} + ▲ ▼
- Trainer:
+ Formador:
shift + /
`
@@ -141,41 +141,41 @@ export const VisBugModel = {
// b: {
// tool: 'border',
// icon: Icons.border,
- // label: 'Border',
+ // label: 'Borda',
// description: ''
// },
a: {
tool: 'align',
icon: Icons.align,
- label: '
- Rows:
+ Linhas:
${metaKey} + ▼
- Columns:
+ Colunas:
${metaKey} + ▶
- Alignment:
+ Alinhamento:
◀ ▶ ▲ ▼
- Distribution:
+ Distribuição:
Shift + ◀ ▶
- Order:
+ Ordem:
${metaKey} + shift + ◀ ▶
- Wrapping:
+ Embrulho:
${metaKey} + shift + ▲ ▼
- Trainer:
+ Formador:
shift + /
`,
@@ -183,79 +183,79 @@ export const VisBugModel = {
v: {
tool: 'move',
icon: Icons.move,
- label: '
Lateral:
- click container ⇒ drag child
+ clique no contêiner ⇒ arraste o filho
Lateral:
◀ ▶
- Out and above:
+ Fora e acima:
▲
- Down+in, out+under:
+ Abaixo e dentro, fora e sob:
▼
- Trainer:
- shift + /
-
-
`,
- },
- h: {
- tool: 'hueshift',
- icon: Icons.hueshift,
- label: '
-
- Saturation:
- ◀ ▶
-
-
- Brightness:
- ▲ ▼
-
-
- Hue:
- ${metaKey} + ▲ ▼
-
-
- Opacity:
- ${metaKey} + ◀ ▶
-
-
- Trainer:
+ Formador:
shift + /
`,
},
+ // h: {
+ // tool: 'hueshift',
+ // icon: Icons.hueshift,
+ // label: '
+ //
+ // Saturação:
+ // ◀ ▶
+ //
+ //
+ // Brilho:
+ // ▲ ▼
+ //
+ //
+ // Matiz:
+ // ${metaKey} + ▲ ▼
+ //
+ //
+ // Opacidade:
+ // ${metaKey} + ◀ ▶
+ //
+ //
+ // Formador:
+ // shift + /
+ //
+ //
`,
+ // },
d: {
tool: 'boxshadow',
icon: Icons.boxshadow,
- label: '
- X/Y Position:
+ Posição X/Y:
◀ ▶ ▲ ▼
- Blur:
+ Borrar:
${altKey} + ▲ ▼
- Spread:
+ Espalhar:
${altKey} + ◀ ▶
- Opacity:
+ Opacidade:
${metaKey} + ◀ ▶
`,
@@ -263,21 +263,21 @@ export const VisBugModel = {
// t: {
// tool: 'transform',
// icon: Icons.transform,
- // label: '3D Transform',
+ // label: 'Transformação 3D',
// description: ''
// },
f: {
tool: 'font',
icon: Icons.font,
- label: '
- Size:
+ Tamanho:
▲ ▼
- Alignment:
+ Alinhamento:
◀ ▶
@@ -285,15 +285,15 @@ export const VisBugModel = {
Shift + ▲ ▼
- Letter-spacing:
+ Espaçamento de letras:
Shift + ◀ ▶
- Weight:
+ Peso:
${metaKey} + ▲ ▼
- Trainer:
+ Formador:
shift + /
`,
@@ -301,21 +301,43 @@ export const VisBugModel = {
e: {
tool: 'text',
icon: Icons.text,
- label: '