diff --git a/Sources/Commands/Components/DeployCommand.swift b/Sources/Commands/Components/DeployCommand.swift index 1ee86ac0..5678f185 100644 --- a/Sources/Commands/Components/DeployCommand.swift +++ b/Sources/Commands/Components/DeployCommand.swift @@ -18,11 +18,9 @@ internal struct DeployCommand { return CommandLine.arguments[2] } - private static let manager = FileManager.default - internal static func main() throws { - if !manager.fileExists(atPath: sourcePath) { + if !FileManager.default.fileExists(atPath: sourcePath) { print("No valid source path.") exit(1) @@ -47,15 +45,15 @@ internal struct DeployCommand { /* Copyright (c) 2019 - 2026 Vapor Community - Licensed under MIT (https://github.com/vapor-community/HTMLKit/blob/main/LICENSE) */ """ - if !manager.fileExists(atPath: target) { - try manager.createDirectory(atPath: target, withIntermediateDirectories: true) + if !FileManager.default.fileExists(atPath: target) { + try FileManager.default.createDirectory(atPath: target, withIntermediateDirectories: true) } - if !manager.fileExists(atPath: target + filename) { - manager.createFile(atPath: target + filename, contents: template.data(using: .utf8)) + if !FileManager.default.fileExists(atPath: target + filename) { + FileManager.default.createFile(atPath: target + filename, contents: template.data(using: .utf8)) } - if let enumerator = manager.enumerator(at: URL(fileURLWithPath: source), includingPropertiesForKeys: nil, options: [.skipsHiddenFiles]) { + if let enumerator = FileManager.default.enumerator(at: URL(fileURLWithPath: source), includingPropertiesForKeys: nil, options: [.skipsHiddenFiles]) { for case let path as URL in enumerator { @@ -97,15 +95,15 @@ internal struct DeployCommand { /* Copyright (c) 2019 - 2026 Vapor Community - Licensed under MIT (https://github.com/vapor-community/HTMLKit/blob/main/LICENSE) */ """ - if !manager.fileExists(atPath: target) { - try manager.createDirectory(atPath: target, withIntermediateDirectories: true) + if !FileManager.default.fileExists(atPath: target) { + try FileManager.default.createDirectory(atPath: target, withIntermediateDirectories: true) } - if !manager.fileExists(atPath: target + filename) { - manager.createFile(atPath: target + filename, contents: template.data(using: .utf8)) + if !FileManager.default.fileExists(atPath: target + filename) { + FileManager.default.createFile(atPath: target + filename, contents: template.data(using: .utf8)) } - if let enumerator = manager.enumerator(at: URL(fileURLWithPath: source), includingPropertiesForKeys: nil, options: [.skipsHiddenFiles]) { + if let enumerator = FileManager.default.enumerator(at: URL(fileURLWithPath: source), includingPropertiesForKeys: nil, options: [.skipsHiddenFiles]) { for case let path as URL in enumerator { diff --git a/Sources/HTMLKitComponents/Components/Alert.swift b/Sources/HTMLKitComponents/Components/Alert.swift index 379a2306..cf7d2040 100644 --- a/Sources/HTMLKitComponents/Components/Alert.swift +++ b/Sources/HTMLKitComponents/Components/Alert.swift @@ -30,10 +30,10 @@ public struct Alert: View, Identifiable, Modifiable { } public var body: Content { - Division { + Output { content } - .role(.alert) + .role(.status) .class(classes) .modify(unwrap: id) { $0.id($1) @@ -95,7 +95,7 @@ extension Alert: ViewModifier { return self.mutate(border: color.value, width: width.value, shape: shape?.value) } - public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight?, alignment: Tokens.FrameAlignment?) -> Alert { + public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Alert { return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } diff --git a/Sources/HTMLKitComponents/Components/BarMark.swift b/Sources/HTMLKitComponents/Components/BarMark.swift index abcc0cca..8f9c6b9e 100644 --- a/Sources/HTMLKitComponents/Components/BarMark.swift +++ b/Sources/HTMLKitComponents/Components/BarMark.swift @@ -6,20 +6,20 @@ import HTMLKit /// /// ```swift /// Chart { -/// BarMark(value: 50, label: "Lorem ipsum") +/// BarMark("Lorem ipsum", value: 50) /// .foregroundColor(.random) -/// BarMark(value: 50, label: "Lorem ipsum") +/// BarMark("Lorem ipsum", value: 50) /// .foregroundColor(.random) /// } /// ``` public struct BarMark: View, Modifiable { + /// The title of the mark. + internal let label: DynamicString + /// The value of the mark. internal let value: Int - /// The title of the mark. - internal let label: String - /// The class names of the bar mark. internal var classes: [String] @@ -28,20 +28,51 @@ public struct BarMark: View, Modifiable { /// - Parameters: /// - value: The value at which to plot the mark. /// - label: The title used to label the mark. + @available(*, deprecated, message: "Use the init(label:value:) initializer instead.") public init(value: Int, label: String) { + self.label = .literal(label) + self.value = value + self.classes = ["mark", "type:bar"] + } + + /// Create a bar mark. + /// + /// - Parameters: + /// - label: The title used to label the mark. + /// - value: The value at which to plot the mark. + @_disfavoredOverload + public init(_ label: any StringProtocol & Content, value: Int) { + + self.label = .literal(String(label)) + self.value = value + self.classes = ["mark", "type:bar"] + } + + /// Create a bar mark. + /// + /// - Parameters: + /// - localizedStringKey: The key of the localized string to look for. + /// - value: The value at which to plot the mark. + public init(_ localizedStringKey: LocalizedStringKey, value: Int) { + + self.label = .localized(localizedStringKey, nil) self.value = value - self.label = label - self.classes = ["mark type:bar"] + self.classes = ["mark", "type:bar"] } public var body: Content { - HTMLKit.Group { + Group { Rectangle { - "\(value)" + value } Custom(name: "text") { - label + if case .localized(let value, let table) = label { + LocalizedString(key: value, table: table) + } + if case .literal(let string) = label { + string + } } .custom(key: "class", value: "mark-label", context: .trusted) } diff --git a/Sources/HTMLKitComponents/Components/Card.swift b/Sources/HTMLKitComponents/Components/Card.swift index e89f84b0..9977ffba 100644 --- a/Sources/HTMLKitComponents/Components/Card.swift +++ b/Sources/HTMLKitComponents/Components/Card.swift @@ -51,10 +51,12 @@ public struct Card: View, Modifiable, Identifiable { public var body: Content { Division { - Division { - header + if let header = header { + Division { + header + } + .class("card-header") } - .class("card-header") Division { content } diff --git a/Sources/HTMLKitComponents/Components/DatePicker.swift b/Sources/HTMLKitComponents/Components/DatePicker.swift index 7b7e7ea6..4ff650ab 100644 --- a/Sources/HTMLKitComponents/Components/DatePicker.swift +++ b/Sources/HTMLKitComponents/Components/DatePicker.swift @@ -90,7 +90,7 @@ public struct DatePicker: View, Modifiable, Identifiable { .namespace("http://www.w3.org/2000/svg") .fill("currentColor") .stroke("currentColor", width: 2, cap: .round, join: .round) - .custom(key: "aria-hidden", value: true) + .accessibilityHidden() } .type(.button) .value(verbatim: "previous") @@ -112,7 +112,7 @@ public struct DatePicker: View, Modifiable, Identifiable { .namespace("http://www.w3.org/2000/svg") .fill("currentColor") .stroke("currentColor", width: 2, cap: .round, join: .round) - .custom(key: "aria-hidden", value: true) + .accessibilityHidden() } .type(.button) .value(verbatim: "next") diff --git a/Sources/HTMLKitComponents/Components/Disclosure.swift b/Sources/HTMLKitComponents/Components/Disclosure.swift index dba4ffa3..33453906 100644 --- a/Sources/HTMLKitComponents/Components/Disclosure.swift +++ b/Sources/HTMLKitComponents/Components/Disclosure.swift @@ -5,16 +5,23 @@ import HTMLKit /// Use `Disclosure` to reveal or hide content when interacted with. /// /// ```swift -/// Disclosure("Lorem ipsum") { +/// Disclosure { +/// Text { +/// "Lorem ipsum..." +/// } +/// } label: { /// Text { /// "Lorem ipsum..." /// } /// } /// ``` -public struct Disclosure: View, Modifiable { +public struct Disclosure: View, Modifiable, Identifiable { + + /// The unique identifier of the disclosure. + internal var id: String? /// The label of the disclosure. - internal let label: Content + internal let label: [Content] /// The disclosure's content. internal let content: [Content] @@ -27,10 +34,11 @@ public struct Disclosure: View, Modifiable { /// - Parameters: /// - label: The label to describe the content. /// - content: The disclosure's content. + @available(*, deprecated, message: "Use the init(content:label:) initializer instead.") @_disfavoredOverload - public init(_ label: String, @ContentBuilder content: () -> [Content]) { + public init(_ label: any StringProtocol & Content, @ContentBuilder content: () -> [Content]) { - self.label = label + self.label = [label] self.content = content() self.classes = ["disclosure"] } @@ -40,42 +48,64 @@ public struct Disclosure: View, Modifiable { /// - Parameters: /// - label: The key of the localized string to describe the content. /// - content: The disclosure's content. + @available(*, deprecated, message: "Use the init(content:label:) initializer instead.") public init(_ label: LocalizedStringKey, @ContentBuilder content: () -> [Content]) { - self.label = LocalizedString(key: label) + self.label = [LocalizedString(key: label)] + self.content = content() + self.classes = ["disclosure"] + } + + /// Create a disclosure. + /// + /// - Parameters: + /// - content: The disclosure's content. + /// - label: The disclosure's label. + public init(@ContentBuilder content: () -> [Content], @ContentBuilder label: () -> [Content]) { + + self.label = label() self.content = content() self.classes = ["disclosure"] } public var body: Content { - Division { - Division { - Paragraph { + Details { + Summary { + Division { label } .class("disclosure-label") Vector { - Title { - "State Indicator" - } Path { } .draw("M7.28,2.241C6.987,1.957 6.987,1.497 7.28,1.213C7.573,0.929 8.048,0.929 8.341,1.213L14.811,7.486C15.103,7.77 15.103,8.23 14.811,8.514L8.28,14.787C7.987,15.071 7.512,15.071 7.22,14.787C6.927,14.503 6.927,14.043 7.22,13.759L13.22,8L7.28,2.241Z") } .viewBox(x: 0, y: 0, width: 20, height: 16) + .width(20) + .height(16) .namespace("http://www.w3.org/2000/svg") - .class("state-indicator") - .custom(key: "aria-hidden", value: true) + .class("disclosure-triangle") + .accessibilityHidden() } .class("disclosure-head") Division { - Division { - content - } - .class("disclosure-content") + content } .class("disclosure-body") } .class(classes) + .modify(unwrap: id) { + $0.id($1) + } + .custom(key: "name", value: "disclosure") + } + + /// Set the identifier for the disclosure. + /// + /// - Parameter value: The value of the identifier + /// + /// - Returns: The disclosure + public func tag(_ value: String) -> Disclosure { + return self.mutate(id: value) } } diff --git a/Sources/HTMLKitComponents/Components/SectorMark.swift b/Sources/HTMLKitComponents/Components/SectorMark.swift index c3705ffe..94998c9b 100644 --- a/Sources/HTMLKitComponents/Components/SectorMark.swift +++ b/Sources/HTMLKitComponents/Components/SectorMark.swift @@ -6,20 +6,20 @@ import HTMLKit /// /// ```swift /// Chart { -/// SectorMark(value: 50, label: "Lorem ipsum") +/// SectorMark("Lorem ipsum", value: 50) /// .foregroundColor(.random) -/// SectorMark(value: 50, label: "Lorem ipsum") +/// SectorMark("Lorem ipsum", value: 50) /// .foregroundColor(.random) /// } /// ``` public struct SectorMark: View, Modifiable { + /// The title of the mark. + internal let label: DynamicString + /// The value of the mark. internal let value: Int - /// The title of the mark. - internal let label: String - /// The class names of the sector mark. internal var classes: [String] @@ -28,18 +28,53 @@ public struct SectorMark: View, Modifiable { /// - Parameters: /// - value: The value at which to plot the mark. /// - label: The title used to label the mark. + @available(*, deprecated, message: "Use the init(label:value:) initializer instead.") public init(value: Int, label: String) { self.value = value - self.label = label - self.classes = ["mark type:pie"] + self.label = .literal(label) + self.classes = ["mark", "type:pie"] + } + + /// Create a sector mark. + /// + /// - Parameters: + /// - label: The title used to label the mark. + /// - value: The value at which to plot the mark. + @_disfavoredOverload + public init(label: any StringProtocol & Content, value: Int) { + + self.label = .literal(String(label)) + self.value = value + self.classes = ["mark", "type:pie"] + } + + /// Create a sector mark. + /// + /// - Parameters: + /// - localizedStringKey: The key of the localized string to look for. + /// - value: The value at which to plot the mark. + public init(_ localizedStringKey: LocalizedStringKey, value: Int) { + + self.label = .localized(localizedStringKey, nil) + self.value = value + self.classes = ["mark", "type:pie"] } public var body: Content { - HTMLKit.Group { + Group { Path { - "\(value)" + value + } + Custom(name: "text") { + if case .localized(let value, let table) = label { + LocalizedString(key: value, table: table) + } + if case .literal(let string) = label { + string + } } + .custom(key: "class", value: "mark-label", context: .trusted) } .class(classes) } diff --git a/Sources/HTMLKitComponents/Components/Symbol.swift b/Sources/HTMLKitComponents/Components/Symbol.swift index 56f9e484..715531e1 100644 --- a/Sources/HTMLKitComponents/Components/Symbol.swift +++ b/Sources/HTMLKitComponents/Components/Symbol.swift @@ -249,7 +249,7 @@ public struct Symbol: View, Modifiable { } .viewBox(x: 0, y: 0, width: 20, height: 16) .class(classes) - .custom(key: "role", value: "img") + .role(.image) } /// Set the size for the symbol. diff --git a/Sources/HTMLKitComponents/Components/Tabs.swift b/Sources/HTMLKitComponents/Components/Tabs.swift index 6fdbbcc1..819ad826 100644 --- a/Sources/HTMLKitComponents/Components/Tabs.swift +++ b/Sources/HTMLKitComponents/Components/Tabs.swift @@ -141,7 +141,7 @@ extension Tabs: ViewModifier { return self.mutate(border: color.value, width: width.value, shape: shape?.value) } - public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight?, alignment: Tokens.FrameAlignment?) -> Tabs { + public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Tabs { return self.mutate(frame: width.value, height: height?.value, alignment: alignment?.value) } diff --git a/Sources/HTMLKitComponents/Components/TextEditor.swift b/Sources/HTMLKitComponents/Components/TextEditor.swift index c51aed15..37c71c97 100644 --- a/Sources/HTMLKitComponents/Components/TextEditor.swift +++ b/Sources/HTMLKitComponents/Components/TextEditor.swift @@ -19,7 +19,7 @@ public struct TextEditor: View, Modifiable, Identifiable { /// The content hint for the field. internal let prompt: DynamicString? - /// The number of visible text lines. + /// The number of visible text lines. internal var rows: Int = 3 /// The body content of the editor. diff --git a/Sources/HTMLKitComponents/Components/TextPad.swift b/Sources/HTMLKitComponents/Components/TextPad.swift index 160e88fc..658c3d75 100644 --- a/Sources/HTMLKitComponents/Components/TextPad.swift +++ b/Sources/HTMLKitComponents/Components/TextPad.swift @@ -73,7 +73,7 @@ public struct TextPad: View, Modifiable, Identifiable { } .namespace("http://www.w3.org/2000/svg") .viewBox(x: 0, y: 0, width: 20, height: 16) - .custom(key: "aria-hidden", value: true) + .accessibilityHidden() } UnorderedList { ListItem { @@ -88,7 +88,7 @@ public struct TextPad: View, Modifiable, Identifiable { } .namespace("http://www.w3.org/2000/svg") .viewBox(x: 0, y: 0, width: 20, height: 16) - .custom(key: "aria-hidden", value: true) + .accessibilityHidden() } .type(.button) .class("toolbar-tool") @@ -111,7 +111,7 @@ public struct TextPad: View, Modifiable, Identifiable { } .namespace("http://www.w3.org/2000/svg") .viewBox(x: 0, y: 0, width: 20, height: 16) - .custom(key: "aria-hidden", value: true) + .accessibilityHidden() } .type(.button) .class("toolbar-tool") @@ -134,7 +134,7 @@ public struct TextPad: View, Modifiable, Identifiable { } .namespace("http://www.w3.org/2000/svg") .viewBox(x: 0, y: 0, width: 20, height: 16) - .custom(key: "aria-hidden", value: true) + .accessibilityHidden() } .type(.button) .class("toolbar-tool") @@ -157,7 +157,7 @@ public struct TextPad: View, Modifiable, Identifiable { } .namespace("http://www.w3.org/2000/svg") .viewBox(x: 0, y: 0, width: 20, height: 16) - .custom(key: "aria-hidden", value: true) + .accessibilityHidden() } .type(.button) .class("toolbar-tool") @@ -180,7 +180,7 @@ public struct TextPad: View, Modifiable, Identifiable { } .namespace("http://www.w3.org/2000/svg") .viewBox(x: 0, y: 0, width: 20, height: 16) - .custom(key: "aria-hidden", value: true) + .accessibilityHidden() } .type(.button) .class("toolbar-tool") @@ -208,7 +208,7 @@ public struct TextPad: View, Modifiable, Identifiable { } .namespace("http://www.w3.org/2000/svg") .viewBox(x: 0, y: 0, width: 20, height: 16) - .custom(key: "aria-hidden", value: true) + .accessibilityHidden() } .type(.button) .class("toolbar-tool") @@ -231,7 +231,7 @@ public struct TextPad: View, Modifiable, Identifiable { } .namespace("http://www.w3.org/2000/svg") .viewBox(x: 0, y: 0, width: 20, height: 16) - .custom(key: "aria-hidden", value: true) + .accessibilityHidden() } .type(.button) .class("toolbar-tool") @@ -254,7 +254,7 @@ public struct TextPad: View, Modifiable, Identifiable { } .namespace("http://www.w3.org/2000/svg") .viewBox(x: 0, y: 0, width: 20, height: 16) - .custom(key: "aria-hidden", value: true) + .accessibilityHidden() } .type(.button) .class("toolbar-tool") @@ -277,7 +277,7 @@ public struct TextPad: View, Modifiable, Identifiable { } .namespace("http://www.w3.org/2000/svg") .viewBox(x: 0, y: 0, width: 20, height: 16) - .custom(key: "aria-hidden", value: true) + .accessibilityHidden() } .type(.button) .class("toolbar-tool") @@ -300,7 +300,7 @@ public struct TextPad: View, Modifiable, Identifiable { } .namespace("http://www.w3.org/2000/svg") .viewBox(x: 0, y: 0, width: 20, height: 16) - .custom(key: "aria-hidden", value: true) + .accessibilityHidden() } .type(.button) .class("toolbar-tool") @@ -326,7 +326,7 @@ public struct TextPad: View, Modifiable, Identifiable { } .namespace("http://www.w3.org/2000/svg") .viewBox(x: 0, y: 0, width: 20, height: 16) - .custom(key: "aria-hidden", value: true) + .accessibilityHidden() } .type(.button) .class("toolbar-tool", "state:disabled") @@ -349,7 +349,7 @@ public struct TextPad: View, Modifiable, Identifiable { } .namespace("http://www.w3.org/2000/svg") .viewBox(x: 0, y: 0, width: 20, height: 16) - .custom(key: "aria-hidden", value: true) + .accessibilityHidden() } .type(.button) .class("toolbar-tool", "state:disabled") diff --git a/Sources/HTMLKitComponents/Options.swift b/Sources/HTMLKitComponents/Options.swift index 059e60fa..585e81f2 100644 --- a/Sources/HTMLKitComponents/Options.swift +++ b/Sources/HTMLKitComponents/Options.swift @@ -1,4 +1,4 @@ -public struct EdgeSet: OptionSet { +public struct EdgeSet: OptionSet, Sendable { public var rawValue: Int diff --git a/Sources/HTMLKitComponents/Resources/css/buttons/button.css b/Sources/HTMLKitComponents/Resources/css/buttons/button.css index 39de70bf..b54aa02a 100644 --- a/Sources/HTMLKitComponents/Resources/css/buttons/button.css +++ b/Sources/HTMLKitComponents/Resources/css/buttons/button.css @@ -2,82 +2,84 @@ * The rulesets for the button component. */ -.button { - --paddingBlockStart: 0.5rem; - --paddingBlockEnd: 0.5rem; - --paddingInlineStart: 1.0rem; - --paddingInlineEnd: 1.0rem; - --inlineSize: fit-content; - --fontSize: 1.0rem; - --fontWeight: 400; - --lineHeight: 1.5; - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --foregroundColor: var(--systemTextColor); - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; - - position: relative; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - inline-size: var(--inlineSize); - display: inline-flex; - align-items: center; - justify-content: center; - font-family: var(--fontFamily); - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - text-decoration: none; - white-space: nowrap; - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; +@layer htmlkit.components { + .button { + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --inlineSize: fit-content; + --fontSize: 1.0rem; + --fontWeight: 400; + --lineHeight: 1.5; + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --foregroundColor: var(--systemTextColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - &:hover { - filter: brightness(90%) saturate(90%); - } + position: relative; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + inline-size: var(--inlineSize); + display: inline-flex; + align-items: center; + justify-content: center; + font-family: var(--fontFamily); + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + text-decoration: none; + white-space: nowrap; + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; - &.style\:primary { - --foregroundColor: var(--whiteColor) !important; - --borderColor: var(--accentColor) !important; - --backgroundColor: var(--accentColor) !important; - } + &:hover { + filter: brightness(90%) saturate(90%); + } - &.style\:outline { - --foregroundColor: var(--systemTextColor) !important; - --borderColor: var(--systemBorderColor) !important; - --backgroundOpacity: 0.0 !important; - } + &.style\:primary { + --foregroundColor: var(--whiteColor) !important; + --borderColor: var(--accentColor) !important; + --backgroundColor: var(--accentColor) !important; + } - &.size\:full { - --inlineSize: 100%; - } + &.style\:outline { + --foregroundColor: var(--systemTextColor) !important; + --borderColor: var(--systemBorderColor) !important; + --backgroundOpacity: 0.0 !important; + } - &.size\:large { - --inlineSize: 75%; - } + &.size\:full { + --inlineSize: 100%; + } - &.size\:medium { - --inlineSize: 50%; - } + &.size\:large { + --inlineSize: 75%; + } - &.size\:small { - --inlineSize: 25%; - } + &.size\:medium { + --inlineSize: 50%; + } + + &.size\:small { + --inlineSize: 25%; + } - .symbol { - height: 24px; /* Temporary fix */ + .symbol { + height: 24px; /* Temporary fix */ + } } } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css b/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css index 92e2498c..5995b176 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css @@ -2,76 +2,76 @@ * The rulesets for the checkfield component. */ -.checkfield { - --paddingBlockStart: 0.5rem; - --paddingBlockEnd: 0.5rem; - --paddingInlineStart: 1.0rem; - --paddingInlineEnd: 1.0rem; - --foregroundColor: var(--systemTextColor); - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderOpacity: 1.0; - --borderRadius: 0; - --focusColor: var(--systemFocusColor); - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; - - position: relative; - display: flex; - align-items: center; - inline-size: 100%; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); +@layer htmlkit.components { + .checkfield { + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderOpacity: 1.0; + --borderRadius: 0; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - .checkinput { position: relative; - margin-inline: 0; - margin-block: 0; - padding-inline: 0; - padding-block: 0; - block-size: 1.5rem; - inline-size: 1.5rem; - display: inline-grid; - place-content: center; - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + display: flex; + align-items: center; + inline-size: 100%; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); - &:checked { - --backgroundColor: var(--accentColor) !important; + .checkinput { + position: relative; + margin-inline: 0; + margin-block: 0; + padding-inline: 0; + padding-block: 0; + block-size: 1.5rem; + inline-size: 1.5rem; + display: inline-grid; + place-content: center; + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + appearance: none; - &:before { - transform: scale(1); + &:checked { + --backgroundColor: var(--accentColor) !important; + + &:before { + transform: scale(1); + } } - } - &:focus { - --borderColor: var(--focusColor) !important; + &:focus { + --borderColor: var(--focusColor) !important; - outline-style: none; - box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); - } + outline-style: none; + box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); + } - &:before { - content: ""; - block-size: 0.625rem; - inline-size: 0.625rem; - border-radius: 1px; - background-color: hsla(var(--whiteColor), 1.0); - transform: scale(0); + &:before { + content: ""; + block-size: 0.625rem; + inline-size: 0.625rem; + border-radius: 1px; + background-color: hsla(var(--whiteColor), 1.0); + transform: scale(0); + } } - } - label { - margin-inline-start: 1.25rem; - font-family: system-ui; - color: hsla(var(--foregroundColor), 1.0); + label { + margin-inline-start: 1.25rem; + font-family: system-ui; + color: hsla(var(--foregroundColor), 1.0); + } } } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css b/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css index ab19c26c..b3ed9d45 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css @@ -2,165 +2,163 @@ * The rulesets for the datepicker component. */ -.datepicker { - --paddingBlockStart: 0.5rem; - --paddingBlockEnd: 0.5rem; - --paddingInlineStart: 1.0rem; - --paddingInlineEnd: 1.0rem; - --fontSize: 1.0rem; - --fontWeight: normal; - --lineHeight: 1.5; - --foregroundColor: var(--systemTextColor); - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --focusColor: var(--systemFocusColor); - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; - - position: relative; - display: block; - inline-size: 100%; - - .datepicker-datefield { +@layer htmlkit.components { + .datepicker { + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --fontSize: 1.0rem; + --fontWeight: normal; + --lineHeight: 1.5; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; + + position: relative; display: block; inline-size: 100%; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - font-family: system-ui; - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - - &:focus { - --borderColor: var(--focusColor) !important; - - outline-style: none; - box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); - - .datepicker-picker { - display: inline-block; - } - } - - &:invalid { - --borderColor: var(--redColor); - } - } - .datepicker-calendar { - position: absolute; - z-index: 1; - padding-inline: 0.5rem; - padding-block: 0.5rem; - margin-block: 0.75rem; - inline-size: 100%; - display: block; - font-family: system-ui; - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), 1.0); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), 1.0); - visibility: hidden; - overflow: hidden; - - &.position\:bottom { - bottom: 0; - margin-block: 3.375rem !important; - } - - .calendar-navigation { + .datepicker-datefield { + display: block; + inline-size: 100%; padding-block-start: var(--paddingBlockStart); padding-block-end: var(--paddingBlockEnd); padding-inline-start: var(--paddingInlineStart); padding-inline-end: var(--paddingInlineEnd); - display: flex; - align-items : center; - justify-content: space-between; - list-style-type: none; - - button { - padding-inline: 0.5rem; - padding-block: 0.5rem; - display: inline-block; - font-family: system-ui; - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - border-style: none; - background-color: transparent; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - cursor: pointer; - - svg { - inline-size: 1rem; - block-size: 1rem; - pointer-events: none; + font-family: system-ui; + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + appearance: none; + + &:focus { + --borderColor: var(--focusColor) !important; + + outline-style: none; + box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); + + .datepicker-picker { + display: inline-block; } } - } - .calendar-week { - display: grid; - grid-template-columns: repeat(7, 1fr); - grid-auto-rows: 1fr; - list-style-type: none; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - - li { - padding-inline: 0.5rem; - padding-block: 0.5rem; - font-weight: bold; - text-align: center; + &:invalid { + --borderColor: var(--redColor); } } - .calendar-days { - display: grid; - grid-template-columns: repeat(7, 1fr); - grid-auto-rows: 1fr; - list-style-type: none; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - - li { - padding-inline: 0.5rem; - padding-block: 0.5rem; - font-weight: bold; - text-align: center; - - &:has(time) { + .datepicker-calendar { + position: absolute; + z-index: 1; + padding-inline: 0.5rem; + padding-block: 0.5rem; + margin-block: 0.75rem; + inline-size: 100%; + display: block; + font-family: system-ui; + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), 1.0); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), 1.0); + visibility: hidden; + overflow: hidden; + + &.position\:bottom { + bottom: 0; + margin-block: 3.375rem !important; + } + + .calendar-navigation { + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + display: flex; + align-items : center; + justify-content: space-between; + list-style-type: none; + + button { padding-inline: 0.5rem; padding-block: 0.5rem; - text-align: center; + display: inline-block; + font-family: system-ui; + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + border-style: none; + background-color: transparent; + appearance: none; cursor: pointer; - &:hover { - border-radius: var(--borderRadius); - background-color: hsla(var(--borderColor), 0.5); + svg { + inline-size: 1rem; + block-size: 1rem; + pointer-events: none; + } + } + } + + .calendar-week { + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-auto-rows: 1fr; + list-style-type: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + + li { + padding-inline: 0.5rem; + padding-block: 0.5rem; + font-weight: bold; + text-align: center; + } + } + + .calendar-days { + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-auto-rows: 1fr; + list-style-type: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + + li { + padding-inline: 0.5rem; + padding-block: 0.5rem; + font-weight: bold; + text-align: center; + + &:has(time) { + padding-inline: 0.5rem; + padding-block: 0.5rem; + text-align: center; + cursor: pointer; + + &:hover { + border-radius: var(--borderRadius); + background-color: hsla(var(--borderColor), 0.5); + } } } } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/filedialog.css b/Sources/HTMLKitComponents/Resources/css/forms/filedialog.css index d8aa5eda..32f81988 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/filedialog.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/filedialog.css @@ -2,41 +2,41 @@ * The rulesets for the filedialog component. */ -.filedialog { - --paddingBlockStart: 0.5rem; - --paddingBlockEnd: 0.5rem; - --paddingInlineStart: 1.0rem; - --paddingInlineEnd: 1.0rem; - --fontSize: 1.0rem; - --fontWeight: 400; - --lineHeight: 1.5; - --foregroundColor: var(--systemTextColor); - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --focusColor: var(--systemFocusColor); - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; - - position: relative; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - inline-size: 100%; - display: block; - font-family: system-ui; - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; +@layer htmlkit.components { + .filedialog { + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --fontSize: 1.0rem; + --fontWeight: 400; + --lineHeight: 1.5; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; + + position: relative; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + inline-size: 100%; + display: block; + font-family: system-ui; + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + appearance: none; + } } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/picker.css b/Sources/HTMLKitComponents/Resources/css/forms/picker.css index dd53ea26..228c61e0 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/picker.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/picker.css @@ -2,8 +2,10 @@ * The rulesets for the picker component. */ -.picker { - position: relative; - inline-size: 100%; - display: block; +@layer htmlkitcomponents { + .picker { + position: relative; + inline-size: 100%; + display: block; + } } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css b/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css index c9355631..667000bb 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css @@ -2,75 +2,75 @@ * The rulesets for the radioselect component. */ -.radioselect { - --paddingBlockStart: 0.5rem; - --paddingBlockEnd: 0.5rem; - --paddingInlineStart: 1.0rem; - --paddingInlineEnd: 1.0rem; - --foregroundColor: var(--systemTextColor); - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderOpacity: 1.0; - --focusColor: var(--systemFocusColor); - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; - - position: relative; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - inline-size: 100%; - display: flex; - align-items: center; +@layer htmlkit.components { + .radioselect { + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderOpacity: 1.0; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - .radioinput { position: relative; - margin-inline: 0; - margin-block: 0; - padding-inline: 0; - padding-block: 0; - inline-size: 1.5rem; - block-size: 1.5rem; - display: inline-grid; - place-content: center; - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: 50%; - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + inline-size: 100%; + display: flex; + align-items: center; - &:checked { - --backgroundColor: var(--accentColor) !important; + .radioinput { + position: relative; + margin-inline: 0; + margin-block: 0; + padding-inline: 0; + padding-block: 0; + inline-size: 1.5rem; + block-size: 1.5rem; + display: inline-grid; + place-content: center; + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: 50%; + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + appearance: none; - &:before { - transform: scale(1); + &:checked { + --backgroundColor: var(--accentColor) !important; + + &:before { + transform: scale(1); + } } - } - &:focus { - --borderColor: var(--focusColor) !important; + &:focus { + --borderColor: var(--focusColor) !important; - outline-style: none; - box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); - } + outline-style: none; + box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); + } - &:before { - content: ""; - block-size: 0.625rem; - inline-size: 0.625rem; - border-radius: 50%; - background-color: hsla(var(--whiteColor), 1.0); - transform: scale(0); + &:before { + content: ""; + block-size: 0.625rem; + inline-size: 0.625rem; + border-radius: 50%; + background-color: hsla(var(--whiteColor), 1.0); + transform: scale(0); + } } - } - label { - margin-inline-start: 1.25rem; - font-family: system-ui; - color: hsla(var(--foregroundColor), 1.0); + label { + margin-inline-start: 1.25rem; + font-family: system-ui; + color: hsla(var(--foregroundColor), 1.0); + } } } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css b/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css index adc6a11c..01fc5ad0 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css @@ -2,51 +2,51 @@ * The rulesets for the searchfield component. */ -.searchfield { - --paddingBlockStart: 0.5rem; - --paddingBlockEnd: 0.5rem; - --paddingInlineStart: 1.0rem; - --paddingInlineEnd: 1.0rem; - --fontSize: 1.0rem; - --fontWeight: 400; - --lineHeight: 1.5; - --foregroundColor: var(--systemTextColor); - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --focusColor: var(--systemFocusColor); - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; +@layer htmlkit.components { + .searchfield { + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --fontSize: 1.0rem; + --fontWeight: 400; + --lineHeight: 1.5; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - inline-size: 100%; - display: block; - font-family: system-ui; - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + inline-size: 100%; + display: block; + font-family: system-ui; + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + appearance: none; - &:focus { - --borderColor: var(--focusColor) !important; + &:focus { + --borderColor: var(--focusColor) !important; - outline-style: none; - box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); - } + outline-style: none; + box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); + } - &:invalid { - --borderColor: var(--redColor); + &:invalid { + --borderColor: var(--redColor); + } } } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/securefield.css b/Sources/HTMLKitComponents/Resources/css/forms/securefield.css index 91e22094..8182f6e6 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/securefield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/securefield.css @@ -2,51 +2,51 @@ * The rulesets for the securefield component. */ -.securefield { - --paddingBlockStart: 0.5rem; - --paddingBlockEnd: 0.5rem; - --paddingInlineStart: 1.0rem; - --paddingInlineEnd: 1.0rem; - --fontSize: 1.0rem; - --fontWeight: normal; - --lineHeight: 1.5; - --foregroundColor: var(--systemTextColor); - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --focusColor: var(--systemFocusColor); - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; +@layer htmlkit.components { + .securefield { + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --fontSize: 1.0rem; + --fontWeight: normal; + --lineHeight: 1.5; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - display: block; - inline-size: 100%; - font-family: system-ui; - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + display: block; + inline-size: 100%; + font-family: system-ui; + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + appearance: none; - &:focus { - --borderColor: var(--focusColor) !important; + &:focus { + --borderColor: var(--focusColor) !important; - outline-style: none; - box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); - } + outline-style: none; + box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); + } - &:invalid { - --borderColor: var(--redColor); + &:invalid { + --borderColor: var(--redColor); + } } } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css b/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css index 02c900b0..89adc431 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css @@ -2,83 +2,83 @@ * The rulesets for the selectfield component. */ -.selectfield { - --paddingBlockStart: 0.5rem; - --paddingBlockEnd: 0.5rem; - --paddingInlineStart: 1.0rem; - --paddingInlineEnd: 1.0rem; - --fontSize: 1.0rem; - --fontWeight: 400; - --lineHeight: 1.5; - --foregroundColor: var(--systemTextColor); - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --focusColor: var(--systemFocusColor); - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; - - position: relative; - display: block; - inline-size: 100%; +@layer htmlkit.components { + .selectfield { + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --fontSize: 1.0rem; + --fontWeight: 400; + --lineHeight: 1.5; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - .selectfield-textfield { - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - inline-size: 100%; + position: relative; display: block; - font-family: system-ui; - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + inline-size: 100%; - &:focus { - --borderColor: var(--focusColor) !important; + .selectfield-textfield { + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + inline-size: 100%; + display: block; + font-family: system-ui; + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + appearance: none; - outline-style: none; - box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); - } + &:focus { + --borderColor: var(--focusColor) !important; - &:invalid { - --borderColor: var(--redColor); + outline-style: none; + box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); + } + + &:invalid { + --borderColor: var(--redColor); + } } - } - .selectfield-optionlist { - position: absolute; - z-index: 1; - margin-block: 0.75rem; - inline-size: 100%; - display: block; - color: hsla(var(--foregroundColor), 1.0); - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), 1.0); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), 1.0); - list-style-type: none; - visibility: hidden; + .selectfield-optionlist { + position: absolute; + z-index: 1; + margin-block: 0.75rem; + inline-size: 100%; + display: block; + color: hsla(var(--foregroundColor), 1.0); + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), 1.0); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), 1.0); + list-style-type: none; + visibility: hidden; - &.position\:bottom { - bottom: 0; - margin-block: 3.375rem !important; - } + &.position\:bottom { + bottom: 0; + margin-block: 3.375rem !important; + } - > * { - &:hover { - background-color: hsla(var(--borderColor), 0.5); + > * { + &:hover { + background-color: hsla(var(--borderColor), 0.5); + } } } } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/slider.css b/Sources/HTMLKitComponents/Resources/css/forms/slider.css index 5ba62b91..81c5122c 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/slider.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/slider.css @@ -2,54 +2,50 @@ * The rulesets for the slider component. */ -.slider { - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderOpacity: 1.0; - --controlColor: 0, 0%, 0%; - --focusColor: var(--systemFocusColor); - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; +@layer htmlkit.components { + .slider { + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderOpacity: 1.0; + --controlColor: 0, 0%, 0%; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - margin-inline: 0; - margin-block: 0; - padding-inline: 0; - padding-block: 0; - inline-size: 100%; - display: block; - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + margin-inline: 0; + margin-block: 0; + padding-inline: 0; + padding-block: 0; + inline-size: 100%; + display: block; + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + appearance: none; - &:focus { - --borderColor: var(--focusColor) !important; + &:focus { + --borderColor: var(--focusColor) !important; - outline-style: none; - box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); - } + outline-style: none; + box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); + } - &::-webkit-slider-thumb { - inline-size: 1em; - block-size: 1em; - background-color: hsla(var(--controlColor), 1.0); - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - } + &::-webkit-slider-thumb { + inline-size: 1em; + block-size: 1em; + background-color: hsla(var(--controlColor), 1.0); + cursor: pointer; + appearance: none; + } - &::-moz-range-thumb { - inline-size: 1em; - block-size: 1em; - background-color: hsla(var(--controlColor), 1.0); - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + &::-moz-range-thumb { + inline-size: 1em; + block-size: 1em; + background-color: hsla(var(--controlColor), 1.0); + cursor: pointer; + appearance: none; + } } } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css b/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css index dff392a3..95f3593e 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css @@ -2,52 +2,52 @@ * The rulesets for the texteditor component. */ -.texteditor { - --paddingBlockStart: 0.5rem; - --paddingBlockEnd: 0.5rem; - --paddingInlineStart: 1.0rem; - --paddingInlineEnd: 1.0rem; - --fontSize: 1.0rem; - --fontWeight: 400; - --lineHeight: 1.5; - --foregroundColor: var(--systemTextColor); - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --focusColor: var(--systemFocusColor); - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; +@layer htmlkit.components { + .texteditor { + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --fontSize: 1.0rem; + --fontWeight: 400; + --lineHeight: 1.5; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - inline-size: 100%; - display: block; - font-family: system-ui; - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - resize: none; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + inline-size: 100%; + display: block; + font-family: system-ui; + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + appearance: none; + resize: none; - &:focus { - --borderColor: var(--focusColor) !important; + &:focus { + --borderColor: var(--focusColor) !important; - outline-style: none; - box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); - } + outline-style: none; + box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); + } - &:invalid { - --borderColor: var(--redColor); + &:invalid { + --borderColor: var(--redColor); + } } } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/textfield.css b/Sources/HTMLKitComponents/Resources/css/forms/textfield.css index 27bf3175..f34da62d 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/textfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/textfield.css @@ -2,51 +2,51 @@ * The rulesets for the textfield component. */ -.textfield { - --paddingBlockStart: 0.5rem; - --paddingBlockEnd: 0.5rem; - --paddingInlineStart: 1.0rem; - --paddingInlineEnd: 1.0rem; - --fontSize: 1.0rem; - --fontWeight: 400; - --lineHeight: 1.5; - --foregroundColor: var(--systemTextColor); - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --focusColor: var(--systemFocusColor); - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; +@layer htmlkit.components { + .textfield { + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --fontSize: 1.0rem; + --fontWeight: 400; + --lineHeight: 1.5; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - inline-size: 100%; - display: block; - font-family: system-ui; - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + inline-size: 100%; + display: block; + font-family: system-ui; + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + appearance: none; - &:focus { - --borderColor: var(--focusColor) !important; + &:focus { + --borderColor: var(--focusColor) !important; - outline-style: none; - box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); - } + outline-style: none; + box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); + } - &:invalid { - --borderColor: var(--redColor) !important; + &:invalid { + --borderColor: var(--redColor) !important; + } } } \ No newline at end of file diff --git a/Sources/HTMLKitComponents/Resources/css/forms/textpad.css b/Sources/HTMLKitComponents/Resources/css/forms/textpad.css index 3d8fd7f0..05709d20 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/textpad.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/textpad.css @@ -1,231 +1,233 @@ /** * The rulesets for the textpad component. */ - -.textpad { - --paddingBlockStart: 0.5rem; - --paddingBlockEnd: 0.5rem; - --paddingInlineStart: 1.0rem; - --paddingInlineEnd: 1.0rem; - --fontSize: 1.0rem; - --fontWeight: 400; - --lineHeight: 1.5; - --foregroundColor: var(--systemTextColor); - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --focusColor: var(--systemFocusColor); - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; - - display: flex; - flex-direction: column; - inline-size: 100%; - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - - &:has(.textpad-content:invalid) { - --borderColor: var(--redColor); - } - &:has(.textpad-content:focus-within) { - .textpad-action { - .toolbar-tool { - color: hsla(var(--foregroundColor), 1.0); +@layer htmlkit.components { + .textpad { + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --fontSize: 1.0rem; + --fontWeight: 400; + --lineHeight: 1.5; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; + + display: flex; + flex-direction: column; + inline-size: 100%; + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + + &:has(.textpad-content:invalid) { + --borderColor: var(--redColor); + } + + &:has(.textpad-content:focus-within) { + .textpad-action { + .toolbar-tool { + color: hsla(var(--foregroundColor), 1.0); + } } } - } - &:focus-within { - --borderColor: var(--focusColor) !important; + &:focus-within { + --borderColor: var(--focusColor) !important; + + outline-style: none; + box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); + } + + .textpad-toolbar { + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + .textpad-revision { + margin-inline: unset !important; + margin-block: unset !important; + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + gap: 0.75rem; + list-style: none; + + li { + position: relative; + } + + .toolbar-tool { + color: hsla(var(--foregroundColor), 1.0); + + &.state\:disabled { + color: hsla(var(--foregroundColor), 0.5); + } + } + } + } - outline-style: none; - box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); + .textpad-content { + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + inline-size: 100%; + display: block; + font-family: system-ui; + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + border-style: none; + outline-style: none; + background-color: transparent; + resize: none; + } } - .textpad-toolbar { - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; + .toolbar-context { + position: relative; + display: inline-block; + + summary { + list-style: none; + cursor: pointer; + + &::-webkit-details-marker { + display: none; + } + + svg { + display: inline-block; + inline-size: 1.25em; + block-size: 1.0em; + fill: currentColor; + font-size: 1.0rem; + line-height: 1.5; + vertical-align: middle; + pointer-events: none; + } + } - .textpad-revision { - margin-inline: unset !important; - margin-block: unset !important; + ul { + position: absolute; + z-index: 1; + margin-block: 0.5rem; + padding-block: 0.5rem; + padding-inline: 0.5rem; display: flex; flex-direction: row; align-items: center; - justify-content: flex-start; - gap: 0.75rem; + inline-size: max-content; + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--systemBorderColor), 1.0); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); list-style: none; li { position: relative; - } - - .toolbar-tool { - color: hsla(var(--foregroundColor), 1.0); - &.state\:disabled { - color: hsla(var(--foregroundColor), 0.5); + .toolbar-tool { + color: hsla(var(--foregroundColor), 1.0); } } } } - .textpad-content { - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - inline-size: 100%; - display: block; - font-family: system-ui; - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - border-style: none; - outline-style: none; - background-color: transparent; - resize: none; - } -} - -.toolbar-context { - position: relative; - display: inline-block; - - summary { - list-style: none; - cursor: pointer; - - &::-webkit-details-marker { + @media (min-width: 768px) { + .toolbar-context { display: none; } - - svg { - display: inline-block; - inline-size: 1.25em; - block-size: 1.0em; - fill: currentColor; - font-size: 1.0rem; - line-height: 1.5; - vertical-align: middle; - pointer-events: none; - } } - ul { - position: absolute; - z-index: 1; - margin-block: 0.5rem; - padding-block: 0.5rem; - padding-inline: 0.5rem; - display: flex; + .textpad-action { + margin-inline: unset !important; + margin-block: unset !important; + display: none; flex-direction: row; align-items: center; - inline-size: max-content; - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--systemBorderColor), 1.0); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + justify-content: flex-start; + gap: 0.75rem; list-style: none; li { position: relative; + } + } - .toolbar-tool { - color: hsla(var(--foregroundColor), 1.0); - } + @media (min-width: 768px) { + .textpad-action { + display: flex; } } -} -@media (min-width: 768px) { - .toolbar-context { + .tooltip { + position: absolute; + top: 100%; + z-index: 1; + padding-inline: 0.313rem; + padding-block: 0.625rem; display: none; + inline-size: max-content; + font-size: 14px; + text-align: center; + color: hsla(var(--whiteColor), 1.0); + border-radius: var(--borderRadius); + background-color: hsla(var(--blackColor), 1.0); } -} - -.textpad-action { - margin-inline: unset !important; - margin-block: unset !important; - display: none; - flex-direction: row; - align-items: center; - justify-content: flex-start; - gap: 0.75rem; - list-style: none; - - li { - position: relative; - } -} -@media (min-width: 768px) { - .textpad-action { - display: flex; - } -} - -.tooltip { - position: absolute; - top: 100%; - z-index: 1; - padding-inline: 0.313rem; - padding-block: 0.625rem; - display: none; - inline-size: max-content; - font-size: 14px; - text-align: center; - color: hsla(var(--whiteColor), 1.0); - border-radius: var(--borderRadius); - background-color: hsla(var(--blackColor), 1.0); -} - -.toolbar-tool { - display: inline-block; - inline-size: 32px; - block-size: 32px; - color: hsla(var(--foregroundColor), 0.5); - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - border: unset; - border-radius: 0.3rem; - background-color: unset; - - > * { - pointer-events: none; - } + .toolbar-tool { + display: inline-block; + inline-size: 32px; + block-size: 32px; + color: hsla(var(--foregroundColor), 0.5); + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + border: unset; + border-radius: 0.3rem; + background-color: unset; + + > * { + pointer-events: none; + } - &:hover { - background-color: hsla(var(--systemBorderColor), 0.5); - } + &:hover { + background-color: hsla(var(--systemBorderColor), 0.5); + } - svg { - display: inline-block; - inline-size: 1.25em; - block-size: 1.0em; - fill: currentColor; - font-size: 1.0rem; - line-height: 1.5; - vertical-align: middle; - pointer-events: none; + svg { + display: inline-block; + inline-size: 1.25em; + block-size: 1.0em; + fill: currentColor; + font-size: 1.0rem; + line-height: 1.5; + vertical-align: middle; + pointer-events: none; + } } -} -.toolbar-tool:hover + .tooltip { - display: block; -} + .toolbar-tool:hover + .tooltip { + display: block; + } +} \ No newline at end of file diff --git a/Sources/HTMLKitComponents/Resources/css/globals.css b/Sources/HTMLKitComponents/Resources/css/globals.css index 612c21cc..f0a6db6b 100644 --- a/Sources/HTMLKitComponents/Resources/css/globals.css +++ b/Sources/HTMLKitComponents/Resources/css/globals.css @@ -2,1121 +2,57 @@ * The rulesets for the globals. */ -:root { - --fontFamily: system-ui, sans-serif; - --redColor: 0, 64%, 55%; - --orangeColor: 22, 78%, 55%; - --yellowColor: 43, 89%, 70%; - --greenColor: 123, 35%, 51%; - --mintColor: 124, 63%, 74%; - --tealColor: 160, 51%, 49%; - --cyanColor: 185, 57%, 50%; - --blueColor: 205, 65%, 55%; - --indigoColor: 227, 50%, 59%; - --purpleColor: 262, 43%, 51%; - --pinkColor: 330, 66%, 57%; - --brownColor: 23, 50%, 50%; - --silverColor: 0, 0%, 97%; - --grayColor: 0, 0%, 62%; - --blackColor: 0, 0%, 0%; - --whiteColor: 0, 0%, 100%; - --accentColor: 210, 100%, 50%; - --systemBackgroundColor: 0, 0%, 100%; - --systemBorderColor: 210, 14%, 89%; - --systemTextColor: 0, 0%, 0%; - --systemFocusColor: 210, 100%, 50%; -} - -.scheme\:dark { - --redColor: 0, 74%, 45%; - --orangeColor: 22, 88%, 45%; - --yellowColor: 43, 99%, 60%; - --greenColor: 123, 45%, 41%; - --mintColor: 124, 73%, 64%; - --tealColor: 160, 61%, 39%,; - --cyanColor: 185, 67%, 40%; - --blueColor: 205, 75%, 45%; - --indigoColor: 227, 60%, 49%; - --purpleColor: 262, 53%, 41%; - --pinkColor: 330, 76%, 47%; - --brownColor: 23, 60%, 40%; - --silverColor: 240, 4%, 85%; - --grayColor: 25, 4%, 47%; - --blackColor: 30, 7%, 23%; - --whiteColor: 0, 0%, 100%; - --accentColor: 210, 100%, 50%; - --systemBackgroundColor: 210, 11%, 15%; - --systemBorderColor: 210, 9%, 31%; - --systemTextColor: 0, 0%, 100%; - --systemFocusColor: 210, 100%, 50%; - - color-scheme: dark; -} - -*, -*::before, -*::after { - box-sizing: border-box; -} - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre, -body { - margin-inline: 0; - margin-block: 0; -} - -ol, -ul { - margin-inline: 0; - margin-block: 0; - padding-inline: 0; - padding-block: 0; -} - -img, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - vertical-align: middle; -} - -img, -video { - max-width: 100%; - block-size: auto; -} - -@media (prefers-reduced-motion: no-preference) { - html:focus-within { - scroll-behavior: smooth; +@layer htmlkit { + @layer resets, components, utilities; + + :root { + --fontFamily: system-ui, sans-serif; + --redColor: 0, 64%, 55%; + --orangeColor: 22, 78%, 55%; + --yellowColor: 43, 89%, 70%; + --greenColor: 123, 35%, 51%; + --mintColor: 124, 63%, 74%; + --tealColor: 160, 51%, 49%; + --cyanColor: 185, 57%, 50%; + --blueColor: 205, 65%, 55%; + --indigoColor: 227, 50%, 59%; + --purpleColor: 262, 43%, 51%; + --pinkColor: 330, 66%, 57%; + --brownColor: 23, 50%, 50%; + --silverColor: 0, 0%, 97%; + --grayColor: 0, 0%, 62%; + --blackColor: 0, 0%, 0%; + --whiteColor: 0, 0%, 100%; + --accentColor: 210, 100%, 50%; + --systemBackgroundColor: 0, 0%, 100%; + --systemBorderColor: 210, 14%, 89%; + --systemTextColor: 0, 0%, 0%; + --systemFocusColor: 210, 100%, 50%; } -} - -/* - states - */ - -.state\:disabled { - pointer-events: none !important; -} - -.state\:hidden { - visibility: hidden !important; -} - -.state\:visible { - visibility: visible !important; -} - -.state\:attached { - display: block !important; -} - -.state\:detached { - display: none !important; -} - -/* - foreground - */ - -.foreground\:black { - --foregroundColor: var(--blackColor) !important; -} - -.foreground\:blue { - --foregroundColor: var(--blueColor) !important; -} - -.foreground\:brown { - --foregroundColor: var(--brownColor) !important; -} - -.foreground\:cyan { - --foregroundColor: var(--cyanColor) !important; -} - -.foreground\:gray { - --foregroundColor: var(--grayColor) !important; -} - -.foreground\:green { - --foregroundColor: var(--greenColor) !important; -} - -.foreground\:indigo { - --foregroundColor: var(--indigoColor) !important; -} - -.foreground\:mint { - --foregroundColor: var(--mintColor) !important; -} - -.foreground\:orange { - --foregroundColor: var(--orangeColor) !important; -} - -.foreground\:pink { - --foregroundColor: var(--pinkColor) !important; -} - -.foreground\:purple { - --foregroundColor: var(--purpleColor) !important; -} - -.foreground\:red { - --foregroundColor: var(--redColor) !important; -} - -.foreground\:teal { - --foregroundColor: var(--tealColor) !important; -} - -.foreground\:white { - --foregroundColor: var(--whiteColor) !important; -} - -.foreground\:yellow { - --foregroundColor: var(--yellowColor) !important; -} - -.foreground\:silver { - --foregroundColor: var(--silverColor) !important; -} - -.foreground\:accent { - --foregroundColor: var(--accentColor) !important; -} - -.foreground\:system { - --foregroundColor: var(--systemTextColor) !important; -} - -/* - borders - */ - -.border\:black { - --borderColor: var(--blackColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:blue { - --borderColor: var(--blueColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:brown { - --borderColor: var(--brownColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:cyan { - --borderColor: var(--cyanColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:gray { - --borderColor: var(--grayColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:green { - --borderColor: var(--greenColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:indigo { - --borderColor: var(--indigoColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:mint { - --borderColor: var(--mintColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:orange { - --borderColor: var(--orangeColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:pink { - --borderColor: var(--pinkColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:purple { - --borderColor: var(--purpleColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:red { - --borderColor: var(--redColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:teal { - --borderColor: var(--tealColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:white { - --borderColor: var(--whiteColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:yellow { - --borderColor: var(--yellowColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:silver { - --borderColor: var(--silverColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:accent { - --borderColor: var(--accentColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:system { - --borderColor: var(--systemBorderColor) !important; - --borderOpacity: 1.0 !important; -} - -.border\:transparent { - --borderOpacity: 0.0 !important; -} - -.border\:small { - --borderWidth: 1px; -} - -.border\:medium { - --borderWidth: 2px; -} - -.border\:large { - --borderWidth: 3px; -} - -/* - backgrounds - */ - -.background\:black { - --backgroundColor: var(--blackColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:blue { - --backgroundColor: var(--blueColor) !important; - --backgroundOpacity: 1.0 !important; -} -.background\:brown { - --backgroundColor: var(--brownColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:cyan { - --backgroundColor: var(--cyanColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:gray { - --backgroundColor: var(--grayColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:green { - --backgroundColor: var(--greenColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:indigo { - --backgroundColor: var(--indigoColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:mint { - --backgroundColor: var(--mintColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:orange { - --backgroundColor: var(--orangeColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:pink { - --backgroundColor: var(--pinkColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:purple { - --backgroundColor: var(--purpleColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:red { - --backgroundColor: var(--redColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:teal { - --backgroundColor: var(--tealColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:white { - --backgroundColor: var(--whiteColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:yellow { - --backgroundColor: var(--yellowColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:silver { - --backgroundColor: var(--silverColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:accent { - --backgroundColor: var(--accentColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:system { - --backgroundColor: var(--systemBackgroundColor) !important; - --backgroundOpacity: 1.0 !important; -} - -.background\:transparent { - --backgroundOpacity: 0.0 !important; -} - -/* - focus - */ - -.focus\:black { - --focusColor: var(--blackColor) !important; -} - -.focus\:blue { - --focusColor: var(--blueColor) !important; -} - -.focus\:brown { - --focusColor: var(--brownColor) !important; -} - -.focus\:cyan { - --focusColor: var(--cyanColor) !important; -} - -.focus\:gray { - --focusColor: var(--grayColor) !important; -} - -.focus\:green { - --focusColor: var(--greenColor) !important; -} - -.focus\:indigo { - --focusColor: var(--indigoColor) !important; -} - -.focus\:mint { - --focusColor: var(--mintColor) !important; -} - -.focus\:orange { - --focusColor: var(--orangeColor) !important; -} - -.focus\:pink { - --focusColor: var(--pinkColor) !important; -} - -.focus\:purple { - --focusColor: var(--purpleColor) !important; -} - -.focus\:red { - --focusColor: var(--redColor) !important; -} - -.focus\:teal { - --focusColor: var(--tealColor) !important; -} - -.focus\:white { - --focusColor: var(--whiteColor) !important; -} - -.focus\:yellow { - --focusColor: var(--yellowColor) !important; -} - -.focus\:silver { - --focusColor: var(--silverColor) !important; -} - -.focus\:accent { - --focusColor: var(--accentColor) !important; -} - -.focus\:system { - --focusColor: var(--systemFocusColor) !important; -} - -/* - padding - */ - -.padding\:large { - --paddingInlineStart: 2.25rem !important; - --paddingInlineEnd: 2.25rem !important; - --paddingBlockStart: 2.25rem !important; - --paddingBlockEnd: 2.25rem !important; -} - -.padding\:medium { - --paddingInlineStart: 1.5rem !important; - --paddingInlineEnd: 1.5rem !important; - --paddingBlockStart: 1.5rem !important; - --paddingBlockEnd: 1.5rem !important; -} - -.padding\:small { - --paddingInlineStart: 1rem !important; - --paddingInlineEnd: 1rem !important; - --paddingBlockStart: 1rem !important; - --paddingBlockEnd: 1rem !important; -} - -.padding-inline\:large { - --paddingInlineStart: 2.25rem !important; - --paddingInlineEnd: 2.25rem !important; -} - -.padding-inline\:medium { - --paddingInlineStart: 1.5rem !important; - --paddingInlineEnd: 1.5rem !important; -} - -.padding-inline\:small { - --paddingInlineStart: 1rem !important; - --paddingInlineEnd: 1rem !important; -} - -.padding-block\:large { - --paddingBlockStart: 2.25rem !important; - --paddingBlockEnd: 2.25rem !important; -} - -.padding-block\:medium { - --paddingBlockStart: 1.5rem !important; - --paddingBlockEnd: 1.5rem !important; -} - -.padding-block\:small { - --paddingBlockStart: 1rem !important; - --paddingBlockEnd: 1rem !important; -} - -.padding-top\:large { - --paddingBlockStart: 2.25rem !important; -} - -.padding-top\:medium { - --paddingBlockStart: 1.5rem !important; -} - -.padding-top\:small { - --paddingBlockStart: 1rem !important; -} - -.padding-bottom\:large { - --paddingBlockEnd: 2.25rem !important; -} - -.padding-bottom\:medium { - --paddingBlockEnd: 1.5rem !important; -} - -.padding-bottom\:small { - --paddingBlockEnd: 1rem !important; -} - -.padding-leading\:large { - --paddingInlineStart: 2.25rem !important; -} - -.padding-leading\:medium { - --paddingInlineStart: 1.5rem !important; -} - -.padding-leading\:small { - --paddingInlineStart: 1rem !important; -} - -.padding-trailing\:large { - --paddingInlineEnd: 2.25rem !important; -} - -.padding-trailing\:medium { - --paddingInlineEnd: 1.5rem !important; -} - -.padding-trailing\:small { - --paddingInlineEnd: 1rem !important; -} - -/* - margin - */ - -.margin\:auto { - margin-inline: auto !important; - margin-block: auto !important; -} - -.margin\:large { - margin-inline: 2.25rem !important; - margin-block: 2.25rem !important; -} - -.margin\:medium { - margin-inline: 1.5rem !important; - margin-block: 1.5rem !important; -} - -.margin\:small { - margin-inline: 1rem !important; - margin-block: 1rem !important; -} - -.margin-inline\:auto { - margin-inline-start: auto !important; - margin-inline-end: auto !important; -} - -.margin-inline\:large { - margin-inline-start: 2.25rem !important; - margin-inline-end: 2.25rem !important; -} - -.margin-inline\:medium { - margin-inline-start: 1.5rem !important; - margin-inline-end: 1.5rem !important; -} - -.margin-inline\:small { - margin-inline-start: 1rem !important; - margin-inline-end: 1rem !important; -} - -.margin-block\:auto { - margin-block-start: auto !important; - margin-block-end: auto !important; -} - -.margin-block\:large { - margin-block-start: 2.25rem !important; - margin-block-end: 2.25rem !important; -} - -.margin-block\:medium { - margin-block-start: 1.5rem !important; - margin-block-end: 1.5rem !important; -} - -.margin-block\:small { - margin-block-start: 1rem !important; - margin-block-end: 1rem !important; -} - -.margin-top\:auto { - margin-block-start: auto !important; -} - -.margin-top\:large { - margin-block-start: 2.25rem !important; -} - -.margin-top\:medium { - margin-block-start: 1.5rem !important; -} - -.margin-top\:small { - margin-block-start: 1rem !important; -} - -.margin-bottom\:auto { - margin-block-end: auto !important; -} - -.margin-bottom\:large { - margin-block-end: 2.25rem !important; -} - -.margin-bottom\:medium { - margin-block-end: 1.5rem !important; -} - -.margin-bottom\:small { - margin-block-end: 1rem !important; -} - -.margin-leading\:auto { - margin-inline-start: auto !important; -} - -.margin-leading\:large { - margin-inline-start: 2.25rem !important; -} - -.margin-leading\:medium { - margin-inline-start: 1.5rem !important; -} - -.margin-leading\:small { - margin-inline-start: 1rem !important; -} - -.margin-trailing\:auto { - margin-inline-end: auto !important; -} - -.margin-trailing\:large { - margin-inline-end: 2.25rem !important; -} - -.margin-trailing\:medium { - margin-inline-end: 1.5rem !important; -} - -.margin-trailing\:small { - margin-inline-end: 1rem !important; -} - -/* - shape - */ - -.shape\:smallrounded { - --borderRadius: 0.313rem !important; -} - -.shape\:largerounded { - --borderRadius: 0.625rem !important; -} - -.shape\:fullrounded { - --borderRadius: 1.563rem !important; -} - -/* - sizes - */ - -.width\:one { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - inline-size: 8.3333333333%; -} - -.width\:two { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - inline-size: 16.6666666667%; -} - -.width\:three { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - inline-size: 25%; -} - -.width\:four { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - inline-size: 33.3333333333%; -} - -.width\:five { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - inline-size: 41.6666666667%; -} - -.width\:six { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - inline-size: 50%; -} - -.width\:seven { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - inline-size: 58.3333333333%; -} - -.width\:eight { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - inline-size: 66.6666666667%; -} - -.width\:nine { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - inline-size: 75%; -} - -.width\:ten { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - inline-size: 83.3333333333%; -} - -.width\:eleven { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - inline-size: 91.6666666667%; -} - -.width\:twelve { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - inline-size: 100%; -} - -.width\:minimum { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - inline-size: auto; -} - -.width\:maximum { - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - inline-size: max-content; -} - -.height\:one { - block-size: 8.3333333333%; -} - -.height\:two { - block-size: 16.6666666667%; -} - -.height\:three { - block-size: 25%; -} - -.height\:four { - block-size: 33.3333333333%; -} - -.height\:five { - block-size: 41.6666666667%; -} - -.height\:six { - block-size: 50%; -} - -.height\:seven { - block-size: 58.3333333333%; -} - -.height\:eight { - block-size: 66.6666666667%; -} - -.height\:nine { - block-size: 75%; -} - -.height\:ten { - block-size: 83.3333333333%; -} - -.height\:eleven { - block-size: 91.6666666667%; -} - -.height\:twelve { - block-size: 100%; -} - -.height\:minimum { - block-size: auto; -} - -.height\:maximum { - block-size: max-content; -} - -.blur\:light { - --blurLevel: 4px; -} - -.blur\:medium { - --blurLevel: 8px; -} - -.blur\:strong { - --blurLevel: 12px; -} - -.grayscale\:light { - --grayscaleDepth: 25%; -} - -.grayscale\:neutral { - --grayscaleDepth: 50%; -} - -.grayscale\:dark { - --grayscaleDepth: 100%; -} - -.brightness\:low { - --brightnessLevel: 0.5; -} - -.brightness\:medium { - --brightnessLevel: 1.5; -} - -.brightness\:high { - --brightnessLevel: 2.0; -} - -.saturation\:low { - --saturationLevel: 0.5; -} - -.saturation\:medium { - --saturationLevel: 1.5; -} - -.saturation\:high{ - --saturationLevel: 2.0; -} - -.contrast\:low { - --contrastLevel: 0.5; -} - -.contrast\:medium { - --contrastLevel: 1.5; -} - -.contrast\:high { - --contrastLevel: 2.0; -} - -/* - shadow - */ - -.shadow\:black { - --shadowColor: var(--blackColor) !important; -} - -.shadow\:blue { - --shadowColor: var(--blueColor) !important; -} - -.shadow\:brown { - --shadowColor: var(--brownColor) !important; -} - -.shadow\:cyan { - --shadowColor: var(--cyanColor) !important; -} - -.shadow\:gray { - --shadowColor: var(--grayColor) !important; -} - -.shadow\:green { - --shadowColor: var(--greenColor) !important; -} - -.shadow\:indigo { - --shadowColor: var(--indigoColor) !important; -} - -.shadow\:mint { - --shadowColor: var(--mintColor) !important; -} - -.shadow\:orange { - --shadowColor: var(--orangeColor) !important; -} - -.shadow\:pink { - --shadowColor: var(--pinkColor) !important; -} - -.shadow\:purple { - --shadowColor: var(--purpleColor) !important; -} - -.shadow\:red { - --shadowColor: var(--redColor) !important; -} - -.shadow\:teal { - --shadowColor: var(--tealColor) !important; -} - -.shadow\:white { - --shadowColor: var(--whiteColor) !important; -} - -.shadow\:yellow { - --shadowColor: var(--yellowColor) !important; -} - -.shadow\:silver { - --shadowColor: var(--silverColor) !important; -} - -.overflow\:clip { - overflow: hidden; -} - -/* - tint - */ - -.tint\:black { - --tintColor: var(--blackColor) !important; -} - -.tint\:blue { - --tintColor: var(--blueColor) !important; -} - -.tint\:brown { - --tintColor: var(--brownColor) !important; -} - -.tint\:cyan { - --tintColor: var(--cyanColor) !important; -} - -.tint\:gray { - --tintColor: var(--grayColor) !important; -} - -.tint\:green { - --tintColor: var(--greenColor) !important; -} - -.tint\:indigo { - --tintColor: var(--indigoColor) !important; -} - -.tint\:mint { - --tintColor: var(--mintColor) !important; -} - -.tint\:orange { - --tintColor: var(--orangeColor) !important; -} - -.tint\:pink { - --tintColor: var(--pinkColor) !important; -} - -.tint\:purple { - --tintColor: var(--purpleColor) !important; -} - -.tint\:red { - --tintColor: var(--redColor) !important; -} - -.tint\:teal { - --tintColor: var(--tealColor) !important; -} - -.tint\:white { - --tintColor: var(--whiteColor) !important; -} - -.tint\:yellow { - --tintColor: var(--yellowColor) !important; -} - -.tint\:silver { - --tintColor: var(--silverColor) !important; -} - -.tint\:accent { - --tintColor: var(--accentColor) !important; -} - -.zindex\:one { - z-index: 1; -} - -.zindex\:two { - z-index: 2; -} - -.zindex\:three { - z-index: 3; -} - -.zindex\:four { - z-index: 4; -} - -.zindex\:five { - z-index: 5; + .scheme\:dark { + --redColor: 0, 74%, 45%; + --orangeColor: 22, 88%, 45%; + --yellowColor: 43, 99%, 60%; + --greenColor: 123, 45%, 41%; + --mintColor: 124, 73%, 64%; + --tealColor: 160, 61%, 39%,; + --cyanColor: 185, 67%, 40%; + --blueColor: 205, 75%, 45%; + --indigoColor: 227, 60%, 49%; + --purpleColor: 262, 53%, 41%; + --pinkColor: 330, 76%, 47%; + --brownColor: 23, 60%, 40%; + --silverColor: 240, 4%, 85%; + --grayColor: 25, 4%, 47%; + --blackColor: 30, 7%, 23%; + --whiteColor: 0, 0%, 100%; + --accentColor: 210, 100%, 50%; + --systemBackgroundColor: 210, 11%, 15%; + --systemBorderColor: 210, 9%, 31%; + --systemTextColor: 0, 0%, 100%; + --systemFocusColor: 210, 100%, 50%; + + color-scheme: dark; + } } diff --git a/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css b/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css index 1f9f955b..fa4d8d05 100644 --- a/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css +++ b/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css @@ -2,31 +2,44 @@ * The rulesets for the grouping component. */ -.grouping { - display: inline-flex; - flex-direction: row; - align-items: center; +@layer htmlkit.components { + .grouping { + &:has(.button + .button) { + display: inline-flex; + flex-direction: row; + align-items: center; - .button { - &:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right: 0; - } + .button { + &:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0; + } - &:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left: 0; + &:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left: 0; + } + } } - } - .image { - flex-direction: row-reverse; - justify-content: start; + &:has(.image + .image) { + display: inline-flex; + flex-direction: row-reverse; + align-items: center; + justify-content: start; + + .image { + &:not(:first-child) { + margin-right: -10%; + } + } + } - &:not(:first-child) { - margin-right: -10%; + &:has(.disclosure + .disclosure) { + display: flex; + flex-direction: column; } } } diff --git a/Sources/HTMLKitComponents/Resources/css/layout/grid.css b/Sources/HTMLKitComponents/Resources/css/layout/grid.css index 09e771c1..d2410a6a 100644 --- a/Sources/HTMLKitComponents/Resources/css/layout/grid.css +++ b/Sources/HTMLKitComponents/Resources/css/layout/grid.css @@ -2,104 +2,106 @@ * The rulesets for the grid component. */ -.grid { - --paddingInlineStart: 0; - --paddingInlineEnd: 0; - --paddingBlockStart: 0; - --paddingBlockEnd: 0; - --backgroundColor: 0, 0%, 0%; - --backgroundOpacity: 0.0; - - position: relative; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - inline-size: 100%; - display: grid; - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - - &.ratio\:fit { - grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); - } - - &.ratio\:half { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - &.ratio\:third { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - - &.ratio\:quarter { - grid-template-columns: repeat(4, minmax(0, 1fr)); - } - - &.ratio\:fifth { - grid-template-columns: repeat(5, minmax(0, 1fr)); - } - - &.ratio\:sixth { - grid-template-columns: repeat(6, minmax(0, 1fr)); - } - - &.vertical-spacing\:around { - align-content: space-around; - } - - &.vertical-spacing\:between { - align-content: space-between; - } - - &.vertical-spacing\:evenly { - align-content: space-evenly; - } - - &.vertical-spacing\:large { - row-gap: 2.25rem; - } - - &.vertical-spacing\:medium { - row-gap: 1.5rem; - } - - &.vertical-spacing\:small { - row-gap: 1rem; - } - - &.horizontal-spacing\:around { - justify-content: space-around; - } - - &.horizontal-spacing\:between { - justify-content: space-between; - } - - &.horizontal-spacing\:evenly { - justify-content: space-evenly; - } - - &.horizontal-spacing\:large { - column-gap: 2.25rem; - } - - &.horizontal-spacing\:medium { - column-gap: 1.5rem; - } - - &.horizontal-spacing\:small { - column-gap: 1rem; - } - - > .frame-alignment\:leading { - align-self: start; - } - - > .frame-alignment\:center { - align-self: center; - } - - > .frame-alignment\:trailing { - align-self: end; - } -} +@layer htmlkit.components { + .grid { + --paddingInlineStart: 0; + --paddingInlineEnd: 0; + --paddingBlockStart: 0; + --paddingBlockEnd: 0; + --backgroundColor: 0, 0%, 0%; + --backgroundOpacity: 0.0; + + position: relative; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + inline-size: 100%; + display: grid; + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + + &.ratio\:fit { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + + &.ratio\:half { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + &.ratio\:third { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + &.ratio\:quarter { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + &.ratio\:fifth { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + &.ratio\:sixth { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + &.vertical-spacing\:around { + align-content: space-around; + } + + &.vertical-spacing\:between { + align-content: space-between; + } + + &.vertical-spacing\:evenly { + align-content: space-evenly; + } + + &.vertical-spacing\:large { + row-gap: 2.25rem; + } + + &.vertical-spacing\:medium { + row-gap: 1.5rem; + } + + &.vertical-spacing\:small { + row-gap: 1rem; + } + + &.horizontal-spacing\:around { + justify-content: space-around; + } + + &.horizontal-spacing\:between { + justify-content: space-between; + } + + &.horizontal-spacing\:evenly { + justify-content: space-evenly; + } + + &.horizontal-spacing\:large { + column-gap: 2.25rem; + } + + &.horizontal-spacing\:medium { + column-gap: 1.5rem; + } + + &.horizontal-spacing\:small { + column-gap: 1rem; + } + + > .frame-alignment\:leading { + align-self: start; + } + + > .frame-alignment\:center { + align-self: center; + } + + > .frame-alignment\:trailing { + align-self: end; + } + } +} \ No newline at end of file diff --git a/Sources/HTMLKitComponents/Resources/css/layout/hstack.css b/Sources/HTMLKitComponents/Resources/css/layout/hstack.css new file mode 100644 index 00000000..a6f35e02 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/css/layout/hstack.css @@ -0,0 +1,102 @@ +/** + * The rulesets for the horizontal stack component. + */ + +@layer htmlkit.components { + .hstack { + --paddingInlineStart: 0; + --paddingInlineEnd: 0; + --paddingBlockStart: 0; + --paddingBlockEnd: 0; + --backgroundColor: 0, 0%, 0%; + --backgroundOpacity: 0.0; + + position: relative; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + inline-size: 100%; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + + &.vertical-alignment\:top { + align-items: flex-start; + } + + &.vertical-alignment\:center { + align-items: center; + } + + &.vertical-alignment\:bottom { + align-items: flex-end; + } + + &.vertical-alignment\:baseline { + align-items: baseline; + } + + &.horizontal-alignment\:leading { + margin-inline-end: auto !important; + } + + &.horizontal-alignment\:center { + margin-inline-start: auto !important; + margin-inline-end: auto !important; + } + + &.horizontal-alignment\:trailing { + margin-inline-start: auto !important; + } + + &.spacing\:around { + justify-content: space-around; + } + + &.spacing\:between { + justify-content: space-between; + } + + &.spacing\:large { + gap: 2.25rem; + } + + &.spacing\:medium { + gap: 1.5rem; + } + + &.spacing\:small { + gap: 1rem; + } + + &.spacing\:evenly { + justify-content: space-evenly; + } + + &.shadow\:small { + box-shadow: 0 1px 1px -1px hsla(var(--shadowColor), 0.3), 0 2px 2px -2px hsla(var(--shadowColor), 0.3); + } + + &.shadow\:medium { + box-shadow: 0 3px 3px -3px hsla(var(--shadowColor), 0.3), 0 4px 4px -4px hsla(var(--shadowColor), 0.3); + } + + &.shadow\:large { + box-shadow: 0 5px 5px -5px hsla(var(--shadowColor), 0.3), 0 6px 6px -6px hsla(var(--shadowColor), 0.3); + } + + > .frame-alignment\:leading { + align-self: flex-start; + } + + > .frame-alignment\:center { + align-self: center; + } + + > .frame-alignment\:trailing { + align-self: flex-end; + } + } +} diff --git a/Sources/HTMLKitComponents/Resources/css/layout/list.css b/Sources/HTMLKitComponents/Resources/css/layout/list.css index 39ccba7c..b917e65e 100644 --- a/Sources/HTMLKitComponents/Resources/css/layout/list.css +++ b/Sources/HTMLKitComponents/Resources/css/layout/list.css @@ -2,78 +2,80 @@ * The rulesets for the list component. */ -.list { - --paddingBlockStart: 0; - --paddingBlockEnd: 0; - --paddingInlineStart: 0; - --paddingInlineEnd: 0; - --foregroundColor: var(--systemTextColor); - --borderColor: var(--systemBorderColor); - --borderOpacity: 1.0; - --backgroundColor: 0, 0%, 0%; - --backgroundOpacity: 0.0; - - display: flex; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - list-style-type: none; - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); +@layer htmlkit.components { + .list { + --paddingBlockStart: 0; + --paddingBlockEnd: 0; + --paddingInlineStart: 0; + --paddingInlineEnd: 0; + --foregroundColor: var(--systemTextColor); + --borderColor: var(--systemBorderColor); + --borderOpacity: 1.0; + --backgroundColor: 0, 0%, 0%; + --backgroundOpacity: 0.0; + + display: flex; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + list-style-type: none; + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - &.direction\:horizontal { - flex-direction: row; - align-items: center; - justify-content: center; + &.direction\:horizontal { + flex-direction: row; + align-items: center; + justify-content: center; - &.style\:listgroup { - .list-row { - &:not(:last-child) { - border-right: 1px; - border-right-style: solid; - border-right-color: hsla(var(--borderColor), var(--borderOpacity)); + &.style\:listgroup { + .list-row { + &:not(:last-child) { + border-right: 1px; + border-right-style: solid; + border-right-color: hsla(var(--borderColor), var(--borderOpacity)); + } } } } - } - &.direction\:vertical { - flex-direction: column; + &.direction\:vertical { + flex-direction: column; - &.style\:listgroup { - .list-row { - &:not(:last-child) { - border-bottom: 1px; - border-bottom-style: solid; - border-bottom-color: hsla(var(--borderColor), var(--borderOpacity)); + &.style\:listgroup { + .list-row { + &:not(:last-child) { + border-bottom: 1px; + border-bottom-style: solid; + border-bottom-color: hsla(var(--borderColor), var(--borderOpacity)); + } } } } - } - &.spacing\:large { - gap: 2.25rem; - } + &.spacing\:large { + gap: 2.25rem; + } - &.spacing\:medium { - gap: 1.5rem; - } + &.spacing\:medium { + gap: 1.5rem; + } - &.spacing\:small { - gap: 1rem; - } + &.spacing\:small { + gap: 1rem; + } - .list-row { - --paddingBlockStart: 0; - --paddingBlockEnd: 0; - --paddingInlineStart: 0; - --paddingInlineEnd: 0; + .list-row { + --paddingBlockStart: 0; + --paddingBlockEnd: 0; + --paddingInlineStart: 0; + --paddingInlineEnd: 0; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - display: flex; - flex-direction: column; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + display: flex; + flex-direction: column; + } } } diff --git a/Sources/HTMLKitComponents/Resources/css/layout/stack.css b/Sources/HTMLKitComponents/Resources/css/layout/stack.css deleted file mode 100644 index 2cb7fc71..00000000 --- a/Sources/HTMLKitComponents/Resources/css/layout/stack.css +++ /dev/null @@ -1,224 +0,0 @@ -/** - * The rulesets for the horizontal stack component. - */ - -.hstack { - --paddingInlineStart: 0; - --paddingInlineEnd: 0; - --paddingBlockStart: 0; - --paddingBlockEnd: 0; - --backgroundColor: 0, 0%, 0%; - --backgroundOpacity: 0.0; - - position: relative; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - inline-size: 100%; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - - &.vertical-alignment\:top { - align-items: flex-start; - } - - &.vertical-alignment\:center { - align-items: center; - } - - &.vertical-alignment\:bottom { - align-items: flex-end; - } - - &.vertical-alignment\:baseline { - align-items: baseline; - } - - &.horizontal-alignment\:leading { - margin-inline-end: auto !important; - } - - &.horizontal-alignment\:center { - margin-inline-start: auto !important; - margin-inline-end: auto !important; - } - - &.horizontal-alignment\:trailing { - margin-inline-start: auto !important; - } - - &.spacing\:around { - justify-content: space-around; - } - - &.spacing\:between { - justify-content: space-between; - } - - &.spacing\:large { - gap: 2.25rem; - } - - &.spacing\:medium { - gap: 1.5rem; - } - - &.spacing\:small { - gap: 1rem; - } - - &.spacing\:evenly { - justify-content: space-evenly; - } - - &.shadow\:small { - box-shadow: 0 1px 1px -1px hsla(var(--shadowColor), 0.3), 0 2px 2px -2px hsla(var(--shadowColor), 0.3); - } - - &.shadow\:medium { - box-shadow: 0 3px 3px -3px hsla(var(--shadowColor), 0.3), 0 4px 4px -4px hsla(var(--shadowColor), 0.3); - } - - &.shadow\:large { - box-shadow: 0 5px 5px -5px hsla(var(--shadowColor), 0.3), 0 6px 6px -6px hsla(var(--shadowColor), 0.3); - } - - > .frame-alignment\:leading { - align-self: flex-start; - } - - > .frame-alignment\:center { - align-self: center; - } - - > .frame-alignment\:trailing { - align-self: flex-end; - } -} - -/** - * The rulesets for the vertical stack component. - */ - -.vstack { - --paddingInlineStart: 0; - --paddingInlineEnd: 0; - --paddingBlockStart: 0; - --paddingBlockEnd: 0; - --backgroundColor: 0, 0%, 0%; - --backgroundOpacity: 0.0; - - position: relative; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - inline-size: 100%; - display: flex; - flex-direction: column; - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - - &.horizontal-alignment\:leading { - align-items: flex-start; - } - - &.horizontal-alignment\:center { - align-items: center; - } - - &.horizontal-alignment\:trailing { - align-items: flex-end; - } - - &.spacing\:around { - justify-content: space-around; - } - - &.spacing\:between { - justify-content: space-between; - } - - &.spacing\:evenly { - justify-content: space-evenly; - } - - &.spacing\:large { - gap: 2.25rem; - } - - &.spacing\:medium { - gap: 1.5rem; - } - - &.spacing\:small { - gap: 1rem; - } - - &.shadow\:small { - box-shadow: 0 1px 1px -1px hsla(var(--shadowColor), 0.3), 0 2px 2px -2px hsla(var(--shadowColor), 0.3); - } - - &.shadow\:medium { - box-shadow: 0 3px 3px -3px hsla(var(--shadowColor), 0.3), 0 4px 4px -4px hsla(var(--shadowColor), 0.3); - } - - &.shadow\:large { - box-shadow: 0 5px 5px -5px hsla(var(--shadowColor), 0.3), 0 6px 6px -6px hsla(var(--shadowColor), 0.3); - } - - > .frame-alignment\:leading { - align-self: flex-start; - } - - > .frame-alignment\:center { - align-self: center; - } - - > .frame-alignment\:trailing { - align-self: flex-end; - } -} - -/** - * The rulesets for the overlay stack component. - */ - -.zstack { - --paddingInlineStart: 0; - --paddingInlineEnd: 0; - --paddingBlockStart: 0; - --paddingBlockEnd: 0; - --backgroundColor: 0, 0%, 0%; - --backgroundOpacity: 0.0; - - position: relative; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - display: grid; - grid-template-rows: minmax(0, 1fr); - grid-template-columns: 1fr; - place-items: center; - place-content: center; - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - - &.shadow\:small { - box-shadow: 0 1px 1px -1px hsla(var(--shadowColor), 0.3), 0 2px 2px -2px hsla(var(--shadowColor), 0.3); - } - - &.shadow\:medium { - box-shadow: 0 3px 3px -3px hsla(var(--shadowColor), 0.3), 0 4px 4px -4px hsla(var(--shadowColor), 0.3); - } - - &.shadow\:large { - box-shadow: 0 5px 5px -5px hsla(var(--shadowColor), 0.3), 0 6px 6px -6px hsla(var(--shadowColor), 0.3); - } - - > * { - grid-area: 1 / 1; - } -} diff --git a/Sources/HTMLKitComponents/Resources/css/layout/vstack.css b/Sources/HTMLKitComponents/Resources/css/layout/vstack.css new file mode 100644 index 00000000..54f71a2c --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/css/layout/vstack.css @@ -0,0 +1,84 @@ +/** + * The rulesets for the vertical stack component. + */ + +@layer htmlkit.components { + .vstack { + --paddingInlineStart: 0; + --paddingInlineEnd: 0; + --paddingBlockStart: 0; + --paddingBlockEnd: 0; + --backgroundColor: 0, 0%, 0%; + --backgroundOpacity: 0.0; + + position: relative; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + inline-size: 100%; + display: flex; + flex-direction: column; + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + + &.horizontal-alignment\:leading { + align-items: flex-start; + } + + &.horizontal-alignment\:center { + align-items: center; + } + + &.horizontal-alignment\:trailing { + align-items: flex-end; + } + + &.spacing\:around { + justify-content: space-around; + } + + &.spacing\:between { + justify-content: space-between; + } + + &.spacing\:evenly { + justify-content: space-evenly; + } + + &.spacing\:large { + gap: 2.25rem; + } + + &.spacing\:medium { + gap: 1.5rem; + } + + &.spacing\:small { + gap: 1rem; + } + + &.shadow\:small { + box-shadow: 0 1px 1px -1px hsla(var(--shadowColor), 0.3), 0 2px 2px -2px hsla(var(--shadowColor), 0.3); + } + + &.shadow\:medium { + box-shadow: 0 3px 3px -3px hsla(var(--shadowColor), 0.3), 0 4px 4px -4px hsla(var(--shadowColor), 0.3); + } + + &.shadow\:large { + box-shadow: 0 5px 5px -5px hsla(var(--shadowColor), 0.3), 0 6px 6px -6px hsla(var(--shadowColor), 0.3); + } + + > .frame-alignment\:leading { + align-self: flex-start; + } + + > .frame-alignment\:center { + align-self: center; + } + + > .frame-alignment\:trailing { + align-self: flex-end; + } + } +} diff --git a/Sources/HTMLKitComponents/Resources/css/layout/zstack.css b/Sources/HTMLKitComponents/Resources/css/layout/zstack.css new file mode 100644 index 00000000..5b4eeb26 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/css/layout/zstack.css @@ -0,0 +1,42 @@ +/** + * The rulesets for the overlay stack component. + */ + +@layer htmlkit.components { + .zstack { + --paddingInlineStart: 0; + --paddingInlineEnd: 0; + --paddingBlockStart: 0; + --paddingBlockEnd: 0; + --backgroundColor: 0, 0%, 0%; + --backgroundOpacity: 0.0; + + position: relative; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + display: grid; + grid-template-rows: minmax(0, 1fr); + grid-template-columns: 1fr; + place-items: center; + place-content: center; + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + + &.shadow\:small { + box-shadow: 0 1px 1px -1px hsla(var(--shadowColor), 0.3), 0 2px 2px -2px hsla(var(--shadowColor), 0.3); + } + + &.shadow\:medium { + box-shadow: 0 3px 3px -3px hsla(var(--shadowColor), 0.3), 0 4px 4px -4px hsla(var(--shadowColor), 0.3); + } + + &.shadow\:large { + box-shadow: 0 5px 5px -5px hsla(var(--shadowColor), 0.3), 0 6px 6px -6px hsla(var(--shadowColor), 0.3); + } + + > * { + grid-area: 1 / 1; + } + } +} diff --git a/Sources/HTMLKitComponents/Resources/css/resets.css b/Sources/HTMLKitComponents/Resources/css/resets.css new file mode 100644 index 00000000..9d20d89f --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/css/resets.css @@ -0,0 +1,57 @@ +@layer htmlkit.resets { + *, + *::before, + *::after { + box-sizing: border-box; + } + + blockquote, + dl, + dd, + h1, + h2, + h3, + h4, + h5, + h6, + hr, + figure, + p, + pre, + body { + margin-inline: 0; + margin-block: 0; + } + + ol, + ul, + menu { + margin-inline: 0; + margin-block: 0; + padding-inline: 0; + padding-block: 0; + } + + img, + video, + canvas, + audio, + iframe, + embed, + object { + display: block; + vertical-align: middle; + } + + img, + video { + max-inline-size: 100%; + block-size: auto; + } + + @media (prefers-reduced-motion: no-preference) { + html:focus-within { + scroll-behavior: smooth; + } + } +} diff --git a/Sources/HTMLKitComponents/Resources/css/typography/link.css b/Sources/HTMLKitComponents/Resources/css/typography/link.css index f5cf4626..b85e9cf5 100644 --- a/Sources/HTMLKitComponents/Resources/css/typography/link.css +++ b/Sources/HTMLKitComponents/Resources/css/typography/link.css @@ -2,204 +2,206 @@ * The rulesets for the link component. */ -.link { - --fontSize: 1.0rem; - --lineHeight: 1.5; - --fontWeight: 400; - - display: inline-block; - font-family: var(--fontFamily); - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - text-decoration: none; - - &.size\:tiny { - --fontSize: 0.67rem; - --lineHeight: 1.25; - } - - &.size\:small { - --fontSize: 0.83rem; - --lineHeight: 1.25; - } - - &.size\:medium { - --fontSize: 1.17rem; - --lineHeight: 1.75; - } - - &.size\:large { - --fontSize: 1.5rem; - --lineHeight: 2.0; - } - - &.size\:extralarge { - --fontSize: 2rem; - --lineHeight: 2.25; - } - - &.weight\:thin { - --fontWeight: 100; - } - - &.weight\:ultralight { - --fontWeight: 200; - } - - &.weight\:light { - --fontWeight: 300; - } - - &.weight\:semibold { - --fontWeight: 500; - } - - &.weight\:semibold { - --fontWeight: 600; - } - - &.weight\:bold { - --fontWeight: 700; - } - - &.weight\:heavy { - --fontWeight: 900; - } - - &.weight\:black { - --fontWeight: 950; - } - - &.case\:uppercase { - text-transform: uppercase; - } - - &.case\:lowercase { - text-transform: lowercase; - } - - &.case\:capitalize { - text-transform: capitalize; - } - - &.decoration\:underline { - text-decoration: underline; - } - - &.decoration\:overline { - text-decoration: overline; - } - - &.decoration\:strikethrough { - text-decoration: line-through; - } - - &.decoration\:none { - text-decoration: none; - } - - &.style\:italic { - font-style: italic; - } - - &.style\:oblique { - font-style: oblique; - } - - &.style\:title { - --fontSize: 2.0rem; - --fontWeight: 400; - --lineHeight: 2.25; - } - - &.style\:headline { - --fontSize: 1.5rem; - --fontWeight: 600; - --lineHeight: 2.0; - } - - &.style\:subheadline { - --fontSize: 1.25rem; - --fontWeight: 400; - --lineHeight: 1.75; - } - - &.style\:body { - --fontSize: 1rem; - --fontWeight: 400; - --lineHeight: 1.5; - } - - &.style\:callout { - --fontSize: 1rem; - --fontWeight: 400; - --lineHeight: 1.5; - } - - &.style\:caption { - --fontSize: 0.8rem; - --fontWeight: 400; - --lineHeight: 1.5; - } - - &.style\:footnote { - --fontSize: 0.8rem; - --fontWeight: 400; - --lineHeight: 1.75; - --foregroundColor: var(--grayColor) !important; - } - - &.style\:code { - --fontFamily: monospace; +@layer htmlkit.components { + .link { --fontSize: 1.0rem; - --fontWeight: 400; --lineHeight: 1.5; - } - - &.height\:small { - --lineHeight: 1.0; - } - - &.height\:medium { - --lineHeight: 1.75; - } - - &.height\:large { - --lineHeight: 2.25; - } - - &.limit\:one { - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow: hidden; - } - - &.limit\:two { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - } - - &.limit\:three { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; - } - - &.font\:arial { - --fontFamily: Arial; - } + --fontWeight: 400; - &.font\:helvetica { - --fontFamily: Helvetica; - } + display: inline-block; + font-family: var(--fontFamily); + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + text-decoration: none; - &.font\:verdana { - --fontFamily: Verdana; + &.size\:tiny { + --fontSize: 0.67rem; + --lineHeight: 1.25; + } + + &.size\:small { + --fontSize: 0.83rem; + --lineHeight: 1.25; + } + + &.size\:medium { + --fontSize: 1.17rem; + --lineHeight: 1.75; + } + + &.size\:large { + --fontSize: 1.5rem; + --lineHeight: 2.0; + } + + &.size\:extralarge { + --fontSize: 2rem; + --lineHeight: 2.25; + } + + &.weight\:thin { + --fontWeight: 100; + } + + &.weight\:ultralight { + --fontWeight: 200; + } + + &.weight\:light { + --fontWeight: 300; + } + + &.weight\:semibold { + --fontWeight: 500; + } + + &.weight\:semibold { + --fontWeight: 600; + } + + &.weight\:bold { + --fontWeight: 700; + } + + &.weight\:heavy { + --fontWeight: 900; + } + + &.weight\:black { + --fontWeight: 950; + } + + &.case\:uppercase { + text-transform: uppercase; + } + + &.case\:lowercase { + text-transform: lowercase; + } + + &.case\:capitalize { + text-transform: capitalize; + } + + &.decoration\:underline { + text-decoration: underline; + } + + &.decoration\:overline { + text-decoration: overline; + } + + &.decoration\:strikethrough { + text-decoration: line-through; + } + + &.decoration\:none { + text-decoration: none; + } + + &.style\:italic { + font-style: italic; + } + + &.style\:oblique { + font-style: oblique; + } + + &.style\:title { + --fontSize: 2.0rem; + --fontWeight: 400; + --lineHeight: 2.25; + } + + &.style\:headline { + --fontSize: 1.5rem; + --fontWeight: 600; + --lineHeight: 2.0; + } + + &.style\:subheadline { + --fontSize: 1.25rem; + --fontWeight: 400; + --lineHeight: 1.75; + } + + &.style\:body { + --fontSize: 1rem; + --fontWeight: 400; + --lineHeight: 1.5; + } + + &.style\:callout { + --fontSize: 1rem; + --fontWeight: 400; + --lineHeight: 1.5; + } + + &.style\:caption { + --fontSize: 0.8rem; + --fontWeight: 400; + --lineHeight: 1.5; + } + + &.style\:footnote { + --fontSize: 0.8rem; + --fontWeight: 400; + --lineHeight: 1.75; + --foregroundColor: var(--grayColor) !important; + } + + &.style\:code { + --fontFamily: monospace; + --fontSize: 1.0rem; + --fontWeight: 400; + --lineHeight: 1.5; + } + + &.height\:small { + --lineHeight: 1.0; + } + + &.height\:medium { + --lineHeight: 1.75; + } + + &.height\:large { + --lineHeight: 2.25; + } + + &.limit\:one { + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; + } + + &.limit\:two { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } + + &.limit\:three { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + } + + &.font\:arial { + --fontFamily: Arial; + } + + &.font\:helvetica { + --fontFamily: Helvetica; + } + + &.font\:verdana { + --fontFamily: Verdana; + } } } diff --git a/Sources/HTMLKitComponents/Resources/css/typography/symbol.css b/Sources/HTMLKitComponents/Resources/css/typography/symbol.css index 729f94ab..7e9da8fc 100644 --- a/Sources/HTMLKitComponents/Resources/css/typography/symbol.css +++ b/Sources/HTMLKitComponents/Resources/css/typography/symbol.css @@ -2,60 +2,62 @@ * The rulesets for the symbol component. */ -.symbol { - --fontSize: 1.0rem; - --lineHeight: 1.5; - - display: inline-block; - inline-size: 1.25em; - block-size: 1.0em; - fill: hsla(var(--foregroundColor), 1.0); - font-size: var(--fontSize); - line-height: var(--lineHeight); - vertical-align: middle; - - &.size\:tiny { - --fontSize: 0.67rem; - --lineHeight: 1.25; - } - - &.size\:small { - --fontSize: 0.83rem; - --lineHeight: 1.25; - } - - &.size\:medium { - --fontSize: 1.17rem; - --lineHeight: 1.75; - } - - &.size\:large { - --fontSize: 1.5rem; - --lineHeight: 2.0; - } - - &.size\:extralarge { - --fontSize: 2rem; - --lineHeight: 2.25; - } - - &.shadow\:small { - filter: drop-shadow(0 1px 1px hsla(var(--shadowColor), 0.3)) drop-shadow(0 2px 2px hsla(var(--shadowColor), 0.3)); - } - - &.shadow\:medium { - filter: drop-shadow(0 3px 3px hsla(var(--shadowColor), 0.3)) drop-shadow(0 4px 4px hsla(var(--shadowColor), 0.3)); - } - - &.shadow\:large { - filter: drop-shadow(0 5px 5px hsla(var(--shadowColor), 0.3)) drop-shadow(0 6px 6px hsla(var(--shadowColor), 0.3)); - } - - + .text { - margin-inline-start: 0.75rem; - } - - + .symbol { - margin-inline-start: 0.75rem; +@layer htmlkit.components { + .symbol { + --fontSize: 1.0rem; + --lineHeight: 1.5; + + display: inline-block; + inline-size: 1.25em; + block-size: 1.0em; + fill: hsla(var(--foregroundColor), 1.0); + font-size: var(--fontSize); + line-height: var(--lineHeight); + vertical-align: middle; + + &.size\:tiny { + --fontSize: 0.67rem; + --lineHeight: 1.25; + } + + &.size\:small { + --fontSize: 0.83rem; + --lineHeight: 1.25; + } + + &.size\:medium { + --fontSize: 1.17rem; + --lineHeight: 1.75; + } + + &.size\:large { + --fontSize: 1.5rem; + --lineHeight: 2.0; + } + + &.size\:extralarge { + --fontSize: 2rem; + --lineHeight: 2.25; + } + + &.shadow\:small { + filter: drop-shadow(0 1px 1px hsla(var(--shadowColor), 0.3)) drop-shadow(0 2px 2px hsla(var(--shadowColor), 0.3)); + } + + &.shadow\:medium { + filter: drop-shadow(0 3px 3px hsla(var(--shadowColor), 0.3)) drop-shadow(0 4px 4px hsla(var(--shadowColor), 0.3)); + } + + &.shadow\:large { + filter: drop-shadow(0 5px 5px hsla(var(--shadowColor), 0.3)) drop-shadow(0 6px 6px hsla(var(--shadowColor), 0.3)); + } + + + .text { + margin-inline-start: 0.75rem; + } + + + .symbol { + margin-inline-start: 0.75rem; + } } } diff --git a/Sources/HTMLKitComponents/Resources/css/typography/text.css b/Sources/HTMLKitComponents/Resources/css/typography/text.css index 80e8c7c1..74378320 100644 --- a/Sources/HTMLKitComponents/Resources/css/typography/text.css +++ b/Sources/HTMLKitComponents/Resources/css/typography/text.css @@ -2,224 +2,226 @@ * The rulesets for the text component. */ -.text { - --fontSize: 1.0rem; - --lineHeight: 1.5; - --fontWeight: 400; - - font-family: var(--fontFamily); - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - - &.size\:tiny { - --fontSize: 0.67rem; - --lineHeight: 1.25; - } - - &.size\:small { - --fontSize: 0.83rem; - --lineHeight: 1.25; - } - - &.size\:medium { - --fontSize: 1.17rem; - --lineHeight: 1.75; - } - - &.size\:large { - --fontSize: 1.5rem; - --lineHeight: 2.0; - } - - &.size\:extralarge { - --fontSize: 2rem; - --lineHeight: 2.25; - } - - &.weight\:thin { - --fontWeight: 100; - } - - &.weight\:ultralight { - --fontWeight: 200; - } - - &.weight\:light { - --fontWeight: 300; - } - - &.weight\:medium { - --fontWeight: 500; - } - - &.weight\:semibold { - --fontWeight: 600; - } - - &.weight\:bold { - --fontWeight: 700; - } - - &.weight\:heavy { - --fontWeight: 900; - } - - &.weight\:black { - --fontWeight: 950; - } - - &.case\:uppercase { - text-transform: uppercase; - } - - &.case\:lowercase { - text-transform: lowercase; - } - - &.case\:capitalize { - text-transform: capitalize; - } - - &.decoration\:underline { - text-decoration: underline; - } - - &.decoration\:overline { - text-decoration: overline; - } - - &.decoration\:strikethrough { - text-decoration: line-through; - } - - &.decoration\:none { - text-decoration: none; - } - - &.style\:italic { - font-style: italic; - } - - &.style\:oblique { - font-style: oblique; - } - - &.style\:title { - --fontSize: 2.0rem; - --fontWeight: 400; - --lineHeight: 2.25; - - text-wrap: balance; - } - - &.style\:headline { - --fontSize: 1.5rem; - --fontWeight: 600; - --lineHeight: 2.0; - } - - &.style\:subheadline { - --fontSize: 1.25rem; - --fontWeight: 400; - --lineHeight: 1.75; - } - - &.style\:body { - --fontSize: 1rem; - --fontWeight: 400; - --lineHeight: 1.5; - } - - &.style\:callout { - --fontSize: 1rem; - --fontWeight: 400; - --lineHeight: 1.5; - } - - &.style\:caption { - --fontSize: 0.8rem; - --fontWeight: 400; - --lineHeight: 1.5; - } - - &.style\:footnote { - --fontSize: 0.8rem; - --fontWeight: 400; - --lineHeight: 1.75; - --foregroundColor: var(--grayColor) !important; - } - - &.style\:code { - --fontFamily: monospace; +@layer htmlkit.components { + .text { --fontSize: 1.0rem; - --fontWeight: 400; --lineHeight: 1.5; - } - - &.height\:small { - --lineHeight: 1.0; - } - - &.height\:medium { - --lineHeight: 1.75; - } - - &.height\:large { - --lineHeight: 2.25; - } - - &.limit\:one { - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow: hidden; - } - - &.limit\:two { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - } - - &.limit\:three { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; - } - - &.alignment\:leading { - text-align: start; - } - - &.alignment\:center { - text-align: center; - } - - &.alignment\:trailing { - text-align: end; - } - - &.font\:arial { - --fontFamily: Arial; - } - - &.font\:helvetica { - --fontFamily: Helvetica; - } - - &.shadow\:small { - text-shadow: 0 1px 1px hsla(var(--shadowColor), 0.3), 0 2px 2px hsla(var(--shadowColor), 0.3); - } - - &.shadow\:medium { - text-shadow: 0 3px 3px hsla(var(--shadowColor), 0.3), 0 4px 4px hsla(var(--shadowColor), 0.3); - } + --fontWeight: 400; - &.shadow\:large { - text-shadow: 0 5px 5px hsla(var(--shadowColor), 0.3), 0 6px 6px hsla(var(--shadowColor), 0.3); + font-family: var(--fontFamily); + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + + &.size\:tiny { + --fontSize: 0.67rem; + --lineHeight: 1.25; + } + + &.size\:small { + --fontSize: 0.83rem; + --lineHeight: 1.25; + } + + &.size\:medium { + --fontSize: 1.17rem; + --lineHeight: 1.75; + } + + &.size\:large { + --fontSize: 1.5rem; + --lineHeight: 2.0; + } + + &.size\:extralarge { + --fontSize: 2rem; + --lineHeight: 2.25; + } + + &.weight\:thin { + --fontWeight: 100; + } + + &.weight\:ultralight { + --fontWeight: 200; + } + + &.weight\:light { + --fontWeight: 300; + } + + &.weight\:medium { + --fontWeight: 500; + } + + &.weight\:semibold { + --fontWeight: 600; + } + + &.weight\:bold { + --fontWeight: 700; + } + + &.weight\:heavy { + --fontWeight: 900; + } + + &.weight\:black { + --fontWeight: 950; + } + + &.case\:uppercase { + text-transform: uppercase; + } + + &.case\:lowercase { + text-transform: lowercase; + } + + &.case\:capitalize { + text-transform: capitalize; + } + + &.decoration\:underline { + text-decoration: underline; + } + + &.decoration\:overline { + text-decoration: overline; + } + + &.decoration\:strikethrough { + text-decoration: line-through; + } + + &.decoration\:none { + text-decoration: none; + } + + &.style\:italic { + font-style: italic; + } + + &.style\:oblique { + font-style: oblique; + } + + &.style\:title { + --fontSize: 2.0rem; + --fontWeight: 400; + --lineHeight: 2.25; + + text-wrap: balance; + } + + &.style\:headline { + --fontSize: 1.5rem; + --fontWeight: 600; + --lineHeight: 2.0; + } + + &.style\:subheadline { + --fontSize: 1.25rem; + --fontWeight: 400; + --lineHeight: 1.75; + } + + &.style\:body { + --fontSize: 1rem; + --fontWeight: 400; + --lineHeight: 1.5; + } + + &.style\:callout { + --fontSize: 1rem; + --fontWeight: 400; + --lineHeight: 1.5; + } + + &.style\:caption { + --fontSize: 0.8rem; + --fontWeight: 400; + --lineHeight: 1.5; + } + + &.style\:footnote { + --fontSize: 0.8rem; + --fontWeight: 400; + --lineHeight: 1.75; + --foregroundColor: var(--grayColor) !important; + } + + &.style\:code { + --fontFamily: monospace; + --fontSize: 1.0rem; + --fontWeight: 400; + --lineHeight: 1.5; + } + + &.height\:small { + --lineHeight: 1.0; + } + + &.height\:medium { + --lineHeight: 1.75; + } + + &.height\:large { + --lineHeight: 2.25; + } + + &.limit\:one { + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; + } + + &.limit\:two { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } + + &.limit\:three { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + } + + &.alignment\:leading { + text-align: start; + } + + &.alignment\:center { + text-align: center; + } + + &.alignment\:trailing { + text-align: end; + } + + &.font\:arial { + --fontFamily: Arial; + } + + &.font\:helvetica { + --fontFamily: Helvetica; + } + + &.shadow\:small { + text-shadow: 0 1px 1px hsla(var(--shadowColor), 0.3), 0 2px 2px hsla(var(--shadowColor), 0.3); + } + + &.shadow\:medium { + text-shadow: 0 3px 3px hsla(var(--shadowColor), 0.3), 0 4px 4px hsla(var(--shadowColor), 0.3); + } + + &.shadow\:large { + text-shadow: 0 5px 5px hsla(var(--shadowColor), 0.3), 0 6px 6px hsla(var(--shadowColor), 0.3); + } } } diff --git a/Sources/HTMLKitComponents/Resources/css/utilities.css b/Sources/HTMLKitComponents/Resources/css/utilities.css new file mode 100644 index 00000000..aa69ec69 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/css/utilities.css @@ -0,0 +1,1019 @@ +@layer htmlkit.utilities { + + /** + * States + */ + + .state\:disabled { + pointer-events: none; + } + + .state\:hidden { + visibility: hidden; + } + + .state\:visible { + visibility: visible; + } + + .state\:attached { + display: block; + } + + .state\:detached { + display: none; + } + + /** + * Foreground + */ + + .foreground\:black { + --foregroundColor: var(--blackColor); + } + + .foreground\:blue { + --foregroundColor: var(--blueColor); + } + + .foreground\:brown { + --foregroundColor: var(--brownColor); + } + + .foreground\:cyan { + --foregroundColor: var(--cyanColor); + } + + .foreground\:gray { + --foregroundColor: var(--grayColor); + } + + .foreground\:green { + --foregroundColor: var(--greenColor); + } + + .foreground\:indigo { + --foregroundColor: var(--indigoColor); + } + + .foreground\:mint { + --foregroundColor: var(--mintColor); + } + + .foreground\:orange { + --foregroundColor: var(--orangeColor); + } + + .foreground\:pink { + --foregroundColor: var(--pinkColor); + } + + .foreground\:purple { + --foregroundColor: var(--purpleColor); + } + + .foreground\:red { + --foregroundColor: var(--redColor); + } + + .foreground\:teal { + --foregroundColor: var(--tealColor); + } + + .foreground\:white { + --foregroundColor: var(--whiteColor); + } + + .foreground\:yellow { + --foregroundColor: var(--yellowColor); + } + + .foreground\:silver { + --foregroundColor: var(--silverColor); + } + + .foreground\:accent { + --foregroundColor: var(--accentColor); + } + + .foreground\:system { + --foregroundColor: var(--systemTextColor); + } + + /** + * Borders + */ + + .border\:black { + --borderColor: var(--blackColor); + --borderOpacity: 1.0; + } + + .border\:blue { + --borderColor: var(--blueColor); + --borderOpacity: 1.0; + } + + .border\:brown { + --borderColor: var(--brownColor); + --borderOpacity: 1.0; + } + + .border\:cyan { + --borderColor: var(--cyanColor); + --borderOpacity: 1.0; + } + + .border\:gray { + --borderColor: var(--grayColor); + --borderOpacity: 1.0; + } + + .border\:green { + --borderColor: var(--greenColor); + --borderOpacity: 1.0; + } + + .border\:indigo { + --borderColor: var(--indigoColor); + --borderOpacity: 1.0; + } + + .border\:mint { + --borderColor: var(--mintColor); + --borderOpacity: 1.0; + } + + .border\:orange { + --borderColor: var(--orangeColor); + --borderOpacity: 1.0; + } + + .border\:pink { + --borderColor: var(--pinkColor); + --borderOpacity: 1.0; + } + + .border\:purple { + --borderColor: var(--purpleColor); + --borderOpacity: 1.0; + } + + .border\:red { + --borderColor: var(--redColor); + --borderOpacity: 1.0; + } + + .border\:teal { + --borderColor: var(--tealColor); + --borderOpacity: 1.0; + } + + .border\:white { + --borderColor: var(--whiteColor); + --borderOpacity: 1.0; + } + + .border\:yellow { + --borderColor: var(--yellowColor); + --borderOpacity: 1.0; + } + + .border\:silver { + --borderColor: var(--silverColor); + --borderOpacity: 1.0; + } + + .border\:accent { + --borderColor: var(--accentColor); + --borderOpacity: 1.0; + } + + .border\:system { + --borderColor: var(--systemBorderColor); + --borderOpacity: 1.0; + } + + .border\:transparent { + --borderOpacity: 0.0; + } + + .border\:small { + --borderWidth: 1px; + } + + .border\:medium { + --borderWidth: 2px; + } + + .border\:large { + --borderWidth: 3px; + } + + /** + * Background + */ + + .background\:black { + --backgroundColor: var(--blackColor); + --backgroundOpacity: 1.0; + } + + .background\:blue { + --backgroundColor: var(--blueColor); + --backgroundOpacity: 1.0; + } + + .background\:brown { + --backgroundColor: var(--brownColor); + --backgroundOpacity: 1.0; + } + + .background\:cyan { + --backgroundColor: var(--cyanColor); + --backgroundOpacity: 1.0; + } + + .background\:gray { + --backgroundColor: var(--grayColor); + --backgroundOpacity: 1.0; + } + + .background\:green { + --backgroundColor: var(--greenColor); + --backgroundOpacity: 1.0; + } + + .background\:indigo { + --backgroundColor: var(--indigoColor); + --backgroundOpacity: 1.0; + } + + .background\:mint { + --backgroundColor: var(--mintColor); + --backgroundOpacity: 1.0; + } + + .background\:orange { + --backgroundColor: var(--orangeColor); + --backgroundOpacity: 1.0; + } + + .background\:pink { + --backgroundColor: var(--pinkColor); + --backgroundOpacity: 1.0; + } + + .background\:purple { + --backgroundColor: var(--purpleColor); + --backgroundOpacity: 1.0; + } + + .background\:red { + --backgroundColor: var(--redColor); + --backgroundOpacity: 1.0; + } + + .background\:teal { + --backgroundColor: var(--tealColor); + --backgroundOpacity: 1.0; + } + + .background\:white { + --backgroundColor: var(--whiteColor); + --backgroundOpacity: 1.0; + } + + .background\:yellow { + --backgroundColor: var(--yellowColor); + --backgroundOpacity: 1.0; + } + + .background\:silver { + --backgroundColor: var(--silverColor); + --backgroundOpacity: 1.0; + } + + .background\:accent { + --backgroundColor: var(--accentColor); + --backgroundOpacity: 1.0; + } + + .background\:system { + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; + } + + .background\:transparent { + --backgroundOpacity: 0.0; + } + + /** + * Focus + */ + + .focus\:black { + --focusColor: var(--blackColor); + } + + .focus\:blue { + --focusColor: var(--blueColor); + } + + .focus\:brown { + --focusColor: var(--brownColor); + } + + .focus\:cyan { + --focusColor: var(--cyanColor); + } + + .focus\:gray { + --focusColor: var(--grayColor); + } + + .focus\:green { + --focusColor: var(--greenColor); + } + + .focus\:indigo { + --focusColor: var(--indigoColor); + } + + .focus\:mint { + --focusColor: var(--mintColor); + } + + .focus\:orange { + --focusColor: var(--orangeColor); + } + + .focus\:pink { + --focusColor: var(--pinkColor); + } + + .focus\:purple { + --focusColor: var(--purpleColor); + } + + .focus\:red { + --focusColor: var(--redColor); + } + + .focus\:teal { + --focusColor: var(--tealColor); + } + + .focus\:white { + --focusColor: var(--whiteColor); + } + + .focus\:yellow { + --focusColor: var(--yellowColor); + } + + .focus\:silver { + --focusColor: var(--silverColor); + } + + .focus\:accent { + --focusColor: var(--accentColor); + } + + .focus\:system { + --focusColor: var(--systemFocusColor); + } + + /** + * padding + */ + + .padding\:large { + --paddingInlineStart: 2.25rem; + --paddingInlineEnd: 2.25rem; + --paddingBlockStart: 2.25rem; + --paddingBlockEnd: 2.25rem; + } + + .padding\:medium { + --paddingInlineStart: 1.5rem; + --paddingInlineEnd: 1.5rem; + --paddingBlockStart: 1.5rem; + --paddingBlockEnd: 1.5rem; + } + + .padding\:small { + --paddingInlineStart: 1rem; + --paddingInlineEnd: 1rem; + --paddingBlockStart: 1rem; + --paddingBlockEnd: 1rem; + } + + .padding-inline\:large { + --paddingInlineStart: 2.25rem; + --paddingInlineEnd: 2.25rem; + } + + .padding-inline\:medium { + --paddingInlineStart: 1.5rem; + --paddingInlineEnd: 1.5rem; + } + + .padding-inline\:small { + --paddingInlineStart: 1rem; + --paddingInlineEnd: 1rem; + } + + .padding-block\:large { + --paddingBlockStart: 2.25rem; + --paddingBlockEnd: 2.25rem; + } + + .padding-block\:medium { + --paddingBlockStart: 1.5rem; + --paddingBlockEnd: 1.5rem; + } + + .padding-block\:small { + --paddingBlockStart: 1rem; + --paddingBlockEnd: 1rem; + } + + .padding-top\:large { + --paddingBlockStart: 2.25rem; + } + + .padding-top\:medium { + --paddingBlockStart: 1.5rem; + } + + .padding-top\:small { + --paddingBlockStart: 1rem; + } + + .padding-bottom\:large { + --paddingBlockEnd: 2.25rem; + } + + .padding-bottom\:medium { + --paddingBlockEnd: 1.5rem; + } + + .padding-bottom\:small { + --paddingBlockEnd: 1rem; + } + + .padding-leading\:large { + --paddingInlineStart: 2.25rem; + } + + .padding-leading\:medium { + --paddingInlineStart: 1.5rem; + } + + .padding-leading\:small { + --paddingInlineStart: 1rem; + } + + .padding-trailing\:large { + --paddingInlineEnd: 2.25rem; + } + + .padding-trailing\:medium { + --paddingInlineEnd: 1.5rem; + } + + .padding-trailing\:small { + --paddingInlineEnd: 1rem; + } + + /** + * Margin + */ + + .margin\:auto { + margin-inline: auto; + margin-block: auto; + } + + .margin\:large { + margin-inline: 2.25rem; + margin-block: 2.25rem; + } + + .margin\:medium { + margin-inline: 1.5rem; + margin-block: 1.5rem; + } + + .margin\:small { + margin-inline: 1rem; + margin-block: 1rem; + } + + .margin-inline\:auto { + margin-inline-start: auto; + margin-inline-end: auto; + } + + .margin-inline\:large { + margin-inline-start: 2.25rem; + margin-inline-end: 2.25rem; + } + + .margin-inline\:medium { + margin-inline-start: 1.5rem; + margin-inline-end: 1.5rem; + } + + .margin-inline\:small { + margin-inline-start: 1rem; + margin-inline-end: 1rem; + } + + .margin-block\:auto { + margin-block-start: auto; + margin-block-end: auto; + } + + .margin-block\:large { + margin-block-start: 2.25rem; + margin-block-end: 2.25rem; + } + + .margin-block\:medium { + margin-block-start: 1.5rem; + margin-block-end: 1.5rem; + } + + .margin-block\:small { + margin-block-start: 1rem; + margin-block-end: 1rem; + } + + .margin-top\:auto { + margin-block-start: auto; + } + + .margin-top\:large { + margin-block-start: 2.25rem; + } + + .margin-top\:medium { + margin-block-start: 1.5rem; + } + + .margin-top\:small { + margin-block-start: 1rem; + } + + .margin-bottom\:auto { + margin-block-end: auto; + } + + .margin-bottom\:large { + margin-block-end: 2.25rem; + } + + .margin-bottom\:medium { + margin-block-end: 1.5rem; + } + + .margin-bottom\:small { + margin-block-end: 1rem; + } + + .margin-leading\:auto { + margin-inline-start: auto; + } + + .margin-leading\:large { + margin-inline-start: 2.25rem; + } + + .margin-leading\:medium { + margin-inline-start: 1.5rem; + } + + .margin-leading\:small { + margin-inline-start: 1rem; + } + + .margin-trailing\:auto { + margin-inline-end: auto; + } + + .margin-trailing\:large { + margin-inline-end: 2.25rem; + } + + .margin-trailing\:medium { + margin-inline-end: 1.5rem; + } + + .margin-trailing\:small { + margin-inline-end: 1rem; + } + + /** + * Shape + */ + + .shape\:smallrounded { + --borderRadius: 0.313rem; + } + + .shape\:largerounded { + --borderRadius: 0.625rem; + } + + .shape\:fullrounded { + --borderRadius: 1.563rem; + } + + /** + * Size + */ + + .width\:one { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 8.3333333333%; + } + + .width\:two { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 16.6666666667%; + } + + .width\:three { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 25%; + } + + .width\:four { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 33.3333333333%; + } + + .width\:five { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 41.6666666667%; + } + + .width\:six { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 50%; + } + + .width\:seven { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 58.3333333333%; + } + + .width\:eight { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 66.6666666667%; + } + + .width\:nine { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 75%; + } + + .width\:ten { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 83.3333333333%; + } + + .width\:eleven { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 91.6666666667%; + } + + .width\:twelve { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 100%; + } + + .width\:minimum { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: auto; + } + + .width\:maximum { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: max-content; + } + + .height\:one { + block-size: 8.3333333333%; + } + + .height\:two { + block-size: 16.6666666667%; + } + + .height\:three { + block-size: 25%; + } + + .height\:four { + block-size: 33.3333333333%; + } + + .height\:five { + block-size: 41.6666666667%; + } + + .height\:six { + block-size: 50%; + } + + .height\:seven { + block-size: 58.3333333333%; + } + + .height\:eight { + block-size: 66.6666666667%; + } + + .height\:nine { + block-size: 75%; + } + + .height\:ten { + block-size: 83.3333333333%; + } + + .height\:eleven { + block-size: 91.6666666667%; + } + + .height\:twelve { + block-size: 100%; + } + + .height\:minimum { + block-size: auto; + } + + .height\:maximum { + block-size: max-content; + } + + /** + * Blur + */ + + .blur\:light { + --blurLevel: 4px; + } + + .blur\:medium { + --blurLevel: 8px; + } + + .blur\:strong { + --blurLevel: 12px; + } + + .grayscale\:light { + --grayscaleDepth: 25%; + } + + .grayscale\:neutral { + --grayscaleDepth: 50%; + } + + .grayscale\:dark { + --grayscaleDepth: 100%; + } + + .brightness\:low { + --brightnessLevel: 0.5; + } + + .brightness\:medium { + --brightnessLevel: 1.5; + } + + .brightness\:high { + --brightnessLevel: 2.0; + } + + .saturation\:low { + --saturationLevel: 0.5; + } + + .saturation\:medium { + --saturationLevel: 1.5; + } + + .saturation\:high{ + --saturationLevel: 2.0; + } + + .contrast\:low { + --contrastLevel: 0.5; + } + + .contrast\:medium { + --contrastLevel: 1.5; + } + + .contrast\:high { + --contrastLevel: 2.0; + } + + /** + * Shadow + */ + + .shadow\:black { + --shadowColor: var(--blackColor); + } + + .shadow\:blue { + --shadowColor: var(--blueColor); + } + + .shadow\:brown { + --shadowColor: var(--brownColor); + } + + .shadow\:cyan { + --shadowColor: var(--cyanColor); + } + + .shadow\:gray { + --shadowColor: var(--grayColor); + } + + .shadow\:green { + --shadowColor: var(--greenColor); + } + + .shadow\:indigo { + --shadowColor: var(--indigoColor); + } + + .shadow\:mint { + --shadowColor: var(--mintColor); + } + + .shadow\:orange { + --shadowColor: var(--orangeColor); + } + + .shadow\:pink { + --shadowColor: var(--pinkColor); + } + + .shadow\:purple { + --shadowColor: var(--purpleColor); + } + + .shadow\:red { + --shadowColor: var(--redColor); + } + + .shadow\:teal { + --shadowColor: var(--tealColor); + } + + .shadow\:white { + --shadowColor: var(--whiteColor); + } + + .shadow\:yellow { + --shadowColor: var(--yellowColor); + } + + .shadow\:silver { + --shadowColor: var(--silverColor); + } + + .overflow\:clip { + overflow: hidden; + } + + /** + * Tint + */ + + .tint\:black { + --tintColor: var(--blackColor); + } + + .tint\:blue { + --tintColor: var(--blueColor); + } + + .tint\:brown { + --tintColor: var(--brownColor); + } + + .tint\:cyan { + --tintColor: var(--cyanColor); + } + + .tint\:gray { + --tintColor: var(--grayColor); + } + + .tint\:green { + --tintColor: var(--greenColor); + } + + .tint\:indigo { + --tintColor: var(--indigoColor); + } + + .tint\:mint { + --tintColor: var(--mintColor); + } + + .tint\:orange { + --tintColor: var(--orangeColor); + } + + .tint\:pink { + --tintColor: var(--pinkColor); + } + + .tint\:purple { + --tintColor: var(--purpleColor); + } + + .tint\:red { + --tintColor: var(--redColor); + } + + .tint\:teal { + --tintColor: var(--tealColor); + } + + .tint\:white { + --tintColor: var(--whiteColor); + } + + .tint\:yellow { + --tintColor: var(--yellowColor); + } + + .tint\:silver { + --tintColor: var(--silverColor); + } + + .tint\:accent { + --tintColor: var(--accentColor); + } + + .zindex\:one { + z-index: 1; + } + + .zindex\:two { + z-index: 2; + } + + .zindex\:three { + z-index: 3; + } + + .zindex\:four { + z-index: 4; + } + + .zindex\:five { + z-index: 5; + } +} \ No newline at end of file diff --git a/Sources/HTMLKitComponents/Resources/css/views/alert.css b/Sources/HTMLKitComponents/Resources/css/views/alert.css index 0c625322..fe447c2b 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/alert.css +++ b/Sources/HTMLKitComponents/Resources/css/views/alert.css @@ -2,45 +2,47 @@ * The rulesets for the tabs component. */ -.alert { - --paddingBlockStart: 0.5rem; - --paddingBlockEnd: 0.5rem; - --paddingInlineStart: 1.0rem; - --paddingInlineEnd: 1.0rem; - --fontSize: 1.0rem; - --fontWeight: 400; - --lineHeight: 1.5; - --foregroundColor: var(--systemTextColor); - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --focusColor: var(--systemFocusColor); - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; +@layer htmlkit.components { + .alert { + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --fontSize: 1.0rem; + --fontWeight: 400; + --lineHeight: 1.5; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --focusColor: var(--systemFocusColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - position: fixed; - bottom: 0; - right: 1rem; - z-index: 1; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - inline-size: 400px; - block-size: 200px; - display: flex; - flex-direction: row; - align-items: center; - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - visibility: hidden; - overflow: hidden; -} + position: fixed; + bottom: 0; + right: 1rem; + z-index: 1; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + inline-size: 400px; + block-size: 200px; + display: flex; + flex-direction: row; + align-items: center; + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + visibility: hidden; + overflow: hidden; + } +} \ No newline at end of file diff --git a/Sources/HTMLKitComponents/Resources/css/views/card.css b/Sources/HTMLKitComponents/Resources/css/views/card.css index 24944015..080a8929 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/card.css +++ b/Sources/HTMLKitComponents/Resources/css/views/card.css @@ -2,39 +2,44 @@ * The rulesets for the card component. */ -.card { - --paddingInlineStart: 1.0rem; - --paddingInlineEnd: 1.0rem; - --paddingBlockStart: 0.5rem; - --paddingBlockEnd: 0.5rem; - --foregroundColor: var(--systemTextColor); - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; - - position: relative; - display: flex; - flex-direction: column; - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); +@layer htmlkit.components { + .card { + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - .card-header { - border-start-start-radius: var(--borderRadius); - border-start-end-radius: var(--borderRadius); - } + position: relative; + display: flex; + flex-direction: column; + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + overflow: clip; + + .card-header { + border-start-start-radius: var(--borderRadius); + border-start-end-radius: var(--borderRadius); + } + + .card-body { + flex-grow: 1; - .card-body { - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - border-end-start-radius: var(--borderRadius); - border-end-end-radius: var(--borderRadius); + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + border-end-start-radius: var(--borderRadius); + border-end-end-radius: var(--borderRadius); + } } } diff --git a/Sources/HTMLKitComponents/Resources/css/views/carousel.css b/Sources/HTMLKitComponents/Resources/css/views/carousel.css index ef30d7aa..350b9a62 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/carousel.css +++ b/Sources/HTMLKitComponents/Resources/css/views/carousel.css @@ -2,69 +2,72 @@ * The rulesets for the carousel component. */ -.carousel { - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; +@layer htmlkit.components { + .carousel { + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - max-inline-size: 100%; - block-size: auto; - display: flex; - flex-direction: column; - - .carousel-content { - block-size: 350px; - display: grid; - grid-auto-flow: column; - grid-auto-columns: 100%; - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - overflow: hidden; - - &::-webkit-scrollbar { - display: none; - } - } - - .carousel-indication { - block-size: 50px; + max-inline-size: 100%; + block-size: auto; display: flex; - align-items: center; - justify-content: center; - gap: 10px; + flex-direction: column; - .indicator { - --borderRadius: 5px; - --borderColor: var(--systemBorderColor); - --borderOpacity: 1.0; - --backgroundColor: var(--systemBorderColor); - --backgroundOpacity: 1.0; - - position: relative; - inline-size: 40px; - block-size: 6px; - display: inline-block; - border-width: 1px; + .carousel-content { + block-size: 350px; + display: grid; + grid-auto-flow: column; + grid-auto-columns: 100%; + border-width: var(--borderWidth); border-style: solid; border-color: hsla(var(--borderColor), var(--borderOpacity)); border-radius: var(--borderRadius); background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - cursor: pointer; + overflow: hidden; + scrollbar-width: none; - &:hover { - --borderColor: var(--accentColor); - --backgroundColor: var(--accentColor); + &::-webkit-scrollbar { + display: none; } + } - &.state\:active { - --borderColor: var(--accentColor); - --backgroundColor: var(--accentColor); + .carousel-indication { + block-size: 50px; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + + .indicator { + --borderRadius: 5px; + --borderColor: var(--systemBorderColor); + --borderOpacity: 1.0; + --backgroundColor: var(--systemBorderColor); + --backgroundOpacity: 1.0; + + position: relative; + inline-size: 40px; + block-size: 6px; + display: inline-block; + border-width: 1px; + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + cursor: pointer; + + &:hover { + --borderColor: var(--accentColor); + --backgroundColor: var(--accentColor); + } + + &.state\:active { + --borderColor: var(--accentColor); + --backgroundColor: var(--accentColor); + } } } } @@ -74,13 +77,15 @@ * The rulesets for the slide component. */ -.slide { - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; +@layer htmlkit.components { + .slide { + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - position: relative; - block-size: inherit; - display: flex; - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - overflow: hidden; + position: relative; + block-size: inherit; + display: flex; + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + overflow: hidden; + } } diff --git a/Sources/HTMLKitComponents/Resources/css/views/chart.css b/Sources/HTMLKitComponents/Resources/css/views/chart.css index 7b796f56..ef1bfa24 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/chart.css +++ b/Sources/HTMLKitComponents/Resources/css/views/chart.css @@ -2,42 +2,34 @@ * The rulesets for the chart component. */ -.chart { - --fontSize: 1.0rem; - --fontWeight: 400; - --lineHeight: 1.5; - --foregroundColor: var(--systemTextColor); - --borderColor: var(--systemBorderColor); - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; - - position: relative; - inline-size: 100%; - block-size: inherit; - display: block; - - .chart-guide { - stroke-width: 1px; - stroke-dasharray: 5; - stroke: hsla(var(--borderColor), 1.0); - } - - .chart-axis { - stroke-width: 1px; - stroke-dasharray: 0; - stroke: hsla(var(--borderColor), 1.0); - } +@layer htmlkit.components { + .chart { + --fontSize: 1.0rem; + --fontWeight: 400; + --lineHeight: 1.5; + --foregroundColor: var(--systemTextColor); + --borderColor: var(--systemBorderColor); + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; + + position: relative; + inline-size: 100%; + block-size: inherit; + display: block; + + .chart-guide { + stroke-width: 1px; + stroke-dasharray: 5; + stroke: hsla(var(--borderColor), 1.0); + } - .chart-label { - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - fill: hsla(var(--foregroundColor), 1.0); - stroke-width: 0; - } + .chart-axis { + stroke-width: 1px; + stroke-dasharray: 0; + stroke: hsla(var(--borderColor), 1.0); + } - .mark { - &.type\:bar { + .chart-label { font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); @@ -45,13 +37,23 @@ stroke-width: 0; } - &.type\:pie { - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - - path { + .mark { + &.type\:bar { + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); fill: hsla(var(--foregroundColor), 1.0); + stroke-width: 0; + } + + &.type\:pie { + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + + path { + fill: hsla(var(--foregroundColor), 1.0); + } } } } diff --git a/Sources/HTMLKitComponents/Resources/css/views/disclosure.css b/Sources/HTMLKitComponents/Resources/css/views/disclosure.css index b58fe7eb..99e40248 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/disclosure.css +++ b/Sources/HTMLKitComponents/Resources/css/views/disclosure.css @@ -2,67 +2,70 @@ * The rulesets for the disclosure component. */ -.disclosure { - position: relative; - inline-size: 100%; - display: flex; - flex-direction: column; +@layer htmlkit.components { + .disclosure { + position: relative; + inline-size: 100%; + display: flex; + flex-direction: column; - &.state\:open { - .disclosure-head { - .state-indicator { - transform: rotate(90deg); + &[open] { + .disclosure-head { + .disclosure-triangle { + transform: rotate(90deg); + } } - } - .disclosure-body { - grid-template-rows: 1fr; + .disclosure-body { + grid-template-rows: 1fr; + } } - } - .disclosure-head { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - color: hsla(var(--systemTextColor), 1.0); - cursor: pointer; + .disclosure-head { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 1rem; + color: hsla(var(--systemTextColor), 1.0); + cursor: pointer; - .disclosure-label { - --fontSize: 1.0rem; - --lineHeight: 1.5; - --fontWeight: 400; + .disclosure-label { + flex-grow: 1; - font-family: var(--fontFamily); - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - } + --fontSize: 1.0rem; + --lineHeight: 1.5; + --fontWeight: 400; + + font-family: var(--fontFamily); + font-size: var(--fontSize); + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + } - .state-indicator { - --fontSize: 1.0rem; - --lineHeight: 1.5; + .disclosure-triangle { + --fontSize: 1.0rem; + --lineHeight: 1.5; - inline-size: 1.25em; - block-size: 1.0em; - display: inline-block; - fill: hsla(var(--accentColor), 1.0); - font-size: var(--fontSize); - line-height: var(--lineHeight); - vertical-align: middle; + inline-size: 1.25em; + block-size: 1.0em; + display: inline-block; + fill: hsla(var(--accentColor), 1.0); + font-size: var(--fontSize); + line-height: var(--lineHeight); + vertical-align: middle; + } } - } - .disclosure-body { - display: grid; - grid-template-rows: 0fr; - transition-property: grid-template-rows; - transition-duration: 500ms; - transition-timing-function: ease; + .disclosure-body { + display: grid; + grid-template-rows: 0fr; + overflow: clip; - .disclosure-content { - overflow: hidden; + * { + overflow: hidden; + } } } -} +} \ No newline at end of file diff --git a/Sources/HTMLKitComponents/Resources/css/views/divider.css b/Sources/HTMLKitComponents/Resources/css/views/divider.css index 7a392b5f..04aecfdb 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/divider.css +++ b/Sources/HTMLKitComponents/Resources/css/views/divider.css @@ -2,14 +2,18 @@ * The rulesets for the divider component. */ -.divider { - --backgroundColor: var(--systemBorderColor); - --backgroundOpacity: 1.0; - - position: relative; - inline-size: 100%; - block-size: 1px; - display: block; - border-style: none; - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); +@layer htmlkit { + @layer components { + .divider { + --backgroundColor: var(--systemBorderColor); + --backgroundOpacity: 1.0; + + position: relative; + inline-size: 100%; + block-size: 1px; + display: block; + border-style: none; + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + } + } } diff --git a/Sources/HTMLKitComponents/Resources/css/views/dropdown.css b/Sources/HTMLKitComponents/Resources/css/views/dropdown.css index 6903f91e..bd88c0b0 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/dropdown.css +++ b/Sources/HTMLKitComponents/Resources/css/views/dropdown.css @@ -2,88 +2,90 @@ * The rulesets for the dropdown component. */ -.dropdown { - --paddingBlockStart: 0.5rem; - --paddingBlockEnd: 0.5rem; - --paddingInlineStart: 1.0rem; - --paddingInlineEnd: 1.0rem; - --fontSize: 1.0rem; - --fontWeight: 400; - --lineHeight: 1.5; - --foregroundColor: var(--systemTextColor); - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; - - position: relative; - display: inline-block; +@layer htmlkit.components { + .dropdown { + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --fontSize: 1.0rem; + --fontWeight: 400; + --lineHeight: 1.5; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - .dropdown-label { - display: inline-flex; - align-items: center; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - } - - .dropdown-content { - position: absolute; - z-index: 1; - margin-block: 0.5rem; - inline-size: max-content; - display: block; - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), 1.0); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - overflow: hidden; - visibility: hidden; + position: relative; + display: inline-block; - &.position\:right { - right: 0; + .dropdown-label { + display: inline-flex; + align-items: center; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } - &.position\:bottom { - bottom: 0; - } + .dropdown-content { + position: absolute; + z-index: 1; + margin-block: 0.5rem; + inline-size: max-content; + display: block; + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), 1.0); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + overflow: hidden; + visibility: hidden; - .list { - .list-row { - &:hover { - background-color: hsla(var(--borderColor), 0.5); - } + &.position\:right { + right: 0; + } - > .link { - padding-inline: 1.0rem; - padding-block: 0.5rem; - display: flex; - align-items: center; - } + &.position\:bottom { + bottom: 0; + } - > .text { - padding-inline: 1.0rem; - padding-block: 0.5rem; - display: flex; - align-items: center; - cursor: pointer; - } + .list { + .list-row { + &:hover { + background-color: hsla(var(--borderColor), 0.5); + } + + > .link { + padding-inline: 1.0rem; + padding-block: 0.5rem; + display: flex; + align-items: center; + } - > .grouping { - padding-inline: 1.0rem; - padding-block: 0.5rem; - display: flex; - align-items: center; - cursor: pointer; + > .text { + padding-inline: 1.0rem; + padding-block: 0.5rem; + display: flex; + align-items: center; + cursor: pointer; + } + + > .grouping { + padding-inline: 1.0rem; + padding-block: 0.5rem; + display: flex; + align-items: center; + cursor: pointer; + } } - } - .divider { - --backgroundColor: var(--borderColor) !important; + .divider { + --backgroundColor: var(--borderColor) !important; + } } } } diff --git a/Sources/HTMLKitComponents/Resources/css/views/form.css b/Sources/HTMLKitComponents/Resources/css/views/form.css index 11a3955a..bd6679ae 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/form.css +++ b/Sources/HTMLKitComponents/Resources/css/views/form.css @@ -2,8 +2,10 @@ * The rulesets for the form component. */ -.form { - display: block; - inline-size: 100%; - block-size: auto; +@layer htmlkit.components { + .form { + display: block; + inline-size: 100%; + block-size: auto; + } } \ No newline at end of file diff --git a/Sources/HTMLKitComponents/Resources/css/views/image.css b/Sources/HTMLKitComponents/Resources/css/views/image.css index d3709230..cbe726c8 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/image.css +++ b/Sources/HTMLKitComponents/Resources/css/views/image.css @@ -2,92 +2,94 @@ * The rulesets for the image component. */ -.image { - --inlineSize: 100%; - --borderWidth: 0; - --borderRadius: 0; - --borderColor: 0, 0%, 0%; - --borderOpacity: 0.0; - --backgroundColor: 0, 0%, 0%; - --backgroundOpacity: 0.0; - --blurLevel: 0; - --contrastLevel: 100%; - --brightnessLevel: 100%; - --grayscaleDepth: 0; - --saturationLevel: 100%; - - position: relative; - max-inline-size: var(--inlineSize); - block-size: auto; - font-style: italic; - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - filter: blur(var(--blurLevel)) contrast(var(--contrastLevel)) brightness(var(--brightnessLevel)) grayscale(var(--grayscaleDepth)) saturate(var(--saturationLevel)); - - &.aspect\:equal { - aspect-ratio: 1/1; - } - - &.aspect\:unequal { - aspect-ratio: 2/1; - } - - &.fit\:contain { - object-fit:contain; - } - - &.fit\:cover { - object-fit:cover; - } - - &.fit\:fill { - object-fit:fill; - } - - &.fit\:scaledown { - object-fit:scale-down; - } - - &.fit\:none { - object-fit:none; - } - - &.opacity\:transparent { - opacity: 0; - } - - &.opacity\:intransparent { - opacity: 1; - } - - &.scale\:small { - --inlineSize: 3.125rem; - } - - &.scale\:medium { - --inlineSize: 12.5rem; - } - - &.scale\:large { - --inlineSize: 25rem; - } - - &.shape\:circle { - --borderRadius: 50%; - } - - &.shadow\:small { - box-shadow: 0 1px 3px hsla(var(--shadowColor), 0.12), 0 1px 2px hsla(var(--shadowColor), 0.24); - } - - &.shadow\:medium { - box-shadow: 0 3px 3px -3px hsla(var(--shadowColor), 0.3), 0 4px 4px -4px hsla(var(--shadowColor), 0.3); - } - - &.shadow\:large { - box-shadow: 0 5px 5px -5px hsla(var(--shadowColor), 0.3), 0 6px 6px -6px hsla(var(--shadowColor), 0.3); - } -} +@layer htmlkit.components { + .image { + --inlineSize: 100%; + --borderWidth: 0; + --borderRadius: 0; + --borderColor: 0, 0%, 0%; + --borderOpacity: 0.0; + --backgroundColor: 0, 0%, 0%; + --backgroundOpacity: 0.0; + --blurLevel: 0; + --contrastLevel: 100%; + --brightnessLevel: 100%; + --grayscaleDepth: 0; + --saturationLevel: 100%; + + position: relative; + max-inline-size: var(--inlineSize); + block-size: auto; + font-style: italic; + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + filter: blur(var(--blurLevel)) contrast(var(--contrastLevel)) brightness(var(--brightnessLevel)) grayscale(var(--grayscaleDepth)) saturate(var(--saturationLevel)); + + &.aspect\:equal { + aspect-ratio: 1/1; + } + + &.aspect\:unequal { + aspect-ratio: 2/1; + } + + &.fit\:contain { + object-fit: contain; + } + + &.fit\:cover { + object-fit: cover; + } + + &.fit\:fill { + object-fit: fill; + } + + &.fit\:scaledown { + object-fit: scale-down; + } + + &.fit\:none { + object-fit: none; + } + + &.opacity\:transparent { + opacity: 0; + } + + &.opacity\:intransparent { + opacity: 1; + } + + &.scale\:small { + --inlineSize: 3.125rem; + } + + &.scale\:medium { + --inlineSize: 12.5rem; + } + + &.scale\:large { + --inlineSize: 25rem; + } + + &.shape\:circle { + --borderRadius: 50%; + } + + &.shadow\:small { + box-shadow: 0 1px 3px hsla(var(--shadowColor), 0.12), 0 1px 2px hsla(var(--shadowColor), 0.24); + } + + &.shadow\:medium { + box-shadow: 0 3px 3px -3px hsla(var(--shadowColor), 0.3), 0 4px 4px -4px hsla(var(--shadowColor), 0.3); + } + + &.shadow\:large { + box-shadow: 0 5px 5px -5px hsla(var(--shadowColor), 0.3), 0 6px 6px -6px hsla(var(--shadowColor), 0.3); + } + } +} \ No newline at end of file diff --git a/Sources/HTMLKitComponents/Resources/css/views/label.css b/Sources/HTMLKitComponents/Resources/css/views/label.css index 27d3f819..9d4546d5 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/label.css +++ b/Sources/HTMLKitComponents/Resources/css/views/label.css @@ -2,15 +2,17 @@ * The rulesets for the label component. */ -.label { - --foregroundColor: var(--systemTextColor); +@layer htmlkit.label { + .label { + --foregroundColor: var(--systemTextColor); - margin-block-start: 1.25rem; - margin-block-end: 0.625rem; - display: inline-block; - font-family: system-ui; - font-size: var(--fontSize); - font-weight: var(--fontWeight); - color: hsla(var(--foregroundColor), 1.0); - line-height: var(--lineHeight); -} + margin-block-start: 1.25rem; + margin-block-end: 0.625rem; + display: inline-block; + font-family: system-ui; + font-size: var(--fontSize); + font-weight: var(--fontWeight); + color: hsla(var(--foregroundColor), 1.0); + line-height: var(--lineHeight); + } +} \ No newline at end of file diff --git a/Sources/HTMLKitComponents/Resources/css/views/modal.css b/Sources/HTMLKitComponents/Resources/css/views/modal.css index ea5276fb..5e99058a 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/modal.css +++ b/Sources/HTMLKitComponents/Resources/css/views/modal.css @@ -2,29 +2,31 @@ * The rulesets for the modal component. */ -.modal { - --paddingBlockStart: 0.75rem; - --paddingBlockEnd: 0.75rem; - --paddingInlineStart: 1.0rem; - --paddingInlineEnd: 1.0rem; - --foregroundColor: var(--systemTextColor); - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; - - margin-inline: auto; - margin-block: auto; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - box-shadow: 0 15px 35px hsla(0,0%, 0%, 0.2); +@layer htmlkit.components { + .modal { + --paddingBlockStart: 0.75rem; + --paddingBlockEnd: 0.75rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; + + margin-inline: auto; + margin-block: auto; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + box-shadow: 0 15px 35px hsla(0,0%, 0%, 0.2); + } } diff --git a/Sources/HTMLKitComponents/Resources/css/views/navigation.css b/Sources/HTMLKitComponents/Resources/css/views/navigation.css index 834020e3..9e5dbecd 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/navigation.css +++ b/Sources/HTMLKitComponents/Resources/css/views/navigation.css @@ -2,89 +2,91 @@ * The rulesets for the navigation component. */ -.navigation { - --borderWidth: 0; - --borderColor: 0, 0%, 0%; - --borderOpacity: 0,0; - --borderRadius: 0; - --backgroundColor: 0, 0%, 0%; - --backgroundOpacity: 0.0; - - position: relative; - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); +@layer htmlkit.components { + .navigation { + --borderWidth: 0; + --borderColor: 0, 0%, 0%; + --borderOpacity: 0,0; + --borderRadius: 0; + --backgroundColor: 0, 0%, 0%; + --backgroundOpacity: 0.0; - .list { - .list-row { - .link { - padding-block: 0.5rem; - padding-inline: 1.0rem; - display: flex; - align-items: center; + position: relative; + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - &:hover { - background-color: hsla(0, 0%, 100%, 0.1); + .list { + .list-row { + .link { + padding-block: 0.5rem; + padding-inline: 1.0rem; + display: flex; + align-items: center; + + &:hover { + background-color: hsla(0, 0%, 100%, 0.1); + } } } } } -} -.navigation.style\:menu { - .list { - .list-row { - .link { - &.state\:active { - --borderColor: var(--accentColor); - --backgroundColor: var(--accentColor); - --foregroundColor: var(--whiteColor); - --backgroundOpacity: 1.0; + .navigation.style\:menu { + .list { + .list-row { + .link { + &.state\:active { + --borderColor: var(--accentColor); + --backgroundColor: var(--accentColor); + --foregroundColor: var(--whiteColor); + --backgroundOpacity: 1.0; - border-radius: 5px; + border-radius: 5px; + } } } } } -} -.navigation.style\:pagination { - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; + .navigation.style\:pagination { + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - .list { - &.direction\:horizontal { - .list-row { - &:not(:last-child) { - border-right: 1px; - border-right-style: solid; - border-right-color: hsla(var(--borderColor), var(--borderOpacity)); + .list { + &.direction\:horizontal { + .list-row { + &:not(:last-child) { + border-right: 1px; + border-right-style: solid; + border-right-color: hsla(var(--borderColor), var(--borderOpacity)); + } } } - } - &.direction\:vertical { - .list-row { - &:not(:last-child) { - border-bottom: 1px; - border-bottom-style: solid; - border-bottom-color: hsla(var(--borderColor), var(--borderOpacity)); + &.direction\:vertical { + .list-row { + &:not(:last-child) { + border-bottom: 1px; + border-bottom-style: solid; + border-bottom-color: hsla(var(--borderColor), var(--borderOpacity)); + } } } - } - .list-row { - .link { - padding-block: 0.5rem; - padding-inline: 1.0rem; - display: flex; - align-items: center; + .list-row { + .link { + padding-block: 0.5rem; + padding-inline: 1.0rem; + display: flex; + align-items: center; + } } } } diff --git a/Sources/HTMLKitComponents/Resources/css/views/progress.css b/Sources/HTMLKitComponents/Resources/css/views/progress.css index 02c09747..781bd06e 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/progress.css +++ b/Sources/HTMLKitComponents/Resources/css/views/progress.css @@ -2,21 +2,23 @@ * The rulesets for the progress component. */ -.progress { - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderOpacity: 1.0; - --tintColor: var(--accentColor); +@layer htmlkit.components { + .progress { + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderOpacity: 1.0; + --tintColor: var(--accentColor); - .mark { - &:first-child { - fill: hsla(var(--systemBackgroundColor), 1.0); - stroke-width: var(--borderWidth); - stroke: hsla(var(--borderColor), var(--borderOpacity)); - } + .mark { + &:first-child { + fill: hsla(var(--systemBackgroundColor), 1.0); + stroke-width: var(--borderWidth); + stroke: hsla(var(--borderColor), var(--borderOpacity)); + } - &:last-child { - fill: hsla(var(--tintColor), 1.0); + &:last-child { + fill: hsla(var(--tintColor), 1.0); + } } } } \ No newline at end of file diff --git a/Sources/HTMLKitComponents/Resources/css/views/scroll.css b/Sources/HTMLKitComponents/Resources/css/views/scroll.css index ddb07d6c..79e0e250 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/scroll.css +++ b/Sources/HTMLKitComponents/Resources/css/views/scroll.css @@ -2,35 +2,37 @@ * The stylesheet for the scroll component. */ -.scroll { - position: relative; - padding-inline: 1px; /* temporary fix */ - padding-block: 1px; /* temporary fix */ - scrollbar-width: none; +@layer htmlkit.components { + .scroll { + position: relative; + padding-inline: 1px; /* temporary fix */ + padding-block: 1px; /* temporary fix */ + scrollbar-width: none; - &:has(> .hstack) { - max-inline-size: 100%; - overflow-x: auto; - overflow-y: hidden; - overscroll-behavior-inline: contain; - } + &:has(> .hstack) { + max-inline-size: 100%; + overflow-x: auto; + overflow-y: hidden; + overscroll-behavior-inline: contain; + } - &:has(> .vstack) { - max-block-size: 100%; - overflow-x: hidden; - overflow-y: auto; - overscroll-behavior-block: contain; - } + &:has(> .vstack) { + max-block-size: 100%; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior-block: contain; + } - &::-webkit-scrollbar { - display: none; - } + &::-webkit-scrollbar { + display: none; + } - &.indicators\:true { - scrollbar-width: auto; + &.indicators\:true { + scrollbar-width: auto; - &::-webkit-scrollbar { - display: unset; + &::-webkit-scrollbar { + display: unset; + } } } } diff --git a/Sources/HTMLKitComponents/Resources/css/views/snippet.css b/Sources/HTMLKitComponents/Resources/css/views/snippet.css index b4350420..0bfd52e9 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/snippet.css +++ b/Sources/HTMLKitComponents/Resources/css/views/snippet.css @@ -2,57 +2,60 @@ * The rulesets for the snippet component. */ -.snippet { - --paddingInlineStart: 1.0em; - --paddingInlineEnd: 1.0em; - --paddingBlockStart: 0.5rem; - --paddingBlockEnd: 0.5rem; - --fontSize: 1.0rem; - --fontWeight: 400; - --lineHeight: 1.5; - --foregroundColor: var(--systemTextColor); - --borderWidth: 1px; - --borderColor: var(--systemBorderColor); - --borderRadius: 0; - --borderOpacity: 1.0; - --backgroundColor: var(--systemBackgroundColor); - --backgroundOpacity: 1.0; +@layer htmlkit.components { + .snippet { + --paddingInlineStart: 1.0em; + --paddingInlineEnd: 1.0em; + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --fontSize: 1.0rem; + --fontWeight: 400; + --lineHeight: 1.5; + --foregroundColor: var(--systemTextColor); + --borderWidth: 1px; + --borderColor: var(--systemBorderColor); + --borderRadius: 0; + --borderOpacity: 1.0; + --backgroundColor: var(--systemBackgroundColor); + --backgroundOpacity: 1.0; - position: relative; - padding-block-start: var(--paddingBlockStart); - padding-block-end: var(--paddingBlockEnd); - padding-inline-start: var(--paddingInlineStart); - padding-inline-end: var(--paddingInlineEnd); - display: block; - inline-size: 100%; - block-size: auto; - counter-reset: line; - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); - overflow-inline: auto; - - p { + position: relative; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); display: block; - font-size: var(--fontSize); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); - word-wrap: normal; - white-space: pre; - counter-increment: line; + inline-size: 100%; + block-size: auto; + counter-reset: line; + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + overflow-inline: auto; - &:before { - position: relative; - margin-inline-end: 0.938rem; - padding-inline: 0.938rem; - display: inline-block; - white-space: nowrap; - text-align: right; - content: counter(line); + p { + display: block; + font-size: var(--fontSize); + line-height: var(--lineHeight); color: hsla(var(--foregroundColor), 1.0); - -webkit-user-select: none; + word-wrap: normal; + white-space: pre; + counter-increment: line; + + &:before { + content: counter(line); + position: relative; + margin-inline-end: 2ch; + inline-size: 3ch; + display: inline-block; + font-family: monospace; + color: hsla(var(--foregroundColor), 1.0); + white-space: nowrap; + text-align: right; + user-select: none; + } } } } diff --git a/Sources/HTMLKitComponents/Resources/css/views/tabs.css b/Sources/HTMLKitComponents/Resources/css/views/tabs.css index 2462f425..dff968ba 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/tabs.css +++ b/Sources/HTMLKitComponents/Resources/css/views/tabs.css @@ -2,125 +2,141 @@ * The rulesets for the snippet component. */ -.tabs { - --fontSize: 1.0rem; - --fontWeight: 400; - --lineHeight: 1.5; - --foregroundColor: var(--systemTextColor); +@layer htmlkit.components { + .tabs { + --fontSize: 1.0rem; + --fontWeight: 400; + --lineHeight: 1.5; + --foregroundColor: var(--systemTextColor); - display: flex; + display: flex; - &.direction\:horizontal { - flex-direction: column; + &.direction\:horizontal { + flex-direction: column; - .tabs-tabs { - flex-direction: row; + .tabs-tabs { + flex-direction: row; + overflow-x: scroll; + overflow-y: clip; + overscroll-behavior: contain; + scroll-snap-type: x mandatory; - .tabs-tab { - &:hover { - &:after { - content: ""; - position: absolute; - left: 0; - bottom: -1px; - inline-size: 100%; - border-bottom-width: 1px; - border-bottom-style: solid; + .tabs-tab { + scroll-snap-align: start; + + border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-color: hsla(var(--silverColor), 1.0); + + &:hover { border-bottom-color: hsla(var(--accentColor), 0.1); } - } - &.state\:active { - &:after { - content: ""; - position: absolute; - left: 0; - bottom: -1px; - inline-size: 100%; - border-bottom-width: 2px; - border-bottom-style: solid; + &.state\:active { border-bottom-color: hsla(var(--accentColor), 1.0); - } - .tab-label { - --foregroundColor: var(--accentColor); + .tab-label { + --foregroundColor: var(--accentColor); + } } } } - } - .tabs-panes { - padding-block: 1rem; + .tabs-panes { + padding-block: 1rem; + } } - } - &.direction\:vertical { - flex-direction: row; + &.direction\:vertical { + flex-direction: row; - .tabs-tabs { - flex-direction: column; + .tabs-tabs { + flex-direction: column; + overflow-x: clip; + overflow-y: scroll; + overscroll-behavior: contain; + scroll-snap-type: y mandatory; - .tabs-tab { - &:hover { - border-radius: 5px; - background-color: hsla(var(--accentColor), 0.1); - } + .tabs-tab { + scroll-snap-align: start; - &.state\:active { - border-radius: 5px; - background-color: hsla(var(--accentColor), 1.0); + &:hover { + border-radius: var(--borderRadius); + background-color: hsla(var(--accentColor), 0.1); + } - .tab-label { - --foregroundColor: var(--whiteColor); + &.state\:active { + border-radius: var(--borderRadius); + background-color: hsla(var(--accentColor), 1.0); + + .tab-label { + --foregroundColor: var(--whiteColor); + } + + .tab-badge { + color: hsla(var(--whiteColor), 1.0); + background-color: hsla(var(--whiteColor), 0.1); + } } } } - } - .tabs-panes { - padding-inline: 1rem; + .tabs-panes { + padding-inline: 1rem; + } } - } - .tabs-tabs { - display: flex; - border-bottom-width: 1px; - border-bottom-style: solid; - border-bottom-color: hsla(var(--silverColor), 1.0); - - .tabs-tab { - position: relative; - padding-block: 0.5rem; - padding-inline: 1.0rem; + .tabs-tabs { display: flex; - flex-direction: row; - align-items: center; - gap: 1rem; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } - .tab-label { - display: inline-flex; + .tabs-tab { + position: relative; + padding-block: 0.5rem; + padding-inline: 1.0rem; + display: flex; flex-direction: row; align-items: center; - text-decoration: none; + justify-content: space-between; + gap: 1rem; + + .tab-label { + flex-grow: 1; + + display: flex; + flex-direction: row; + align-items: center; + white-space: nowrap; + text-decoration: none; - > * { - pointer-events: none; + > * { + pointer-events: none; + } } - } - .tab-badge { - font-family: var(--fontFamily); - font-size: var(--fontSize); - font-weight: var(--fontWeight); - line-height: var(--lineHeight); - color: hsla(var(--foregroundColor), 1.0); + .tab-badge { + padding-inline: 5px; + padding-block: 1px; + font-family: var(--fontFamily); + font-size: 14px; + font-weight: var(--fontWeight); + line-height: var(--lineHeight); + color: hsla(var(--foregroundColor), 1.0); + border-radius: 5px; + background-color: hsla(var(--accentColor), 0.1); + user-select: none; + } } } - } - .tabs-panes { - > * { - display: none; + .tabs-panes { + > * { + display: none; + } } } } \ No newline at end of file diff --git a/Sources/HTMLKitComponents/Resources/css/views/video.css b/Sources/HTMLKitComponents/Resources/css/views/video.css index b4537058..69e4cd6d 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/video.css +++ b/Sources/HTMLKitComponents/Resources/css/views/video.css @@ -2,22 +2,24 @@ * The rulesets for the video component. */ -.video { - --inlineSize: 100%; - --borderWidth: 0; - --borderRadius: 0; - --borderColor: 0, 0%, 0%; - --borderOpacity: 0.0; - --backgroundColor: 0, 0%, 0%; - --backgroundOpacity: 0.0; +@layer htmlkit.components { + .video { + --inlineSize: 100%; + --borderWidth: 0; + --borderRadius: 0; + --borderColor: 0, 0%, 0%; + --borderOpacity: 0.0; + --backgroundColor: 0, 0%, 0%; + --backgroundOpacity: 0.0; - position: relative; - max-inline-size: var(--inlineSize); - block-size: auto; - font-style: italic; - border-width: var(--borderWidth); - border-style: solid; - border-color: hsla(var(--borderColor), var(--borderOpacity)); - border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); -} \ No newline at end of file + position: relative; + max-inline-size: var(--inlineSize); + block-size: auto; + font-style: italic; + border-width: var(--borderWidth); + border-style: solid; + border-color: hsla(var(--borderColor), var(--borderOpacity)); + border-radius: var(--borderRadius); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); + } +} diff --git a/Sources/HTMLKitComponents/Resources/js/components/views/disclosure.js b/Sources/HTMLKitComponents/Resources/js/components/views/disclosure.js deleted file mode 100644 index 5deda473..00000000 --- a/Sources/HTMLKitComponents/Resources/js/components/views/disclosure.js +++ /dev/null @@ -1,39 +0,0 @@ -(function() { - - 'use strict'; - - /** - * Initiates the disclosure object. - * - * @constructor - * - * @param element - */ - const Disclosure = function (element) { - - this.element = element; - this.head = element.getElementsByClassName('disclosure-head')[0]; - this.body = element.getElementsByClassName('disclosure-body')[0]; - - this.initiateListener(); - }; - - /** - * Listens for the click event. - */ - Disclosure.prototype.initiateListener = function () { - - const self = this; - - this.head.addEventListener('click', function () { - self.element.classList.toggle('state:open'); - }); - }; - - const disclosures = document.getElementsByClassName('disclosure'); - - for (const disclosure of disclosures) { - new Disclosure(disclosure); - } - -}()); \ No newline at end of file diff --git a/Sources/HTMLKitComponents/Resources/js/interactions/all.js b/Sources/HTMLKitComponents/Resources/js/interactions/all.js index bce39deb..9b41ff72 100644 --- a/Sources/HTMLKitComponents/Resources/js/interactions/all.js +++ b/Sources/HTMLKitComponents/Resources/js/interactions/all.js @@ -95,9 +95,7 @@ var $ = (function () { * Shows the target. */ Self.prototype.show = function() { - - const elements = document.getElementsByClassName('state:visible'); - + this.elems[0].classList.add('state:visible'); }; diff --git a/Sources/Utilities/Minifier/Minifier.swift b/Sources/Utilities/Minifier/Minifier.swift index ab96cce7..6fceb378 100644 --- a/Sources/Utilities/Minifier/Minifier.swift +++ b/Sources/Utilities/Minifier/Minifier.swift @@ -2,7 +2,7 @@ import Foundation public struct Minifier { - public struct Compression: OptionSet { + public struct Compression: OptionSet, Sendable { public var rawValue: Int diff --git a/Tests/HTMLKitComponentsTests/ComponentTests.swift b/Tests/HTMLKitComponentsTests/ComponentTests.swift index 8b2b34bb..822cd5ed 100644 --- a/Tests/HTMLKitComponentsTests/ComponentTests.swift +++ b/Tests/HTMLKitComponentsTests/ComponentTests.swift @@ -418,11 +418,15 @@ final class ComponentTests: XCTestCase { let view = TestView { Card {} + Card {} header: {} } XCTAssertEqual(try renderer.render(view: view), """
\ +
\ +
\ +
\
\
\
@@ -527,25 +531,24 @@ final class ComponentTests: XCTestCase { func testDisclosure() throws { let view = TestView { - Disclosure("Label") { + Disclosure { + } label: { } } XCTAssertEqual(try renderer.render(view: view), """ -
\ -
\ -

Label

\ -
\ + \ -
\ + \
\ -
\
\ -
+ """ ) } diff --git a/Tests/HTMLKitComponentsTests/LocalizationTests.swift b/Tests/HTMLKitComponentsTests/LocalizationTests.swift index a9896bd5..e30fb12c 100644 --- a/Tests/HTMLKitComponentsTests/LocalizationTests.swift +++ b/Tests/HTMLKitComponentsTests/LocalizationTests.swift @@ -44,32 +44,6 @@ final class LocalizationTests: XCTestCase { """ ) } - - func testDisclosureLocalization() throws { - - let view = TestView { - Disclosure("Forgot password?") { - } - } - - XCTAssertEqual(try renderer!.render(view: view), - """ -
\ -
\ -

Mot de passe oublié?

\ - \ -
\ -
\ -
\ -
\ -
- """ - ) - } func testCheckFieldLocalization() throws { @@ -206,17 +180,32 @@ final class LocalizationTests: XCTestCase { """ ) } + + func testBarMarkLocalization() throws { + + let view = TestView { + BarMark("Folder", value: 941) + } + + XCTAssertEqual(try renderer!.render(view: view), + """ + \ + 941\ + Dossier\ + + """) + } } extension LocalizationTests { func setupLocalization() throws { - let currentFile = URL(fileURLWithPath: #file).deletingLastPathComponent() - - let currentDirectory = currentFile.appendingPathComponent("Localization") + guard let source = Bundle.module.url(forResource: "Localization", withExtension: nil) else { + return + } - let localization = Localization(source: currentDirectory, locale: Locale(tag: "fr")) + let localization = Localization(source: source, locale: Locale(tag: "fr")) self.renderer = Renderer(localization: localization) }