diff --git a/frontend/resources/images/features/2.13-shadow-tokens.gif b/frontend/resources/images/features/2.13-shadow-tokens.gif new file mode 100644 index 0000000000..f7937940a4 Binary files /dev/null and b/frontend/resources/images/features/2.13-shadow-tokens.gif differ diff --git a/frontend/resources/images/features/2.13-slide-0.jpg b/frontend/resources/images/features/2.13-slide-0.jpg new file mode 100644 index 0000000000..1b5116b2b9 Binary files /dev/null and b/frontend/resources/images/features/2.13-slide-0.jpg differ diff --git a/frontend/resources/images/features/2.13-trash.gif b/frontend/resources/images/features/2.13-trash.gif new file mode 100644 index 0000000000..dfbbcaf1b1 Binary files /dev/null and b/frontend/resources/images/features/2.13-trash.gif differ diff --git a/frontend/src/app/main/ui/releases.cljs b/frontend/src/app/main/ui/releases.cljs index b7754870a7..477b3c2ee0 100644 --- a/frontend/src/app/main/ui/releases.cljs +++ b/frontend/src/app/main/ui/releases.cljs @@ -31,6 +31,7 @@ [app.main.ui.releases.v2-10] [app.main.ui.releases.v2-11] [app.main.ui.releases.v2-12] + [app.main.ui.releases.v2-13] [app.main.ui.releases.v2-2] [app.main.ui.releases.v2-3] [app.main.ui.releases.v2-4] @@ -103,4 +104,4 @@ (defmethod rc/render-release-notes "0.0" [params] - (rc/render-release-notes (assoc params :version "2.12"))) + (rc/render-release-notes (assoc params :version "2.13"))) diff --git a/frontend/src/app/main/ui/releases/v2_13.cljs b/frontend/src/app/main/ui/releases/v2_13.cljs new file mode 100644 index 0000000000..149d914c61 --- /dev/null +++ b/frontend/src/app/main/ui/releases/v2_13.cljs @@ -0,0 +1,118 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) KALEIDOS INC + +(ns app.main.ui.releases.v2-13 + (:require-macros [app.main.style :as stl]) + (:require + [app.common.data.macros :as dm] + [app.main.ui.releases.common :as c] + [rumext.v2 :as mf])) + +(defmethod c/render-release-notes "2.13" + [{:keys [slide klass next finish navigate version]}] + (mf/html + (case slide + :start + [:div {:class (stl/css-case :modal-overlay true)} + [:div.animated {:class klass} + [:div {:class (stl/css :modal-container)} + [:img {:src "images/features/2.13-slide-0.jpg" + :class (stl/css :start-image) + :border "0" + :alt "Penpot 2.13 is here!"}] + + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "What’s new in Penpot?"] + + [:div {:class (stl/css :version-tag)} + (dm/str "Version " version)]] + + [:div {:class (stl/css :features-block)} + [:span {:class (stl/css :feature-title)} + "The first release of the year, and we’re just getting started 🚀"] + + [:p {:class (stl/css :feature-content)} + "This is our first release of the year, and it sets the tone for what’s coming next. We’re kicking off an exciting year where we’ll take Penpot to a whole new level, with improved performance, stronger design system foundations, long-requested features, and new capabilities that unlock better workflows for teams."] + + [:p {:class (stl/css :feature-content)} + "This release brings two highlights the community has been asking for, along with solid improvements under the hood to keep everything fast and smooth."] + + [:p {:class (stl/css :feature-content)} + "Let’s dive in!"]] + + [:div {:class (stl/css :navigation)} + [:button {:class (stl/css :next-btn) + :on-click next} "Continue"]]]]]] + + 0 + [:div {:class (stl/css-case :modal-overlay true)} + [:div.animated {:class klass} + [:div {:class (stl/css :modal-container)} + [:img {:src "images/features/2.13-trash.gif" + :class (stl/css :start-image) + :border "0" + :alt "The Trash"}] + + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "The Trash"]] + + [:div {:class (stl/css :feature)} + [:p {:class (stl/css :feature-content)} + "Deleting a file no longer means it’s gone forever. Introducing The Trash, a dedicated space in the dashboard where deleted files and projects live before being permanently removed."] + + [:p {:class (stl/css :feature-content)} + "From here, you can recover content deleted by mistake or clean things up for good when you’re sure you don’t need them anymore. The Trash works for both files and projects, and items are automatically removed after a period of time depending on your Penpot plan."] + + [:p {:class (stl/css :feature-content)} + "Highly requested, long overdue, and now officially here."]] + + [:div {:class (stl/css :navigation)} + [:& c/navigation-bullets + {:slide slide + :navigate navigate + :total 3}] + + [:button {:on-click next + :class (stl/css :next-btn)} "Continue"]]]]]] + + 1 + [:div {:class (stl/css-case :modal-overlay true)} + [:div.animated {:class klass} + [:div {:class (stl/css :modal-container)} + [:img {:src "images/features/2.13-shadow-tokens.gif" + :class (stl/css :start-image) + :border "0" + :alt "Shadow tokens: Reusable shadows, at last!"}] + + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :modal-header)} + [:h1 {:class (stl/css :modal-title)} + "Shadow tokens: Reusable shadows, at last!"]] + [:div {:class (stl/css :feature)} + + [:p {:class (stl/css :feature-content)} + "With Shadow tokens, we’re introducing our second composite token, right after Typography tokens. This is a big step forward for design systems in Penpot."] + + [:p {:class (stl/css :feature-content)} + "Until now, shadows couldn’t be defined as reusable styles the way colors could before color tokens existed. Shadow tokens change that. You can now create reusable, consistent shadows, made of one or multiple layers, fully tokenized and ready to scale across your designs."] + + [:p {:class (stl/css :feature-content)} + "Each shadow can reference existing tokens or use custom values, supports both Drop Shadow and Inner Shadow, and even allows shadow tokens to reference other shadow tokens. A brand-new capability, unlocked."]] + + [:div {:class (stl/css :navigation)} + + [:& c/navigation-bullets + {:slide slide + :navigate navigate + :total 2}] + + [:button {:on-click finish + :class (stl/css :next-btn)} "Let's go"]]]]]]))) + diff --git a/frontend/src/app/main/ui/releases/v2_13.scss b/frontend/src/app/main/ui/releases/v2_13.scss new file mode 100644 index 0000000000..e5d13841eb --- /dev/null +++ b/frontend/src/app/main/ui/releases/v2_13.scss @@ -0,0 +1,102 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@use "refactor/common-refactor.scss" as deprecated; + +.modal-overlay { + @extend .modal-overlay-base; +} + +.modal-container { + display: grid; + grid-template-columns: deprecated.$s-324 1fr; + height: deprecated.$s-500; + width: deprecated.$s-888; + border-radius: deprecated.$br-8; + background-color: var(--modal-background-color); + border: deprecated.$s-2 solid var(--modal-border-color); +} + +.start-image { + width: deprecated.$s-324; + border-radius: deprecated.$br-8 0 0 deprecated.$br-8; +} + +.modal-content { + padding: deprecated.$s-40; + display: grid; + grid-template-rows: auto 1fr deprecated.$s-32; + gap: deprecated.$s-24; + + a { + color: var(--button-primary-background-color-rest); + } +} + +.modal-header { + display: grid; + gap: deprecated.$s-8; +} + +.version-tag { + @include deprecated.flexCenter; + @include deprecated.headlineSmallTypography; + height: deprecated.$s-32; + width: deprecated.$s-96; + background-color: var(--communication-tag-background-color); + color: var(--communication-tag-foreground-color); + border-radius: deprecated.$br-8; +} + +.modal-title { + @include deprecated.headlineLargeTypography; + color: var(--modal-title-foreground-color); +} + +.features-block { + display: flex; + flex-direction: column; + gap: deprecated.$s-16; + width: deprecated.$s-440; +} + +.feature { + display: flex; + flex-direction: column; + gap: deprecated.$s-8; +} + +.feature-title { + @include deprecated.bodyLargeTypography; + color: var(--modal-title-foreground-color); +} + +.feature-content { + @include deprecated.bodyMediumTypography; + margin: 0; + color: var(--modal-text-foreground-color); +} + +.feature-list { + @include deprecated.bodyMediumTypography; + color: var(--modal-text-foreground-color); + list-style: disc; + display: grid; + gap: deprecated.$s-8; +} + +.navigation { + width: 100%; + display: grid; + grid-template-areas: "bullets button"; +} + +.next-btn { + @extend .button-primary; + width: deprecated.$s-100; + justify-self: flex-end; + grid-area: button; +}