body text color, color presets
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
[gd_scene load_steps=29 format=3 uid="uid://bytm7bt2s4ak8"]
|
||||
[gd_scene load_steps=27 format=3 uid="uid://bytm7bt2s4ak8"]
|
||||
|
||||
[ext_resource type="Script" uid="uid://bg5iqnwic1rio" path="res://Scripts/main.gd" id="1_8q3xr"]
|
||||
[ext_resource type="Texture2D" uid="uid://df1m4j7uxi63v" path="res://Assets/Icons/chevron-down.svg" id="2_6bp64"]
|
||||
@@ -11,8 +11,6 @@
|
||||
[ext_resource type="Texture2D" uid="uid://cehbtwq6gq0cn" path="res://Assets/Icons/plus.svg" id="5_ynf5e"]
|
||||
[ext_resource type="Script" uid="uid://bgqglerkcylxx" path="res://addons/SmoothScroll/SmoothScrollContainer.gd" id="10_d1ilt"]
|
||||
[ext_resource type="Script" uid="uid://b7h0k2h2qwlqv" path="res://addons/SmoothScroll/scroll_damper/expo_scroll_damper.gd" id="11_6iyac"]
|
||||
[ext_resource type="Script" uid="uid://2dcp833juv7b" path="res://addons/godot-flexbox/flex_container.gd" id="12_6iyac"]
|
||||
[ext_resource type="PackedScene" uid="uid://bkj3x5y2m8qrl" path="res://Scenes/Tags/span.tscn" id="13_fdnlq"]
|
||||
|
||||
[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_344ge"]
|
||||
|
||||
@@ -224,47 +222,6 @@ size_flags_horizontal = 3
|
||||
size_flags_vertical = 3
|
||||
theme_override_constants/separation = 22
|
||||
|
||||
[node name="Control" type="Control" parent="VBoxContainer/SmoothScrollContainer/WebsiteContainer"]
|
||||
layout_mode = 2
|
||||
mouse_filter = 1
|
||||
|
||||
[node name="FlexContainer" type="Container" parent="VBoxContainer/SmoothScrollContainer/WebsiteContainer/Control"]
|
||||
custom_minimum_size = Vector2(40, 60)
|
||||
layout_mode = 1
|
||||
anchors_preset = 15
|
||||
anchor_right = 1.0
|
||||
anchor_bottom = 1.0
|
||||
grow_horizontal = 2
|
||||
grow_vertical = 2
|
||||
script = ExtResource("12_6iyac")
|
||||
flex_direction = 0
|
||||
justify_content = 1
|
||||
align_items = 2
|
||||
align_content = 2
|
||||
metadata/_custom_type_script = "uid://2dcp833juv7b"
|
||||
|
||||
[node name="FlexContainer" type="Container" parent="VBoxContainer/SmoothScrollContainer/WebsiteContainer/Control/FlexContainer"]
|
||||
custom_minimum_size = Vector2(40, 40)
|
||||
layout_mode = 2
|
||||
script = ExtResource("12_6iyac")
|
||||
metadata/_custom_type_script = "uid://2dcp833juv7b"
|
||||
metadata/flex_metas = {
|
||||
&"align_self": 0,
|
||||
&"grow": 0.0
|
||||
}
|
||||
|
||||
[node name="RichTextLabel" parent="VBoxContainer/SmoothScrollContainer/WebsiteContainer/Control/FlexContainer/FlexContainer" instance=ExtResource("13_fdnlq")]
|
||||
layout_mode = 2
|
||||
mouse_filter = 1
|
||||
|
||||
[node name="RichTextLabel2" parent="VBoxContainer/SmoothScrollContainer/WebsiteContainer/Control/FlexContainer/FlexContainer" instance=ExtResource("13_fdnlq")]
|
||||
layout_mode = 2
|
||||
mouse_filter = 1
|
||||
|
||||
[node name="RichTextLabel3" parent="VBoxContainer/SmoothScrollContainer/WebsiteContainer/Control/FlexContainer/FlexContainer" instance=ExtResource("13_fdnlq")]
|
||||
layout_mode = 2
|
||||
mouse_filter = 1
|
||||
|
||||
[node name="WebsiteBackground" type="Panel" parent="."]
|
||||
unique_name_in_owner = true
|
||||
z_index = -1
|
||||
|
||||
@@ -173,6 +173,14 @@ static func parse_utility_class_internal(rule: CSSRule, utility_name: String) ->
|
||||
var color_value = extract_bracket_content(utility_name, 5) # after 'text-'
|
||||
rule.properties["color"] = parse_color(color_value)
|
||||
return
|
||||
|
||||
# Handle standard text color classes like text-white, text-black, etc.
|
||||
if utility_name.begins_with("text-"):
|
||||
var color_name = utility_name.substr(5) # after 'text-'
|
||||
var color = get_color(color_name)
|
||||
if color != null:
|
||||
rule.properties["color"] = color
|
||||
return
|
||||
|
||||
# Handle background color classes like bg-[#ff0000]
|
||||
if utility_name.begins_with("bg-[") and utility_name.ends_with("]"):
|
||||
@@ -180,6 +188,14 @@ static func parse_utility_class_internal(rule: CSSRule, utility_name: String) ->
|
||||
var color = parse_color(color_value)
|
||||
rule.properties["background-color"] = color
|
||||
return
|
||||
|
||||
# Handle standard background color classes like bg-white, bg-black, etc.
|
||||
if utility_name.begins_with("bg-"):
|
||||
var color_name = utility_name.substr(3) # after 'bg-'
|
||||
var color = get_color(color_name)
|
||||
if color != null:
|
||||
rule.properties["background-color"] = color
|
||||
return
|
||||
|
||||
# e.g. max-w-[123px], w-[50%], h-[2rem]
|
||||
if utility_name.match("^max-w-\\[.*\\]$"):
|
||||
@@ -538,3 +554,83 @@ static func parse_inline_style(style_string: String) -> Dictionary:
|
||||
parse_utility_class_internal(rule, utility_name)
|
||||
|
||||
return rule.properties
|
||||
|
||||
static func get_color(color_name: String) -> Color:
|
||||
# Common colors
|
||||
match color_name:
|
||||
"white": return Color.WHITE
|
||||
"black": return Color.BLACK
|
||||
"transparent": return Color.TRANSPARENT
|
||||
|
||||
# Gray scale
|
||||
"slate-50": return Color.from_string("#f8fafc", Color.WHITE)
|
||||
"slate-100": return Color.from_string("#f1f5f9", Color.WHITE)
|
||||
"slate-200": return Color.from_string("#e2e8f0", Color.WHITE)
|
||||
"slate-300": return Color.from_string("#cbd5e1", Color.WHITE)
|
||||
"slate-400": return Color.from_string("#94a3b8", Color.WHITE)
|
||||
"slate-500": return Color.from_string("#64748b", Color.WHITE)
|
||||
"slate-600": return Color.from_string("#475569", Color.WHITE)
|
||||
"slate-700": return Color.from_string("#334155", Color.WHITE)
|
||||
"slate-800": return Color.from_string("#1e293b", Color.WHITE)
|
||||
"slate-900": return Color.from_string("#0f172a", Color.WHITE)
|
||||
|
||||
"gray-50": return Color.from_string("#f9fafb", Color.WHITE)
|
||||
"gray-100": return Color.from_string("#f3f4f6", Color.WHITE)
|
||||
"gray-200": return Color.from_string("#e5e7eb", Color.WHITE)
|
||||
"gray-300": return Color.from_string("#d1d5db", Color.WHITE)
|
||||
"gray-400": return Color.from_string("#9ca3af", Color.WHITE)
|
||||
"gray-500": return Color.from_string("#6b7280", Color.WHITE)
|
||||
"gray-600": return Color.from_string("#4b5563", Color.WHITE)
|
||||
"gray-700": return Color.from_string("#374151", Color.WHITE)
|
||||
"gray-800": return Color.from_string("#1f2937", Color.WHITE)
|
||||
"gray-900": return Color.from_string("#111827", Color.WHITE)
|
||||
|
||||
# Red
|
||||
"red-50": return Color.from_string("#fef2f2", Color.WHITE)
|
||||
"red-100": return Color.from_string("#fee2e2", Color.WHITE)
|
||||
"red-200": return Color.from_string("#fecaca", Color.WHITE)
|
||||
"red-300": return Color.from_string("#fca5a5", Color.WHITE)
|
||||
"red-400": return Color.from_string("#f87171", Color.WHITE)
|
||||
"red-500": return Color.from_string("#ef4444", Color.WHITE)
|
||||
"red-600": return Color.from_string("#dc2626", Color.WHITE)
|
||||
"red-700": return Color.from_string("#b91c1c", Color.WHITE)
|
||||
"red-800": return Color.from_string("#991b1b", Color.WHITE)
|
||||
"red-900": return Color.from_string("#7f1d1d", Color.WHITE)
|
||||
|
||||
# Green
|
||||
"green-50": return Color.from_string("#f0fdf4", Color.WHITE)
|
||||
"green-100": return Color.from_string("#dcfce7", Color.WHITE)
|
||||
"green-200": return Color.from_string("#bbf7d0", Color.WHITE)
|
||||
"green-300": return Color.from_string("#86efac", Color.WHITE)
|
||||
"green-400": return Color.from_string("#4ade80", Color.WHITE)
|
||||
"green-500": return Color.from_string("#22c55e", Color.WHITE)
|
||||
"green-600": return Color.from_string("#16a34a", Color.WHITE)
|
||||
"green-700": return Color.from_string("#15803d", Color.WHITE)
|
||||
"green-800": return Color.from_string("#166534", Color.WHITE)
|
||||
"green-900": return Color.from_string("#14532d", Color.WHITE)
|
||||
|
||||
# Blue
|
||||
"blue-50": return Color.from_string("#eff6ff", Color.WHITE)
|
||||
"blue-100": return Color.from_string("#dbeafe", Color.WHITE)
|
||||
"blue-200": return Color.from_string("#bfdbfe", Color.WHITE)
|
||||
"blue-300": return Color.from_string("#93c5fd", Color.WHITE)
|
||||
"blue-400": return Color.from_string("#60a5fa", Color.WHITE)
|
||||
"blue-500": return Color.from_string("#3b82f6", Color.WHITE)
|
||||
"blue-600": return Color.from_string("#2563eb", Color.WHITE)
|
||||
"blue-700": return Color.from_string("#1d4ed8", Color.WHITE)
|
||||
"blue-800": return Color.from_string("#1e40af", Color.WHITE)
|
||||
"blue-900": return Color.from_string("#1e3a8a", Color.WHITE)
|
||||
|
||||
# Yellow
|
||||
"yellow-50": return Color.from_string("#fefce8", Color.WHITE)
|
||||
"yellow-100": return Color.from_string("#fef9c3", Color.WHITE)
|
||||
"yellow-200": return Color.from_string("#fef08a", Color.WHITE)
|
||||
"yellow-300": return Color.from_string("#fde047", Color.WHITE)
|
||||
"yellow-400": return Color.from_string("#facc15", Color.WHITE)
|
||||
"yellow-500": return Color.from_string("#eab308", Color.WHITE)
|
||||
"yellow-600": return Color.from_string("#ca8a04", Color.WHITE)
|
||||
"yellow-700": return Color.from_string("#a16207", Color.WHITE)
|
||||
"yellow-800": return Color.from_string("#854d0e", Color.WHITE)
|
||||
"yellow-900": return Color.from_string("#713f12", Color.WHITE)
|
||||
|
||||
_: return Color.BLACK
|
||||
|
||||
@@ -46,7 +46,7 @@ var HTML_CONTENT = """<head>
|
||||
<!-- Top Summary Cards -->
|
||||
<div style="flex flex-row gap-4 justify-center flex-wrap">
|
||||
<div style="card w-48 h-24 flex flex-col justify-center items-center">
|
||||
<h2>Users</h2>
|
||||
<h2 style="text-red-500">Users</h2>
|
||||
<p>1,240</p>
|
||||
</div>
|
||||
<div style="card w-48 h-24 flex flex-col justify-center items-center">
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
class_name StyleManager
|
||||
extends RefCounted
|
||||
|
||||
static var body_text_color: Color = Color.BLACK
|
||||
|
||||
static func parse_size(val):
|
||||
if val == null: return null
|
||||
if typeof(val) == TYPE_INT or typeof(val) == TYPE_FLOAT:
|
||||
@@ -75,7 +77,13 @@ static func apply_styles_to_label(label: RichTextLabel, styles: Dictionary, elem
|
||||
var color_tag = ""
|
||||
if styles.has("color"):
|
||||
var color = styles["color"] as Color
|
||||
|
||||
if color == Color.BLACK and StyleManager.body_text_color != Color.BLACK:
|
||||
color = StyleManager.body_text_color
|
||||
color_tag = "[color=#%s]" % color.to_html(false)
|
||||
else:
|
||||
if StyleManager.body_text_color != Color.BLACK:
|
||||
color_tag = "[color=#%s]" % StyleManager.body_text_color.to_html(false)
|
||||
# Apply bold
|
||||
var bold_open = ""
|
||||
var bold_close = ""
|
||||
@@ -125,6 +133,8 @@ static func apply_styles_to_label(label: RichTextLabel, styles: Dictionary, elem
|
||||
bold_close,
|
||||
"[/color]" if color_tag.length() > 0 else "",
|
||||
]
|
||||
|
||||
label.text = styled_text
|
||||
|
||||
static func apply_flex_container_properties(node: FlexContainer, styles: Dictionary, element: HTMLParser.HTMLElement, parser: HTMLParser) -> void:
|
||||
# Flex direction - default to row if not specified
|
||||
@@ -370,6 +380,8 @@ static func apply_body_styles(body: HTMLParser.HTMLElement, parser: HTMLParser,
|
||||
style_box.bg_color = styles["background-color"] as Color
|
||||
website_background.add_theme_stylebox_override("panel", style_box)
|
||||
|
||||
if styles.has("color"):
|
||||
StyleManager.body_text_color = styles["color"]
|
||||
# Apply padding
|
||||
var has_padding = styles.has("padding") or styles.has("padding-top") or styles.has("padding-right") or styles.has("padding-bottom") or styles.has("padding-left")
|
||||
|
||||
|
||||
Reference in New Issue
Block a user