Bold and italic text formatting in themes

CodeEdit/Features/Settings/Pages/TextEditingSettings/Models/TextEditingSettings.swift

@@ -158,7 +158,7 @@ extension SettingsData {
  var highlightType: HighlightType = .flash
  var useCustomColor: Bool = false
  /// The color to use for the highlight.
- var color: Theme.Attributes = Theme.Attributes(color: "FFFFFF")
+ var color: Theme.Attributes = Theme.Attributes(color: "FFFFFF", bold: false, italic: false)
 
  enum HighlightType: String, Codable {
  case disabled

CodeEdit/Features/Settings/Pages/ThemeSettings/Models/Theme.swift

@@ -112,9 +112,39 @@ extension Theme {
 
  /// The 24-bit hex string of the color (e.g. #123456)
  var color: String
+ var bold: Bool
+ var italic: Bool
 
- init(color: String) {
+ init(color: String, bold: Bool = false, italic: Bool = false) {
  self.color = color
+ self.bold = bold
+ self.italic = italic
+ }
+
+ init(from decoder: Decoder) throws {
+ let container = try decoder.container(keyedBy: CodingKeys.self)
+ self.color = try container.decode(String.self, forKey: .color)
+ self.bold = try container.decodeIfPresent(Bool.self, forKey: .bold) ?? false
+ self.italic = try container.decodeIfPresent(Bool.self, forKey: .italic) ?? false
+ }
+
+ func encode(to encoder: Encoder) throws {
+ var container = encoder.container(keyedBy: CodingKeys.self)
+ try container.encode(color, forKey: .color)
+
+ if bold {
+ try container.encode(bold, forKey: .bold)
+ }
+
+ if italic {
+ try container.encode(italic, forKey: .italic)
+ }
+ }
+
+ enum CodingKeys: String, CodingKey {
+ case color
+ case bold
+ case italic
  }
 
  /// The `SwiftUI` of ``color``

CodeEdit/Features/Settings/Pages/ThemeSettings/ThemeSettingsThemeDetails.swift

@@ -71,52 +71,72 @@ struct ThemeSettingsThemeDetails: View {
  VStack(spacing: 0) {
  ThemeSettingsThemeToken(
  "Keywords",
- color: $theme.editor.keywords.swiftColor
+ color: $theme.editor.keywords.swiftColor,
+ bold: $theme.editor.keywords.bold,
+ italic: $theme.editor.keywords.italic
  )
  Divider().padding(.horizontal, 10)
  ThemeSettingsThemeToken(
  "Commands",
- color: $theme.editor.commands.swiftColor
+ color: $theme.editor.commands.swiftColor,
+ bold: $theme.editor.commands.bold,
+ italic: $theme.editor.commands.italic
  )
  Divider().padding(.horizontal, 10)
  ThemeSettingsThemeToken(
  "Types",
- color: $theme.editor.types.swiftColor
+ color: $theme.editor.types.swiftColor,
+ bold: $theme.editor.types.bold,
+ italic: $theme.editor.types.italic
  )
  Divider().padding(.horizontal, 10)
  ThemeSettingsThemeToken(
  "Attributes",
- color: $theme.editor.attributes.swiftColor
+ color: $theme.editor.attributes.swiftColor,
+ bold: $theme.editor.attributes.bold,
+ italic: $theme.editor.attributes.italic
  )
  Divider().padding(.horizontal, 10)
  ThemeSettingsThemeToken(
  "Variables",
- color: $theme.editor.variables.swiftColor
+ color: $theme.editor.variables.swiftColor,
+ bold: $theme.editor.variables.bold,
+ italic: $theme.editor.variables.italic
  )
  Divider().padding(.horizontal, 10)
  ThemeSettingsThemeToken(
  "Values",
- color: $theme.editor.values.swiftColor
+ color: $theme.editor.values.swiftColor,
+ bold: $theme.editor.values.bold,
+ italic: $theme.editor.values.italic
  )
  Divider().padding(.horizontal, 10)
  ThemeSettingsThemeToken(
  "Numbers",
- color: $theme.editor.numbers.swiftColor
+ color: $theme.editor.numbers.swiftColor,
+ bold: $theme.editor.numbers.bold,
+ italic: $theme.editor.numbers.italic
  )
  Divider().padding(.horizontal, 10)
  ThemeSettingsThemeToken(
  "Strings",
- color: $theme.editor.strings.swiftColor
+ color: $theme.editor.strings.swiftColor,
+ bold: $theme.editor.strings.bold,
+ italic: $theme.editor.strings.italic
  )
  Divider().padding(.horizontal, 10)
  ThemeSettingsThemeToken(
  "Characters",
- color: $theme.editor.characters.swiftColor
+ color: $theme.editor.characters.swiftColor,
+ bold: $theme.editor.characters.bold,
+ italic: $theme.editor.characters.italic
  )
  Divider().padding(.horizontal, 10)
  ThemeSettingsThemeToken(
  "Comments",
- color: $theme.editor.comments.swiftColor
+ color: $theme.editor.comments.swiftColor,
+ bold: $theme.editor.comments.bold,
+ italic: $theme.editor.comments.italic
  )
  }
  .background(theme.editor.background.swiftColor)

CodeEdit/Features/Settings/Pages/ThemeSettings/ThemeSettingsThemeToken.swift

@@ -11,25 +11,53 @@ struct ThemeSettingsThemeToken: View {
  var label: String
 
  @Binding var color: Color
+ @Binding var bold: Bool
+ @Binding var italic: Bool
 
  @State private var selectedColor: Color
+ @State private var isHovering = false
 
- init(_ label: String, color: Binding<Color>) {
+ init(_ label: String, color: Binding<Color>, bold: Binding<Bool>, italic: Binding<Bool>) {
  self.label = label
  self._color = color
+ self._bold = bold
+ self._italic = italic
  self._selectedColor = State(initialValue: color.wrappedValue)
  }
 
  var body: some View {
  LabeledContent {
- ColorPicker(selection: $selectedColor, supportsOpacity: false) { }
- .labelsHidden()
+ HStack(spacing: 20) {
+ HStack(spacing: 8) {
+ Toggle(isOn: $bold) {
+ Image(systemName: "bold")
+ }
+ .toggleStyle(.icon)
+ .help("Bold")
+ Divider()
+ .fixedSize()
+ Toggle(isOn: $italic) {
+ Image(systemName: "italic")
+ }
+ .toggleStyle(.icon)
+ .help("Italic")
+ }
+ .opacity(isHovering || bold || italic ? 1 : 0)
+
+ ColorPicker(selection: $selectedColor, supportsOpacity: false) { }
+ .labelsHidden()
+ }
  } label: {
  Text(label)
  .font(.system(.body, design: .monospaced))
+ .bold(bold)
+ .italic(italic)
  .foregroundStyle(color)
  }
  .padding(10)
+ .onHover { hovering in
+ isHovering = hovering
+ }
  .onChange(of: selectedColor) { newValue in
  color = newValue
  }

DefaultThemes/Basic.cetheme

@@ -1,6 +1,6 @@
 {
- "id": "basic",
- "name": "Basic",
+ "name": "basic",
+ "displayName": "Basic",
  "description": "CodeEdit bundled theme.",
  "author": "CodeEdit",
  "version": "0.0.1",
@@ -39,7 +39,8 @@
  "color": "#000000"
  },
  "keywords": {
- "color": "#0433FF"
+ "color": "#0433FF",
+ "bold": true
  },
  "attributes": {
  "color": "#000000"

DefaultThemes/Civic.cetheme

@@ -39,7 +39,8 @@
  "color": "#00AAA3"
  },
  "keywords": {
- "color": "#E12DA0"
+ "color": "#E12DA0",
+ "bold": true
  },
  "attributes": {
  "color": "#68878F"

DefaultThemes/Classic (Dark).cetheme

@@ -39,7 +39,8 @@
  "color": "#D9C97C"
  },
  "keywords": {
- "color": "#FF7AB2"
+ "color": "#FF7AB2",
+ "bold": true
  },
  "attributes": {
  "color": "#CC9768"

DefaultThemes/Classic (Light).cetheme

@@ -39,7 +39,8 @@
  "color": "#272AD8"
  },
  "keywords": {
- "color": "#AD3DA4"
+ "color": "#AD3DA4",
+ "bold": true
  },
  "attributes": {
  "color": "#947100"

DefaultThemes/Default (Dark).cetheme

@@ -39,7 +39,8 @@
  "color": "#D9C97C"
  },
  "keywords": {
- "color": "#FF7AB2"
+ "color": "#FF7AB2",
+ "bold": true
  },
  "attributes": {
  "color": "#CC9768"

DefaultThemes/Default (Light).cetheme

@@ -39,7 +39,8 @@
  "color": "#272AD8"
  },
  "keywords": {
- "color": "#AD3DA4"
+ "color": "#AD3DA4",
+ "bold": true
  },
  "attributes": {
  "color": "#947100"

DefaultThemes/Dusk.cetheme

@@ -39,7 +39,8 @@
  "color": "#8B84CF"
  },
  "keywords": {
- "color": "#C2349B"
+ "color": "#C2349B",
+ "bold": true
  },
  "attributes": {
  "color": "#67878F"

DefaultThemes/GitHub (Dark).cetheme

@@ -39,7 +39,8 @@
  "color": "#79C0FF"
  },
  "keywords": {
- "color": "#FF7B72"
+ "color": "#FF7B72",
+ "bold": true
  },
  "attributes": {
  "color": "#79C0FF"

DefaultThemes/GitHub (Light).cetheme

@@ -39,7 +39,8 @@
  "color": "#0550AE"
  },
  "keywords": {
- "color": "#CF222E"
+ "color": "#CF222E",
+ "bold": true
  },
  "attributes": {
  "color": "#0550AE"

DefaultThemes/High Contrast (Dark).cetheme

@@ -39,7 +39,8 @@
  "color": "#D9C668"
  },
  "keywords": {
- "color": "#FF85B8"
+ "color": "#FF85B8",
+ "bold": true
  },
  "attributes": {
  "color": "#E8B68B"

DefaultThemes/High Contrast (Light).cetheme

@@ -39,7 +39,8 @@
  "color": "#272AD8"
  },
  "keywords": {
- "color": "#9C2191"
+ "color": "#9C2191",
+ "bold": true
  },
  "attributes": {
  "color": "#6E5400"

DefaultThemes/Low Key.cetheme

@@ -39,7 +39,8 @@
  "color": "#323E7D"
  },
  "keywords": {
- "color": "#323E7D"
+ "color": "#323E7D",
+ "bold": true
  },
  "attributes": {
  "color": "#255E22"

DefaultThemes/Midnight.cetheme

@@ -39,7 +39,8 @@
  "color": "#8B87FF"
  },
  "keywords": {
- "color": "#DE38A6"
+ "color": "#DE38A6",
+ "bold": true
  },
  "attributes": {
  "color": "#3B5AAB"

DefaultThemes/Presentation (Dark).cetheme

@@ -39,7 +39,8 @@
  "color": "#FFEA80"
  },
  "keywords": {
- "color": "#F7439D"
+ "color": "#F7439D",
+ "bold": true
  },
  "attributes": {
  "color": "#E7AD78"

DefaultThemes/Presentation (Light).cetheme

@@ -39,7 +39,8 @@
  "color": "#0435FF"
  },
  "keywords": {
- "color": "#C32275"
+ "color": "#C32275",
+ "bold": true
  },
  "attributes": {
  "color": "#967E34"

DefaultThemes/Solarized (Dark).cetheme

@@ -39,7 +39,8 @@
  "color": "#DC322F"
  },
  "keywords": {
- "color": "#859900"
+ "color": "#859900",
+ "bold": true
  },
  "attributes": {
  "color": "#6C71C4"

DefaultThemes/Solarized (Light).cetheme

@@ -39,7 +39,8 @@
  "color": "#DC322F"
  },
  "keywords": {
- "color": "#859900"
+ "color": "#859900",
+ "bold": true
  },
  "attributes": {
  "color": "#6C71C4"

DefaultThemes/Sunset.cetheme

@@ -39,7 +39,8 @@
  "color": "#35568A"
  },
  "keywords": {
- "color": "#35568A"
+ "color": "#35568A",
+ "bold": true
  },
  "attributes": {
  "color": "#3A48AD"