From 323a2e8b6632be97c88840f485723efb05e3b7de Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Fri, 16 Jun 2023 20:53:53 +0200 Subject: [PATCH 01/26] Fix tokenizing of a negative value --- Sources/Utilities/Minifier/Minifier.swift | 2 +- .../Tokenization/Stylesheet/Stylesheet.swift | 2 +- .../Minification/StylesheetTests.swift | 16 +++++++++++++--- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/Sources/Utilities/Minifier/Minifier.swift b/Sources/Utilities/Minifier/Minifier.swift index df89deb4..db48116d 100644 --- a/Sources/Utilities/Minifier/Minifier.swift +++ b/Sources/Utilities/Minifier/Minifier.swift @@ -28,7 +28,7 @@ public struct Minifier { /// Minifies a stylesheet string public func minify(css content: String) -> String { - var tokens = Stylesheet(log: .debug).consume(content) + var tokens = Stylesheet().consume(content) if compression.contains(.stripComments) { tokens.removeAll(where: { $0 is Stylesheet.CommentToken }) diff --git a/Sources/Utilities/Minifier/Tokenization/Stylesheet/Stylesheet.swift b/Sources/Utilities/Minifier/Tokenization/Stylesheet/Stylesheet.swift index 5a4ba043..6bc4ef97 100644 --- a/Sources/Utilities/Minifier/Tokenization/Stylesheet/Stylesheet.swift +++ b/Sources/Utilities/Minifier/Tokenization/Stylesheet/Stylesheet.swift @@ -516,7 +516,7 @@ internal class Stylesheet { return .stringvalue } - if character.isNumber { + if character.isNumber || character.isHyphenMinus { self.assign(token: ValueToken(type: .numeric, value: String(character))) diff --git a/Tests/UtilitiesTests/Minification/StylesheetTests.swift b/Tests/UtilitiesTests/Minification/StylesheetTests.swift index 733e39dd..72557fb4 100644 --- a/Tests/UtilitiesTests/Minification/StylesheetTests.swift +++ b/Tests/UtilitiesTests/Minification/StylesheetTests.swift @@ -314,15 +314,25 @@ final class StylesheetTests: XCTestCase { XCTAssertEqual(minifier.minify(css: functionvalue), ".selector{property:function();}") - // ....rule mark + // ...rule mark - let rulevalue = """ + let rulemark = """ .selector { property: function() !important; } """ - XCTAssertEqual(minifier.minify(css: rulevalue), ".selector{property:function()!important;}") + XCTAssertEqual(minifier.minify(css: rulemark), ".selector{property:function()!important;}") + + // ...negative margin + + let negativevalue = """ + .selector { + property: -0.0px; + } + """ + + XCTAssertEqual(minifier.minify(css: negativevalue), ".selector{property:-0.0px;}") } // Tests minifing a funtion From 389765df708bce23fd371573bf13ce273d168ef8 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Fri, 16 Jun 2023 20:57:24 +0200 Subject: [PATCH 02/26] Fix the tokenizing of an negation operator --- Sources/Utilities/Minifier/Minifier.swift | 1 + .../Tokenization/Javascript/Javascript.swift | 2 +- .../Minification/JavascriptTests.swift | 55 ++++++++++++++++++- 3 files changed, 55 insertions(+), 3 deletions(-) diff --git a/Sources/Utilities/Minifier/Minifier.swift b/Sources/Utilities/Minifier/Minifier.swift index db48116d..ab96cce7 100644 --- a/Sources/Utilities/Minifier/Minifier.swift +++ b/Sources/Utilities/Minifier/Minifier.swift @@ -94,6 +94,7 @@ public struct Minifier { if previous >= tokens.startIndex && next < tokens.endIndex { + // keep the whitespace if its between two word tokens if tokens[previous] is Javascript.WordToken && tokens[next] is Javascript.WordToken { yield.append(token) } diff --git a/Sources/Utilities/Minifier/Tokenization/Javascript/Javascript.swift b/Sources/Utilities/Minifier/Tokenization/Javascript/Javascript.swift index fcd7ace7..132aa8fb 100644 --- a/Sources/Utilities/Minifier/Tokenization/Javascript/Javascript.swift +++ b/Sources/Utilities/Minifier/Tokenization/Javascript/Javascript.swift @@ -197,7 +197,7 @@ internal class Javascript { return .numeric } - if character.isOperator { + if character.isOperator || character.isExclamationMark { self.emit(token: FormatToken(type: .operator, value: String(character))) diff --git a/Tests/UtilitiesTests/Minification/JavascriptTests.swift b/Tests/UtilitiesTests/Minification/JavascriptTests.swift index 181642a7..6ca1606e 100644 --- a/Tests/UtilitiesTests/Minification/JavascriptTests.swift +++ b/Tests/UtilitiesTests/Minification/JavascriptTests.swift @@ -136,8 +136,59 @@ final class JavascriptTests: XCTestCase { } """ - XCTAssertEqual(minifier.minify(js: switchcase), "switch(condition){case x:break;case'y':break;default:}" - ) + XCTAssertEqual(minifier.minify(js: switchcase), "switch(condition){case x:break;case'y':break;default:}") + + // ...if else statement + + let ifelse = """ + if(condition) { + console.log('true'); + } else { + console.log('false'); + } + """ + + XCTAssertEqual(minifier.minify(js: ifelse), "if(condition){console.log('true');}else{console.log('false');}") + } + + func testConditions() { + + // ...greater than condition + + let greatherthan = """ + if(variable < 10) { + console.log('true'); + } else { + console.log('false'); + } + """ + + XCTAssertEqual(minifier.minify(js: greatherthan), "if(variable<10){console.log('true');}else{console.log('false');}") + + // ...equal condition + + let equalto = """ + if(variable == 'variable') { + console.log('true'); + } else { + console.log('false'); + } + """ + + XCTAssertEqual(minifier.minify(js: equalto), "if(variable=='variable'){console.log('true');}else{console.log('false');}") + + + // ...not operator condition + + let negationperator = """ + if(!variable) { + console.log('true'); + } else { + console.log('false'); + } + """ + + XCTAssertEqual(minifier.minify(js: negationperator), "if(!variable){console.log('true');}else{console.log('false');}") } func testMinfiyFunctionPattern() { From d3e0f9014e032ec0a0dc427d99663e158a745b22 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sat, 17 Jun 2023 17:36:59 +0200 Subject: [PATCH 03/26] Fix missing border radius on the button component --- Sources/HTMLKitComponents/Resources/css/buttons/button.css | 1 + 1 file changed, 1 insertion(+) diff --git a/Sources/HTMLKitComponents/Resources/css/buttons/button.css b/Sources/HTMLKitComponents/Resources/css/buttons/button.css index 72369f61..b1a0eb35 100644 --- a/Sources/HTMLKitComponents/Resources/css/buttons/button.css +++ b/Sources/HTMLKitComponents/Resources/css/buttons/button.css @@ -49,6 +49,7 @@ 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); cursor: pointer; -webkit-user-select: none; From ddb7042f58871eebfb3ed91383d5f9def841afef Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sat, 17 Jun 2023 17:38:57 +0200 Subject: [PATCH 04/26] Add background opacity to the button component --- Sources/HTMLKitComponents/Resources/css/buttons/button.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Sources/HTMLKitComponents/Resources/css/buttons/button.css b/Sources/HTMLKitComponents/Resources/css/buttons/button.css index b1a0eb35..9fe11930 100644 --- a/Sources/HTMLKitComponents/Resources/css/buttons/button.css +++ b/Sources/HTMLKitComponents/Resources/css/buttons/button.css @@ -31,6 +31,7 @@ --borderRadius: 0; --foregroundColor: 0, 0%, 100%; --backgroundColor: 210, 11%, 15%; + --backgroundOpacity: 1.0; position: relative; display: inline-flex; @@ -50,7 +51,7 @@ border-style: solid; border-color: hsla(var(--borderColor), 1.0); border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), 1.0); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; @@ -75,7 +76,7 @@ .button.style\:outline { --foregroundColor: var(--secondaryColor); - --backgroundColor: transparent; + --backgroundOpacity: 0.0; --borderColor: var(--secondaryColor); } From 90148bd9bc89b40f9931404285faffdbf828ea04 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sat, 17 Jun 2023 17:40:26 +0200 Subject: [PATCH 05/26] Rename javascript file of the selectfield component --- .../Resources/js/components/forms/{select.js => selectfield.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename Sources/HTMLKitComponents/Resources/js/components/forms/{select.js => selectfield.js} (100%) diff --git a/Sources/HTMLKitComponents/Resources/js/components/forms/select.js b/Sources/HTMLKitComponents/Resources/js/components/forms/selectfield.js similarity index 100% rename from Sources/HTMLKitComponents/Resources/js/components/forms/select.js rename to Sources/HTMLKitComponents/Resources/js/components/forms/selectfield.js From a2be174ab9ef7885c3df882044f2f0dd03384ea2 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sat, 17 Jun 2023 17:40:59 +0200 Subject: [PATCH 06/26] Change the listener for the dropdown component --- .../Resources/js/components/buttons/dropdown.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js b/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js index 32addc14..118ad235 100644 --- a/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js +++ b/Sources/HTMLKitComponents/Resources/js/components/buttons/dropdown.js @@ -22,8 +22,8 @@ window.addEventListener('click', function (event) { - if(!event.target.matches('.dropdown-label')) { - self.hideDropdownList(); + if(!self.element.contains(event.target)) { + self.hideDropdownList(); } }); }; From 8f52a61434dcc6b090e5c21fa990666721eef5a1 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sat, 17 Jun 2023 17:53:36 +0200 Subject: [PATCH 07/26] Fix the style for the formfield invalidation --- .../HTMLKitComponents/Resources/css/forms/checkfield.css | 3 ++- .../HTMLKitComponents/Resources/css/forms/datepicker.css | 5 +++-- .../HTMLKitComponents/Resources/css/forms/radioselect.css | 3 ++- .../HTMLKitComponents/Resources/css/forms/searchfield.css | 5 +++-- .../HTMLKitComponents/Resources/css/forms/securefield.css | 3 ++- .../HTMLKitComponents/Resources/css/forms/selectfield.css | 5 +++-- Sources/HTMLKitComponents/Resources/css/forms/slider.css | 3 ++- .../HTMLKitComponents/Resources/css/forms/texteditor.css | 5 +++-- .../HTMLKitComponents/Resources/css/forms/textfield.css | 5 +++-- Sources/HTMLKitComponents/Resources/css/forms/textpad.css | 7 ++++++- 10 files changed, 29 insertions(+), 15 deletions(-) diff --git a/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css b/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css index 8cd17473..730fe236 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css @@ -35,7 +35,8 @@ } .checkfield:focus { - border-color: hsla(var(--focusColor), 1.0); + --borderColor: var(--focusColor) !important; + outline: 0; box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css b/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css index e4958f60..e338d5d3 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css @@ -57,7 +57,8 @@ } .datepicker-datefield:focus { - border-color: hsla(var(--focusColor), 1.0); + --borderColor: var(--focusColor) !important; + outline: 0; box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); } @@ -67,7 +68,7 @@ } .datepicker-datefield:invalid { - border-color: var(--redColor); + --borderColor: var(--redColor); } .datepicker-calendar { diff --git a/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css b/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css index b664c243..f2129c4b 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css @@ -38,7 +38,8 @@ } .radioselect:focus { - border-color: hsla(var(--focusColor), 1.0); + --borderColor: var(--focusColor) !important; + outline: 0; box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css b/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css index f4114eae..b7034fa4 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css @@ -53,13 +53,14 @@ } .searchfield:focus { - border-color: hsla(var(--focusColor), 1.0); + --borderColor: var(--focusColor) !important; + outline: 0; box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); } .searchfield:invalid { - border-color: var(--redColor); + --borderColor: var(--redColor); } .scheme\:dark .searchfield, .searchfield.scheme\:dark { diff --git a/Sources/HTMLKitComponents/Resources/css/forms/securefield.css b/Sources/HTMLKitComponents/Resources/css/forms/securefield.css index b5294957..7f0bb5c6 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/securefield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/securefield.css @@ -53,7 +53,8 @@ } .securefield:focus { - border-color: hsla(var(--focusColor), 1.0); + --borderColor: var(--focusColor) !important; + outline: 0; box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css b/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css index 985d9fbc..930c24c7 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css @@ -57,13 +57,14 @@ } .selectfield-textfield:focus { - border-color: hsla(var(--focusColor), 1.0); + --borderColor: var(--focusColor) !important; + outline: 0; box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); } .selectfield-textfield:invalid { - border-color: var(--redColor); + --borderColor: var(--redColor); } .selectfield-optionlist { diff --git a/Sources/HTMLKitComponents/Resources/css/forms/slider.css b/Sources/HTMLKitComponents/Resources/css/forms/slider.css index 5084707e..c92ee052 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/slider.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/slider.css @@ -34,7 +34,8 @@ } .slider:focus { - border-color: hsla(var(--focusColor), 1.0); + --borderColor: var(--focusColor) !important; + outline: 0; box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css b/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css index 90fd37d9..e866b0d3 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css @@ -54,13 +54,14 @@ } .texteditor:focus { - border-color: hsla(var(--focusColor), 1.0); + --borderColor: var(--focusColor) !important; + outline: 0; box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); } .texteditor:invalid { - border-color: var(--redColor); + --borderColor: var(--redColor); } .scheme\:dark .texteditor, .texteditor.scheme\:dark { diff --git a/Sources/HTMLKitComponents/Resources/css/forms/textfield.css b/Sources/HTMLKitComponents/Resources/css/forms/textfield.css index ac435e5c..fa8613fb 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/textfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/textfield.css @@ -53,13 +53,14 @@ } .textfield:focus { - border-color: hsla(var(--focusColor), 1.0); + --borderColor: var(--focusColor) !important; + outline: 0; box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); } .textfield:invalid { - border-color: var(--redColor); + --borderColor: var(--redColor); } .scheme\:dark .textfield, .textfield.scheme\:dark { diff --git a/Sources/HTMLKitComponents/Resources/css/forms/textpad.css b/Sources/HTMLKitComponents/Resources/css/forms/textpad.css index 28f7f1f5..828050d8 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/textpad.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/textpad.css @@ -44,11 +44,16 @@ } .textpad:focus-within { - border-color: hsla(var(--focusColor), 1.0); + --borderColor: var(--focusColor) !important; + outline: 0; box-shadow: 0 0 0 0.125rem hsla(var(--focusColor), 0.1); } +.textpad:has(.textpad-content:invalid) { + --borderColor: var(--redColor); +} + .textpad-toolbar { display: flex; flex-direction: row; From 04863177605d245364d99ceaa380885905ec56f7 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sat, 17 Jun 2023 18:18:26 +0200 Subject: [PATCH 08/26] Add opacity properties for background and border --- .../Resources/css/buttons/button.css | 3 ++- .../Resources/css/buttons/dropdown.css | 6 ++++-- .../Resources/css/forms/checkfield.css | 6 ++++-- .../Resources/css/forms/datepicker.css | 6 ++++-- .../Resources/css/forms/radioselect.css | 6 ++++-- .../Resources/css/forms/searchfield.css | 6 ++++-- .../Resources/css/forms/securefield.css | 6 ++++-- .../Resources/css/forms/selectfield.css | 6 ++++-- .../HTMLKitComponents/Resources/css/forms/slider.css | 6 ++++-- .../Resources/css/forms/texteditor.css | 6 ++++-- .../Resources/css/forms/textfield.css | 6 ++++-- .../Resources/css/forms/textpad.css | 6 ++++-- Sources/HTMLKitComponents/Resources/css/globals.css | 12 ++++++++---- .../HTMLKitComponents/Resources/css/views/card.css | 6 ++++-- .../HTMLKitComponents/Resources/css/views/modal.css | 6 ++++-- Sources/HTMLKitComponents/Tokens.swift | 2 -- 16 files changed, 62 insertions(+), 33 deletions(-) diff --git a/Sources/HTMLKitComponents/Resources/css/buttons/button.css b/Sources/HTMLKitComponents/Resources/css/buttons/button.css index 9fe11930..6db212be 100644 --- a/Sources/HTMLKitComponents/Resources/css/buttons/button.css +++ b/Sources/HTMLKitComponents/Resources/css/buttons/button.css @@ -29,6 +29,7 @@ --borderWidth: 1px; --borderColor: 210, 9%, 31%; --borderRadius: 0; + --borderOpacity: 1.0; --foregroundColor: 0, 0%, 100%; --backgroundColor: 210, 11%, 15%; --backgroundOpacity: 1.0; @@ -49,7 +50,7 @@ white-space: nowrap; border-width: var(--borderWidth); border-style: solid; - border-color: hsla(var(--borderColor), 1.0); + border-color: hsla(var(--borderColor), var(--borderOpacity)); border-radius: var(--borderRadius); background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); cursor: pointer; diff --git a/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css b/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css index 88e28ed9..6bf2fcb9 100644 --- a/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css +++ b/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css @@ -29,8 +29,10 @@ --borderWidth: 1px; --borderColor: 210, 9%, 31%; --borderRadius: 0; + --borderOpacity: 1.0; --foregroundColor: 0, 0%, 100%; --backgroundColor: 210, 11%, 15%; + --backgroundOpacity: 1.0; position: relative; } @@ -51,9 +53,9 @@ white-space: nowrap; border-width: var(--borderWidth); border-style: solid; - border-color: hsla(var(--borderColor), 1.0); + border-color: hsla(var(--borderColor), var(--borderOpacity)); border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), 1.0); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; diff --git a/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css b/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css index 730fe236..9f4bf7c6 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/checkfield.css @@ -14,9 +14,11 @@ .checkfield { --borderWidth: 1px; --borderColor: 210, 14%, 89%; + --borderOpacity: 1.0; --controlColor: 0, 0%, 0%; --focusColor: 210, 100%, 50%; --backgroundColor: 0, 0%, 100%; + --backgroundOpacity: 1.0; position: relative; display: inline-grid; @@ -27,8 +29,8 @@ inline-size: 1.5rem; border-width: var(--borderWidth); border-style: solid; - border-color: hsla(var(--borderColor), 1.0); - background-color: hsla(var(--backgroundColor), 1.0); + border-color: hsla(var(--borderColor), var(--borderOpacity)); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); -webkit-appearance: none; -moz-appearance: none; appearance: none; diff --git a/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css b/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css index e338d5d3..a7a0583c 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css @@ -31,8 +31,10 @@ --borderWidth: 1px; --borderColor: 210, 14%, 89%; --borderRadius: 0; + --borderOpacity: 1.0; --focusColor: 210, 100%, 50%; --backgroundColor: 0, 0%, 100%; + --backgroundOpacity: 1.0; position: relative; } @@ -48,9 +50,9 @@ color: hsla(var(--foregroundColor), 1.0); border-width: var(--borderWidth); border-style: solid; - border-color: hsla(var(--borderColor), 1.0); + border-color: hsla(var(--borderColor), var(--borderOpacity)); border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), 1.0); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); -webkit-appearance: none; -moz-appearance: none; appearance: none; diff --git a/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css b/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css index f2129c4b..3e92fa73 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/radioselect.css @@ -16,9 +16,11 @@ .radioselect { --borderWidth: 1px; --borderColor: 210, 14%, 89%; + --borderOpacity: 1.0; --controlColor: 0, 0%, 0%; --focusColor: 210, 100%, 50%; --backgroundColor: 0, 0%, 100%; + --backgroundOpacity: 1.0; position: relative; display: inline-grid; @@ -29,9 +31,9 @@ inline-size: 1.5rem; border-width: var(--borderWidth); border-style: solid; - border-color: hsla(var(--borderColor), 1.0); + border-color: hsla(var(--borderColor), var(--borderOpacity)); border-radius: 50%; - background-color: hsla(var(--backgroundColor), 1.0); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); -webkit-appearance: none; -moz-appearance: none; appearance: none; diff --git a/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css b/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css index b7034fa4..f5ed5192 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css @@ -31,8 +31,10 @@ --borderWidth: 1px; --borderColor: 210, 14%, 89%; --borderRadius: 0; + --borderOpacity: 1.0; --focusColor: 210, 100%, 50%; --backgroundColor: 0, 0%, 100%; + --backgroundOpacity: 1.0; display: block; inline-size: 100%; @@ -44,9 +46,9 @@ color: hsla(var(--foregroundColor), 1.0); border-width: var(--borderWidth); border-style: solid; - border-color: hsla(var(--borderColor), 1.0); + border-color: hsla(var(--borderColor), var(--borderOpacity)); border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), 1.0); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); -webkit-appearance: none; -moz-appearance: none; appearance: none; diff --git a/Sources/HTMLKitComponents/Resources/css/forms/securefield.css b/Sources/HTMLKitComponents/Resources/css/forms/securefield.css index 7f0bb5c6..af8d200d 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/securefield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/securefield.css @@ -31,8 +31,10 @@ --borderWidth: 1px; --borderColor: 210, 14%, 89%; --borderRadius: 0; + --borderOpacity: 1.0; --focusColor: 210, 100%, 50%; --backgroundColor: 0, 0%, 100%; + --backgroundOpacity: 1.0; display: block; inline-size: 100%; @@ -44,9 +46,9 @@ color: hsla(var(--foregroundColor), 1.0); border-width: var(--borderWidth); border-style: solid; - border-color: hsla(var(--borderColor), 1.0); + border-color: hsla(var(--borderColor), var(--borderOpacity)); border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), 1.0); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); -webkit-appearance: none; -moz-appearance: none; appearance: none; diff --git a/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css b/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css index 930c24c7..5474572b 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css @@ -31,8 +31,10 @@ --borderWidth: 1px; --borderColor: 210, 14%, 89%; --borderRadius: 0; + --borderOpacity: 1.0; --focusColor: 210, 100%, 50%; --backgroundColor: 0, 0%, 100%; + --backgroundOpacity: 1.0; position: relative; } @@ -48,9 +50,9 @@ color: hsla(var(--foregroundColor), 1.0); border-width: var(--borderWidth); border-style: solid; - border-color: hsla(var(--borderColor), 1.0); + border-color: hsla(var(--borderColor), var(--borderOpacity)); border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), 1.0); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); -webkit-appearance: none; -moz-appearance: none; appearance: none; diff --git a/Sources/HTMLKitComponents/Resources/css/forms/slider.css b/Sources/HTMLKitComponents/Resources/css/forms/slider.css index c92ee052..e82019f3 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/slider.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/slider.css @@ -16,9 +16,11 @@ .slider { --borderWidth: 1px; --borderColor: 210, 14%, 89%; + --borderOpacity: 1.0; --controlColor: 0, 0%, 0%; --focusColor: 210, 100%, 50%; --backgroundColor: 0, 0%, 100%; + --backgroundOpacity: 1.0; display: block; margin: 0; @@ -26,8 +28,8 @@ inline-size: 100%; border-width: var(--borderWidth); border-style: solid; - border-color: hsla(var(--borderColor), 1.0); - background-color: hsla(var(--backgroundColor), 1.0); + border-color: hsla(var(--borderColor), var(--borderOpacity)); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); -webkit-appearance: none; -moz-appearance: none; appearance: none; diff --git a/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css b/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css index e866b0d3..adbe6743 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css @@ -31,8 +31,10 @@ --borderWidth: 1px; --borderColor: 210, 14%, 89%; --borderRadius: 0; + --borderOpacity: 1.0; --focusColor: 210, 100%, 50%; --backgroundColor: 0, 0%, 100%; + --backgroundOpacity: 1.0; display: block; inline-size: 100%; @@ -44,9 +46,9 @@ color: hsla(var(--foregroundColor), 1.0); border-width: var(--borderWidth); border-style: solid; - border-color: hsla(var(--borderColor), 1.0); + border-color: hsla(var(--borderColor), var(--borderOpacity)); border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), 1.0); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); -webkit-appearance: none; -moz-appearance: none; appearance: none; diff --git a/Sources/HTMLKitComponents/Resources/css/forms/textfield.css b/Sources/HTMLKitComponents/Resources/css/forms/textfield.css index fa8613fb..d094a7de 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/textfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/textfield.css @@ -31,8 +31,10 @@ --borderWidth: 1px; --borderColor: 210, 14%, 89%; --borderRadius: 0; + --borderOpacity: 1.0; --focusColor: 210, 100%, 50%; --backgroundColor: 0, 0%, 100%; + --backgroundOpacity: 1.0; display: block; inline-size: 100%; @@ -44,9 +46,9 @@ color: hsla(var(--foregroundColor), 1.0); border-width: var(--borderWidth); border-style: solid; - border-color: hsla(var(--borderColor), 1.0); + border-color: hsla(var(--borderColor), var(--borderOpacity)); border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), 1.0); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); -webkit-appearance: none; -moz-appearance: none; appearance: none; diff --git a/Sources/HTMLKitComponents/Resources/css/forms/textpad.css b/Sources/HTMLKitComponents/Resources/css/forms/textpad.css index 828050d8..1853df60 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/textpad.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/textpad.css @@ -31,16 +31,18 @@ --borderWidth: 1px; --borderColor: 210, 14%, 89%; --borderRadius: 0; + --borderOpacity: 1.0; --focusColor: 210, 100%, 50%; --backgroundColor: 0, 0%, 100%; + --backgroundOpacity: 1.0; display: flex; flex-direction: column; border-width: var(--borderWidth); border-style: solid; - border-color: hsla(var(--borderColor), 1.0); + border-color: hsla(var(--borderColor), var(--borderOpacity)); border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), 1.0); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); } .textpad:focus-within { diff --git a/Sources/HTMLKitComponents/Resources/css/globals.css b/Sources/HTMLKitComponents/Resources/css/globals.css index 73f10253..3d25aa5b 100644 --- a/Sources/HTMLKitComponents/Resources/css/globals.css +++ b/Sources/HTMLKitComponents/Resources/css/globals.css @@ -222,10 +222,6 @@ video { --foregroundColor: var(--brownColor) !important; } -.color\:transparent { - --foregroundColor: transparent !important; -} - .color\:cyan { --foregroundColor: var(--cyanColor) !important; } @@ -379,6 +375,10 @@ video { --borderColor: var(--secondaryColor) !important; } +.border\:transparent { + --borderOpacity: 0.0; +} + /* backgrounds */ @@ -455,6 +455,10 @@ video { --backgroundColor: var(--secondaryColor) !important; } +.background\:transparent { + --backgroundOpacity: 0.0; +} + /* focus */ diff --git a/Sources/HTMLKitComponents/Resources/css/views/card.css b/Sources/HTMLKitComponents/Resources/css/views/card.css index 09ac51e7..a4513c39 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/card.css +++ b/Sources/HTMLKitComponents/Resources/css/views/card.css @@ -20,16 +20,18 @@ --borderWidth: 1px; --borderColor: 210, 14%, 89%; --borderRadius: 0; + --borderOpacity: 1.0; --backgroundColor: 0, 0%, 100%; + --backgroundOpacity: 1.0; position: relative; display: flex; flex-direction: column; border-width: var(--borderWidth); border-style: solid; - border-color: hsla(var(--borderColor), 1.0); + border-color: hsla(var(--borderColor), var(--borderOpacity)); border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), 1.0); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); } .card .card-header { diff --git a/Sources/HTMLKitComponents/Resources/css/views/modal.css b/Sources/HTMLKitComponents/Resources/css/views/modal.css index 7e138263..0edc8d19 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/modal.css +++ b/Sources/HTMLKitComponents/Resources/css/views/modal.css @@ -20,15 +20,17 @@ --borderWidth: 1px; --borderColor: 10, 14%, 89%; --borderRadius: 0; + --borderOpacity: 1.0; --backgroundColor: 0, 0%, 100%; + --backgroundOpacity: 1.0; padding-block: var(--paddingBlock); padding-inline: var(--paddingInline); border-width: var(--borderWidth); border-style: solid; - border-color: hsla(var(--borderColor), 1.0); + border-color: hsla(var(--borderColor), var(--borderOpacity)); border-radius: var(--borderRadius); - background-color: hsla(var(--backgroundColor), 1.0); + background-color: hsla(var(--backgroundColor), var(--backgroundOpacity)); box-shadow: 0 15px 35px hsla(0,0%, 0%, 0.2); } diff --git a/Sources/HTMLKitComponents/Tokens.swift b/Sources/HTMLKitComponents/Tokens.swift index d7096b5b..a0036980 100644 --- a/Sources/HTMLKitComponents/Tokens.swift +++ b/Sources/HTMLKitComponents/Tokens.swift @@ -621,8 +621,6 @@ public enum Tokens { case primary = "focus:primary" case secondary = "focus:secondary" - - case transparent = "focus:transparent" } public enum ColorScheme: String { From 5015ad9a5fe29c19f7ebe8ff3491cf7e8c0b0c3e Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sun, 18 Jun 2023 15:03:36 +0200 Subject: [PATCH 09/26] Fix the stack alignment and remove the stack column component --- .../HTMLKitComponents/Components/Button.swift | 18 ++ .../HTMLKitComponents/Components/Card.swift | 9 + .../Components/Dropdown.swift | 9 + .../HTMLKitComponents/Components/Form.swift | 90 ++++++++++ .../HTMLKitComponents/Components/Group.swift | 13 ++ .../HTMLKitComponents/Components/Image.swift | 9 + .../HTMLKitComponents/Components/Link.swift | 13 ++ .../HTMLKitComponents/Components/List.swift | 13 ++ .../Components/Snippet.swift | 9 + .../HTMLKitComponents/Components/Stack.swift | 80 ++++----- .../HTMLKitComponents/Components/Text.swift | 13 ++ .../Modifiers/ViewModifier.swift | 6 + .../Properties/Modifiable.swift | 8 + .../Resources/css/globals.css | 136 +++++++++++++++ .../Resources/css/layout/stack.css | 159 ++++-------------- Sources/HTMLKitComponents/Tokens.swift | 3 + 16 files changed, 416 insertions(+), 172 deletions(-) diff --git a/Sources/HTMLKitComponents/Components/Button.swift b/Sources/HTMLKitComponents/Components/Button.swift index 607cc5d4..d94cefb6 100644 --- a/Sources/HTMLKitComponents/Components/Button.swift +++ b/Sources/HTMLKitComponents/Components/Button.swift @@ -128,6 +128,15 @@ extension Button: ViewModifier { public func borderColor(_ color: Tokens.BorderColor) -> Button { return self.mutate(bordercolor: color.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Button { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } /// A component that initiates an action. @@ -239,4 +248,13 @@ extension LinkButton: ViewModifier { public func borderColor(_ color: Tokens.BorderColor) -> LinkButton { return self.mutate(bordercolor: color.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> LinkButton { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } diff --git a/Sources/HTMLKitComponents/Components/Card.swift b/Sources/HTMLKitComponents/Components/Card.swift index a18da928..f29f72ff 100644 --- a/Sources/HTMLKitComponents/Components/Card.swift +++ b/Sources/HTMLKitComponents/Components/Card.swift @@ -89,5 +89,14 @@ extension Card: ViewModifier { public func borderColor(_ color: Tokens.BorderColor) -> Card { return self.mutate(class: color.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Card { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } diff --git a/Sources/HTMLKitComponents/Components/Dropdown.swift b/Sources/HTMLKitComponents/Components/Dropdown.swift index 2f0208a9..f02794b6 100644 --- a/Sources/HTMLKitComponents/Components/Dropdown.swift +++ b/Sources/HTMLKitComponents/Components/Dropdown.swift @@ -102,4 +102,13 @@ extension Dropdown: ViewModifier { public func colorScheme(_ scheme: Tokens.ColorScheme) -> Dropdown { return self.mutate(scheme: scheme.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Dropdown { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } diff --git a/Sources/HTMLKitComponents/Components/Form.swift b/Sources/HTMLKitComponents/Components/Form.swift index 4fceb80a..f771620d 100644 --- a/Sources/HTMLKitComponents/Components/Form.swift +++ b/Sources/HTMLKitComponents/Components/Form.swift @@ -215,6 +215,15 @@ extension TextField: ViewModifier { public func colorScheme(_ scheme: Tokens.ColorScheme) -> TextField { return self.mutate(scheme: scheme.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> TextField { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } /// A component that displays a editable and expandable form control. @@ -330,6 +339,15 @@ extension TextEditor: ViewModifier { public func colorScheme(_ scheme: Tokens.ColorScheme) -> TextEditor { return self.mutate(scheme: scheme.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> TextEditor { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } /// A component that displays a form control @@ -429,6 +447,15 @@ extension CheckField: ViewModifier { public func colorScheme(_ scheme: Tokens.ColorScheme) -> CheckField { return self.mutate(scheme: scheme.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> CheckField { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } /// A component that displays @@ -528,6 +555,15 @@ extension RadioSelect: ViewModifier { public func colorScheme(_ scheme: Tokens.ColorScheme) -> RadioSelect { return self.mutate(scheme: scheme.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> RadioSelect { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } /// A component that displays @@ -627,6 +663,15 @@ extension SelectField: ViewModifier { public func colorScheme(_ scheme: Tokens.ColorScheme) -> SelectField { return self.mutate(scheme: scheme.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> SelectField { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } /// A component that displays @@ -765,6 +810,15 @@ extension SecureField: ViewModifier { public func colorScheme(_ scheme: Tokens.ColorScheme) -> SecureField { return self.mutate(scheme: scheme.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> SecureField { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } /// A component that displays @@ -852,6 +906,15 @@ extension Slider: ViewModifier { public func colorScheme(_ scheme: Tokens.ColorScheme) -> Slider { return self.mutate(scheme: scheme.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Slider { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } /// A component that displays @@ -1026,6 +1089,15 @@ extension DatePicker: ViewModifier { public func colorScheme(_ scheme: Tokens.ColorScheme) -> DatePicker { return self.mutate(scheme: scheme.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> DatePicker { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } /// A component that displays @@ -1129,6 +1201,15 @@ extension SearchField: ViewModifier { public func colorScheme(_ scheme: Tokens.ColorScheme) -> SearchField { return self.mutate(scheme: scheme.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> SearchField { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } /// A component that displays the progress of a task. @@ -1328,4 +1409,13 @@ extension TextPad: ViewModifier { public func colorScheme(_ scheme: Tokens.ColorScheme) -> TextPad { return self.mutate(scheme: scheme.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> TextPad { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } diff --git a/Sources/HTMLKitComponents/Components/Group.swift b/Sources/HTMLKitComponents/Components/Group.swift index 4355f81d..d3300114 100644 --- a/Sources/HTMLKitComponents/Components/Group.swift +++ b/Sources/HTMLKitComponents/Components/Group.swift @@ -34,6 +34,19 @@ public struct Group: View, Modifiable { } .class(classes.joined(separator: " ")) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Group { + + var newSelf = self + + if let offset { + newSelf.classes.append(offset.rawValue) + } + + newSelf.classes.append(width.rawValue) + + return newSelf + } } extension Group: TextModifier { diff --git a/Sources/HTMLKitComponents/Components/Image.swift b/Sources/HTMLKitComponents/Components/Image.swift index c4ee10e8..21c5cf6e 100644 --- a/Sources/HTMLKitComponents/Components/Image.swift +++ b/Sources/HTMLKitComponents/Components/Image.swift @@ -84,4 +84,13 @@ extension Image: ViewModifier { public func borderColor(_ color: Tokens.BorderColor) -> Image { return self.mutate(bordercolor: color.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Image { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } diff --git a/Sources/HTMLKitComponents/Components/Link.swift b/Sources/HTMLKitComponents/Components/Link.swift index f2bfc5ac..0240675f 100644 --- a/Sources/HTMLKitComponents/Components/Link.swift +++ b/Sources/HTMLKitComponents/Components/Link.swift @@ -60,6 +60,19 @@ public struct Link: View, Modifiable { .target(target) .class(classes.joined(separator: " ")) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Link { + + var newSelf = self + + if let offset { + newSelf.classes.append(offset.rawValue) + } + + newSelf.classes.append(width.rawValue) + + return newSelf + } } extension Link: TextModifier { diff --git a/Sources/HTMLKitComponents/Components/List.swift b/Sources/HTMLKitComponents/Components/List.swift index 3b16399a..0c3c29eb 100644 --- a/Sources/HTMLKitComponents/Components/List.swift +++ b/Sources/HTMLKitComponents/Components/List.swift @@ -57,6 +57,19 @@ public struct List: View, Modifiable, Actionable { return newSelf } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> List { + + var newSelf = self + + if let offset { + newSelf.classes.append(offset.rawValue) + } + + newSelf.classes.append(width.rawValue) + + return newSelf + } } extension List: HoverModifier { diff --git a/Sources/HTMLKitComponents/Components/Snippet.swift b/Sources/HTMLKitComponents/Components/Snippet.swift index e45c6ee9..f576d074 100644 --- a/Sources/HTMLKitComponents/Components/Snippet.swift +++ b/Sources/HTMLKitComponents/Components/Snippet.swift @@ -77,4 +77,13 @@ extension Snippet: ViewModifier { public func borderColor(_ color: Tokens.BorderColor) -> Snippet { return self.mutate(bordercolor: color.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Snippet { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } diff --git a/Sources/HTMLKitComponents/Components/Stack.swift b/Sources/HTMLKitComponents/Components/Stack.swift index 4ea6821e..e63d9a17 100644 --- a/Sources/HTMLKitComponents/Components/Stack.swift +++ b/Sources/HTMLKitComponents/Components/Stack.swift @@ -109,6 +109,15 @@ extension HStack: ViewModifier { public func borderColor(_ color: Tokens.BorderColor) -> HStack { return self.mutate(bordercolor: color.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> HStack { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } /// A component that arranges content vertically. @@ -158,6 +167,15 @@ public struct VStack: View, Actionable, Modifiable { public func id(_ value: String) -> VStack { return self.mutate(id: value) } + + /// Sets the space of the content. + public func contentSpace(_ value: Tokens.ContentSpace) -> VStack { + + var newSelf = self + newSelf.classes.append(value.rawValue) + + return newSelf + } } extension VStack: HoverModifier { @@ -204,6 +222,15 @@ extension VStack: ViewModifier { public func borderColor(_ color: Tokens.BorderColor) -> VStack { return self.mutate(bordercolor: color.rawValue) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> VStack { + + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) + } + + return self.mutate(class: width.rawValue) + } } /// A component that overlays content. @@ -299,56 +326,13 @@ extension ZStack: ViewModifier { public func borderColor(_ color: Tokens.BorderColor) -> ZStack { return self.mutate(bordercolor: color.rawValue) } -} - -/// A component that represents a stack column. -public struct StackColumn: View { - - /// The content of the column. - internal var content: [Content] - /// The content of the column. - internal var classes: [String] - - /// Creates a stack column. - public init(size: Tokens.ColumnSize, @ContentBuilder content: () -> [Content]) { + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> ZStack { - self.content = content() - self.classes = ["stack-column", size.rawValue] - } - - /// Creates a stack column. - public init(size: Tokens.ColumnSize, alignment: Tokens.TextAlignment, @ContentBuilder content: () -> [Content]) { - - self.content = content() - self.classes = ["stack-column", size.rawValue, alignment.rawValue] - } - - /// Creates a stack column. - public init(size: Tokens.ColumnSize, offset: Tokens.ColumnOffset, @ContentBuilder content: () -> [Content]) { - - self.content = content() - self.classes = ["stack-column", size.rawValue, offset.rawValue] - } - - /// Creates a stack column. - public init(size: Tokens.ColumnSize, alignment: Tokens.TextAlignment, offset: Tokens.ColumnOffset, @ContentBuilder content: () -> [Content]) { - - self.content = content() - self.classes = ["stack-column", size.rawValue, alignment.rawValue, offset.rawValue] - } - - /// Creates a stack column. - internal init(content: [Content], classes: [String]) { - - self.content = content - self.classes = classes - } - - public var body: Content { - Division { - content + if let offset { + return self.mutate(frame: [width.rawValue, offset.rawValue]) } - .class(classes.joined(separator: " ")) + + return self.mutate(class: width.rawValue) } } diff --git a/Sources/HTMLKitComponents/Components/Text.swift b/Sources/HTMLKitComponents/Components/Text.swift index a3293e03..599b26f3 100644 --- a/Sources/HTMLKitComponents/Components/Text.swift +++ b/Sources/HTMLKitComponents/Components/Text.swift @@ -52,6 +52,19 @@ public struct Text: View, Actionable, Modifiable { public func id(_ value: String) -> Text { return self.mutate(id: value) } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Text { + + var newSelf = self + + if let offset { + newSelf.classes.append(offset.rawValue) + } + + newSelf.classes.append(width.rawValue) + + return newSelf + } } extension Text: HoverModifier { diff --git a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift index 00ec1363..f2efec05 100644 --- a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift @@ -29,6 +29,8 @@ public protocol ViewModifier { /// Sets the border color of the input func borderColor(_ color: Tokens.BorderColor) -> Self + + func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset?) -> Self } extension ViewModifier where Self: Modifiable { @@ -64,4 +66,8 @@ extension ViewModifier where Self: Modifiable { internal func mutate(bordercolor class: String) -> Self { return self.mutate(class: `class`) } + + internal func mutate(frame classes: [String]) -> Self { + return self.mutate(classes: classes) + } } diff --git a/Sources/HTMLKitComponents/Properties/Modifiable.swift b/Sources/HTMLKitComponents/Properties/Modifiable.swift index 5e60e812..67d57fc3 100644 --- a/Sources/HTMLKitComponents/Properties/Modifiable.swift +++ b/Sources/HTMLKitComponents/Properties/Modifiable.swift @@ -15,4 +15,12 @@ extension Modifiable { return newSelf } + + internal func mutate(classes: [String]) -> Self { + + var newSelf = self + newSelf.classes.append(contentsOf: classes) + + return newSelf + } } diff --git a/Sources/HTMLKitComponents/Resources/css/globals.css b/Sources/HTMLKitComponents/Resources/css/globals.css index 3d25aa5b..c220d73d 100644 --- a/Sources/HTMLKitComponents/Resources/css/globals.css +++ b/Sources/HTMLKitComponents/Resources/css/globals.css @@ -569,3 +569,139 @@ video { .shape\:fullrounded { --borderRadius: 1.563rem !important; } + +/* + sizes + */ + +.size\:1 { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 8.3333333333%; +} + +.size\:2 { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 16.6666666667%; +} + +.size\:3 { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 25%; +} + +.size\:4 { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 33.3333333333%; +} + +.size\:5 { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 41.6666666667%; +} + +.size\:6 { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 50%; +} + +.size\:7 { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 58.3333333333%; +} + +.size\:8 { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 66.6666666667%; +} + +.size\:9 { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 75%; +} + +.size\:10 { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 83.3333333333%; +} + +.size\:11 { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 91.6666666667%; +} + +.size\:12 { + flex-grow: 0; + flex-shrink: 1; + flex-basis: auto; + inline-size: 100%; +} + +/* + offset + */ + +.offset\:1 { + margin-inline-start: 8.3333333333%; +} + +.offset\:2 { + margin-inline-start: 16.6666666667%; +} + +.offset\:3 { + margin-inline-start: 25%; +} + +.offset\:4 { + margin-inline-start: 33.3333333333%; +} + +.offset\:5 { + margin-inline-start: 41.6666666667%; +} + +.offset\:6 { + margin-inline-start: 50%; +} + +.offset\:7 { + margin-inline-start: 58.3333333333%; +} + +.offset\:8 { + margin-inline-start: 66.6666666667%; +} + +.offset\:9 { + margin-inline-start: 75%; +} + +.offset\:10 { + margin-inline-start: 83.3333333333%; +} + +.offset\:11 { + margin-inline-start: 91.6666666667%; +} diff --git a/Sources/HTMLKitComponents/Resources/css/layout/stack.css b/Sources/HTMLKitComponents/Resources/css/layout/stack.css index 304170d9..2f65f621 100644 --- a/Sources/HTMLKitComponents/Resources/css/layout/stack.css +++ b/Sources/HTMLKitComponents/Resources/css/layout/stack.css @@ -38,161 +38,72 @@ justify-content: space-evenly; } -/* - The rulesets for the vertical stack component. - */ - -.vstack { - position: relative; - inline-size: 100%; - display: flex; - flex-direction: column; +.hstack.space\:large { + gap: 2.25rem; } -.vstack.alignment\:leading { - justify-content: flex-start; +.hstack.space\:medium { + gap: 1.5rem; } -.vstack.alignment\:center { - justify-content: center; -} - -.vstack.alignment\:trailing { - justify-content: flex-end; +.hstack.space\:small { + gap: 1rem; } /* The rulesets for the vertical stack component. */ -.zstack { - position: absolute; - inset: 0; - z-index: 1; - display: flex; - inline-size: 100%; -} - -/* - The rulesets for the stack column component. - */ - -.stack-column { +.vstack { position: relative; -} - -.stack-column.size\:1 { - flex: 0 0 auto; - inline-size: 8.3333333333%; -} - -.stack-column.size\:2 { - flex: 0 0 auto; - inline-size: 16.6666666667%; -} - -.stack-column.size\:3 { - flex: 0 0 auto; - inline-size: 25%; -} - -.stack-column.size\:4 { - flex: 0 0 auto; - inline-size: 33.3333333333%; -} - -.stack-column.size\:5 { - flex: 0 0 auto; - inline-size: 41.6666666667%; -} - -.stack-column.size\:6 { - flex: 0 0 auto; - inline-size: 50%; -} - -.stack-column.size\:7 { - flex: 0 0 auto; - inline-size: 58.3333333333%; -} - -.stack-column.size\:8 { - flex: 0 0 auto; - inline-size: 66.6666666667%; -} - -.stack-column.size\:9 { - flex: 0 0 auto; - inline-size: 75%; -} - -.stack-column.size\:10 { - flex: 0 0 auto; - inline-size: 83.3333333333%; -} - -.stack-column.size\:11 { - flex: 0 0 auto; - inline-size: 91.6666666667%; -} - -.stack-column.size\:12 { - flex: 0 0 auto; inline-size: 100%; + display: flex; + flex-direction: column; } -.stack-column.alignment\:center { - text-align: center; -} - -.stack-column.alignment\:left { - text-align: left; -} - -.stack-column.alignment\:right { - text-align: right; -} - -.stack-column.offset\:1 { - margin-inline-start: 8.3333333333%; +.vstack.alignment\:leading { + align-items: flex-start; } -.stack-column.offset\:2 { - margin-inline-start: 16.6666666667%; +.vstack.alignment\:center { + align-items: center; } -.stack-column.offset\:3 { - margin-inline-start: 25%; +.vstack.alignment\:trailing { + align-items: flex-end; } -.stack-column.offset\:4 { - margin-inline-start: 33.3333333333%; +.vstack.space\:around { + justify-content: space-around; } -.stack-column.offset\:5 { - margin-inline-start: 41.6666666667%; +.vstack.space\:between { + justify-content: space-between; } -.stack-column.offset\:6 { - margin-inline-start: 50%; +.vstack.space\:evenly { + justify-content: space-evenly; } -.stack-column.offset\:7 { - margin-inline-start: 58.3333333333%; +.vstack.space\:large { + gap: 2.25rem; } -.stack-column.offset\:8 { - margin-inline-start: 66.6666666667%; +.vstack.space\:medium { + gap: 1.5rem; } -.stack-column.offset\:9 { - margin-inline-start: 75%; +.vstack.space\:small { + gap: 1rem; } -.stack-column.offset\:10 { - margin-inline-start: 83.3333333333%; -} +/* + The rulesets for the vertical stack component. + */ -.stack-column.offset\:11 { - margin-inline-start: 91.6666666667%; +.zstack { + position: absolute; + inset: 0; + z-index: 1; + display: flex; } diff --git a/Sources/HTMLKitComponents/Tokens.swift b/Sources/HTMLKitComponents/Tokens.swift index a0036980..341d13bc 100644 --- a/Sources/HTMLKitComponents/Tokens.swift +++ b/Sources/HTMLKitComponents/Tokens.swift @@ -426,6 +426,9 @@ public enum Tokens { case around = "space:around" case between = "space:between" case evenly = "space:evenly" + case large = "space:large" + case medium = "space:medium" + case small = "space:small" } public enum SyntaxHighlight: String { From fd9ae5f7829d81c20b31c46cc99dae49d0675008 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sun, 18 Jun 2023 15:17:16 +0200 Subject: [PATCH 10/26] Add an aspect ratio to the image component --- Sources/HTMLKitComponents/Resources/css/views/image.css | 1 + 1 file changed, 1 insertion(+) diff --git a/Sources/HTMLKitComponents/Resources/css/views/image.css b/Sources/HTMLKitComponents/Resources/css/views/image.css index a5c0f88d..88da532e 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/image.css +++ b/Sources/HTMLKitComponents/Resources/css/views/image.css @@ -21,6 +21,7 @@ border-style: solid; border-color: hsla(var(--borderColor), 1.0); border-radius: var(--borderRadius); + aspect-ratio: 1.0; } .image.fit\:contain { From e9f7b3317a78f0840d3701b1d51ab1b1bc2fba4c Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sun, 18 Jun 2023 16:06:21 +0200 Subject: [PATCH 11/26] Add a better distinction for block and inline padding --- .../HTMLKitComponents/Components/Button.swift | 16 ++++ .../HTMLKitComponents/Components/Card.swift | 8 ++ .../Components/Dropdown.swift | 8 ++ .../HTMLKitComponents/Components/Form.swift | 80 +++++++++++++++++++ .../HTMLKitComponents/Components/Image.swift | 8 ++ .../Components/Snippet.swift | 8 ++ .../HTMLKitComponents/Components/Stack.swift | 28 ++++++- .../Modifiers/ViewModifier.swift | 6 ++ .../Resources/css/globals.css | 24 ++++++ .../Resources/css/layout/stack.css | 15 ++++ Sources/HTMLKitComponents/Tokens.swift | 18 +++++ 11 files changed, 217 insertions(+), 2 deletions(-) diff --git a/Sources/HTMLKitComponents/Components/Button.swift b/Sources/HTMLKitComponents/Components/Button.swift index d94cefb6..83b5a7df 100644 --- a/Sources/HTMLKitComponents/Components/Button.swift +++ b/Sources/HTMLKitComponents/Components/Button.swift @@ -121,6 +121,14 @@ extension Button: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> Button { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> Button { + return self.mutate(padding: length.rawValue) + } + public func borderShape(_ shape: Tokens.BorderShape) -> Button { return self.mutate(bordershape: shape.rawValue) } @@ -241,6 +249,14 @@ extension LinkButton: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> LinkButton { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> LinkButton { + return self.mutate(padding: length.rawValue) + } + public func borderShape(_ shape: Tokens.BorderShape) -> LinkButton { return self.mutate(bordershape: shape.rawValue) } diff --git a/Sources/HTMLKitComponents/Components/Card.swift b/Sources/HTMLKitComponents/Components/Card.swift index f29f72ff..9fd5f717 100644 --- a/Sources/HTMLKitComponents/Components/Card.swift +++ b/Sources/HTMLKitComponents/Components/Card.swift @@ -82,6 +82,14 @@ extension Card: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> Card { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> Card { + return self.mutate(padding: length.rawValue) + } + public func borderShape(_ shape: Tokens.BorderShape) -> Card { return self.mutate(class: shape.rawValue) } diff --git a/Sources/HTMLKitComponents/Components/Dropdown.swift b/Sources/HTMLKitComponents/Components/Dropdown.swift index f02794b6..18ef27ca 100644 --- a/Sources/HTMLKitComponents/Components/Dropdown.swift +++ b/Sources/HTMLKitComponents/Components/Dropdown.swift @@ -87,6 +87,14 @@ extension Dropdown: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> Dropdown { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> Dropdown { + return self.mutate(padding: length.rawValue) + } + public func borderShape(_ shape: Tokens.BorderShape) -> Dropdown { return self.mutate(bordershape: shape.rawValue) } diff --git a/Sources/HTMLKitComponents/Components/Form.swift b/Sources/HTMLKitComponents/Components/Form.swift index f771620d..901da986 100644 --- a/Sources/HTMLKitComponents/Components/Form.swift +++ b/Sources/HTMLKitComponents/Components/Form.swift @@ -200,6 +200,14 @@ extension TextField: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> TextField { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> TextField { + return self.mutate(padding: length.rawValue) + } + public func borderColor(_ color: Tokens.BorderColor) -> TextField { return self.mutate(bordercolor: color.rawValue) } @@ -324,6 +332,14 @@ extension TextEditor: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> TextEditor { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> TextEditor { + return self.mutate(padding: length.rawValue) + } + public func borderColor(_ color: Tokens.BorderColor) -> TextEditor { return self.mutate(bordercolor: color.rawValue) } @@ -432,6 +448,14 @@ extension CheckField: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> CheckField { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> CheckField { + return self.mutate(padding: length.rawValue) + } + public func borderColor(_ color: Tokens.BorderColor) -> CheckField { return self.mutate(bordercolor: color.rawValue) } @@ -540,6 +564,14 @@ extension RadioSelect: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> RadioSelect { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> RadioSelect { + return self.mutate(padding: length.rawValue) + } + public func borderColor(_ color: Tokens.BorderColor) -> RadioSelect { return self.mutate(bordercolor: color.rawValue) } @@ -648,6 +680,14 @@ extension SelectField: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> SelectField { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> SelectField { + return self.mutate(padding: length.rawValue) + } + public func borderColor(_ color: Tokens.BorderColor) -> SelectField { return self.mutate(bordercolor: color.rawValue) } @@ -795,6 +835,14 @@ extension SecureField: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> SecureField { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> SecureField { + return self.mutate(padding: length.rawValue) + } + public func borderColor(_ color: Tokens.BorderColor) -> SecureField { return self.mutate(bordercolor: color.rawValue) } @@ -891,6 +939,14 @@ extension Slider: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> Slider { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> Slider { + return self.mutate(padding: length.rawValue) + } + public func borderColor(_ color: Tokens.BorderColor) -> Slider { return self.mutate(bordercolor: color.rawValue) } @@ -1074,6 +1130,14 @@ extension DatePicker: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> DatePicker { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> DatePicker { + return self.mutate(padding: length.rawValue) + } + public func borderColor(_ color: Tokens.BorderColor) -> DatePicker { return self.mutate(bordercolor: color.rawValue) } @@ -1186,6 +1250,14 @@ extension SearchField: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> SearchField { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> SearchField { + return self.mutate(padding: length.rawValue) + } + public func borderColor(_ color: Tokens.BorderColor) -> SearchField { return self.mutate(bordercolor: color.rawValue) } @@ -1394,6 +1466,14 @@ extension TextPad: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> TextPad { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> TextPad { + return self.mutate(padding: length.rawValue) + } + public func borderColor(_ color: Tokens.BorderColor) -> TextPad { return self.mutate(bordercolor: color.rawValue) } diff --git a/Sources/HTMLKitComponents/Components/Image.swift b/Sources/HTMLKitComponents/Components/Image.swift index 21c5cf6e..36d69d8a 100644 --- a/Sources/HTMLKitComponents/Components/Image.swift +++ b/Sources/HTMLKitComponents/Components/Image.swift @@ -77,6 +77,14 @@ extension Image: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> Image { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> Image { + return self.mutate(padding: length.rawValue) + } + public func borderShape(_ shape: Tokens.BorderShape) -> Image { return self.mutate(bordershape: shape.rawValue) } diff --git a/Sources/HTMLKitComponents/Components/Snippet.swift b/Sources/HTMLKitComponents/Components/Snippet.swift index f576d074..3d88b5c9 100644 --- a/Sources/HTMLKitComponents/Components/Snippet.swift +++ b/Sources/HTMLKitComponents/Components/Snippet.swift @@ -70,6 +70,14 @@ extension Snippet: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> Snippet { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> Snippet { + return self.mutate(padding: length.rawValue) + } + public func borderShape(_ shape: Tokens.BorderShape) -> Snippet { return self.mutate(bordershape: shape.rawValue) } diff --git a/Sources/HTMLKitComponents/Components/Stack.swift b/Sources/HTMLKitComponents/Components/Stack.swift index e63d9a17..a542bc27 100644 --- a/Sources/HTMLKitComponents/Components/Stack.swift +++ b/Sources/HTMLKitComponents/Components/Stack.swift @@ -98,8 +98,16 @@ extension HStack: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ value: Tokens.BoxPadding) -> HStack { - return self.mutate(padding: value.rawValue) + public func padding(_ length: Tokens.BoxPadding) -> HStack { + return self.mutate(padding: length.rawValue) + } + + public func padding(block length: Tokens.BlockBoxPadding) -> HStack { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> HStack { + return self.mutate(padding: length.rawValue) } public func borderShape(_ shape: Tokens.BorderShape) -> HStack { @@ -215,6 +223,14 @@ extension VStack: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> VStack { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> VStack { + return self.mutate(padding: length.rawValue) + } + public func borderShape(_ shape: Tokens.BorderShape) -> VStack { return self.mutate(bordershape: shape.rawValue) } @@ -319,6 +335,14 @@ extension ZStack: ViewModifier { return self.mutate(padding: length.rawValue) } + public func padding(block length: Tokens.BlockBoxPadding) -> ZStack { + return self.mutate(padding: length.rawValue) + } + + public func padding(inline length: Tokens.InlineBoxPadding) -> ZStack { + return self.mutate(padding: length.rawValue) + } + public func borderShape(_ shape: Tokens.BorderShape) -> ZStack { return self.mutate(bordershape: shape.rawValue) } diff --git a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift index f2efec05..8a7e1dbc 100644 --- a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift @@ -24,6 +24,12 @@ public protocol ViewModifier { /// Sets the box padding func padding(_ length: Tokens.BoxPadding) -> Self + /// Sets the padding for the vertical box. + func padding(block length: Tokens.BlockBoxPadding) -> Self + + /// Sets the padding for the horizontal box. + func padding(inline length: Tokens.InlineBoxPadding) -> Self + /// Sets the shape of the button. func borderShape(_ shape: Tokens.BorderShape) -> Self diff --git a/Sources/HTMLKitComponents/Resources/css/globals.css b/Sources/HTMLKitComponents/Resources/css/globals.css index c220d73d..9ffea29a 100644 --- a/Sources/HTMLKitComponents/Resources/css/globals.css +++ b/Sources/HTMLKitComponents/Resources/css/globals.css @@ -554,6 +554,30 @@ video { --paddingBlock: 1rem !important; } +.padding-inline\:large { + --paddingInline: 2.25rem !important; +} + +.padding-inline\:medium { + --paddingInline: 1.5rem !important; +} + +.padding-inline\:small { + --paddingInline: 1rem !important; +} + +.padding-block\:large { + --paddingBlock: 2.25rem !important; +} + +.padding-block\:medium { + --paddingBlock: 1.5rem !important; +} + +.padding-block\:small { + --paddingBlock: 1rem !important; +} + /* shape */ diff --git a/Sources/HTMLKitComponents/Resources/css/layout/stack.css b/Sources/HTMLKitComponents/Resources/css/layout/stack.css index 2f65f621..1d17374c 100644 --- a/Sources/HTMLKitComponents/Resources/css/layout/stack.css +++ b/Sources/HTMLKitComponents/Resources/css/layout/stack.css @@ -3,11 +3,16 @@ */ .hstack { + --paddingInline: 0; + --paddingBlock: 0; + position: relative; inline-size: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; + padding-block: var(--paddingBlock); + padding-inline: var(--paddingInline); } .hstack.alignment\:top { @@ -55,10 +60,15 @@ */ .vstack { + --paddingInline: 0; + --paddingBlock: 0; + position: relative; inline-size: 100%; display: flex; flex-direction: column; + padding-block: var(--paddingBlock); + padding-inline: var(--paddingInline); } .vstack.alignment\:leading { @@ -102,8 +112,13 @@ */ .zstack { + --paddingInline: 0; + --paddingBlock: 0; + position: absolute; inset: 0; z-index: 1; display: flex; + padding-block: var(--paddingBlock); + padding-inline: var(--paddingInline); } diff --git a/Sources/HTMLKitComponents/Tokens.swift b/Sources/HTMLKitComponents/Tokens.swift index 341d13bc..825531b7 100644 --- a/Sources/HTMLKitComponents/Tokens.swift +++ b/Sources/HTMLKitComponents/Tokens.swift @@ -643,4 +643,22 @@ public enum Tokens { case small = "padding:small" } + + public enum BlockBoxPadding: String { + + case large = "padding-block:large" + + case medium = "padding-block:medium" + + case small = "padding-block:small" + } + + public enum InlineBoxPadding: String { + + case large = "padding-inline:large" + + case medium = "padding-inline:medium" + + case small = "padding-inline:small" + } } From 4d4ddd32e22e3e80e09c16726c005190f67f5a49 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sun, 18 Jun 2023 16:07:38 +0200 Subject: [PATCH 12/26] Fix component test --- Tests/HTMLKitComponentsTests/ComponentTests.swift | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/Tests/HTMLKitComponentsTests/ComponentTests.swift b/Tests/HTMLKitComponentsTests/ComponentTests.swift index 8423add0..595190f3 100644 --- a/Tests/HTMLKitComponentsTests/ComponentTests.swift +++ b/Tests/HTMLKitComponentsTests/ComponentTests.swift @@ -359,21 +359,6 @@ final class ComponentTests: XCTestCase { ) } - - func testStackColumn() throws { - - let view = TestView { - StackColumn(size: .twelve) { - } - } - - XCTAssertEqual(try renderer.render(view: view), - """ -
- """ - ) - } - func testText() throws { let view = TestView { From 98168a0028b96a534a15fe9bc9e0e6ac903e67a6 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sun, 18 Jun 2023 21:09:58 +0200 Subject: [PATCH 13/26] Add an edge set for the padding --- .../HTMLKitComponents/Components/Button.swift | 20 ++-- .../HTMLKitComponents/Components/Card.swift | 10 +- .../Components/Dropdown.swift | 10 +- .../HTMLKitComponents/Components/Form.swift | 100 ++++++------------ .../HTMLKitComponents/Components/Image.swift | 10 +- .../Components/Snippet.swift | 10 +- .../HTMLKitComponents/Components/Stack.swift | 30 ++---- .../Modifiers/ViewModifier.swift | 42 ++++++-- .../Resources/css/buttons/button.css | 12 ++- .../Resources/css/buttons/dropdown.css | 12 ++- .../Resources/css/forms/datepicker.css | 18 ++-- .../Resources/css/forms/searchfield.css | 12 ++- .../Resources/css/forms/securefield.css | 12 ++- .../Resources/css/forms/selectfield.css | 18 ++-- .../Resources/css/forms/texteditor.css | 12 ++- .../Resources/css/forms/textfield.css | 12 ++- .../Resources/css/forms/textpad.css | 18 ++-- .../Resources/css/globals.css | 66 ++++++++++-- .../Resources/css/layout/stack.css | 36 ++++--- .../Resources/css/views/card.css | 12 ++- .../Resources/css/views/modal.css | 12 ++- .../Resources/css/views/snippet.css | 3 +- Sources/HTMLKitComponents/Tokens.swift | 38 +++---- 23 files changed, 295 insertions(+), 230 deletions(-) diff --git a/Sources/HTMLKitComponents/Components/Button.swift b/Sources/HTMLKitComponents/Components/Button.swift index 83b5a7df..fd27db43 100644 --- a/Sources/HTMLKitComponents/Components/Button.swift +++ b/Sources/HTMLKitComponents/Components/Button.swift @@ -117,16 +117,12 @@ extension Button: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> Button { + public func padding(_ length: Tokens.PaddingLength) -> Button { return self.mutate(padding: length.rawValue) } - public func padding(block length: Tokens.BlockBoxPadding) -> Button { - return self.mutate(padding: length.rawValue) - } - - public func padding(inline length: Tokens.InlineBoxPadding) -> Button { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> Button { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderShape(_ shape: Tokens.BorderShape) -> Button { @@ -245,16 +241,12 @@ extension LinkButton: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> LinkButton { + public func padding(_ length: Tokens.PaddingLength) -> LinkButton { return self.mutate(padding: length.rawValue) } - public func padding(block length: Tokens.BlockBoxPadding) -> LinkButton { - return self.mutate(padding: length.rawValue) - } - - public func padding(inline length: Tokens.InlineBoxPadding) -> LinkButton { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> LinkButton { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderShape(_ shape: Tokens.BorderShape) -> LinkButton { diff --git a/Sources/HTMLKitComponents/Components/Card.swift b/Sources/HTMLKitComponents/Components/Card.swift index 9fd5f717..d32faa48 100644 --- a/Sources/HTMLKitComponents/Components/Card.swift +++ b/Sources/HTMLKitComponents/Components/Card.swift @@ -78,16 +78,12 @@ extension Card: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> Card { + public func padding(_ length: Tokens.PaddingLength) -> Card { return self.mutate(padding: length.rawValue) } - public func padding(block length: Tokens.BlockBoxPadding) -> Card { - return self.mutate(padding: length.rawValue) - } - - public func padding(inline length: Tokens.InlineBoxPadding) -> Card { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> Card { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderShape(_ shape: Tokens.BorderShape) -> Card { diff --git a/Sources/HTMLKitComponents/Components/Dropdown.swift b/Sources/HTMLKitComponents/Components/Dropdown.swift index 18ef27ca..debccf8a 100644 --- a/Sources/HTMLKitComponents/Components/Dropdown.swift +++ b/Sources/HTMLKitComponents/Components/Dropdown.swift @@ -83,16 +83,12 @@ extension Dropdown: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> Dropdown { + public func padding(_ length: Tokens.PaddingLength) -> Dropdown { return self.mutate(padding: length.rawValue) } - public func padding(block length: Tokens.BlockBoxPadding) -> Dropdown { - return self.mutate(padding: length.rawValue) - } - - public func padding(inline length: Tokens.InlineBoxPadding) -> Dropdown { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> Dropdown { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderShape(_ shape: Tokens.BorderShape) -> Dropdown { diff --git a/Sources/HTMLKitComponents/Components/Form.swift b/Sources/HTMLKitComponents/Components/Form.swift index 901da986..77077fbe 100644 --- a/Sources/HTMLKitComponents/Components/Form.swift +++ b/Sources/HTMLKitComponents/Components/Form.swift @@ -196,16 +196,12 @@ extension TextField: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> TextField { + public func padding(_ length: Tokens.PaddingLength) -> TextField { return self.mutate(padding: length.rawValue) } - public func padding(block length: Tokens.BlockBoxPadding) -> TextField { - return self.mutate(padding: length.rawValue) - } - - public func padding(inline length: Tokens.InlineBoxPadding) -> TextField { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> TextField { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderColor(_ color: Tokens.BorderColor) -> TextField { @@ -328,16 +324,12 @@ extension TextEditor: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> TextEditor { - return self.mutate(padding: length.rawValue) - } - - public func padding(block length: Tokens.BlockBoxPadding) -> TextEditor { + public func padding(_ length: Tokens.PaddingLength) -> TextEditor { return self.mutate(padding: length.rawValue) } - public func padding(inline length: Tokens.InlineBoxPadding) -> TextEditor { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> TextEditor { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderColor(_ color: Tokens.BorderColor) -> TextEditor { @@ -444,16 +436,12 @@ extension CheckField: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> CheckField { - return self.mutate(padding: length.rawValue) - } - - public func padding(block length: Tokens.BlockBoxPadding) -> CheckField { + public func padding(_ length: Tokens.PaddingLength) -> CheckField { return self.mutate(padding: length.rawValue) } - public func padding(inline length: Tokens.InlineBoxPadding) -> CheckField { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> CheckField { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderColor(_ color: Tokens.BorderColor) -> CheckField { @@ -560,16 +548,12 @@ extension RadioSelect: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> RadioSelect { - return self.mutate(padding: length.rawValue) - } - - public func padding(block length: Tokens.BlockBoxPadding) -> RadioSelect { + public func padding(_ length: Tokens.PaddingLength) -> RadioSelect { return self.mutate(padding: length.rawValue) } - public func padding(inline length: Tokens.InlineBoxPadding) -> RadioSelect { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> RadioSelect { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderColor(_ color: Tokens.BorderColor) -> RadioSelect { @@ -676,16 +660,12 @@ extension SelectField: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> SelectField { + public func padding(_ length: Tokens.PaddingLength) -> SelectField { return self.mutate(padding: length.rawValue) } - public func padding(block length: Tokens.BlockBoxPadding) -> SelectField { - return self.mutate(padding: length.rawValue) - } - - public func padding(inline length: Tokens.InlineBoxPadding) -> SelectField { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> SelectField { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderColor(_ color: Tokens.BorderColor) -> SelectField { @@ -831,16 +811,12 @@ extension SecureField: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> SecureField { + public func padding(_ length: Tokens.PaddingLength) -> SecureField { return self.mutate(padding: length.rawValue) } - public func padding(block length: Tokens.BlockBoxPadding) -> SecureField { - return self.mutate(padding: length.rawValue) - } - - public func padding(inline length: Tokens.InlineBoxPadding) -> SecureField { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> SecureField { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderColor(_ color: Tokens.BorderColor) -> SecureField { @@ -935,16 +911,12 @@ extension Slider: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> Slider { - return self.mutate(padding: length.rawValue) - } - - public func padding(block length: Tokens.BlockBoxPadding) -> Slider { + public func padding(_ length: Tokens.PaddingLength) -> Slider { return self.mutate(padding: length.rawValue) } - public func padding(inline length: Tokens.InlineBoxPadding) -> Slider { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> Slider { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderColor(_ color: Tokens.BorderColor) -> Slider { @@ -1126,16 +1098,12 @@ extension DatePicker: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> DatePicker { - return self.mutate(padding: length.rawValue) - } - - public func padding(block length: Tokens.BlockBoxPadding) -> DatePicker { + public func padding(_ length: Tokens.PaddingLength) -> DatePicker { return self.mutate(padding: length.rawValue) } - public func padding(inline length: Tokens.InlineBoxPadding) -> DatePicker { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> DatePicker { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderColor(_ color: Tokens.BorderColor) -> DatePicker { @@ -1246,16 +1214,12 @@ extension SearchField: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> SearchField { - return self.mutate(padding: length.rawValue) - } - - public func padding(block length: Tokens.BlockBoxPadding) -> SearchField { + public func padding(_ length: Tokens.PaddingLength) -> SearchField { return self.mutate(padding: length.rawValue) } - public func padding(inline length: Tokens.InlineBoxPadding) -> SearchField { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> SearchField { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderColor(_ color: Tokens.BorderColor) -> SearchField { @@ -1462,16 +1426,12 @@ extension TextPad: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> TextPad { + public func padding(_ length: Tokens.PaddingLength) -> TextPad { return self.mutate(padding: length.rawValue) } - public func padding(block length: Tokens.BlockBoxPadding) -> TextPad { - return self.mutate(padding: length.rawValue) - } - - public func padding(inline length: Tokens.InlineBoxPadding) -> TextPad { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> TextPad { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderColor(_ color: Tokens.BorderColor) -> TextPad { diff --git a/Sources/HTMLKitComponents/Components/Image.swift b/Sources/HTMLKitComponents/Components/Image.swift index 36d69d8a..6f988781 100644 --- a/Sources/HTMLKitComponents/Components/Image.swift +++ b/Sources/HTMLKitComponents/Components/Image.swift @@ -73,16 +73,12 @@ extension Image: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> Image { + public func padding(_ length: Tokens.PaddingLength) -> Image { return self.mutate(padding: length.rawValue) } - public func padding(block length: Tokens.BlockBoxPadding) -> Image { - return self.mutate(padding: length.rawValue) - } - - public func padding(inline length: Tokens.InlineBoxPadding) -> Image { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> Image { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderShape(_ shape: Tokens.BorderShape) -> Image { diff --git a/Sources/HTMLKitComponents/Components/Snippet.swift b/Sources/HTMLKitComponents/Components/Snippet.swift index 3d88b5c9..b6f28c03 100644 --- a/Sources/HTMLKitComponents/Components/Snippet.swift +++ b/Sources/HTMLKitComponents/Components/Snippet.swift @@ -66,16 +66,12 @@ extension Snippet: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> Snippet { + public func padding(_ length: Tokens.PaddingLength) -> Snippet { return self.mutate(padding: length.rawValue) } - public func padding(block length: Tokens.BlockBoxPadding) -> Snippet { - return self.mutate(padding: length.rawValue) - } - - public func padding(inline length: Tokens.InlineBoxPadding) -> Snippet { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> Snippet { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderShape(_ shape: Tokens.BorderShape) -> Snippet { diff --git a/Sources/HTMLKitComponents/Components/Stack.swift b/Sources/HTMLKitComponents/Components/Stack.swift index a542bc27..602ae97d 100644 --- a/Sources/HTMLKitComponents/Components/Stack.swift +++ b/Sources/HTMLKitComponents/Components/Stack.swift @@ -98,16 +98,12 @@ extension HStack: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> HStack { + public func padding(_ length: Tokens.PaddingLength) -> HStack { return self.mutate(padding: length.rawValue) } - public func padding(block length: Tokens.BlockBoxPadding) -> HStack { - return self.mutate(padding: length.rawValue) - } - - public func padding(inline length: Tokens.InlineBoxPadding) -> HStack { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> HStack { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderShape(_ shape: Tokens.BorderShape) -> HStack { @@ -219,16 +215,12 @@ extension VStack: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> VStack { - return self.mutate(padding: length.rawValue) - } - - public func padding(block length: Tokens.BlockBoxPadding) -> VStack { + public func padding(_ length: Tokens.PaddingLength) -> VStack { return self.mutate(padding: length.rawValue) } - public func padding(inline length: Tokens.InlineBoxPadding) -> VStack { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> VStack { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderShape(_ shape: Tokens.BorderShape) -> VStack { @@ -331,16 +323,12 @@ extension ZStack: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.BoxPadding) -> ZStack { - return self.mutate(padding: length.rawValue) - } - - public func padding(block length: Tokens.BlockBoxPadding) -> ZStack { + public func padding(_ length: Tokens.PaddingLength) -> ZStack { return self.mutate(padding: length.rawValue) } - public func padding(inline length: Tokens.InlineBoxPadding) -> ZStack { - return self.mutate(padding: length.rawValue) + public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> ZStack { + return self.mutate(padding: length.rawValue, insets: insets) } public func borderShape(_ shape: Tokens.BorderShape) -> ZStack { diff --git a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift index 8a7e1dbc..0600be3a 100644 --- a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift @@ -22,13 +22,10 @@ public protocol ViewModifier { func colorScheme(_ scheme: Tokens.ColorScheme) -> Self /// Sets the box padding - func padding(_ length: Tokens.BoxPadding) -> Self + func padding(_ length: Tokens.PaddingLength) -> Self /// Sets the padding for the vertical box. - func padding(block length: Tokens.BlockBoxPadding) -> Self - - /// Sets the padding for the horizontal box. - func padding(inline length: Tokens.InlineBoxPadding) -> Self + func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> Self /// Sets the shape of the button. func borderShape(_ shape: Tokens.BorderShape) -> Self @@ -61,8 +58,39 @@ extension ViewModifier where Self: Modifiable { return self.mutate(class: `class`) } - internal func mutate(padding class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(padding value: String) -> Self { + return self.mutate(class: "padding:\(value)") + } + + internal func mutate(padding value: String, insets: EdgeSet) -> Self { + + var classes: [String] = [] + + if insets.contains(.top) { + classes.append("padding-top:\(value)") + } + + if insets.contains(.bottom) { + classes.append("padding-bottom:\(value)") + } + + if insets.contains(.leading) { + classes.append("padding-leading:\(value)") + } + + if insets.contains(.trailing) { + classes.append("padding-trailing:\(value)") + } + + if insets.contains(.horizontal) { + classes.append("padding-inline:\(value)") + } + + if insets.contains(.vertical) { + classes.append("padding-block:\(value)") + } + + return self.mutate(classes: classes) } internal func mutate(bordershape class: String) -> Self { diff --git a/Sources/HTMLKitComponents/Resources/css/buttons/button.css b/Sources/HTMLKitComponents/Resources/css/buttons/button.css index 6db212be..79c465b7 100644 --- a/Sources/HTMLKitComponents/Resources/css/buttons/button.css +++ b/Sources/HTMLKitComponents/Resources/css/buttons/button.css @@ -20,8 +20,10 @@ */ .button { - --paddingBlock: 0.5rem; - --paddingInline: 1.0rem; + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; --inlineSize: fit-content(); --fontSize: 1.0rem; --fontWeight: 400; @@ -38,8 +40,10 @@ display: inline-flex; align-items: center; justify-content: center; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); inline-size: var(--inlineSize); font-family: var(--fontFamily); font-size: var(--fontSize); diff --git a/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css b/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css index 6bf2fcb9..44f02425 100644 --- a/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css +++ b/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css @@ -20,8 +20,10 @@ */ .dropdown { - --paddingBlock: 0.5rem; - --paddingInline: 1.0rem; + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; --inlineSize: fit-content(); --fontSize: 1.0rem; --fontWeight: 400; @@ -41,8 +43,10 @@ display: flex; align-items: center; justify-content: center; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); inline-size: var(--inlineSize); font-family: var(--fontFamily); font-size: var(--fontSize); diff --git a/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css b/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css index a7a0583c..75654d22 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/datepicker.css @@ -22,8 +22,10 @@ */ .datepicker { - --paddingBlock: 0.5rem; - --paddingInline: 1.0rem; + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; --fontSize: 1.0rem; --fontWeight: normal; --lineHeight: 1.5; @@ -42,8 +44,10 @@ .datepicker-datefield { display: block; inline-size: 100%; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); @@ -94,8 +98,10 @@ display: flex; align-items : center; justify-content: space-between; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); list-style-type: none; } diff --git a/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css b/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css index f5ed5192..283ecbd5 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/searchfield.css @@ -22,8 +22,10 @@ */ .searchfield { - --paddingBlock: 0.5rem; - --paddingInline: 1.0rem; + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; --fontSize: 1.0rem; --fontWeight: 400; --lineHeight: 1.5; @@ -38,8 +40,10 @@ display: block; inline-size: 100%; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); diff --git a/Sources/HTMLKitComponents/Resources/css/forms/securefield.css b/Sources/HTMLKitComponents/Resources/css/forms/securefield.css index af8d200d..f9e80ca0 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/securefield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/securefield.css @@ -22,8 +22,10 @@ */ .securefield { - --paddingBlock: 0.5rem; - --paddingInline: 1.0rem; + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; --fontSize: 1.0rem; --fontWeight: normal; --lineHeight: 1.5; @@ -38,8 +40,10 @@ display: block; inline-size: 100%; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); diff --git a/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css b/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css index 5474572b..6b773d5f 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/selectfield.css @@ -22,8 +22,10 @@ */ .selectfield { - --paddingBlock: 0.5rem; - --paddingInline: 1.0rem; + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; --fontSize: 1.0rem; --fontWeight: 400; --lineHeight: 1.5; @@ -42,8 +44,10 @@ .selectfield-textfield { display: block; inline-size: 100%; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); @@ -84,8 +88,10 @@ .option { display: block; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + 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); diff --git a/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css b/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css index adbe6743..fc3cbc64 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/texteditor.css @@ -22,8 +22,10 @@ */ .texteditor { - --paddingBlock: 0.5rem; - --paddingInline: 1.0rem; + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; --fontSize: 1.0rem; --fontWeight: 400; --lineHeight: 1.5; @@ -38,8 +40,10 @@ display: block; inline-size: 100%; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); diff --git a/Sources/HTMLKitComponents/Resources/css/forms/textfield.css b/Sources/HTMLKitComponents/Resources/css/forms/textfield.css index d094a7de..d690136d 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/textfield.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/textfield.css @@ -22,8 +22,10 @@ */ .textfield { - --paddingBlock: 0.5rem; - --paddingInline: 1.0rem; + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; --fontSize: 1.0rem; --fontWeight: 400; --lineHeight: 1.5; @@ -38,8 +40,10 @@ display: block; inline-size: 100%; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); diff --git a/Sources/HTMLKitComponents/Resources/css/forms/textpad.css b/Sources/HTMLKitComponents/Resources/css/forms/textpad.css index 1853df60..a5847c14 100644 --- a/Sources/HTMLKitComponents/Resources/css/forms/textpad.css +++ b/Sources/HTMLKitComponents/Resources/css/forms/textpad.css @@ -22,8 +22,10 @@ */ .textpad { - --paddingBlock: 0.5rem; - --paddingInline: 1.0rem; + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; --fontSize: 1.0rem; --fontWeight: 400; --lineHeight: 1.5; @@ -61,8 +63,10 @@ flex-direction: row; align-items: center; justify-content: flex-start; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); list-style: none; } @@ -80,8 +84,10 @@ .textpad-content { display: block; inline-size: 100%; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); diff --git a/Sources/HTMLKitComponents/Resources/css/globals.css b/Sources/HTMLKitComponents/Resources/css/globals.css index 9ffea29a..cc46561f 100644 --- a/Sources/HTMLKitComponents/Resources/css/globals.css +++ b/Sources/HTMLKitComponents/Resources/css/globals.css @@ -555,27 +555,81 @@ video { } .padding-inline\:large { - --paddingInline: 2.25rem !important; + --paddingInlineStart: 2.25rem !important; + --paddingInlineEnd: 2.25rem !important; } .padding-inline\:medium { - --paddingInline: 1.5rem !important; + --paddingInlineStart: 1.5rem !important; + --paddingInlineEnd: 1.5rem !important; } .padding-inline\:small { - --paddingInline: 1rem !important; + --paddingInlineStart: 1rem !important; + --paddingInlineEnd: 1rem !important; } .padding-block\:large { - --paddingBlock: 2.25rem !important; + --paddingBlockStart: 2.25rem !important; + --paddingBlockEnd: 2.25rem !important; } .padding-block\:medium { - --paddingBlock: 1.5rem !important; + --paddingBlockStart: 1.5rem !important; + --paddingBlockEnd: 1.5rem !important; } .padding-block\:small { - --paddingBlock: 1rem !important; + --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; } /* diff --git a/Sources/HTMLKitComponents/Resources/css/layout/stack.css b/Sources/HTMLKitComponents/Resources/css/layout/stack.css index 1d17374c..7cc88c58 100644 --- a/Sources/HTMLKitComponents/Resources/css/layout/stack.css +++ b/Sources/HTMLKitComponents/Resources/css/layout/stack.css @@ -3,16 +3,20 @@ */ .hstack { - --paddingInline: 0; - --paddingBlock: 0; + --paddingInlineStart: 0; + --paddingInlineEnd: 0; + --paddingBlockStart: 0; + --paddingBlockEnd: 0; position: relative; inline-size: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); } .hstack.alignment\:top { @@ -60,15 +64,19 @@ */ .vstack { - --paddingInline: 0; - --paddingBlock: 0; + --paddingInlineStart: 0; + --paddingInlineEnd: 0; + --paddingBlockStart: 0; + --paddingBlockEnd: 0; position: relative; inline-size: 100%; display: flex; flex-direction: column; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); } .vstack.alignment\:leading { @@ -112,13 +120,17 @@ */ .zstack { - --paddingInline: 0; - --paddingBlock: 0; + --paddingInlineStart: 0; + --paddingInlineEnd: 0; + --paddingBlockStart: 0; + --paddingBlockEnd: 0; position: absolute; inset: 0; z-index: 1; display: flex; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); } diff --git a/Sources/HTMLKitComponents/Resources/css/views/card.css b/Sources/HTMLKitComponents/Resources/css/views/card.css index a4513c39..3b361ada 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/card.css +++ b/Sources/HTMLKitComponents/Resources/css/views/card.css @@ -15,8 +15,10 @@ */ .card { - --paddingInline: 1.0rem; - --paddingBlock: 0.5rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; + --paddingBlockStart: 0.5rem; + --paddingBlockEnd: 0.5rem; --borderWidth: 1px; --borderColor: 210, 14%, 89%; --borderRadius: 0; @@ -41,8 +43,10 @@ } .card .card-body { - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + 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/modal.css b/Sources/HTMLKitComponents/Resources/css/views/modal.css index 0edc8d19..9eb5b148 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/modal.css +++ b/Sources/HTMLKitComponents/Resources/css/views/modal.css @@ -15,8 +15,10 @@ */ .modal { - --paddingBlock: 0.75rem; - --paddingInline: 1.0rem; + --paddingBlockStart: 0.75rem; + --paddingBlockEnd: 0.75rem; + --paddingInlineStart: 1.0rem; + --paddingInlineEnd: 1.0rem; --borderWidth: 1px; --borderColor: 10, 14%, 89%; --borderRadius: 0; @@ -24,8 +26,10 @@ --backgroundColor: 0, 0%, 100%; --backgroundOpacity: 1.0; - padding-block: var(--paddingBlock); - padding-inline: var(--paddingInline); + 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)); diff --git a/Sources/HTMLKitComponents/Resources/css/views/snippet.css b/Sources/HTMLKitComponents/Resources/css/views/snippet.css index 611f8d1e..4ca6c422 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/snippet.css +++ b/Sources/HTMLKitComponents/Resources/css/views/snippet.css @@ -13,7 +13,8 @@ */ .snippet { - --paddingInline: 1.0em; + --paddingInlineStart: 1.0em; + --paddingInlineEnd: 1.0em; --fontSize: 1.0rem; --fontWeight: 400; --lineHeight: 1.5; diff --git a/Sources/HTMLKitComponents/Tokens.swift b/Sources/HTMLKitComponents/Tokens.swift index 825531b7..a7005970 100644 --- a/Sources/HTMLKitComponents/Tokens.swift +++ b/Sources/HTMLKitComponents/Tokens.swift @@ -635,30 +635,26 @@ public enum Tokens { case light = "scheme:light" } - public enum BoxPadding: String { + public enum PaddingLength: String { - case large = "padding:large" - - case medium = "padding:medium" - - case small = "padding:small" + case large + case medium + case small } +} + +public struct EdgeSet: OptionSet { - public enum BlockBoxPadding: String { - - case large = "padding-block:large" - - case medium = "padding-block:medium" - - case small = "padding-block:small" - } + public var rawValue: Int - public enum InlineBoxPadding: String { - - case large = "padding-inline:large" - - case medium = "padding-inline:medium" - - case small = "padding-inline:small" + public static let top = EdgeSet(rawValue: 1 << 0) + public static let bottom = EdgeSet(rawValue: 1 << 1) + public static let leading = EdgeSet(rawValue: 1 << 2) + public static let trailing = EdgeSet(rawValue: 2 << 3) + public static let horizontal = EdgeSet(rawValue: 3 << 4) + public static let vertical = EdgeSet(rawValue: 4 << 5) + + public init(rawValue: Int) { + self.rawValue = rawValue } } From 40fff61289e3ced059c0a663c2b15c9d132b8b7c Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Mon, 19 Jun 2023 21:03:41 +0200 Subject: [PATCH 14/26] Add a view method for margins --- .../HTMLKitComponents/Components/Button.swift | 20 ++-- .../HTMLKitComponents/Components/Card.swift | 10 +- .../Components/Dropdown.swift | 10 +- .../HTMLKitComponents/Components/Form.swift | 100 +++++++++--------- .../HTMLKitComponents/Components/Image.swift | 10 +- .../Components/Snippet.swift | 10 +- .../HTMLKitComponents/Components/Stack.swift | 31 +++--- .../Modifiers/ViewModifier.swift | 95 ++++++++++++----- .../Resources/css/globals.css | 97 +++++++++++++++++ Sources/HTMLKitComponents/Tokens.swift | 9 ++ 10 files changed, 271 insertions(+), 121 deletions(-) diff --git a/Sources/HTMLKitComponents/Components/Button.swift b/Sources/HTMLKitComponents/Components/Button.swift index fd27db43..39d17a98 100644 --- a/Sources/HTMLKitComponents/Components/Button.swift +++ b/Sources/HTMLKitComponents/Components/Button.swift @@ -117,11 +117,7 @@ extension Button: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> Button { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> Button { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> Button { return self.mutate(padding: length.rawValue, insets: insets) } @@ -141,6 +137,10 @@ extension Button: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet, length: Tokens.MarginLength = .small) -> Button { + return self.mutate(margin: length.rawValue, insets: insets) + } } /// A component that initiates an action. @@ -241,11 +241,7 @@ extension LinkButton: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> LinkButton { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> LinkButton { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> LinkButton { return self.mutate(padding: length.rawValue, insets: insets) } @@ -265,4 +261,8 @@ extension LinkButton: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> LinkButton { + return self.mutate(margin: length.rawValue, insets: insets) + } } diff --git a/Sources/HTMLKitComponents/Components/Card.swift b/Sources/HTMLKitComponents/Components/Card.swift index d32faa48..7a17ac56 100644 --- a/Sources/HTMLKitComponents/Components/Card.swift +++ b/Sources/HTMLKitComponents/Components/Card.swift @@ -78,11 +78,7 @@ extension Card: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> Card { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> Card { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> Card { return self.mutate(padding: length.rawValue, insets: insets) } @@ -102,5 +98,9 @@ extension Card: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Card { + return self.mutate(margin: length.rawValue, insets: insets) + } } diff --git a/Sources/HTMLKitComponents/Components/Dropdown.swift b/Sources/HTMLKitComponents/Components/Dropdown.swift index debccf8a..0999cba3 100644 --- a/Sources/HTMLKitComponents/Components/Dropdown.swift +++ b/Sources/HTMLKitComponents/Components/Dropdown.swift @@ -83,11 +83,7 @@ extension Dropdown: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> Dropdown { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> Dropdown { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> Dropdown { return self.mutate(padding: length.rawValue, insets: insets) } @@ -115,4 +111,8 @@ extension Dropdown: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Dropdown { + return self.mutate(margin: length.rawValue, insets: insets) + } } diff --git a/Sources/HTMLKitComponents/Components/Form.swift b/Sources/HTMLKitComponents/Components/Form.swift index 77077fbe..81029c41 100644 --- a/Sources/HTMLKitComponents/Components/Form.swift +++ b/Sources/HTMLKitComponents/Components/Form.swift @@ -196,11 +196,7 @@ extension TextField: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> TextField { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> TextField { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> TextField { return self.mutate(padding: length.rawValue, insets: insets) } @@ -228,6 +224,10 @@ extension TextField: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> TextField { + return self.mutate(margin: length.rawValue, insets: insets) + } } /// A component that displays a editable and expandable form control. @@ -324,11 +324,7 @@ extension TextEditor: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> TextEditor { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> TextEditor { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> TextEditor { return self.mutate(padding: length.rawValue, insets: insets) } @@ -356,6 +352,10 @@ extension TextEditor: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> TextEditor { + return self.mutate(margin: length.rawValue, insets: insets) + } } /// A component that displays a form control @@ -436,11 +436,7 @@ extension CheckField: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> CheckField { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> CheckField { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> CheckField { return self.mutate(padding: length.rawValue, insets: insets) } @@ -468,6 +464,10 @@ extension CheckField: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> CheckField { + return self.mutate(margin: length.rawValue, insets: insets) + } } /// A component that displays @@ -548,11 +548,7 @@ extension RadioSelect: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> RadioSelect { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> RadioSelect { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> RadioSelect { return self.mutate(padding: length.rawValue, insets: insets) } @@ -580,6 +576,10 @@ extension RadioSelect: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> RadioSelect { + return self.mutate(margin: length.rawValue, insets: insets) + } } /// A component that displays @@ -660,11 +660,7 @@ extension SelectField: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> SelectField { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> SelectField { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> SelectField { return self.mutate(padding: length.rawValue, insets: insets) } @@ -692,6 +688,10 @@ extension SelectField: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> SelectField { + return self.mutate(margin: length.rawValue, insets: insets) + } } /// A component that displays @@ -811,11 +811,7 @@ extension SecureField: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> SecureField { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> SecureField { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> SecureField { return self.mutate(padding: length.rawValue, insets: insets) } @@ -843,6 +839,10 @@ extension SecureField: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> SecureField { + return self.mutate(margin: length.rawValue, insets: insets) + } } /// A component that displays @@ -911,11 +911,7 @@ extension Slider: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> Slider { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> Slider { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> Slider { return self.mutate(padding: length.rawValue, insets: insets) } @@ -943,6 +939,10 @@ extension Slider: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Slider { + return self.mutate(margin: length.rawValue, insets: insets) + } } /// A component that displays @@ -1098,11 +1098,7 @@ extension DatePicker: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> DatePicker { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> DatePicker { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> DatePicker { return self.mutate(padding: length.rawValue, insets: insets) } @@ -1130,6 +1126,10 @@ extension DatePicker: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> DatePicker { + return self.mutate(margin: length.rawValue, insets: insets) + } } /// A component that displays @@ -1214,11 +1214,7 @@ extension SearchField: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> SearchField { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> SearchField { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> SearchField { return self.mutate(padding: length.rawValue, insets: insets) } @@ -1246,6 +1242,10 @@ extension SearchField: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> SearchField { + return self.mutate(margin: length.rawValue, insets: insets) + } } /// A component that displays the progress of a task. @@ -1426,11 +1426,7 @@ extension TextPad: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> TextPad { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> TextPad { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> TextPad { return self.mutate(padding: length.rawValue, insets: insets) } @@ -1458,4 +1454,8 @@ extension TextPad: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> TextPad { + return self.mutate(margin: length.rawValue, insets: insets) + } } diff --git a/Sources/HTMLKitComponents/Components/Image.swift b/Sources/HTMLKitComponents/Components/Image.swift index 6f988781..3448841c 100644 --- a/Sources/HTMLKitComponents/Components/Image.swift +++ b/Sources/HTMLKitComponents/Components/Image.swift @@ -73,11 +73,7 @@ extension Image: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> Image { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> Image { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> Image { return self.mutate(padding: length.rawValue, insets: insets) } @@ -97,4 +93,8 @@ extension Image: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Image { + return self.mutate(margin: length.rawValue, insets: insets) + } } diff --git a/Sources/HTMLKitComponents/Components/Snippet.swift b/Sources/HTMLKitComponents/Components/Snippet.swift index b6f28c03..f1487d11 100644 --- a/Sources/HTMLKitComponents/Components/Snippet.swift +++ b/Sources/HTMLKitComponents/Components/Snippet.swift @@ -66,11 +66,7 @@ extension Snippet: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> Snippet { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> Snippet { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> Snippet { return self.mutate(padding: length.rawValue, insets: insets) } @@ -90,4 +86,8 @@ extension Snippet: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Snippet { + return self.mutate(margin: length.rawValue, insets: insets) + } } diff --git a/Sources/HTMLKitComponents/Components/Stack.swift b/Sources/HTMLKitComponents/Components/Stack.swift index 602ae97d..3b04ba87 100644 --- a/Sources/HTMLKitComponents/Components/Stack.swift +++ b/Sources/HTMLKitComponents/Components/Stack.swift @@ -98,11 +98,7 @@ extension HStack: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> HStack { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> HStack { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> HStack { return self.mutate(padding: length.rawValue, insets: insets) } @@ -122,6 +118,10 @@ extension HStack: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> HStack { + return self.mutate(margin: length.rawValue, insets: insets) + } } /// A component that arranges content vertically. @@ -215,11 +215,7 @@ extension VStack: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> VStack { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> VStack { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> VStack { return self.mutate(padding: length.rawValue, insets: insets) } @@ -239,6 +235,10 @@ extension VStack: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> VStack { + return self.mutate(margin: length.rawValue, insets: insets) + } } /// A component that overlays content. @@ -323,11 +323,7 @@ extension ZStack: ViewModifier { return self.mutate(scheme: scheme.rawValue) } - public func padding(_ length: Tokens.PaddingLength) -> ZStack { - return self.mutate(padding: length.rawValue) - } - - public func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> ZStack { + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> ZStack { return self.mutate(padding: length.rawValue, insets: insets) } @@ -347,4 +343,9 @@ extension ZStack: ViewModifier { return self.mutate(class: width.rawValue) } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> ZStack { + return self.mutate(margin: length.rawValue, insets: insets) + } } + diff --git a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift index 0600be3a..f3039bcd 100644 --- a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift @@ -21,11 +21,8 @@ public protocol ViewModifier { /// Sets the color appearence func colorScheme(_ scheme: Tokens.ColorScheme) -> Self - /// Sets the box padding - func padding(_ length: Tokens.PaddingLength) -> Self - /// Sets the padding for the vertical box. - func padding(insets: EdgeSet, _ length: Tokens.PaddingLength) -> Self + func padding(insets: EdgeSet, length: Tokens.PaddingLength) -> Self /// Sets the shape of the button. func borderShape(_ shape: Tokens.BorderShape) -> Self @@ -34,6 +31,9 @@ public protocol ViewModifier { func borderColor(_ color: Tokens.BorderColor) -> Self func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset?) -> Self + + /// Sets the padding for the vertical box. + func margin(insets: EdgeSet, length: Tokens.MarginLength) -> Self } extension ViewModifier where Self: Modifiable { @@ -66,28 +66,34 @@ extension ViewModifier where Self: Modifiable { var classes: [String] = [] - if insets.contains(.top) { - classes.append("padding-top:\(value)") - } - - if insets.contains(.bottom) { - classes.append("padding-bottom:\(value)") - } - - if insets.contains(.leading) { - classes.append("padding-leading:\(value)") - } - - if insets.contains(.trailing) { - classes.append("padding-trailing:\(value)") - } - - if insets.contains(.horizontal) { - classes.append("padding-inline:\(value)") - } - - if insets.contains(.vertical) { - classes.append("padding-block:\(value)") + if !insets.contains(.all) { + + if insets.contains(.top) { + classes.append("padding-top:\(value)") + } + + if insets.contains(.bottom) { + classes.append("padding-bottom:\(value)") + } + + if insets.contains(.leading) { + classes.append("padding-leading:\(value)") + } + + if insets.contains(.trailing) { + classes.append("padding-trailing:\(value)") + } + + if insets.contains(.horizontal) { + classes.append("padding-inline:\(value)") + } + + if insets.contains(.vertical) { + classes.append("padding-block:\(value)") + } + + } else { + classes.append("padding:\(value)") } return self.mutate(classes: classes) @@ -104,4 +110,41 @@ extension ViewModifier where Self: Modifiable { internal func mutate(frame classes: [String]) -> Self { return self.mutate(classes: classes) } + + internal func mutate(margin value: String, insets: EdgeSet) -> Self { + + var classes: [String] = [] + + if !insets.contains(.all) { + + if insets.contains(.top) { + classes.append("margin-top:\(value)") + } + + if insets.contains(.bottom) { + classes.append("margin-bottom:\(value)") + } + + if insets.contains(.leading) { + classes.append("margin-leading:\(value)") + } + + if insets.contains(.trailing) { + classes.append("margin-trailing:\(value)") + } + + if insets.contains(.horizontal) { + classes.append("margin-inline:\(value)") + } + + if insets.contains(.vertical) { + classes.append("margin-block:\(value)") + } + + } else { + classes.append("margin:\(value)") + } + + return self.mutate(classes: classes) + } } diff --git a/Sources/HTMLKitComponents/Resources/css/globals.css b/Sources/HTMLKitComponents/Resources/css/globals.css index cc46561f..e2515c37 100644 --- a/Sources/HTMLKitComponents/Resources/css/globals.css +++ b/Sources/HTMLKitComponents/Resources/css/globals.css @@ -632,6 +632,103 @@ video { --paddingInlineEnd: 1rem !important; } +/* + margin + */ + +.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\: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\: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\: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\: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\: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\: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 */ diff --git a/Sources/HTMLKitComponents/Tokens.swift b/Sources/HTMLKitComponents/Tokens.swift index a7005970..7910c049 100644 --- a/Sources/HTMLKitComponents/Tokens.swift +++ b/Sources/HTMLKitComponents/Tokens.swift @@ -641,6 +641,13 @@ public enum Tokens { case medium case small } + + public enum MarginLength: String { + + case large + case medium + case small + } } public struct EdgeSet: OptionSet { @@ -654,6 +661,8 @@ public struct EdgeSet: OptionSet { public static let horizontal = EdgeSet(rawValue: 3 << 4) public static let vertical = EdgeSet(rawValue: 4 << 5) + public static let all: EdgeSet = [.top, .bottom, .leading, .trailing] + public init(rawValue: Int) { self.rawValue = rawValue } From 3b53e804d749c4851c47a1292904543b6182d544 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Mon, 19 Jun 2023 21:34:31 +0200 Subject: [PATCH 15/26] Fix wrong padding declaration --- .../Resources/css/globals.css | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/Sources/HTMLKitComponents/Resources/css/globals.css b/Sources/HTMLKitComponents/Resources/css/globals.css index e2515c37..f172d58c 100644 --- a/Sources/HTMLKitComponents/Resources/css/globals.css +++ b/Sources/HTMLKitComponents/Resources/css/globals.css @@ -540,18 +540,24 @@ video { */ .padding\:large { - --paddingInline: 2.25rem !important; - --paddingBlock: 2.25rem !important; + --paddingInlineStart: 2.25rem !important; + --paddingInlineEnd: 2.25rem !important; + --paddingBlockStart: 2.25rem !important; + --paddingBlockEnd: 2.25rem !important; } .padding\:medium { - --paddingInline: 1.5rem !important; - --paddingBlock: 1.5rem !important; + --paddingInlineStart: 1.5rem !important; + --paddingInlineEnd: 1.5rem !important; + --paddingBlockStart: 1.5rem !important; + --paddingBlockEnd: 1.5rem !important; } .padding\:small { - --paddingInline: 1rem !important; - --paddingBlock: 1rem !important; + --paddingInlineStart: 1rem !important; + --paddingInlineEnd: 1rem !important; + --paddingBlockStart: 1rem !important; + --paddingBlockEnd: 1rem !important; } .padding-inline\:large { From eb4945d793ffbbdcbb8757df03e89ac2148b2897 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Tue, 20 Jun 2023 21:15:51 +0200 Subject: [PATCH 16/26] Rename the group component The name declaration group is already taken for the vector element, therefore the htmlkit component needs a new name declaration. --- .../{Group.swift => Grouping.swift} | 26 +++++++++---------- .../css/helpers/{group.css => grouping.css} | 2 +- .../ComponentTests.swift | 2 +- 3 files changed, 15 insertions(+), 15 deletions(-) rename Sources/HTMLKitComponents/Components/{Group.swift => Grouping.swift} (78%) rename Sources/HTMLKitComponents/Resources/css/helpers/{group.css => grouping.css} (91%) diff --git a/Sources/HTMLKitComponents/Components/Group.swift b/Sources/HTMLKitComponents/Components/Grouping.swift similarity index 78% rename from Sources/HTMLKitComponents/Components/Group.swift rename to Sources/HTMLKitComponents/Components/Grouping.swift index d3300114..efbc82f9 100644 --- a/Sources/HTMLKitComponents/Components/Group.swift +++ b/Sources/HTMLKitComponents/Components/Grouping.swift @@ -6,7 +6,7 @@ import HTMLKit /// A component that collects content. -public struct Group: View, Modifiable { +public struct Grouping: View, Modifiable { /// The content of the group. internal var content: [Content] @@ -18,7 +18,7 @@ public struct Group: View, Modifiable { public init(@ContentBuilder content: () -> [Content]) { self.content = content() - self.classes = ["group"] + self.classes = ["grouping"] } /// Creates a group. @@ -35,7 +35,7 @@ public struct Group: View, Modifiable { .class(classes.joined(separator: " ")) } - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Group { + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Grouping { var newSelf = self @@ -49,41 +49,41 @@ public struct Group: View, Modifiable { } } -extension Group: TextModifier { +extension Grouping: TextModifier { - public func font(_ style: Tokens.TextStyle) -> Group { + public func font(_ style: Tokens.TextStyle) -> Grouping { return self.mutate(font: style.rawValue) } - public func foregroundColor(_ color: Tokens.ForegroundColor) -> Group { + public func foregroundColor(_ color: Tokens.ForegroundColor) -> Grouping { return self.mutate(foregroundcolor: color.rawValue) } - public func fontSize(_ size: Tokens.FontSize) -> Group { + public func fontSize(_ size: Tokens.FontSize) -> Grouping { return self.mutate(fontsize: size.rawValue) } - public func fontWeight(_ weight: Tokens.FontWeight) -> Group { + public func fontWeight(_ weight: Tokens.FontWeight) -> Grouping { return self.mutate(fontweight: weight.rawValue) } - public func fontTransformation(_ transformation: Tokens.TextTransformation) -> Group { + public func fontTransformation(_ transformation: Tokens.TextTransformation) -> Grouping { return self.mutate(fonttransformation: transformation.rawValue) } - public func fontStyle(_ style: Tokens.FontStyle) -> Group { + public func fontStyle(_ style: Tokens.FontStyle) -> Grouping { return self.mutate(fontstyle: style.rawValue) } - public func bold() -> Group { + public func bold() -> Grouping { return self.mutate(bold: Tokens.FontWeight.bold.rawValue) } - public func italic() -> Group { + public func italic() -> Grouping { return self.mutate(italic: Tokens.FontStyle.italic.rawValue) } - public func underline() -> Group { + public func underline() -> Grouping { return self.mutate(underline: Tokens.TextDecoration.underline.rawValue) } } diff --git a/Sources/HTMLKitComponents/Resources/css/helpers/group.css b/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css similarity index 91% rename from Sources/HTMLKitComponents/Resources/css/helpers/group.css rename to Sources/HTMLKitComponents/Resources/css/helpers/grouping.css index 2afb4018..729a244f 100644 --- a/Sources/HTMLKitComponents/Resources/css/helpers/group.css +++ b/Sources/HTMLKitComponents/Resources/css/helpers/grouping.css @@ -2,7 +2,7 @@ The stylesheet for the grouping component. */ -.group { +.grouping { display: inline-flex; flex-direction: row; align-items: center; diff --git a/Tests/HTMLKitComponentsTests/ComponentTests.swift b/Tests/HTMLKitComponentsTests/ComponentTests.swift index 595190f3..c344277d 100644 --- a/Tests/HTMLKitComponentsTests/ComponentTests.swift +++ b/Tests/HTMLKitComponentsTests/ComponentTests.swift @@ -44,7 +44,7 @@ final class ComponentTests: XCTestCase { func testGroup() throws { let view = TestView { - HTMLKitComponents.Group { + Grouping { } } From 602a639438d25baadd995e924530dfbd0e7a2e68 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Tue, 20 Jun 2023 21:17:25 +0200 Subject: [PATCH 17/26] Fix the margin for the modal component The margin for the modal gets neutralised by the css reset, but the modal dialog should always be centered. --- Sources/HTMLKitComponents/Resources/css/views/modal.css | 1 + 1 file changed, 1 insertion(+) diff --git a/Sources/HTMLKitComponents/Resources/css/views/modal.css b/Sources/HTMLKitComponents/Resources/css/views/modal.css index 9eb5b148..1362311d 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/modal.css +++ b/Sources/HTMLKitComponents/Resources/css/views/modal.css @@ -26,6 +26,7 @@ --backgroundColor: 0, 0%, 100%; --backgroundOpacity: 1.0; + margin: auto; padding-block-start: var(--paddingBlockStart); padding-block-end: var(--paddingBlockEnd); padding-inline-start: var(--paddingInlineStart); From d061e3be609ba2ccc2111a45e8a9a332f03d3bac Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Thu, 22 Jun 2023 20:08:39 +0200 Subject: [PATCH 18/26] Revise some of the image component --- Sources/HTMLKitComponents/Components/Image.swift | 12 ++++++++++-- .../Modifiers/ImageModifier.swift | 10 +++++++++- .../Resources/css/views/image.css | 15 +++++++++++---- Sources/HTMLKitComponents/Tokens.swift | 6 ++++++ 4 files changed, 36 insertions(+), 7 deletions(-) diff --git a/Sources/HTMLKitComponents/Components/Image.swift b/Sources/HTMLKitComponents/Components/Image.swift index 3448841c..02af8700 100644 --- a/Sources/HTMLKitComponents/Components/Image.swift +++ b/Sources/HTMLKitComponents/Components/Image.swift @@ -38,8 +38,8 @@ public struct Image: View, Modifiable { extension Image: ImageModifier { - public func objectFit(_ fit: Tokens.ObjectFit) -> Image { - return self.mutate(objectfit: fit.rawValue) + public func aspectRatio(_ ratio: Tokens.AspectRatio ,fit: Tokens.ObjectFit) -> Image { + return self.mutate(aspectratio: [ratio.rawValue, fit.rawValue]) } public func imageScale(_ scale: Tokens.ImageScale) -> Image { @@ -49,6 +49,14 @@ extension Image: ImageModifier { public func clipShape(_ shape: Tokens.ClipShape) -> Image { return self.mutate(clipshape: shape.rawValue) } + + public func scaleToFit() -> Image { + return self.mutate(objectfit: Tokens.ObjectFit.contain.rawValue) + } + + public func scaleToFill() -> Image { + return self.mutate(objectfit: Tokens.ObjectFit.cover.rawValue) + } } extension Image: ViewModifier { diff --git a/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift b/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift index 7e529eef..48e82ad4 100644 --- a/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift @@ -7,13 +7,17 @@ public protocol ImageModifier { /// Sets how the content should be resized to fit its parent. - func objectFit(_ fit: Tokens.ObjectFit) -> Self + func aspectRatio(_ ratio: Tokens.AspectRatio, fit: Tokens.ObjectFit) -> Self /// Sets the scale of the image. func imageScale(_ scale: Tokens.ImageScale) -> Self /// Sets the fill style to use. func clipShape(_ shape: Tokens.ClipShape) -> Self + + func scaleToFit() -> Self + + func scaleToFill() -> Self } extension ImageModifier where Self: Modifiable { @@ -29,4 +33,8 @@ extension ImageModifier where Self: Modifiable { internal func mutate(clipshape class: String) -> Self { return self.mutate(class: `class`) } + + internal func mutate(aspectratio classes: [String]) -> Self { + return self.mutate(classes: classes) + } } diff --git a/Sources/HTMLKitComponents/Resources/css/views/image.css b/Sources/HTMLKitComponents/Resources/css/views/image.css index 88da532e..ddb4938d 100644 --- a/Sources/HTMLKitComponents/Resources/css/views/image.css +++ b/Sources/HTMLKitComponents/Resources/css/views/image.css @@ -21,7 +21,14 @@ border-style: solid; border-color: hsla(var(--borderColor), 1.0); border-radius: var(--borderRadius); - aspect-ratio: 1.0; +} + +.image.aspect\:equal { + aspect-ratio: 1/1; +} + +.image.aspect\:unequal { + aspect-ratio: 2/1; } .image.fit\:contain { @@ -53,15 +60,15 @@ } .image.scale\:small { - --inlineSize: 25%; + --inlineSize: 3.125rem; } .image.scale\:medium { - --inlineSize: 50%; + --inlineSize: 12.5rem; } .image.scale\:large { - --inlineSize: 75%; + --inlineSize: 25rem; } .image.shape\:circle { diff --git a/Sources/HTMLKitComponents/Tokens.swift b/Sources/HTMLKitComponents/Tokens.swift index 7910c049..6e0d7f54 100644 --- a/Sources/HTMLKitComponents/Tokens.swift +++ b/Sources/HTMLKitComponents/Tokens.swift @@ -648,6 +648,12 @@ public enum Tokens { case medium case small } + + public enum AspectRatio: String { + + case equal = "aspect:equal" + case unequal = "aspect:unequal" + } } public struct EdgeSet: OptionSet { From 573465008296a5ec463454e2df2cd322a8268211 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sun, 25 Jun 2023 19:58:48 +0200 Subject: [PATCH 19/26] Fix failing test --- Tests/HTMLKitComponentsTests/ComponentTests.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Tests/HTMLKitComponentsTests/ComponentTests.swift b/Tests/HTMLKitComponentsTests/ComponentTests.swift index c344277d..856501b0 100644 --- a/Tests/HTMLKitComponentsTests/ComponentTests.swift +++ b/Tests/HTMLKitComponentsTests/ComponentTests.swift @@ -50,7 +50,7 @@ final class ComponentTests: XCTestCase { XCTAssertEqual(try renderer.render(view: view), """ -
+
""" ) } From d455b27f421ad7cf3ac5fec1c6f5877628e7444a Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sun, 25 Jun 2023 20:16:15 +0200 Subject: [PATCH 20/26] Add a navigation component --- .../Components/Navigation.swift | 49 +++++++++++++++++++ .../Resources/css/views/navigation.css | 24 +++++++++ .../js/components/views/navigation.js | 41 ++++++++++++++++ Sources/HTMLKitComponents/Tokens.swift | 5 ++ .../ComponentTests.swift | 15 ++++++ 5 files changed, 134 insertions(+) create mode 100644 Sources/HTMLKitComponents/Components/Navigation.swift create mode 100644 Sources/HTMLKitComponents/Resources/css/views/navigation.css create mode 100644 Sources/HTMLKitComponents/Resources/js/components/views/navigation.js diff --git a/Sources/HTMLKitComponents/Components/Navigation.swift b/Sources/HTMLKitComponents/Components/Navigation.swift new file mode 100644 index 00000000..683f5f64 --- /dev/null +++ b/Sources/HTMLKitComponents/Components/Navigation.swift @@ -0,0 +1,49 @@ +import HTMLKit + +public struct Navigation: View, Modifiable { + + internal var content: [BodyElement] + + public var classes: [String] + + public init(@ContentBuilder content: () -> [BodyElement]) { + + self.content = content() + self.classes = ["navigation"] + } + + internal init(content: [BodyElement], classes: [String]) { + + self.content = content + self.classes = classes + } + + public var body: Content { + HTMLKit.Navigation { + content + } + .class(classes.joined(separator: " ")) + } + + /// Sets the style for the list. + public func navigationStyle(_ style: Tokens.NavigationStyle) -> Navigation { + + var newSelf = self + newSelf.classes.append(style.rawValue) + + return newSelf + } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Navigation { + + var newSelf = self + + if let offset { + newSelf.classes.append(offset.rawValue) + } + + newSelf.classes.append(width.rawValue) + + return newSelf + } +} diff --git a/Sources/HTMLKitComponents/Resources/css/views/navigation.css b/Sources/HTMLKitComponents/Resources/css/views/navigation.css new file mode 100644 index 00000000..c62c8a2a --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/css/views/navigation.css @@ -0,0 +1,24 @@ +/* + The stylesheet for the navigation component. + */ + +.navigation { + position: relative; +} + +.navigation > .list > .list-row > .link { + display: flex; + align-items: center; + padding-block: 0.5rem; + padding-inline: 1.0rem; +} + +.navigation > .list > .list-row > .link:hover { + border-radius: 5px; + background-color: hsla(0, 0%, 100%, 0.1); +} + +.navigation > .list .list-row .link.state\:active { + border-radius: 5px; + background-color: hsla(var(--primaryColor), 1.0) !important; +} diff --git a/Sources/HTMLKitComponents/Resources/js/components/views/navigation.js b/Sources/HTMLKitComponents/Resources/js/components/views/navigation.js new file mode 100644 index 00000000..1cd1bbb6 --- /dev/null +++ b/Sources/HTMLKitComponents/Resources/js/components/views/navigation.js @@ -0,0 +1,41 @@ + (function() { + + var Navigation = function (element) { + + this.element = element; + this.links = element.getElementsByClassName('link'); + + this.checkLocation(); + }; + + Navigation.prototype.checkLocation = function () { + + var self = this; + + var currentLocation = location.pathname; + + for(let link of this.links) { + + if(link.getAttribute('href') === currentLocation) { + self.toggleState(link); + } + } + }; + + Navigation.prototype.toggleState = function (target) { + target.classList.add('state:active'); + }; + + var navigation = document.getElementsByClassName('navigation'); + + if(navigation.length > 0) { + + for(var i = 0; i < navigation.length; i++) { + + (function(i) { + new Navigation(navigation[i]); + })(i); + } + } + }()); + diff --git a/Sources/HTMLKitComponents/Tokens.swift b/Sources/HTMLKitComponents/Tokens.swift index 6e0d7f54..83ddebf5 100644 --- a/Sources/HTMLKitComponents/Tokens.swift +++ b/Sources/HTMLKitComponents/Tokens.swift @@ -654,6 +654,11 @@ public enum Tokens { case equal = "aspect:equal" case unequal = "aspect:unequal" } + + public enum NavigationStyle: String { + + case plain = "style:plain" + } } public struct EdgeSet: OptionSet { diff --git a/Tests/HTMLKitComponentsTests/ComponentTests.swift b/Tests/HTMLKitComponentsTests/ComponentTests.swift index 856501b0..5dc45f07 100644 --- a/Tests/HTMLKitComponentsTests/ComponentTests.swift +++ b/Tests/HTMLKitComponentsTests/ComponentTests.swift @@ -539,4 +539,19 @@ final class ComponentTests: XCTestCase { """ ) } + + + func testNavigation() throws { + + let view = TestView { + HTMLKitComponents.Navigation { + } + } + + XCTAssertEqual(try renderer.render(view: view), + """ + + """ + ) + } } From dc33a5d17c3d4cda13c1b15f0ef2dfb087d0f779 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sun, 25 Jun 2023 20:17:42 +0200 Subject: [PATCH 21/26] Add padding methods to the list component --- .../HTMLKitComponents/Components/List.swift | 76 ++++++++++++++++++- .../Resources/css/layout/list.css | 26 ++++++- Sources/HTMLKitComponents/Tokens.swift | 4 +- 3 files changed, 101 insertions(+), 5 deletions(-) diff --git a/Sources/HTMLKitComponents/Components/List.swift b/Sources/HTMLKitComponents/Components/List.swift index 0c3c29eb..119ecc3f 100644 --- a/Sources/HTMLKitComponents/Components/List.swift +++ b/Sources/HTMLKitComponents/Components/List.swift @@ -70,6 +70,43 @@ public struct List: View, Modifiable, Actionable { return newSelf } + + public func padding(insets: EdgeSet, length: Tokens.PaddingLength) -> List { + + var classes: [String] = [] + + if !insets.contains(.all) { + + if insets.contains(.top) { + classes.append("padding-top:\(length.rawValue)") + } + + if insets.contains(.bottom) { + classes.append("padding-bottom:\(length.rawValue)") + } + + if insets.contains(.leading) { + classes.append("padding-leading:\(length.rawValue)") + } + + if insets.contains(.trailing) { + classes.append("padding-trailing:\(length.rawValue)") + } + + if insets.contains(.horizontal) { + classes.append("padding-inline:\(length.rawValue)") + } + + if insets.contains(.vertical) { + classes.append("padding-block:\(length.rawValue)") + } + + } else { + classes.append("padding:\(length.rawValue)") + } + + return self.mutate(classes: classes) + } } extension List: HoverModifier { @@ -88,7 +125,7 @@ extension List: HoverModifier { } /// A component that represents a list item. -public struct ListRow: View, Actionable { +public struct ListRow: View, Modifiable, Actionable { var id: String? @@ -134,6 +171,43 @@ public struct ListRow: View, Actionable { public func id(_ value: String) -> ListRow { return self.mutate(id: value) } + + public func padding(insets: EdgeSet, length: Tokens.PaddingLength) -> ListRow { + + var classes: [String] = [] + + if !insets.contains(.all) { + + if insets.contains(.top) { + classes.append("padding-top:\(length.rawValue)") + } + + if insets.contains(.bottom) { + classes.append("padding-bottom:\(length.rawValue)") + } + + if insets.contains(.leading) { + classes.append("padding-leading:\(length.rawValue)") + } + + if insets.contains(.trailing) { + classes.append("padding-trailing:\(length.rawValue)") + } + + if insets.contains(.horizontal) { + classes.append("padding-inline:\(length.rawValue)") + } + + if insets.contains(.vertical) { + classes.append("padding-block:\(length.rawValue)") + } + + } else { + classes.append("padding:\(length.rawValue)") + } + + return self.mutate(classes: classes) + } } extension ListRow: HoverModifier { diff --git a/Sources/HTMLKitComponents/Resources/css/layout/list.css b/Sources/HTMLKitComponents/Resources/css/layout/list.css index fd66a703..c8ee2b41 100644 --- a/Sources/HTMLKitComponents/Resources/css/layout/list.css +++ b/Sources/HTMLKitComponents/Resources/css/layout/list.css @@ -3,7 +3,16 @@ */ .list { + --paddingBlockStart: 0; + --paddingBlockEnd: 0; + --paddingInlineStart: 0; + --paddingInlineEnd: 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; } @@ -18,5 +27,20 @@ } .list-row { - overflow: hidden; + --paddingBlockStart: 0; + --paddingBlockEnd: 0; + --paddingInlineStart: 0; + --paddingInlineEnd: 0; + + inline-size: 100%; + padding-block-start: var(--paddingBlockStart); + padding-block-end: var(--paddingBlockEnd); + padding-inline-start: var(--paddingInlineStart); + padding-inline-end: var(--paddingInlineEnd); +} + +.list.style\:listgroup > .list-row:is(:not(:last-child)) { + border-bottom: 1px; + border-bottom-style: solid; + border-bottom-color: hsla(210, 14%, 89%, 1.0); } diff --git a/Sources/HTMLKitComponents/Tokens.swift b/Sources/HTMLKitComponents/Tokens.swift index 83ddebf5..a2f9fdd8 100644 --- a/Sources/HTMLKitComponents/Tokens.swift +++ b/Sources/HTMLKitComponents/Tokens.swift @@ -493,9 +493,7 @@ public enum Tokens { /// A style for a list. public enum ListStyle: String { - case grouped = "style:grouped" - case accordion = "style:accordion" - case tab = "style:tab" + case listgroup = "style:listgroup" } /// A state for the view. From 38041b2f0e2babbea57d20a40d818367d91a459e Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sun, 25 Jun 2023 20:18:18 +0200 Subject: [PATCH 22/26] Revise some of the css --- .../Resources/css/buttons/dropdown.css | 10 +++++++--- .../Resources/css/typography/link.css | 1 - .../Resources/css/typography/symbol.css | 7 +++++++ .../Resources/css/typography/text.css | 1 - 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css b/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css index 44f02425..a618cecd 100644 --- a/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css +++ b/Sources/HTMLKitComponents/Resources/css/buttons/dropdown.css @@ -74,7 +74,8 @@ position: absolute; z-index: 1; display: none; - margin-block: 0.75rem; + margin-block: 0.5rem; + padding-block: 0.5rem; inline-size: calc(var(--inlineSize) * 1.5); border-width: var(--borderWidth); border-style: solid; @@ -89,8 +90,11 @@ background-color: hsla(var(--primaryColor), 1.0); } -.dropdown .list .list-row .link { - display: block; +.dropdown-content > .list > .list-row > .link { + display: flex; + align-items: center; + padding-block: 0.5rem; + padding-inline: 1.0rem; } .dropdown.size\:full { diff --git a/Sources/HTMLKitComponents/Resources/css/typography/link.css b/Sources/HTMLKitComponents/Resources/css/typography/link.css index 432f3230..792d711e 100644 --- a/Sources/HTMLKitComponents/Resources/css/typography/link.css +++ b/Sources/HTMLKitComponents/Resources/css/typography/link.css @@ -159,5 +159,4 @@ } .scheme\:dark .link, .link.scheme\:dark { - --foregroundColor: 0, 0%, 100%; } diff --git a/Sources/HTMLKitComponents/Resources/css/typography/symbol.css b/Sources/HTMLKitComponents/Resources/css/typography/symbol.css index a870562b..f43bb6f6 100644 --- a/Sources/HTMLKitComponents/Resources/css/typography/symbol.css +++ b/Sources/HTMLKitComponents/Resources/css/typography/symbol.css @@ -46,3 +46,10 @@ --fontSize: 2rem; --lineHeight: 2.25; } + +.scheme\:dark .symbol, .symbol.scheme\:dark { +} + +.symbol + .text { + margin-inline-start: 0.75rem; +} diff --git a/Sources/HTMLKitComponents/Resources/css/typography/text.css b/Sources/HTMLKitComponents/Resources/css/typography/text.css index cdb5099d..7962c908 100644 --- a/Sources/HTMLKitComponents/Resources/css/typography/text.css +++ b/Sources/HTMLKitComponents/Resources/css/typography/text.css @@ -162,5 +162,4 @@ } .scheme\:dark .text, .text.scheme\:dark { - --foregroundColor: 0, 0%, 100%; } From 64a93d8243a4431303fbd1c8937f474a1fbfd737 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sat, 1 Jul 2023 12:26:00 +0200 Subject: [PATCH 23/26] Revise the css token handling --- .../HTMLKitComponents/Components/Button.swift | 14 +- .../HTMLKitComponents/Components/Card.swift | 11 +- .../Components/Dropdown.swift | 7 +- .../HTMLKitComponents/Components/Form.swift | 70 +-- .../HTMLKitComponents/Components/Grid.swift | 2 +- .../Components/Grouping.swift | 10 +- .../HTMLKitComponents/Components/Image.swift | 9 +- .../HTMLKitComponents/Components/Link.swift | 62 ++- .../HTMLKitComponents/Components/List.swift | 111 +++-- .../Components/Navigation.swift | 52 ++- .../Components/ScrollView.swift | 2 +- .../Components/Snippet.swift | 9 +- .../HTMLKitComponents/Components/Stack.swift | 29 +- .../HTMLKitComponents/Components/Symbol.swift | 4 +- .../HTMLKitComponents/Components/Text.swift | 62 ++- .../Modifiers/ButtonModifier.swift | 12 +- .../Modifiers/ImageModifier.swift | 20 +- .../Modifiers/InputModifier.swift | 8 +- .../Modifiers/TextModifier.swift | 36 +- .../Modifiers/ViewModifier.swift | 39 +- .../Resources/css/globals.css | 46 +- Sources/HTMLKitComponents/Tokens.swift | 400 +++++++++--------- .../ComponentTests.swift | 2 +- 23 files changed, 506 insertions(+), 511 deletions(-) diff --git a/Sources/HTMLKitComponents/Components/Button.swift b/Sources/HTMLKitComponents/Components/Button.swift index 39d17a98..01f7f43a 100644 --- a/Sources/HTMLKitComponents/Components/Button.swift +++ b/Sources/HTMLKitComponents/Components/Button.swift @@ -130,12 +130,7 @@ extension Button: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Button { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet, length: Tokens.MarginLength = .small) -> Button { @@ -254,12 +249,7 @@ extension LinkButton: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> LinkButton { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> LinkButton { diff --git a/Sources/HTMLKitComponents/Components/Card.swift b/Sources/HTMLKitComponents/Components/Card.swift index 7a17ac56..c982cc26 100644 --- a/Sources/HTMLKitComponents/Components/Card.swift +++ b/Sources/HTMLKitComponents/Components/Card.swift @@ -83,20 +83,15 @@ extension Card: ViewModifier { } public func borderShape(_ shape: Tokens.BorderShape) -> Card { - return self.mutate(class: shape.rawValue) + return self.mutate(bordershape: shape.rawValue) } public func borderColor(_ color: Tokens.BorderColor) -> Card { - return self.mutate(class: color.rawValue) + return self.mutate(bordercolor: color.rawValue) } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Card { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Card { diff --git a/Sources/HTMLKitComponents/Components/Dropdown.swift b/Sources/HTMLKitComponents/Components/Dropdown.swift index 0999cba3..8781ac8e 100644 --- a/Sources/HTMLKitComponents/Components/Dropdown.swift +++ b/Sources/HTMLKitComponents/Components/Dropdown.swift @@ -104,12 +104,7 @@ extension Dropdown: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Dropdown { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Dropdown { diff --git a/Sources/HTMLKitComponents/Components/Form.swift b/Sources/HTMLKitComponents/Components/Form.swift index 81029c41..43a71f34 100644 --- a/Sources/HTMLKitComponents/Components/Form.swift +++ b/Sources/HTMLKitComponents/Components/Form.swift @@ -217,12 +217,7 @@ extension TextField: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> TextField { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> TextField { @@ -345,12 +340,7 @@ extension TextEditor: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> TextEditor { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> TextEditor { @@ -457,12 +447,7 @@ extension CheckField: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> CheckField { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> CheckField { @@ -569,12 +554,7 @@ extension RadioSelect: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> RadioSelect { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> RadioSelect { @@ -681,12 +661,7 @@ extension SelectField: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> SelectField { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> SelectField { @@ -832,12 +807,7 @@ extension SecureField: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> SecureField { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> SecureField { @@ -932,12 +902,7 @@ extension Slider: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Slider { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Slider { @@ -1119,12 +1084,7 @@ extension DatePicker: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> DatePicker { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> DatePicker { @@ -1235,12 +1195,7 @@ extension SearchField: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> SearchField { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> SearchField { @@ -1447,12 +1402,7 @@ extension TextPad: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> TextPad { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> TextPad { diff --git a/Sources/HTMLKitComponents/Components/Grid.swift b/Sources/HTMLKitComponents/Components/Grid.swift index 7bc9fd6c..06cb4858 100644 --- a/Sources/HTMLKitComponents/Components/Grid.swift +++ b/Sources/HTMLKitComponents/Components/Grid.swift @@ -22,7 +22,7 @@ public struct Grid: View, Actionable { public init(ratio: Tokens.ItemRatio = .half, @ContentBuilder content: () -> [ListElement]) { self.content = content() - self.classes = ["grid", ratio.rawValue] + self.classes = ["grid", "ratio:\(ratio.rawValue)"] } /// Creates a collection. diff --git a/Sources/HTMLKitComponents/Components/Grouping.swift b/Sources/HTMLKitComponents/Components/Grouping.swift index efbc82f9..175b6893 100644 --- a/Sources/HTMLKitComponents/Components/Grouping.swift +++ b/Sources/HTMLKitComponents/Components/Grouping.swift @@ -40,10 +40,10 @@ public struct Grouping: View, Modifiable { var newSelf = self if let offset { - newSelf.classes.append(offset.rawValue) + newSelf.classes.append("offset:\(offset.rawValue)") } - newSelf.classes.append(width.rawValue) + newSelf.classes.append("size:\(width.rawValue)") return newSelf } @@ -76,14 +76,14 @@ extension Grouping: TextModifier { } public func bold() -> Grouping { - return self.mutate(bold: Tokens.FontWeight.bold.rawValue) + return self.mutate(fontweight: Tokens.FontWeight.bold.rawValue) } public func italic() -> Grouping { - return self.mutate(italic: Tokens.FontStyle.italic.rawValue) + return self.mutate(fontstyle: Tokens.FontStyle.italic.rawValue) } public func underline() -> Grouping { - return self.mutate(underline: Tokens.TextDecoration.underline.rawValue) + return self.mutate(fontdecoration: Tokens.TextDecoration.underline.rawValue) } } diff --git a/Sources/HTMLKitComponents/Components/Image.swift b/Sources/HTMLKitComponents/Components/Image.swift index 02af8700..6867bb6b 100644 --- a/Sources/HTMLKitComponents/Components/Image.swift +++ b/Sources/HTMLKitComponents/Components/Image.swift @@ -39,7 +39,7 @@ public struct Image: View, Modifiable { extension Image: ImageModifier { public func aspectRatio(_ ratio: Tokens.AspectRatio ,fit: Tokens.ObjectFit) -> Image { - return self.mutate(aspectratio: [ratio.rawValue, fit.rawValue]) + return self.mutate(aspectratio: ratio.rawValue, fit: fit.rawValue) } public func imageScale(_ scale: Tokens.ImageScale) -> Image { @@ -94,12 +94,7 @@ extension Image: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Image { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Image { diff --git a/Sources/HTMLKitComponents/Components/Link.swift b/Sources/HTMLKitComponents/Components/Link.swift index 0240675f..925e2afb 100644 --- a/Sources/HTMLKitComponents/Components/Link.swift +++ b/Sources/HTMLKitComponents/Components/Link.swift @@ -60,19 +60,6 @@ public struct Link: View, Modifiable { .target(target) .class(classes.joined(separator: " ")) } - - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Link { - - var newSelf = self - - if let offset { - newSelf.classes.append(offset.rawValue) - } - - newSelf.classes.append(width.rawValue) - - return newSelf - } } extension Link: TextModifier { @@ -102,14 +89,57 @@ extension Link: TextModifier { } public func bold() -> Link { - return self.mutate(bold: Tokens.FontWeight.bold.rawValue) + return self.mutate(fontweight: Tokens.FontWeight.bold.rawValue) } public func italic() -> Link { - return self.mutate(italic: Tokens.FontStyle.italic.rawValue) + return self.mutate(fontstyle: Tokens.FontStyle.italic.rawValue) } public func underline() -> Link { - return self.mutate(underline: Tokens.TextDecoration.underline.rawValue) + return self.mutate(fontdecoration: Tokens.TextDecoration.underline.rawValue) + } +} + +extension Link: ViewModifier { + + public func backgroundColor(_ color: Tokens.BackgroundColor) -> Link { + return self.mutate(backgroundcolor: color.rawValue) + } + + public func opacity(_ value: Tokens.OpacityValue) -> Link { + return self.mutate(opacity: value.rawValue) + } + + public func zIndex(_ index: Tokens.PositionIndex) -> Link { + return self.mutate(zindex: index.rawValue) + } + + public func hidden() -> Link { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + public func colorScheme(_ scheme: Tokens.ColorScheme) -> Link { + return self.mutate(scheme: scheme.rawValue) + } + + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> Link { + return self.mutate(padding: length.rawValue, insets: insets) + } + + public func borderShape(_ shape: Tokens.BorderShape) -> Link { + return self.mutate(bordershape: shape.rawValue) + } + + public func borderColor(_ color: Tokens.BorderColor) -> Link { + return self.mutate(bordercolor: color.rawValue) + } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Link { + return mutate(frame: width.rawValue, offset: offset?.rawValue) + } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Link { + return self.mutate(margin: length.rawValue, insets: insets) } } diff --git a/Sources/HTMLKitComponents/Components/List.swift b/Sources/HTMLKitComponents/Components/List.swift index 119ecc3f..47478fdd 100644 --- a/Sources/HTMLKitComponents/Components/List.swift +++ b/Sources/HTMLKitComponents/Components/List.swift @@ -22,7 +22,7 @@ public struct List: View, Modifiable, Actionable { public init(direction: Tokens.FlowDirection, @ContentBuilder content: () -> [ListElement]) { self.content = content() - self.classes = ["list", direction.rawValue] + self.classes = ["list", "direction:\(direction.rawValue)"] } /// Creates a list. @@ -53,60 +53,10 @@ public struct List: View, Modifiable, Actionable { public func listStyle(_ style: Tokens.ListStyle) -> List { var newSelf = self - newSelf.classes.append(style.rawValue) + newSelf.classes.append("style:\(style.rawValue)") return newSelf } - - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> List { - - var newSelf = self - - if let offset { - newSelf.classes.append(offset.rawValue) - } - - newSelf.classes.append(width.rawValue) - - return newSelf - } - - public func padding(insets: EdgeSet, length: Tokens.PaddingLength) -> List { - - var classes: [String] = [] - - if !insets.contains(.all) { - - if insets.contains(.top) { - classes.append("padding-top:\(length.rawValue)") - } - - if insets.contains(.bottom) { - classes.append("padding-bottom:\(length.rawValue)") - } - - if insets.contains(.leading) { - classes.append("padding-leading:\(length.rawValue)") - } - - if insets.contains(.trailing) { - classes.append("padding-trailing:\(length.rawValue)") - } - - if insets.contains(.horizontal) { - classes.append("padding-inline:\(length.rawValue)") - } - - if insets.contains(.vertical) { - classes.append("padding-block:\(length.rawValue)") - } - - } else { - classes.append("padding:\(length.rawValue)") - } - - return self.mutate(classes: classes) - } } extension List: HoverModifier { @@ -124,6 +74,49 @@ extension List: HoverModifier { } } +extension List: ViewModifier { + + public func backgroundColor(_ color: Tokens.BackgroundColor) -> List { + return self.mutate(backgroundcolor: color.rawValue) + } + + public func opacity(_ value: Tokens.OpacityValue) -> List { + return self.mutate(opacity: value.rawValue) + } + + public func zIndex(_ index: Tokens.PositionIndex) -> List { + return self.mutate(zindex: index.rawValue) + } + + public func hidden() -> List { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + public func colorScheme(_ scheme: Tokens.ColorScheme) -> List { + return self.mutate(scheme: scheme.rawValue) + } + + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> List { + return self.mutate(padding: length.rawValue, insets: insets) + } + + public func borderShape(_ shape: Tokens.BorderShape) -> List { + return self.mutate(bordershape: shape.rawValue) + } + + public func borderColor(_ color: Tokens.BorderColor) -> List { + return self.mutate(bordercolor: color.rawValue) + } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> List { + return mutate(frame: width.rawValue, offset: offset?.rawValue) + } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> List { + return self.mutate(margin: length.rawValue, insets: insets) + } +} + /// A component that represents a list item. public struct ListRow: View, Modifiable, Actionable { @@ -179,31 +172,31 @@ public struct ListRow: View, Modifiable, Actionable { if !insets.contains(.all) { if insets.contains(.top) { - classes.append("padding-top:\(length.rawValue)") + classes.append("padding-top:\(length)") } if insets.contains(.bottom) { - classes.append("padding-bottom:\(length.rawValue)") + classes.append("padding-bottom:\(length)") } if insets.contains(.leading) { - classes.append("padding-leading:\(length.rawValue)") + classes.append("padding-leading:\(length)") } if insets.contains(.trailing) { - classes.append("padding-trailing:\(length.rawValue)") + classes.append("padding-trailing:\(length)") } if insets.contains(.horizontal) { - classes.append("padding-inline:\(length.rawValue)") + classes.append("padding-inline:\(length)") } if insets.contains(.vertical) { - classes.append("padding-block:\(length.rawValue)") + classes.append("padding-block:\(length)") } } else { - classes.append("padding:\(length.rawValue)") + classes.append("padding:\(length)") } return self.mutate(classes: classes) diff --git a/Sources/HTMLKitComponents/Components/Navigation.swift b/Sources/HTMLKitComponents/Components/Navigation.swift index 683f5f64..5e0557ab 100644 --- a/Sources/HTMLKitComponents/Components/Navigation.swift +++ b/Sources/HTMLKitComponents/Components/Navigation.swift @@ -29,21 +29,51 @@ public struct Navigation: View, Modifiable { public func navigationStyle(_ style: Tokens.NavigationStyle) -> Navigation { var newSelf = self - newSelf.classes.append(style.rawValue) + newSelf.classes.append("style:\(style)") return newSelf } +} + +extension Navigation: ViewModifier { + + public func backgroundColor(_ color: Tokens.BackgroundColor) -> Navigation { + return self.mutate(backgroundcolor: color.rawValue) + } + + public func opacity(_ value: Tokens.OpacityValue) -> Navigation { + return self.mutate(opacity: value.rawValue) + } + + public func zIndex(_ index: Tokens.PositionIndex) -> Navigation { + return self.mutate(zindex: index.rawValue) + } + + public func hidden() -> Navigation { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + public func colorScheme(_ scheme: Tokens.ColorScheme) -> Navigation { + return self.mutate(scheme: scheme.rawValue) + } + + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> Navigation { + return self.mutate(padding: length.rawValue, insets: insets) + } + + public func borderShape(_ shape: Tokens.BorderShape) -> Navigation { + return self.mutate(bordershape: shape.rawValue) + } + + public func borderColor(_ color: Tokens.BorderColor) -> Navigation { + return self.mutate(bordercolor: color.rawValue) + } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Navigation { - - var newSelf = self - - if let offset { - newSelf.classes.append(offset.rawValue) - } - - newSelf.classes.append(width.rawValue) - - return newSelf + return mutate(frame: width.rawValue, offset: offset?.rawValue) + } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Navigation { + return self.mutate(margin: length.rawValue, insets: insets) } } diff --git a/Sources/HTMLKitComponents/Components/ScrollView.swift b/Sources/HTMLKitComponents/Components/ScrollView.swift index e9e98785..9be69716 100644 --- a/Sources/HTMLKitComponents/Components/ScrollView.swift +++ b/Sources/HTMLKitComponents/Components/ScrollView.swift @@ -18,7 +18,7 @@ public struct ScrollView: View { public init(direction: Tokens.FlowDirection, @ContentBuilder content: () -> [Content]) { self.content = content() - self.classes = ["scrollview", direction.rawValue] + self.classes = ["scrollview", "direction:\(direction.rawValue)"] } /// Creates a scrollview diff --git a/Sources/HTMLKitComponents/Components/Snippet.swift b/Sources/HTMLKitComponents/Components/Snippet.swift index f1487d11..a1e8a295 100644 --- a/Sources/HTMLKitComponents/Components/Snippet.swift +++ b/Sources/HTMLKitComponents/Components/Snippet.swift @@ -26,7 +26,7 @@ public struct Snippet: View, Modifiable { return Paragraph { line } } - self.classes = ["snippet", highlight.rawValue] + self.classes = ["snippet", "highlight:\(highlight.rawValue)"] } /// Creates a snippet. @@ -79,12 +79,7 @@ extension Snippet: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Snippet { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Snippet { diff --git a/Sources/HTMLKitComponents/Components/Stack.swift b/Sources/HTMLKitComponents/Components/Stack.swift index 3b04ba87..b56453e8 100644 --- a/Sources/HTMLKitComponents/Components/Stack.swift +++ b/Sources/HTMLKitComponents/Components/Stack.swift @@ -24,7 +24,7 @@ public struct HStack: View, Actionable, Modifiable { public init(alignment: Tokens.VerticalAlignment = .center, @ContentBuilder content: () -> [Content]) { self.content = content() - self.classes = ["hstack", alignment.rawValue] + self.classes = ["hstack", "alignment:\(alignment.rawValue)"] } /// Creates a horizontal stack. @@ -59,7 +59,7 @@ public struct HStack: View, Actionable, Modifiable { public func contentSpace(_ value: Tokens.ContentSpace) -> HStack { var newSelf = self - newSelf.classes.append(value.rawValue) + newSelf.classes.append("space:\(value.rawValue)") return newSelf } @@ -111,12 +111,7 @@ extension HStack: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> HStack { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> HStack { @@ -141,7 +136,7 @@ public struct VStack: View, Actionable, Modifiable { public init(alignment: Tokens.HorizontalAlignment = .leading, @ContentBuilder content: () -> [Content]) { self.content = content() - self.classes = ["vstack", alignment.rawValue] + self.classes = ["vstack", "alignment:\(alignment.rawValue)"] } /// Creates a vertical stack. @@ -176,7 +171,7 @@ public struct VStack: View, Actionable, Modifiable { public func contentSpace(_ value: Tokens.ContentSpace) -> VStack { var newSelf = self - newSelf.classes.append(value.rawValue) + newSelf.classes.append("space:\(value.rawValue)") return newSelf } @@ -228,12 +223,7 @@ extension VStack: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> VStack { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> VStack { @@ -336,12 +326,7 @@ extension ZStack: ViewModifier { } public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> ZStack { - - if let offset { - return self.mutate(frame: [width.rawValue, offset.rawValue]) - } - - return self.mutate(class: width.rawValue) + return mutate(frame: width.rawValue, offset: offset?.rawValue) } public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> ZStack { diff --git a/Sources/HTMLKitComponents/Components/Symbol.swift b/Sources/HTMLKitComponents/Components/Symbol.swift index 31f5b84d..ca6ed029 100644 --- a/Sources/HTMLKitComponents/Components/Symbol.swift +++ b/Sources/HTMLKitComponents/Components/Symbol.swift @@ -57,7 +57,7 @@ public struct Symbol: View, Modifiable { public func fontSize(_ size: Tokens.FontSize) -> Symbol { var newSelf = self - newSelf.classes.append(size.rawValue) + newSelf.classes.append("size:\(size.rawValue)") return newSelf } @@ -65,7 +65,7 @@ public struct Symbol: View, Modifiable { public func foregroundColor(_ color: Tokens.ForegroundColor) -> Symbol { var newSelf = self - newSelf.classes.append(color.rawValue) + newSelf.classes.append("color:\(color.rawValue)") return newSelf } diff --git a/Sources/HTMLKitComponents/Components/Text.swift b/Sources/HTMLKitComponents/Components/Text.swift index 599b26f3..4b684792 100644 --- a/Sources/HTMLKitComponents/Components/Text.swift +++ b/Sources/HTMLKitComponents/Components/Text.swift @@ -52,19 +52,6 @@ public struct Text: View, Actionable, Modifiable { public func id(_ value: String) -> Text { return self.mutate(id: value) } - - public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Text { - - var newSelf = self - - if let offset { - newSelf.classes.append(offset.rawValue) - } - - newSelf.classes.append(width.rawValue) - - return newSelf - } } extension Text: HoverModifier { @@ -120,14 +107,57 @@ extension Text: TextModifier { } public func bold() -> Text { - return self.mutate(bold: Tokens.FontWeight.bold.rawValue) + return self.mutate(fontweight: Tokens.FontWeight.bold.rawValue) } public func italic() -> Text { - return self.mutate(italic: Tokens.FontStyle.italic.rawValue) + return self.mutate(fontstyle: Tokens.FontStyle.italic.rawValue) } public func underline() -> Text { - return self.mutate(underline: Tokens.TextDecoration.underline.rawValue) + return self.mutate(fontdecoration: Tokens.TextDecoration.underline.rawValue) + } +} + +extension Text: ViewModifier { + + public func backgroundColor(_ color: Tokens.BackgroundColor) -> Text { + return self.mutate(backgroundcolor: color.rawValue) + } + + public func opacity(_ value: Tokens.OpacityValue) -> Text { + return self.mutate(opacity: value.rawValue) + } + + public func zIndex(_ index: Tokens.PositionIndex) -> Text { + return self.mutate(zindex: index.rawValue) + } + + public func hidden() -> Text { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + public func colorScheme(_ scheme: Tokens.ColorScheme) -> Text { + return self.mutate(scheme: scheme.rawValue) + } + + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> Text { + return self.mutate(padding: length.rawValue, insets: insets) + } + + public func borderShape(_ shape: Tokens.BorderShape) -> Text { + return self.mutate(bordershape: shape.rawValue) + } + + public func borderColor(_ color: Tokens.BorderColor) -> Text { + return self.mutate(bordercolor: color.rawValue) + } + + public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Text { + return mutate(frame: width.rawValue, offset: offset?.rawValue) + } + + public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Text { + return self.mutate(margin: length.rawValue, insets: insets) } } diff --git a/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift b/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift index 5197af9b..1d61192c 100644 --- a/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift @@ -18,15 +18,15 @@ public protocol ButtonModifier { extension ButtonModifier where Self: Modifiable { - internal func mutate(buttonsize class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(buttonsize value: String) -> Self { + return self.mutate(class: "size:\(value)") } - internal func mutate(buttonstyle class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(buttonstyle value: String) -> Self { + return self.mutate(class: "style:\(value)") } - internal func mutate(buttonstate class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(buttonstate value: String) -> Self { + return self.mutate(class: "state:\(value)") } } diff --git a/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift b/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift index 48e82ad4..f669be8d 100644 --- a/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/ImageModifier.swift @@ -22,19 +22,25 @@ public protocol ImageModifier { extension ImageModifier where Self: Modifiable { - internal func mutate(objectfit class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(objectfit value: String) -> Self { + return self.mutate(class: "fit:\(value)") } - internal func mutate(imagescale class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(imagescale value: String) -> Self { + return self.mutate(class: "scale:\(value)") } - internal func mutate(clipshape class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(clipshape value: String) -> Self { + return self.mutate(class: "shape:\(value)") } - internal func mutate(aspectratio classes: [String]) -> Self { + internal func mutate(aspectratio ratio: String, fit: String) -> Self { + + var classes: [String] = [] + + classes.append("aspect:\(ratio)") + classes.append("fit:\(fit)") + return self.mutate(classes: classes) } } diff --git a/Sources/HTMLKitComponents/Modifiers/InputModifier.swift b/Sources/HTMLKitComponents/Modifiers/InputModifier.swift index 7da42597..ac73f406 100644 --- a/Sources/HTMLKitComponents/Modifiers/InputModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/InputModifier.swift @@ -15,12 +15,12 @@ public protocol InputModifier { extension InputModifier where Self: Modifiable { - internal func mutate(inputstate class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(inputstate value: String) -> Self { + return self.mutate(class: "state:\(value)") } - internal func mutate(focuscolor class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(focuscolor value: String) -> Self { + return self.mutate(class: "focus:\(value)") } } diff --git a/Sources/HTMLKitComponents/Modifiers/TextModifier.swift b/Sources/HTMLKitComponents/Modifiers/TextModifier.swift index 33a69a94..4702fd34 100644 --- a/Sources/HTMLKitComponents/Modifiers/TextModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/TextModifier.swift @@ -36,39 +36,31 @@ public protocol TextModifier { extension TextModifier where Self: Modifiable { - internal func mutate(font class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(font value: String) -> Self { + return self.mutate(class: "style:\(value)") } - internal func mutate(foregroundcolor class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(foregroundcolor value: String) -> Self { + return self.mutate(class: "color:\(value)") } - internal func mutate(fontsize class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(fontsize value: String) -> Self { + return self.mutate(class: "size:\(value)") } - internal func mutate(fontweight class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(fontweight value: String) -> Self { + return self.mutate(class: "weight:\(value)") } - internal func mutate(fonttransformation class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(fonttransformation value: String) -> Self { + return self.mutate(class: "transformation:\(value)") } - internal func mutate(fontstyle class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(fontstyle value: String) -> Self { + return self.mutate(class: "style:\(value)") } - internal func mutate(bold class: String) -> Self { - return self.mutate(class: `class`) - } - - internal func mutate(italic class: String) -> Self { - return self.mutate(class: `class`) - } - - internal func mutate(underline class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(fontdecoration value: String) -> Self { + return self.mutate(class: "decoration:\(value)") } } diff --git a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift index f3039bcd..10ca26a4 100644 --- a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift @@ -38,24 +38,24 @@ public protocol ViewModifier { extension ViewModifier where Self: Modifiable { - internal func mutate(opacity class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(opacity value: String) -> Self { + return self.mutate(class: "opacity\(value)") } - internal func mutate(zindex class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(zindex value: String) -> Self { + return self.mutate(class: "zindex:\(value)") } - internal func mutate(backgroundcolor class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(backgroundcolor value: String) -> Self { + return self.mutate(class: "background:\(value)") } - internal func mutate(viewstate class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(viewstate value: String) -> Self { + return self.mutate(class: "state:\(value)") } - internal func mutate(scheme class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(scheme value: String) -> Self { + return self.mutate(class: "scheme:\(value)") } internal func mutate(padding value: String) -> Self { @@ -99,15 +99,24 @@ extension ViewModifier where Self: Modifiable { return self.mutate(classes: classes) } - internal func mutate(bordershape class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(bordershape value: String) -> Self { + return self.mutate(class: "shape:\(value)") } - internal func mutate(bordercolor class: String) -> Self { - return self.mutate(class: `class`) + internal func mutate(bordercolor value: String) -> Self { + return self.mutate(class: "border:\(value)") } - internal func mutate(frame classes: [String]) -> Self { + internal func mutate(frame width: String, offset: String? = nil) -> Self { + + var classes: [String] = [] + + if let offset { + classes.append("offset:\(offset)") + } + + classes.append("size:\(width)") + return self.mutate(classes: classes) } diff --git a/Sources/HTMLKitComponents/Resources/css/globals.css b/Sources/HTMLKitComponents/Resources/css/globals.css index f172d58c..cd219bdc 100644 --- a/Sources/HTMLKitComponents/Resources/css/globals.css +++ b/Sources/HTMLKitComponents/Resources/css/globals.css @@ -755,84 +755,84 @@ video { sizes */ -.size\:1 { +.size\:one { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 8.3333333333%; } -.size\:2 { +.size\:two { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 16.6666666667%; } -.size\:3 { +.size\:three { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 25%; } -.size\:4 { +.size\:four { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 33.3333333333%; } -.size\:5 { +.size\:five { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 41.6666666667%; } -.size\:6 { +.size\:six { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 50%; } -.size\:7 { +.size\:seven { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 58.3333333333%; } -.size\:8 { +.size\:eight { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 66.6666666667%; } -.size\:9 { +.size\:nine { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 75%; } -.size\:10 { +.size\:ten { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 83.3333333333%; } -.size\:11 { +.size\:eleven { flex-grow: 0; flex-shrink: 1; flex-basis: auto; inline-size: 91.6666666667%; } -.size\:12 { +.size\:twelve { flex-grow: 0; flex-shrink: 1; flex-basis: auto; @@ -843,46 +843,46 @@ video { offset */ -.offset\:1 { +.offset\:one { margin-inline-start: 8.3333333333%; } -.offset\:2 { +.offset\:two { margin-inline-start: 16.6666666667%; } -.offset\:3 { +.offset\:three { margin-inline-start: 25%; } -.offset\:4 { +.offset\:four { margin-inline-start: 33.3333333333%; } -.offset\:5 { +.offset\:five { margin-inline-start: 41.6666666667%; } -.offset\:6 { +.offset\:six { margin-inline-start: 50%; } -.offset\:7 { +.offset\:seven { margin-inline-start: 58.3333333333%; } -.offset\:8 { +.offset\:eight { margin-inline-start: 66.6666666667%; } -.offset\:9 { +.offset\:nine { margin-inline-start: 75%; } -.offset\:10 { +.offset\:ten { margin-inline-start: 83.3333333333%; } -.offset\:11 { +.offset\:eleven { margin-inline-start: 91.6666666667%; } diff --git a/Sources/HTMLKitComponents/Tokens.swift b/Sources/HTMLKitComponents/Tokens.swift index a2f9fdd8..1d9a7380 100644 --- a/Sources/HTMLKitComponents/Tokens.swift +++ b/Sources/HTMLKitComponents/Tokens.swift @@ -10,652 +10,652 @@ public enum Tokens { public enum FlowDirection: String { /// Aligns the elements vertically. - case vertical = "direction:vertical" + case vertical = "vertical" /// Aligns the elements horizontally. - case horizontal = "direction:horizontal" + case horizontal = "horizontal" } /// A alignment for text along the horizontal axis. public enum TextAlignment: String { /// Aligns the text left. - case left = "alignment:left" + case left = "left" /// Aligns the text in the middle. - case center = "alignment:center" + case center = "center" /// Aligns the text right. - case right = "alignment:right" + case right = "right" } /// A size for column. public enum ColumnSize: String { /// Sets the size to 8.3 %. - case one = "size:1" + case one = "one" /// Sets the size to 16.67 %. - case two = "size:2" + case two = "two" /// Sets the size to 25 %. - case three = "size:3" + case three = "three" /// Sets the size to 33.3 %. - case four = "size:4" + case four = "four" /// Sets the size to 41.67 %. - case five = "size:5" + case five = "five" /// Sets the size to 50 %. - case six = "size:6" + case six = "six" /// Sets the size to 58.3 %. - case seven = "size:7" + case seven = "seven" /// Sets the size to 66.67 %. - case eight = "size:8" + case eight = "eight" /// Sets the size to 75 %. - case nine = "size:9" + case nine = "nine" /// Sets the size to 83.3%. - case ten = "size:10" + case ten = "ten" /// Sets the size to 91.67 %. - case eleven = "size:11" + case eleven = "eleven" /// Sets the size to 100 %. - case twelve = "size:12" + case twelve = "twelve" } /// A color for text. public enum ForegroundColor: String { /// Changes the foreground color to black. - case black = "color:black" + case black = "black" /// Changes the foreground color to white. - case white = "color:white" + case white = "white" /// Changes the foreground color to blue. - case blue = "color:blue" + case blue = "blue" /// Changes the foreground color to brown. - case brown = "color:brown" + case brown = "brown" /// Changes the foreground color to cyan. - case cyan = "color:cyan" + case cyan = "cyan" /// Changes the foreground color to green. - case green = "color:green" + case green = "green" /// Changes the foreground color to indigo. - case indigo = "color:indigo" + case indigo = "indigo" /// Changes the foreground color to mint. - case mint = "color:mint" + case mint = "mint" /// Changes the foreground color to pink. - case pink = "color:pink" + case pink = "pink" /// Changes the foreground color to purple. - case purple = "color:purple" + case purple = "purple" /// Changes the foreground color to red. - case red = "color:red" + case red = "red" /// Changes the foreground color to teal. - case teal = "color:teal" + case teal = "teal" /// Changes the foreground color to orange. - case orange = "color:orange" + case orange = "orange" /// Changes the foreground color to yellow. - case yellow = "color:yellow" + case yellow = "yellow" /// Changes the foreground color to gray. - case gray = "color:gray" + case gray = "gray" /// Changes the foreground color to silver. - case silver = "color:silver" + case silver = "silver" /// Changes the foreground color to black. - case highlight = "color:highlight" + case highlight = "highlight" /// Changes the foreground color to black. - case primary = "color:primary" + case primary = "primary" /// Changes the foreground color to black. - case secondary = "color:secondary" + case secondary = "secondary" } /// A size for text. public enum FontSize: String { /// Changes the size to small. - case tiny = "size:tiny" + case tiny = "tiny" /// Changes the size to small. - case small = "size:small" + case small = "small" /// Changes the size to medium. - case medium = "size:medium" + case medium = "medium" /// Changes the size to large. - case large = "size:large" + case large = "large" /// Changes the size to extra large. - case extralarge = "size:extralarge" + case extralarge = "extralarge" } /// A transformation for the text. public enum TextTransformation: String { /// Converts all characters to uppercase. - case uppercase = "transformation:uppercase" + case uppercase = "uppercase" /// Converts all characters to lowercase. - case lowercase = "transformation:lowercase" + case lowercase = "lowercase" /// Capitalizes the first letter of each word. - case capitalize = "transformation:capitalize" + case capitalize = "capitalize" } /// A weight for text. public enum FontWeight: String { /// Sets the weight to 100. - case thin = "weight:thin" + case thin = "thin" /// Sets the weight to 200. - case ultraLight = "weight:ultralight" + case ultraLight = "ultralight" /// Sets the weight to 300. - case light = "weight:light" + case light = "light" /// Sets the weight to 400. - case regular = "weight:regular" + case regular = "regular" /// Sets the weight to 500. - case medium = "weight:medium" + case medium = "medium" /// Sets the weight to 600. - case semibold = "weight:semibold" + case semibold = "semibold" /// Sets the weight to 700. - case bold = "weight:bold" + case bold = "bold" /// Sets the weight to 900. - case heavy = "weight:heavy" + case heavy = "heavy" /// Sets the weight to 950. - case black = "weight:black" + case black = "black" } /// A decoration for text. public enum TextDecoration: String { - case underline = "decoration:underline" + case underline = "underline" - case overline = "decoration:overline" + case overline = "overline" - case strikeThrough = "decoration:strikethrough" + case strikeThrough = "strikethrough" - case none = "decoration:none" + case none = "none" } public enum FontStyle: String { - case italic = "style:italic" + case italic = "italic" - case oblique = "style:oblique" + case oblique = "oblique" } public enum BackgroundColor: String { /// Changes the background color to black. - case black = "background:black" + case black = "black" /// Changes the background color to white. - case white = "background:white" + case white = "white" /// Changes the background color to blue. - case blue = "background:blue" + case blue = "blue" /// Changes the background color to brown. - case brown = "background:brown" + case brown = "brown" /// Changes the background color to cyan. - case cyan = "background:cyan" + case cyan = "cyan" /// Changes the background color to green. - case green = "background:green" + case green = "green" /// Changes the background color to indigo. - case indigo = "background:indigo" + case indigo = "indigo" /// Changes the background color to mint. - case mint = "background:mint" + case mint = "mint" /// Changes the background color to pink. - case pink = "background:pink" + case pink = "pink" /// Changes the background color to purple. - case purple = "background:purple" + case purple = "purple" /// Changes the background color to red. - case red = "background:red" + case red = "red" /// Changes the background color to teal. - case teal = "background:teal" + case teal = "teal" /// Changes the background color to ornage. - case orange = "background:orange" + case orange = "orange" /// Changes the background color to yellow. - case yellow = "background:yellow" + case yellow = "yellow" /// Changes the background color to gray. - case gray = "background:gray" + case gray = "gray" /// Changes the background color to silver. - case silver = "background:silver" + case silver = "silver" - case highlight = "background:highlight" + case highlight = "highlight" - case primary = "background:primary" + case primary = "primary" - case secondary = "background:secondary" + case secondary = "secondary" - case transparent = "background:transparent" + case transparent = "transparent" } /// A resize for an element. public enum ObjectFit: String { - + /// Resizes the content to fit within the parent. - case contain = "fit:contain" + case contain = "contain" /// Resizes the content to fill the parent. The overflow will be clipped. - case cover = "fit:cover" + case cover = "cover" /// Resizes the content to fill the parent. If necessary it will be streched or squished. - case fill = "fit:fill" + case fill = "fill" - case scaleDown = "fit:scaledown" + case scaleDown = "scaledown" /// Does not resize. - case none = "fit:none" + case none = "none" } public enum OpacityValue: String { - case intransparent = "opacity:intransparent" + case intransparent = "intransparent" - case transparent = "opacity:transparent" + case transparent = "transparent" } /// A offset for a column. public enum ColumnOffset: String { /// Sets the offset to 8.3 %. - case one = "offset:1" + case one = "one" /// Sets the offset to 16.67 %. - case two = "offset:2" + case two = "two" /// Sets the offset to 25 %. - case three = "offset:3" + case three = "three" /// Sets the offset to 33.33 %. - case four = "offset:4" + case four = "four" /// Sets the offset to 41.67 %. - case five = "offset:5" + case five = "five" /// Sets the offset to 50 %. - case six = "offset:6" + case six = "six" /// Sets the offset to 58.3 %. - case seven = "offset:7" + case seven = "seven" /// Sets the offset to 66.7 %. - case eight = "offset:8" + case eight = "eight" /// Sets the offset to 75 %. - case nine = "offset:9" + case nine = "nine" /// Sets the offset to 83.3 %. - case ten = "offset:10" + case ten = "ten" /// Sets the offset to 91.67 %. - case eleven = "offset:11" + case eleven = "eleven" } public enum ImageScale: String { - case small = "scale:small" - case medium = "scale:medium" - case large = "scale:large" + case small = "small" + case medium = "medium" + case large = "large" } public enum ClipShape: String { - case circle = "shape:circle" + case circle = "circle" } /// Position along the z-axis. public enum PositionIndex: String { /// Sets the stack order to 1. - case one = "zindex:1" + case one = "1" /// Sets the stack order to 2. - case two = "zindex:2" + case two = "2" /// Sets the stack order to 3. - case three = "zindex:3" + case three = "3" /// Sets the stack order to 4. - case four = "zindex:4" + case four = "4" /// Sets the stack order to 5. - case five = "zindex:5" + case five = "5" } /// A style for text. public enum TextStyle: String { /// Formats the text as title. - case title = "style:title" + case title = "title" /// Formats the text as headline. - case headline = "style:headline" + case headline = "headline" /// Formats the text as subheadline. - case subheadline = "style:subheadline" + case subheadline = "subheadline" /// Formats the text as body. - case body = "style:body" + case body = "body" /// Formats the text as callout. - case callout = "style:callout" + case callout = "callout" /// Formats the text as caption. - case caption = "style:caption" + case caption = "caption" /// Formats the text as footnote. - case footnote = "style:footnote" + case footnote = "footnote" /// Formats the text as code. - case code = "style:code" + case code = "code" } /// A alignment along the vertically axis. public enum VerticalAlignment: String { /// Aligns at the top. - case top = "alignment:top" + case top = "top" /// Aligns in the middle. - case center = "alignment:center" + case center = "center" /// Aligns at the bottom. - case bottom = "alignment:bottom" + case bottom = "bottom" /// Aligns with the parent's baseline. - case baseline = "alignment:baseline" + case baseline = "baseline" } /// A alignment along the horizontal axis. public enum HorizontalAlignment: String { /// Aligns left. - case leading = "alignment:leading" + case leading = "leading" /// Aligns center. - case center = "alignment:center" + case center = "center" /// Aligns right. - case trailing = "alignment:trailing" + case trailing = "trailing" } public enum ContentSpace: String { - case around = "space:around" - case between = "space:between" - case evenly = "space:evenly" - case large = "space:large" - case medium = "space:medium" - case small = "space:small" + case around = "around" + case between = "between" + case evenly = "evenly" + case large = "large" + case medium = "medium" + case small = "small" } public enum SyntaxHighlight: String { - case plaintext = "hightlight:plaintext" - case html = "hightlight:html" - case css = "hightlight:css" - case javascript = "hightlight:javascript" + case plaintext = "plaintext" + case html = "html" + case css = "css" + case javascript = "javascript" } /// A style for button. public enum ButtonStyle: String { - case primary = "style:primary" - case secondary = "style:secondary" - case outline = "style:outline" + case primary = "primary" + case secondary = "secondary" + case outline = "outline" } /// A shape of the button. public enum BorderShape: String { - case smallrounded = "shape:smallrounded" - case largerounded = "shape:largerounded" - case fullrounded = "shape:fullrounded" + case smallrounded = "smallrounded" + case largerounded = "largerounded" + case fullrounded = "fullrounded" } /// A size of a button. public enum ButtonSize: String { /// Sets the size to 100 %. - case full = "size:full" + case full = "full" /// Sets the size to 75 %. - case large = "size:large" + case large = "large" /// Sets the size to 50 %. - case medium = "size:medium" + case medium = "medium" /// Sets the size to 25 %. - case small = "size:small" + case small = "small" } /// A ratio for the grid. public enum ItemRatio: String { /// Sets the ratio to 15%. - case sixth = "ratio:15" + case sixth = "15" /// Sets the ratio to 20 %. - case fifth = "ratio:20" + case fifth = "20" /// Sets the ratio to 25 %. - case quarter = "ratio:25" + case quarter = "25" /// Sets the ratio to 33 %. - case third = "ratio:33" + case third = "33" /// Sets the ratio to 50 %. - case half = "ratio:50" + case half = "50" } /// A style for a list. public enum ListStyle: String { - case listgroup = "style:listgroup" + case listgroup = "listgroup" } /// A state for the view. public enum ViewState: String { /// Sets the state to active. - case active = "state:active" + case active = "active" /// Sets the state to disabled. - case disabled = "state:disabled" + case disabled = "disabled" /// Sets the state to hidden. - case hidden = "state:hidden" + case hidden = "hidden" /// Sets the state to visible. - case visible = "state:visible" + case visible = "visible" } public enum BorderColor: String { /// Changes the border color to black. - case black = "border:black" + case black = "black" /// Changes the border color to white. - case white = "border:white" + case white = "white" /// Changes the border color to blue. - case blue = "border:blue" + case blue = "blue" /// Changes the border color to brown. - case brown = "border:brown" + case brown = "brown" /// Changes the border color to cyan. - case cyan = "border:cyan" + case cyan = "cyan" /// Changes the border color to green. - case green = "border:green" + case green = "green" /// Changes the border color to indigo. - case indigo = "border:indigo" + case indigo = "indigo" /// Changes the border color to mint. - case mint = "border:mint" + case mint = "mint" /// Changes the border color to pink. - case pink = "border:pink" + case pink = "pink" /// Changes the border color to purple. - case purple = "border:purple" + case purple = "purple" /// Changes the border color to red. - case red = "border:red" + case red = "red" /// Changes the border color to teal. - case teal = "border:teal" + case teal = "teal" /// Changes the border color to ornage. - case orange = "border:orange" + case orange = "orange" /// Changes the border color to yellow. - case yellow = "border:yellow" + case yellow = "yellow" /// Changes the border color to gray. - case gray = "border:gray" + case gray = "gray" /// Changes the border color to silver. - case silver = "border:silver" + case silver = "silver" - case primary = "border:primary" + case primary = "primary" - case secondary = "border:secondary" + case secondary = "secondary" - case transparent = "border:transparent" + case transparent = "transparent" } public enum FocusColor: String { /// Changes the border color to black. - case black = "focus:black" + case black = "black" /// Changes the border color to white. - case white = "focus:white" + case white = "white" /// Changes the border color to blue. - case blue = "focus:blue" + case blue = "blue" /// Changes the border color to brown. - case brown = "focus:brown" + case brown = "brown" /// Changes the border color to cyan. - case cyan = "focus:cyan" + case cyan = "cyan" /// Changes the border color to green. - case green = "focus:green" + case green = "green" /// Changes the border color to indigo. - case indigo = "focus:indigo" + case indigo = "indigo" /// Changes the border color to mint. - case mint = "focus:mint" + case mint = "mint" /// Changes the border color to pink. - case pink = "focus:pink" + case pink = "pink" /// Changes the border color to purple. - case purple = "focus:purple" + case purple = "purple" /// Changes the border color to red. - case red = "focus:red" + case red = "red" /// Changes the border color to teal. - case teal = "focus:teal" + case teal = "teal" /// Changes the border color to ornage. - case orange = "focus:orange" + case orange = "orange" /// Changes the border color to yellow. - case yellow = "focus:yellow" + case yellow = "yellow" /// Changes the border color to gray. - case gray = "focus:gray" + case gray = "gray" /// Changes the border color to silver. - case silver = "focus:silver" + case silver = "silver" - case primary = "focus:primary" + case primary = "primary" - case secondary = "focus:secondary" + case secondary = "secondary" } public enum ColorScheme: String { /// Changes the color scheme to dark. - case dark = "scheme:dark" + case dark = "dark" /// Changes the color scheme to light. - case light = "scheme:light" + case light = "light" } public enum PaddingLength: String { - case large - case medium - case small + case large = "large" + case medium = "medium" + case small = "small" } public enum MarginLength: String { - case large - case medium - case small + case large = "large" + case medium = "medium" + case small = "small" } public enum AspectRatio: String { - case equal = "aspect:equal" - case unequal = "aspect:unequal" + case equal = "equal" + case unequal = "unequal" } public enum NavigationStyle: String { - case plain = "style:plain" + case plain = "plain" } } diff --git a/Tests/HTMLKitComponentsTests/ComponentTests.swift b/Tests/HTMLKitComponentsTests/ComponentTests.swift index 5dc45f07..caa6201c 100644 --- a/Tests/HTMLKitComponentsTests/ComponentTests.swift +++ b/Tests/HTMLKitComponentsTests/ComponentTests.swift @@ -402,7 +402,7 @@ final class ComponentTests: XCTestCase { XCTAssertEqual(try renderer.render(view: view), """ -
\
+                       
\
                        

<div>

\

<h3>headline</h3>

\

</div>

\ From efb817866935b7936dfff465d32a2585fe76bcd0 Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sat, 1 Jul 2023 12:27:19 +0200 Subject: [PATCH 24/26] Create a new file for option sets --- Sources/HTMLKitComponents/Options.swift | 22 ++++++++++++++++++++++ Sources/HTMLKitComponents/Tokens.swift | 18 ------------------ 2 files changed, 22 insertions(+), 18 deletions(-) create mode 100644 Sources/HTMLKitComponents/Options.swift diff --git a/Sources/HTMLKitComponents/Options.swift b/Sources/HTMLKitComponents/Options.swift new file mode 100644 index 00000000..bd1cc521 --- /dev/null +++ b/Sources/HTMLKitComponents/Options.swift @@ -0,0 +1,22 @@ +/* + Abstract: + The file contains the option sets. + */ + +public struct EdgeSet: OptionSet { + + public var rawValue: Int + + public static let top = EdgeSet(rawValue: 1 << 0) + public static let bottom = EdgeSet(rawValue: 1 << 1) + public static let leading = EdgeSet(rawValue: 1 << 2) + public static let trailing = EdgeSet(rawValue: 2 << 3) + public static let horizontal = EdgeSet(rawValue: 3 << 4) + public static let vertical = EdgeSet(rawValue: 4 << 5) + + public static let all: EdgeSet = [.top, .bottom, .leading, .trailing] + + public init(rawValue: Int) { + self.rawValue = rawValue + } +} diff --git a/Sources/HTMLKitComponents/Tokens.swift b/Sources/HTMLKitComponents/Tokens.swift index 1d9a7380..0f1548c5 100644 --- a/Sources/HTMLKitComponents/Tokens.swift +++ b/Sources/HTMLKitComponents/Tokens.swift @@ -658,21 +658,3 @@ public enum Tokens { case plain = "plain" } } - -public struct EdgeSet: OptionSet { - - public var rawValue: Int - - public static let top = EdgeSet(rawValue: 1 << 0) - public static let bottom = EdgeSet(rawValue: 1 << 1) - public static let leading = EdgeSet(rawValue: 1 << 2) - public static let trailing = EdgeSet(rawValue: 2 << 3) - public static let horizontal = EdgeSet(rawValue: 3 << 4) - public static let vertical = EdgeSet(rawValue: 4 << 5) - - public static let all: EdgeSet = [.top, .bottom, .leading, .trailing] - - public init(rawValue: Int) { - self.rawValue = rawValue - } -} From c60aec71cd48dad8dc1827054f2b90ac94e6408d Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sat, 1 Jul 2023 12:55:24 +0200 Subject: [PATCH 25/26] Add more text styling methods for the text and link component --- .../Components/Grouping.swift | 12 +++++++ .../HTMLKitComponents/Components/Link.swift | 12 +++++++ .../HTMLKitComponents/Components/Text.swift | 12 +++++++ .../Modifiers/TextModifier.swift | 17 ++++++++++ .../Resources/css/typography/link.css | 33 +++++++++++++++++++ .../Resources/css/typography/text.css | 33 +++++++++++++++++++ Sources/HTMLKitComponents/Tokens.swift | 14 ++++++++ 7 files changed, 133 insertions(+) diff --git a/Sources/HTMLKitComponents/Components/Grouping.swift b/Sources/HTMLKitComponents/Components/Grouping.swift index 175b6893..01b904ed 100644 --- a/Sources/HTMLKitComponents/Components/Grouping.swift +++ b/Sources/HTMLKitComponents/Components/Grouping.swift @@ -86,4 +86,16 @@ extension Grouping: TextModifier { public func underline() -> Grouping { return self.mutate(fontdecoration: Tokens.TextDecoration.underline.rawValue) } + + public func strikethrough() -> Grouping { + return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.rawValue) + } + + public func lineSpacing(_ height: Tokens.LineHeight) -> Grouping { + return self.mutate(lineheight: height.rawValue) + } + + public func lineLimit(_ limit: Tokens.LineLimit) -> Grouping { + return self.mutate(linelimit: limit.rawValue) + } } diff --git a/Sources/HTMLKitComponents/Components/Link.swift b/Sources/HTMLKitComponents/Components/Link.swift index 925e2afb..95788a77 100644 --- a/Sources/HTMLKitComponents/Components/Link.swift +++ b/Sources/HTMLKitComponents/Components/Link.swift @@ -99,6 +99,18 @@ extension Link: TextModifier { public func underline() -> Link { return self.mutate(fontdecoration: Tokens.TextDecoration.underline.rawValue) } + + public func strikethrough() -> Link { + return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.rawValue) + } + + public func lineSpacing(_ height: Tokens.LineHeight) -> Link { + return self.mutate(lineheight: height.rawValue) + } + + public func lineLimit(_ limit: Tokens.LineLimit) -> Link { + return self.mutate(linelimit: limit.rawValue) + } } extension Link: ViewModifier { diff --git a/Sources/HTMLKitComponents/Components/Text.swift b/Sources/HTMLKitComponents/Components/Text.swift index 4b684792..6d5600c4 100644 --- a/Sources/HTMLKitComponents/Components/Text.swift +++ b/Sources/HTMLKitComponents/Components/Text.swift @@ -117,6 +117,18 @@ extension Text: TextModifier { public func underline() -> Text { return self.mutate(fontdecoration: Tokens.TextDecoration.underline.rawValue) } + + public func strikethrough() -> Text { + return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.rawValue) + } + + public func lineSpacing(_ height: Tokens.LineHeight) -> Text { + return self.mutate(lineheight: height.rawValue) + } + + public func lineLimit(_ limit: Tokens.LineLimit) -> Text { + return self.mutate(linelimit: limit.rawValue) + } } extension Text: ViewModifier { diff --git a/Sources/HTMLKitComponents/Modifiers/TextModifier.swift b/Sources/HTMLKitComponents/Modifiers/TextModifier.swift index 4702fd34..79ee2df6 100644 --- a/Sources/HTMLKitComponents/Modifiers/TextModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/TextModifier.swift @@ -32,6 +32,15 @@ public protocol TextModifier { /// Applies an underline to the text. func underline() -> Self + + /// Applies an strikethrough to the text. + func strikethrough() -> Self + + /// Sets the line height for the text. + func lineSpacing(_ height: Tokens.LineHeight) -> Self + + /// Sets the limit of the lines for the text. + func lineLimit(_ limit: Tokens.LineLimit) -> Self } extension TextModifier where Self: Modifiable { @@ -63,4 +72,12 @@ extension TextModifier where Self: Modifiable { internal func mutate(fontdecoration value: String) -> Self { return self.mutate(class: "decoration:\(value)") } + + internal func mutate(lineheight value: String) -> Self { + return self.mutate(class: "height:\(value)") + } + + internal func mutate(linelimit value: String) -> Self { + return self.mutate(class: "limit:\(value)") + } } diff --git a/Sources/HTMLKitComponents/Resources/css/typography/link.css b/Sources/HTMLKitComponents/Resources/css/typography/link.css index 792d711e..3cab5f03 100644 --- a/Sources/HTMLKitComponents/Resources/css/typography/link.css +++ b/Sources/HTMLKitComponents/Resources/css/typography/link.css @@ -158,5 +158,38 @@ --lineHeight: 1.5; } +.link.height\:small { + --lineHeight: 1.0; +} + +.link.height\:medium { + --lineHeight: 1.75; +} + +.link.height\:large { + --lineHeight: 2.25; +} + +.link.limit\:one { + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.link.limit\:two { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.link.limit\:three { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + .scheme\:dark .link, .link.scheme\:dark { } diff --git a/Sources/HTMLKitComponents/Resources/css/typography/text.css b/Sources/HTMLKitComponents/Resources/css/typography/text.css index 7962c908..d8304029 100644 --- a/Sources/HTMLKitComponents/Resources/css/typography/text.css +++ b/Sources/HTMLKitComponents/Resources/css/typography/text.css @@ -161,5 +161,38 @@ --lineHeight: 1.5; } +.text.height\:small { + --lineHeight: 1.0; +} + +.text.height\:medium { + --lineHeight: 1.75; +} + +.text.height\:large { + --lineHeight: 2.25; +} + +.text.limit\:one { + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.text.limit\:two { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.text.limit\:three { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + .scheme\:dark .text, .text.scheme\:dark { } diff --git a/Sources/HTMLKitComponents/Tokens.swift b/Sources/HTMLKitComponents/Tokens.swift index 0f1548c5..2258a678 100644 --- a/Sources/HTMLKitComponents/Tokens.swift +++ b/Sources/HTMLKitComponents/Tokens.swift @@ -657,4 +657,18 @@ public enum Tokens { case plain = "plain" } + + public enum LineHeight: String { + + case small = "small" + case medium = "medium" + case large = "large" + } + + public enum LineLimit: String { + + case one = "one" + case two = "two" + case three = "three" + } } From 08f40a47747e71e3a3ac63f2b485d6efebd18bcc Mon Sep 17 00:00:00 2001 From: Mattes Mohr Date: Sat, 1 Jul 2023 20:57:05 +0200 Subject: [PATCH 26/26] Extend the state methods for button and view components with a condition --- .../HTMLKitComponents/Components/Button.swift | 26 ++++++ .../HTMLKitComponents/Components/Card.swift | 9 ++ .../Components/Dropdown.swift | 13 +++ .../HTMLKitComponents/Components/Form.swift | 90 +++++++++++++++++++ .../Components/Grouping.swift | 38 +++++++- .../HTMLKitComponents/Components/Image.swift | 9 ++ .../HTMLKitComponents/Components/Link.swift | 45 ++++++++++ .../HTMLKitComponents/Components/List.swift | 9 ++ .../Components/Navigation.swift | 9 ++ .../Components/Snippet.swift | 9 ++ .../HTMLKitComponents/Components/Stack.swift | 27 ++++++ .../HTMLKitComponents/Components/Text.swift | 45 ++++++++++ .../Modifiers/ButtonModifier.swift | 3 + .../Modifiers/TextModifier.swift | 8 ++ .../Modifiers/ViewModifier.swift | 2 + 15 files changed, 341 insertions(+), 1 deletion(-) diff --git a/Sources/HTMLKitComponents/Components/Button.swift b/Sources/HTMLKitComponents/Components/Button.swift index 01f7f43a..ecf34386 100644 --- a/Sources/HTMLKitComponents/Components/Button.swift +++ b/Sources/HTMLKitComponents/Components/Button.swift @@ -70,6 +70,10 @@ extension Button: ButtonModifier { return self.mutate(buttonstyle: style.rawValue) } + public func disabled() -> Button { + return self.mutate(buttonstate: Tokens.ViewState.disabled.rawValue) + } + public func disabled(_ condition: Bool) -> Button { if condition { @@ -113,6 +117,15 @@ extension Button: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> Button { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> Button { return self.mutate(scheme: scheme.rawValue) } @@ -204,6 +217,10 @@ extension LinkButton: ButtonModifier { return self.mutate(buttonstyle: style.rawValue) } + public func disabled() -> LinkButton { + return self.mutate(buttonstate: Tokens.ViewState.disabled.rawValue) + } + public func disabled(_ condition: Bool) -> LinkButton { if condition { @@ -232,6 +249,15 @@ extension LinkButton: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> LinkButton { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> LinkButton { return self.mutate(scheme: scheme.rawValue) } diff --git a/Sources/HTMLKitComponents/Components/Card.swift b/Sources/HTMLKitComponents/Components/Card.swift index c982cc26..c2a87d15 100644 --- a/Sources/HTMLKitComponents/Components/Card.swift +++ b/Sources/HTMLKitComponents/Components/Card.swift @@ -74,6 +74,15 @@ extension Card: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> Card { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> Card { return self.mutate(scheme: scheme.rawValue) } diff --git a/Sources/HTMLKitComponents/Components/Dropdown.swift b/Sources/HTMLKitComponents/Components/Dropdown.swift index 8781ac8e..54a5857b 100644 --- a/Sources/HTMLKitComponents/Components/Dropdown.swift +++ b/Sources/HTMLKitComponents/Components/Dropdown.swift @@ -59,6 +59,10 @@ extension Dropdown: ButtonModifier { return self.mutate(buttonstyle: style.rawValue) } + public func disabled() -> Dropdown { + return self.mutate(buttonstate: Tokens.ViewState.disabled.rawValue) + } + public func disabled(_ condition: Bool) -> Dropdown { if condition { @@ -83,6 +87,15 @@ extension Dropdown: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> Dropdown { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> Dropdown { return self.mutate(padding: length.rawValue, insets: insets) } diff --git a/Sources/HTMLKitComponents/Components/Form.swift b/Sources/HTMLKitComponents/Components/Form.swift index 43a71f34..d44dafe5 100644 --- a/Sources/HTMLKitComponents/Components/Form.swift +++ b/Sources/HTMLKitComponents/Components/Form.swift @@ -196,6 +196,15 @@ extension TextField: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> TextField { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> TextField { return self.mutate(padding: length.rawValue, insets: insets) } @@ -319,6 +328,15 @@ extension TextEditor: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> TextEditor { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> TextEditor { return self.mutate(padding: length.rawValue, insets: insets) } @@ -426,6 +444,15 @@ extension CheckField: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> CheckField { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> CheckField { return self.mutate(padding: length.rawValue, insets: insets) } @@ -533,6 +560,15 @@ extension RadioSelect: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> RadioSelect { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> RadioSelect { return self.mutate(padding: length.rawValue, insets: insets) } @@ -640,6 +676,15 @@ extension SelectField: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> SelectField { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> SelectField { return self.mutate(padding: length.rawValue, insets: insets) } @@ -786,6 +831,15 @@ extension SecureField: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> SecureField { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> SecureField { return self.mutate(padding: length.rawValue, insets: insets) } @@ -881,6 +935,15 @@ extension Slider: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> Slider { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> Slider { return self.mutate(padding: length.rawValue, insets: insets) } @@ -1063,6 +1126,15 @@ extension DatePicker: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> DatePicker { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> DatePicker { return self.mutate(padding: length.rawValue, insets: insets) } @@ -1174,6 +1246,15 @@ extension SearchField: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> SearchField { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> SearchField { return self.mutate(padding: length.rawValue, insets: insets) } @@ -1381,6 +1462,15 @@ extension TextPad: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> TextPad { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func padding(insets: EdgeSet = .all, length: Tokens.PaddingLength = .small) -> TextPad { return self.mutate(padding: length.rawValue, insets: insets) } diff --git a/Sources/HTMLKitComponents/Components/Grouping.swift b/Sources/HTMLKitComponents/Components/Grouping.swift index 01b904ed..d0758923 100644 --- a/Sources/HTMLKitComponents/Components/Grouping.swift +++ b/Sources/HTMLKitComponents/Components/Grouping.swift @@ -49,7 +49,7 @@ public struct Grouping: View, Modifiable { } } -extension Grouping: TextModifier { +extension Grouping: TextModifier { public func font(_ style: Tokens.TextStyle) -> Grouping { return self.mutate(font: style.rawValue) @@ -79,18 +79,54 @@ extension Grouping: TextModifier { return self.mutate(fontweight: Tokens.FontWeight.bold.rawValue) } + public func bold(_ condition: Bool) -> Grouping { + + if condition { + return self.mutate(fontweight: Tokens.FontWeight.bold.rawValue) + } + + return self + } + public func italic() -> Grouping { return self.mutate(fontstyle: Tokens.FontStyle.italic.rawValue) } + public func italic(_ condition: Bool) -> Grouping { + + if condition { + return self.mutate(fontstyle: Tokens.FontStyle.italic.rawValue) + } + + return self + } + public func underline() -> Grouping { return self.mutate(fontdecoration: Tokens.TextDecoration.underline.rawValue) } + public func underline(_ condition: Bool) -> Grouping { + + if condition { + return self.mutate(fontdecoration: Tokens.TextDecoration.underline.rawValue) + } + + return self + } + public func strikethrough() -> Grouping { return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.rawValue) } + public func strikethrough(_ condition: Bool) -> Grouping { + + if condition { + return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.rawValue) + } + + return self + } + public func lineSpacing(_ height: Tokens.LineHeight) -> Grouping { return self.mutate(lineheight: height.rawValue) } diff --git a/Sources/HTMLKitComponents/Components/Image.swift b/Sources/HTMLKitComponents/Components/Image.swift index 6867bb6b..75c1161b 100644 --- a/Sources/HTMLKitComponents/Components/Image.swift +++ b/Sources/HTMLKitComponents/Components/Image.swift @@ -77,6 +77,15 @@ extension Image: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> Image { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> Image { return self.mutate(scheme: scheme.rawValue) } diff --git a/Sources/HTMLKitComponents/Components/Link.swift b/Sources/HTMLKitComponents/Components/Link.swift index 95788a77..b81c4de1 100644 --- a/Sources/HTMLKitComponents/Components/Link.swift +++ b/Sources/HTMLKitComponents/Components/Link.swift @@ -92,18 +92,54 @@ extension Link: TextModifier { return self.mutate(fontweight: Tokens.FontWeight.bold.rawValue) } + public func bold(_ condition: Bool) -> Link { + + if condition { + return self.mutate(fontweight: Tokens.FontWeight.bold.rawValue) + } + + return self + } + public func italic() -> Link { return self.mutate(fontstyle: Tokens.FontStyle.italic.rawValue) } + public func italic(_ condition: Bool) -> Link { + + if condition { + return self.mutate(fontstyle: Tokens.FontStyle.italic.rawValue) + } + + return self + } + public func underline() -> Link { return self.mutate(fontdecoration: Tokens.TextDecoration.underline.rawValue) } + public func underline(_ condition: Bool) -> Link { + + if condition { + return self.mutate(fontdecoration: Tokens.TextDecoration.underline.rawValue) + } + + return self + } + public func strikethrough() -> Link { return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.rawValue) } + public func strikethrough(_ condition: Bool) -> Link { + + if condition { + return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.rawValue) + } + + return self + } + public func lineSpacing(_ height: Tokens.LineHeight) -> Link { return self.mutate(lineheight: height.rawValue) } @@ -131,6 +167,15 @@ extension Link: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> Link { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> Link { return self.mutate(scheme: scheme.rawValue) } diff --git a/Sources/HTMLKitComponents/Components/List.swift b/Sources/HTMLKitComponents/Components/List.swift index 47478fdd..00f2f053 100644 --- a/Sources/HTMLKitComponents/Components/List.swift +++ b/Sources/HTMLKitComponents/Components/List.swift @@ -92,6 +92,15 @@ extension List: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> List { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> List { return self.mutate(scheme: scheme.rawValue) } diff --git a/Sources/HTMLKitComponents/Components/Navigation.swift b/Sources/HTMLKitComponents/Components/Navigation.swift index 5e0557ab..4dac4e27 100644 --- a/Sources/HTMLKitComponents/Components/Navigation.swift +++ b/Sources/HTMLKitComponents/Components/Navigation.swift @@ -53,6 +53,15 @@ extension Navigation: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> Navigation { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> Navigation { return self.mutate(scheme: scheme.rawValue) } diff --git a/Sources/HTMLKitComponents/Components/Snippet.swift b/Sources/HTMLKitComponents/Components/Snippet.swift index a1e8a295..1e00505f 100644 --- a/Sources/HTMLKitComponents/Components/Snippet.swift +++ b/Sources/HTMLKitComponents/Components/Snippet.swift @@ -62,6 +62,15 @@ extension Snippet: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> Snippet { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> Snippet { return self.mutate(scheme: scheme.rawValue) } diff --git a/Sources/HTMLKitComponents/Components/Stack.swift b/Sources/HTMLKitComponents/Components/Stack.swift index b56453e8..54a2c627 100644 --- a/Sources/HTMLKitComponents/Components/Stack.swift +++ b/Sources/HTMLKitComponents/Components/Stack.swift @@ -94,6 +94,15 @@ extension HStack: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> HStack { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> HStack { return self.mutate(scheme: scheme.rawValue) } @@ -206,6 +215,15 @@ extension VStack: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> VStack { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> VStack { return self.mutate(scheme: scheme.rawValue) } @@ -309,6 +327,15 @@ extension ZStack: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> ZStack { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> ZStack { return self.mutate(scheme: scheme.rawValue) } diff --git a/Sources/HTMLKitComponents/Components/Text.swift b/Sources/HTMLKitComponents/Components/Text.swift index 6d5600c4..661b74e0 100644 --- a/Sources/HTMLKitComponents/Components/Text.swift +++ b/Sources/HTMLKitComponents/Components/Text.swift @@ -110,18 +110,54 @@ extension Text: TextModifier { return self.mutate(fontweight: Tokens.FontWeight.bold.rawValue) } + public func bold(_ condition: Bool) -> Text { + + if condition { + return self.mutate(fontweight: Tokens.FontWeight.bold.rawValue) + } + + return self + } + public func italic() -> Text { return self.mutate(fontstyle: Tokens.FontStyle.italic.rawValue) } + public func italic(_ condition: Bool) -> Text { + + if condition { + return self.mutate(fontstyle: Tokens.FontStyle.italic.rawValue) + } + + return self + } + public func underline() -> Text { return self.mutate(fontdecoration: Tokens.TextDecoration.underline.rawValue) } + public func underline(_ condition: Bool) -> Text { + + if condition { + return self.mutate(fontdecoration: Tokens.TextDecoration.underline.rawValue) + } + + return self + } + public func strikethrough() -> Text { return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.rawValue) } + public func strikethrough(_ condition: Bool) -> Text { + + if condition { + return self.mutate(fontdecoration: Tokens.TextDecoration.strikeThrough.rawValue) + } + + return self + } + public func lineSpacing(_ height: Tokens.LineHeight) -> Text { return self.mutate(lineheight: height.rawValue) } @@ -149,6 +185,15 @@ extension Text: ViewModifier { return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) } + public func hidden(_ condition: Bool) -> Text { + + if condition { + return self.mutate(viewstate: Tokens.ViewState.hidden.rawValue) + } + + return self + } + public func colorScheme(_ scheme: Tokens.ColorScheme) -> Text { return self.mutate(scheme: scheme.rawValue) } diff --git a/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift b/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift index 1d61192c..22cc4621 100644 --- a/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/ButtonModifier.swift @@ -12,6 +12,9 @@ public protocol ButtonModifier { /// Sets the style of the button. func buttonStyle(_ style: Tokens.ButtonStyle) -> Self + /// Sets the state of the view. + func disabled() -> Self + /// Sets the state of the view. func disabled(_ condition: Bool) -> Self } diff --git a/Sources/HTMLKitComponents/Modifiers/TextModifier.swift b/Sources/HTMLKitComponents/Modifiers/TextModifier.swift index 79ee2df6..07da7563 100644 --- a/Sources/HTMLKitComponents/Modifiers/TextModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/TextModifier.swift @@ -27,15 +27,23 @@ public protocol TextModifier { /// Applies a bold font weight to the text. func bold() -> Self + func bold(_ condition: Bool) -> Self + /// Applies italics to the text. func italic() -> Self + func italic(_ condition: Bool) -> Self + /// Applies an underline to the text. func underline() -> Self + func underline(_ condition: Bool) -> Self + /// Applies an strikethrough to the text. func strikethrough() -> Self + func strikethrough(_ condition: Bool) -> Self + /// Sets the line height for the text. func lineSpacing(_ height: Tokens.LineHeight) -> Self diff --git a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift index 10ca26a4..19fd6cad 100644 --- a/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift +++ b/Sources/HTMLKitComponents/Modifiers/ViewModifier.swift @@ -18,6 +18,8 @@ public protocol ViewModifier { /// Hides the view func hidden() -> Self + func hidden(_ condition: Bool) -> Self + /// Sets the color appearence func colorScheme(_ scheme: Tokens.ColorScheme) -> Self