🐛 Fix colors on measurements elements

frontend/resources/styles/common/dependencies/colors.scss

@@ -35,10 +35,6 @@ $color-complete: #a599c6;
 $color-warning: #fc8802;
 $color-danger: #e65244;
 $color-info: #59b9e2;
-$color-ocean: #4285f4;
-$color-component: #76b0b8;
-$color-component-highlight: #1890ff;
-$color-pink: #feecfc;
 
 // Gray scale
 $color-gray-10: #e3e3e3;
@@ -48,40 +44,21 @@ $color-gray-40: #64666a;
 $color-gray-50: #303236;
 $color-gray-60: #1f1f1f;
 
-// UI colors
-$color-select: #1fdea7;
-$color-distance: #ff6fe0;
-$color-snap: #d383da;
-
 // Mixing Color variable for creating both light and dark colors
 $mix-percentage-dark: 81%;
 $mix-percentage-darker: 60%;
-$mix-percentage-light: 80%;
 $mix-percentage-lighter: 20%;
-$mix-percentage-lightest: 10%;
 
 // Lighter colors
-$color-success-light: mix($color-success, $color-white, $mix-percentage-light); //#79cf7d
+
 $color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter); //#def3de
 
-$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light); //#b7add1
-$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter); //#edebf4
-
-$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light); //#5af2c6
 $color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter); //#d6fcf1
 
-$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light); //#fda035
-$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter); //#fee7cc;
-
-$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light); //#eb7569
 $color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter); //#fadcda
 
-$color-info-light: mix($color-info, $color-white, $mix-percentage-light); //#7ac7e8
-$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter); //#def1f9;
-
 // Darker colors
 $color-success-dark: mix($color-success, $color-black, $mix-percentage-dark); //#479e4b;
-$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker); // #357537;
 
 $color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark); //#867ca0
 $color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker); //#635c77
@@ -90,92 +67,23 @@ $color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark); //
 $color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker); // #1d8f6e
 
 $color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark); // #cc6e02;
-$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker); //#975201
 
 $color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark); //#ba4237
-$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker); // #8a3129;
 
-$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark); // #4896b7
 $color-info-darker: mix($color-info, $color-black, $mix-percentage-darker); // #356f88;
 
 // bg transparent
 $color-dark-bg: rgba(0, 0, 0, 0.4);
-$color-light-bg: rgba(255, 255, 255, 0.6);
 
 // Transform scss variables into css variables to use them onto cljs files
 :root {
-  // Colors
-  --color-white: #{$color-white};
-  --color-black: #{$color-black};
-  --color-canvas: #{$color-canvas};
-  --color-dashboard: #{$color-dashboard};
-
-  // Main color;
-  --color-primary: #{$color-primary};
-
   // Secondary colors;
-  --color-success: #{$color-success};
+
-  --color-complete: #{$color-complete};
-  --color-warning: #{$color-warning};
-  --color-danger: #{$color-danger};
   --color-info: #{$color-info};
-  --color-ocean: #{$color-ocean};
+  --color-canvas: #e8e9ea;
-  --color-component: #{$color-component};
-  --color-component-highlight: #{$color-component-highlight};
-  --color-pink: #{$color-pink};
 
   // Gray scale;
-  --color-gray-10: #{$color-gray-10};
+
   --color-gray-20: #{$color-gray-20};
-  --color-gray-30: #{$color-gray-30};
-  --color-gray-40: #{$color-gray-40};
-  --color-gray-50: #{$color-gray-50};
   --color-gray-60: #{$color-gray-60};
-
-  // UI colors
-  --color-distance: #{$color-distance};
-  --color-select: #{$color-select};
-  --color-snap: #{$color-snap};
-
-  // Lighter colors
-  --color-success-light: #{$color-success-light};
-  --color-success-lighter: #{$color-success-lighter};
-
-  --color-complete-light: #{$color-complete-light};
-  --color-complete-lighter: #{$color-complete-lighter};
-
-  --color-primary-light: #{$color-primary-light};
-  --color-primary-lighter: #{$color-primary-lighter};
-
-  --color-warning-light: #{$color-warning-light};
-  --color-warning-lighter: #{$color-warning-lighter};
-
-  --color-danger-light: #{$color-danger-light};
-  --color-danger-lighter: #{$color-danger-lighter};
-
-  --color-info-light: #{$color-info-light};
-  --color-info-lighter: #{$color-info-lighter};
-
-  // Darker colors
-  --color-success-dark: #{$color-success-dark};
-  --color-success-darker: #{$color-success-darker};
-
-  --color-complete-dark: #{$color-complete-dark};
-  --color-complete-darker: #{$color-complete-darker};
-
-  --color-primary-dark: #{$color-primary-dark};
-  --color-primary-darker: #{$color-primary-darker};
-
-  --color-warning-dark: #{$color-warning-dark};
-  --color-warning-darker: #{$color-warning-darker};
-
-  --color-danger-dark: #{$color-danger-dark};
-  --color-danger-darker: #{$color-danger-darker};
-
-  --color-info-dark: #{$color-info-dark};
-  --color-info-darker: #{$color-info-darker};
-
-  // bg transparent
-  --color-dark-bg: #{$color-dark-bg};
-  --color-light-bg: #{$color-light-bg};
 }

frontend/resources/styles/common/framework.scss

@@ -81,136 +81,6 @@
   }
 }
 
-.btn-text-basic {
-  @extend %btn;
-  background: transparent;
-  color: $color-primary-dark;
-  flex-shrink: 0;
-  &:hover {
-    background: rgba(49, 239, 184, 0.12);
-  }
-}
-
-.btn-icon-dark {
-  @extend %btn;
-  background: $color-gray-60;
-  color: $color-gray-20;
-  padding: $size-1;
-  svg {
-    fill: $color-gray-20;
-  }
-  &:hover {
-    background: $color-primary;
-    color: $color-gray-60;
-    svg {
-      fill: $color-gray-60;
-    }
-  }
-}
-
-.btn-icon-light {
-  @extend %btn;
-  background: $color-white;
-  border: 1px solid $color-gray-20;
-  color: $color-black;
-  padding: $size-1;
-  svg {
-    fill: $color-black;
-  }
-  &:hover {
-    background: $color-primary;
-    border-color: $color-primary;
-    svg {
-      fill: $color-black;
-    }
-  }
-}
-
-.btn-icon-basic {
-  @extend %btn;
-  background: transparent;
-  color: $color-gray-20;
-  padding: $size-1;
-  svg {
-    fill: $color-gray-20;
-
-    &.icon-close {
-      transform: rotate(45deg);
-    }
-  }
-  &:hover {
-    background: transparent;
-    svg {
-      fill: $color-primary;
-    }
-  }
-}
-
-.btn-text-dark {
-  @extend %btn;
-  background: $color-gray-60;
-  color: $color-gray-20;
-
-  svg {
-    fill: $color-gray-20;
-  }
-  &:hover {
-    background: $color-primary;
-    color: $color-gray-60;
-    svg {
-      fill: $color-gray-60;
-    }
-  }
-}
-
-.btn-gray {
-  @extend %btn;
-  background: $color-gray-30;
-  color: $color-white;
-  &:hover {
-    background: $color-gray-40;
-  }
-}
-
-.btn-ocean {
-  @extend %btn;
-  background: $color-ocean;
-  color: $color-white;
-  &:hover {
-    background: darken($color-ocean, 16%);
-    color: $color-white;
-  }
-}
-
-.btn-option {
-  display: flex;
-  a {
-    margin-right: 0.5rem;
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-  &.column {
-    flex-direction: column;
-    a {
-      margin-bottom: 0.5rem;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-  &.mr-small {
-    margin: 1rem 0;
-  }
-  &.btn-option-400 {
-    margin: 0 auto;
-    max-width: 400px;
-  }
-  &.mb {
-    margin-bottom: 0.5rem;
-  }
-}
-
 input[type="button"][disabled],
 .btn-disabled {
   background-color: $color-gray-10;
@@ -218,36 +88,6 @@ input[type="button"][disabled],
   pointer-events: none;
 }
 
-// Text color
-
-.text-error {
-  background-color: $color-danger;
-  border-radius: $br3;
-  color: $color-danger-lighter;
-  padding: 3px 6px;
-}
-
-.text-success {
-  background-color: $color-success;
-  border-radius: $br3;
-  color: $color-white;
-  padding: 3px 6px;
-}
-
-.text-warning {
-  background-color: $color-warning;
-  border-radius: $br3;
-  color: $color-white;
-  padding: 3px 6px;
-}
-
-.text-info {
-  background-color: $color-complete;
-  border-radius: $br3;
-  color: $color-white;
-  padding: 3px 6px;
-}
-
 // Slider dots
 
 ul.slider-dots {

frontend/resources/styles/common/refactor/color-defs.scss

@@ -10,8 +10,8 @@
   // DARK
   --dark-gray-1: #1d1f20;
   --dark-gray-2: #000000;
-  --dark-gray-2-30: rgba(0, 0, 0, 0.3);
+  --dark-gray-2-30: #{color.change(#000000, $alpha: 0.3)};
-  --dark-gray-2-80: rgba(0, 0, 0, 0.8);
+  --dark-gray-2-80: #{color.change(#000000, $alpha: 0.8)};
   --dark-gray-3: #292c2d;
   --dark-gray-4: #34393b;
   --white: #fff;
@@ -22,6 +22,7 @@
   --lilac: #bb97d8;
   --pink: #ff6fe0;
   --strong-green: #00d1b8;
+  --strong-green-10: #{color.change(#00d1b8, $alpha: 0.1)};
 
   // NOTIFICATION
   --dark-ok-color: var(--strong-green);
@@ -33,8 +34,8 @@
   // LIGHT
   --light-gray-1: #fff;
   --light-gray-2: #e8eaee;
-  --light-gray-2-30: rgba(232, 234, 238, 0.3);
+  --light-gray-2-30: #{color.change(#e8eaee, $alpha: 0.3)};
-  --light-gray-2-80: rgba(232, 234, 238, 0.8);
+  --light-gray-2-80: #{color.change(#e8eaee, $alpha: 0.8)};
   --light-gray-3: #f3f4f6;
   --light-gray-4: #eef0f2;
   --black: #000;
@@ -44,6 +45,7 @@
   --purple-30: rgba(105, 17, 212, 0.2);
   --blue: #1345aa;
   --strong-purple: #8c33eb;
+  --strong-purple-10: #{color.change(#8c33eb, $alpha: 0.1)};
 
   // NOTIFICATION WILL CHANGE
   --light-ok-color: var(--strong-green);

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -112,7 +112,7 @@
   --layer-row-foreground-color: var(--color-foreground-secondary);
   --layer-row-foreground-color-hover: var(--color-accent-primary);
   --layer-row-foreground-color-selected: var(--color-accent-primary);
-  --layer-row-foreground-color-drag: var(--color-select);
+  --layer-row-foreground-color-drag: var(--color-accent-tertiary);
   --layer-row-foreground-color-focus: var(--color-foreground-primary);
   --layer-row-border-color-focus: var(--color-accent-primary);
   --layer-child-row-background-color: var(--color-background-tertiary);
@@ -210,13 +210,13 @@
   --assets-item-name-foreground-color-disabled: var(--color-foreground-disabled);
   --assets-item-border-color: var(--color-accent-primary);
   --assets-item-background-color-drag: var(--color-accent-primary-muted);
-  --assets-item-border-color-drag: var(--color-select);
+  --assets-item-border-color-drag: var(--color-accent-tertiary);
   --assets-component-background-color: var(--white); // We don't want this color to change with palette
   --assets-component-background-color-disabled: var(
     --off-white
   ); // We don't want this color to change with palette
   --assets-component-border-color: var(--color-background-tertiary);
-  --assets-component-border-selected: var(--color-select);
+  --assets-component-border-selected: var(--color-accent-tertiary);
 
   --radio-btns-background-color: var(--color-background-tertiary);
   --radio-btn-background-color-selected: var(--color-background-quaternary);

frontend/resources/styles/common/refactor/themes/default-theme.scss

@@ -21,6 +21,8 @@
   --color-accent-primary-muted: var(--green-30);
   --color-accent-secondary: var(--lilac);
   --color-accent-tertiary: var(--strong-green);
+  --color-accent-tertiary-muted: var(--strong-green-10);
+  --color-component-highlight: var(--lilac);
 
   --overlay-color: rgba(0, 0, 0, 0.4);
   --ok-color: var(--dark-ok-color);

frontend/resources/styles/common/refactor/themes/light-theme.scss

@@ -21,6 +21,8 @@
   --color-accent-primary-muted: var(--purple-30);
   --color-accent-secondary: var(--blue);
   --color-accent-tertiary: var(--strong-purple);
+  --color-accent-tertiary-muted: var(--strong-purple-10);
+  --color-component-highlight: var(--blue);
 
   --overlay-color: rgba(255, 255, 255, 0.4);
   --ok-color: var(--light-ok-color);

frontend/resources/styles/main/partials/sidebar.scss

@@ -565,10 +565,10 @@ button.collapse-sidebar {
 
     &:hover {
       svg {
-        stroke: var(--color-primary);
+        stroke: $color-primary;
       }
       label {
-        color: var(--color-primary);
+        color: $color-primary;
       }
     }
   }

frontend/resources/styles/main/partials/workspace.scss

@@ -323,12 +323,8 @@ $height-palette-max: 80px;
   }
 }
 
-.workspace-frame-icon {
-  fill: $color-gray-40;
-}
 
 .workspace-frame-label {
-  fill: $color-gray-40;
   font-size: $fs12;
 }
 

frontend/src/app/main/constants.cljs

@@ -19,9 +19,9 @@
   "Default data for page metadata."
   {:grid-x-axis grid-x-axis
    :grid-y-axis grid-y-axis
-   :grid-color "var(--color-gray-20)"
+   :grid-color "var(--off-white)"
    :grid-alignment true
-   :background "var(--color-white)"})
+   :background "var(--white)"})
 
 (def size-presets
   [{:name "APPLE"}

frontend/src/app/main/data/workspace/notifications.cljs

@@ -145,7 +145,7 @@
                               (remove nil?))
                   used  (into #{} xfm presence)
                   avail (set/difference presence-palette used)]
-              (or (first avail) "var(--color-black)")))
+              (or (first avail) "var(--black)")))
 
           (update-color [color presence]
             (if (some? color)

frontend/src/app/main/ui/debug/components_preview.cljs

@@ -39,16 +39,16 @@
                     (let [theme (dom/event->value event)
                           data (assoc initial :theme theme)]
                       (st/emit! (du/update-profile data))))
-        colors [:bg-primary
+        colors ["var(--color-background-primary)"
-                :bg-secondary
+                "var(--color-background-secondary)"
-                :bg-tertiary
+                "var(--color-background-tertiary)"
-                :bg-cuaternary
+                "var(--color-background-cuaternary)"
-                :fg-primary
+                "var(--color-foreground-primary)"
-                :fg-secondary
+                "var(--color-foreground-secondary)"
-                :acc
+                "var(--color-accent-primary)"
-                :acc-muted
+                "var(--color-accent-primary-muted)"
-                :acc-secondary
+                "var(--color-accent-secondary)"
-                :acc-tertiary]
+                "var(--color-accent-tertiary)"]
 
         ;; COMPONENTS FNs
         state* (mf/use-state {:collapsed? true
@@ -88,12 +88,12 @@
        [:option {:label "Penpot Dark (default)" :value "default"}]
        [:option  {:label "Penpot Light" :value "light"}]]
       [:div {:class (stl/css :wrapper)}
-       (let [css (stl/styles)]
+       (for [color colors]
-         (for [color colors]
+         [:div {:class (stl/css :color-wrapper)}
-           [:div {:key color
+          [:span (d/name color)]
-                  :class (dom/classnames (get css color) true
+          [:div {:key color
-                                         (get css :rect) true)}
+                 :style {:background color}
-            (d/name color)]))]]
+                 :class (stl/css :rect)}]])]]
 
      [:div {:class (stl/css :components-row)}
       [:h2 {:class (stl/css :title)} "Components"]

frontend/src/app/main/ui/debug/components_preview.scss

@@ -12,64 +12,27 @@
   color: var(--color-foreground-primary);
   background: var(--color-background-secondary);
   .wrapper {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: $s-40;
     background-color: var(--color-background-primary);
     width: 100%;
     padding: $s-20;
-    display: flex;
-    justify-content: center;
-    gap: $s-20;
-    flex-wrap: wrap;
     .rect {
       display: flex;
       justify-content: center;
       align-items: center;
-      border: 1px solid var(--color-foreground-primary);
+      border: $s-1 solid var(--color-foreground-primary);
       padding: $s-20;
       height: $s-96;
       min-width: $s-152;
     }
-    .bg-primary {
-      background: var(--color-background-primary);
-      color: var(--color-foreground-primary);
-    }
-    .bg-secondary {
-      background: var(--color-background-secondary);
-      color: var(--color-foreground-primary);
-    }
-    .bg-tertiary {
-      background: var(--color-background-tertiary);
-      color: var(--color-foreground-primary);
-    }
-    .bg-cuaternary {
-      background: var(--color-background-quaternary);
-      color: var(--color-foreground-primary);
-    }
-    .fg-primary {
-      background: var(--color-foreground-primary);
-      color: var(--color-background-primary);
-    }
-    .fg-secondary {
-      background: var(--color-foreground-secondary);
-      color: var(--color-background-primary);
-    }
-    .acc {
-      background: var(--color-accent-primary);
-      color: var(--color-background-primary);
-    }
-    .acc-muted {
-      background: var(--color-accent-primary-muted);
-      color: var(--color-foreground-primary);
-    }
-    .acc-secondary {
-      background: var(--color-accent-secondary);
-      color: var(--color-background-primary);
-    }
-    .acc-tertiary {
-      background: var(--color-accent-tertiary);
-      color: var(--color-background-primary);
-    }
   }
 }
+.color-wrapper {
+  display: grid;
+  grid-template-rows: auto $s-96;
+}
 
 .components-row {
   color: var(--color-foreground-primary);

frontend/src/app/main/ui/measurements.cljs

@@ -23,28 +23,26 @@
 (def font-size 11)
 (def selection-rect-width 1)
 
-(def select-color "var(--color-select)")
+(def select-color "var(--color-accent-tertiary)")
 (def select-guide-width 1)
 (def select-guide-dasharray 5)
 
-(def hover-color "var(--color-distance)")
+(def hover-color "var(--color-foreground-tertiary)")
-(def hover-color-text "var(--color-white)")
-(def hover-guide-width 1)
 
-(def size-display-color "var(--color-white)")
+(def size-display-color "var(--white)")
 (def size-display-opacity 0.7)
-(def size-display-text-color "var(--color-black)")
+(def size-display-text-color "var(--black)")
 (def size-display-width-min 50)
 (def size-display-width-max 75)
 (def size-display-height 16)
 
-(def distance-color "var(--color-distance)")
+(def distance-color "var(--color-foreground-tertiary)")
-(def distance-text-color "var(--color-white)")
+(def distance-text-color "var(--white)")
 (def distance-border-radius 2)
 (def distance-pill-width 50)
 (def distance-pill-height 16)
 (def distance-line-stroke 1)
-(def warning-color "var(--color-warning)")
+
 
 ;; ------------------------------------------------
 ;; HELPERS

frontend/src/app/main/ui/shapes/grid_layout_viewer.cljs

@@ -38,11 +38,11 @@
              :y area-y
              :width area-width
              :height area-height
-             :style {:fill "var(--color-distance)"
+             :style {:fill "var(--color-foreground-tertiary)"
                      :fill-opacity 0.3}}]
      [:text {:x area-text-x
              :y area-text-y
-             :style {:fill "var(--color-distance)"
+             :style {:fill "var(--color-foreground-tertiary)"
                      :font-family "worksans"
                      :font-weight 600
                      :font-size 14
@@ -71,7 +71,7 @@
        :y (:y cell-origin)
        :width cell-width
        :height cell-height
-       :style {:stroke "var(--color-distance)"
+       :style {:stroke "var(--color-foreground-tertiary)"
                :stroke-width 1.5
                :fill "none"}}]
 

frontend/src/app/main/ui/viewer/inspect/selection_feedback.cljs

@@ -15,7 +15,7 @@
 ;; CONSTANTS
 ;; ------------------------------------------------
 
-(def select-color "var(--color-select)")
+(def select-color "var(--color-accent-tertiary)")
 (def selection-rect-width 1)
 (def select-guide-width 1)
 (def select-guide-dasharray 5)

frontend/src/app/main/ui/viewer/shapes.cljs

@@ -264,8 +264,8 @@
               :y (- y 1)
               :width (+ width 2)
               :height (+ height 2)
-              :fill "var(--color-primary)"
+              :fill "var(--color-accent-tertiary)"
-              :stroke "var(--color-primary)"
+              :stroke "var(--color-accent-tertiary)"
               :stroke-width (if interactions-show? 1 0)
               :fill-opacity (if interactions-show? 0.2 0)
               :style {:pointer-events (when frame? "none")}

frontend/src/app/main/ui/workspace/shapes/path/common.cljs

@@ -13,11 +13,11 @@
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
-(def primary-color "var(--color-select)")
+(def primary-color "var(--color-accent-tertiary)")
-(def secondary-color "var(--color-distance)")
+(def secondary-color "var(--color-foreground-tertiary)")
-(def black-color "var(--color-black)")
+(def black-color "var(--black)")
-(def white-color "var(--color-white)")
+(def white-color "var(--white)")
-(def gray-color "var(--color-gray-20)")
+(def gray-color "var(--off-white)")
 
 (def current-edit-path-ref
   (l/derived

frontend/src/app/main/ui/workspace/shapes/text/text_edition_outline.cljs

@@ -37,6 +37,6 @@
       :width width
       :height height
       :transform transform
-      :style {:stroke "var(--color-select)"
+      :style {:stroke "var(--color-accent-tertiary)"
               :stroke-width (/ 1 zoom)
               :fill "none"}}]))

frontend/src/app/main/ui/workspace/viewport/drawarea.cljs

@@ -38,7 +38,7 @@
       [:rect.main {:x x :y y
                    :width width
                    :height height
-                   :style {:stroke "var(--color-select)"
+                   :style {:stroke "var(--color-accent-tertiary)"
                            :fill "none"
                            :stroke-width (/ 1 zoom)}}])))
 

frontend/src/app/main/ui/workspace/viewport/gradients.cljs

@@ -22,14 +22,14 @@
    [rumext.v2 :as mf]))
 
 (def gradient-line-stroke-width 2)
-(def gradient-line-stroke-color "var(--color-white)")
+(def gradient-line-stroke-color "var(--white)")
 (def gradient-square-width 15)
 (def gradient-square-radius 2)
 (def gradient-square-stroke-width 2)
 (def gradient-width-handler-radius 5)
-(def gradient-width-handler-color "var(--color-white)")
+(def gradient-width-handler-color "var(--white)")
-(def gradient-square-stroke-color "var(--color-white)")
+(def gradient-square-stroke-color "var(--white)")
-(def gradient-square-stroke-color-selected "var(--color-select)")
+(def gradient-square-stroke-color-selected "var(--color-accent-tertiary)")
 
 (mf/defc shadow [{:keys [id x y width height offset]}]
   [:filter {:id id
@@ -109,7 +109,7 @@
            :rx (/ gradient-square-radius zoom)
            :width (/ gradient-square-width zoom)
            :height (/ gradient-square-width zoom)
-           :stroke (if selected "var(--color-primary)" "var(--color-white)")
+           :stroke (if selected "var(--color-accent-tertiary)" "var(--white)")
            :stroke-width (/ gradient-square-stroke-width zoom)
            :fill (:value color)
            :fill-opacity (:opacity color)

frontend/src/app/main/ui/workspace/viewport/interactions.cljs

@@ -131,7 +131,7 @@
      (when icon-pdata
        [:path {:fill stroke
                :stroke-width 2
-               :stroke "var(--color-white)"
+               :stroke "var(--white)"
                :d icon-pdata
                :transform (str
                            "scale(" inv-zoom ", " inv-zoom ") "
@@ -164,7 +164,7 @@
 
     (if-not selected?
       [:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
-       [:path {:stroke "var(--color-gray-20)"
+       [:path {:stroke "var(--off-white)"
                :fill "none"
                :pointer-events "visible"
                :stroke-width (/ 2 zoom)
@@ -173,13 +173,13 @@
          [:& interaction-marker {:index index
                                  :x dest-x
                                  :y dest-y
-                                 :stroke "var(--color-gray-20)"
+                                 :stroke "var(--off-white)"
                                  :action-type action-type
                                  :arrow-dir arrow-dir
                                  :zoom zoom}])]
 
       [:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
-       [:path {:stroke "var(--color-primary)"
+       [:path {:stroke "var(--color-accent-tertiary)"
                :fill "none"
                :pointer-events "visible"
                :stroke-width (/ 2 zoom)
@@ -188,17 +188,17 @@
        (when dest-shape
          [:& outline {:zoom zoom
                       :shape dest-shape
-                      :color "var(--color-primary)"}])
+                      :color "var(--color-accent-tertiary)"}])
 
        [:& interaction-marker {:index index
                                :x orig-x
                                :y orig-y
-                               :stroke "var(--color-primary)"
+                               :stroke "var(--color-accent-tertiary)"
                                :zoom zoom}]
        [:& interaction-marker {:index index
                                :x dest-x
                                :y dest-y
-                               :stroke "var(--color-primary)"
+                               :stroke "var(--color-accent-tertiary)"
                                :action-type action-type
                                :arrow-dir arrow-dir
                                :zoom zoom}]])))
@@ -212,7 +212,7 @@
     [:g {:on-pointer-down #(on-pointer-down % index shape)}
      [:& interaction-marker {:x handle-x
                              :y handle-y
-                             :stroke "var(--color-primary)"
+                             :stroke "var(--color-accent-tertiary)"
                              :action-type :navigate
                              :arrow-dir :right
                              :zoom zoom}]]))
@@ -256,8 +256,8 @@
           [:& (mf/provider muc/render-thumbnails) {:value true}
            [:& (mf/provider embed/context) {:value false}
             [:& shape-wrapper {:shape dest-shape}]]]]
-         [:path {:stroke "var(--color-primary)"
+         [:path {:stroke "var(--color-accent-tertiary)"
-                 :fill "var(--color-black)"
+                 :fill "var(--black)"
                  :fill-opacity 0.5
                  :stroke-width 1
                  :d (dm/str "M" marker-x " " marker-y " "
@@ -271,7 +271,7 @@
          [:circle {:cx (+ marker-x (/ width 2))
                    :cy (+ marker-y (/ height 2))
                    :r 8
-                   :fill "var(--color-primary)"}]]))))
+                   :fill "var(--color-accent-tertiary)"}]]))))
 
 (mf/defc interactions
   [{:keys [current-transform objects zoom selected hover-disabled? page-id] :as props}]

frontend/src/app/main/ui/workspace/viewport/outline.cljs

@@ -34,7 +34,7 @@
         objects   (deref refs/workspace-page-objects)
         color     (if (ctn/in-any-component? objects shape)
                     "var(--color-component-highlight)"
-                    "var(--color-primary)")
+                    "var(--color-accent-tertiary)")
 
         x         (dm/get-prop shape :x)
         y         (dm/get-prop shape :y)
@@ -65,7 +65,7 @@
         (obj/merge!
          #js {:fill "none"
               :stroke color
-              :strokeWidth (/ 2 zoom)
+              :strokeWidth (/ 1 zoom)
               :pointerEvents "none"
               :transform transform}
 

frontend/src/app/main/ui/workspace/viewport/presence.cljs

@@ -25,8 +25,8 @@
   [{:keys [session profile] :as props}]
   (let [zoom             (mf/deref refs/selected-zoom)
         point            (:point session)
-        background-color (:color session "var(--color-black)")
+        background-color (:color session "var(--black)")
-        text-color       (:text-color session "var(--color-white)")
+        text-color       (:text-color session "var(--white)")
         transform        (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 1 zoom))
         shown-name       (if (> (count (:fullname profile)) 16)
                            (str (str/slice (:fullname profile) 0 12) "...")

frontend/src/app/main/ui/workspace/viewport/rules.cljs

@@ -21,7 +21,7 @@
 (def rule-area-size 22)
 (def rule-area-half-size (/ rule-area-size 2))
 (def rules-background "var(--panel-background-color)")
-(def selection-area-color "var(--color-primary)")
+(def selection-area-color "var(--color-accent-tertiary)")
 (def selection-area-opacity 0.3)
 (def over-number-size 100)
 (def over-number-opacity 0.8)

frontend/src/app/main/ui/workspace/viewport/selection.cljs

@@ -31,7 +31,7 @@
 (def resize-point-circle-radius 10)
 (def resize-point-rect-size 8)
 (def resize-side-height 8)
-(def selection-rect-color-normal "var(--color-select)")
+(def selection-rect-color-normal "var(--color-accent-tertiary)")
 (def selection-rect-color-component "var(--color-component-highlight)")
 (def selection-rect-width 1)
 (def min-selrect-side 10)
@@ -213,7 +213,7 @@
                :style {:fillOpacity "1"
                        :strokeWidth "1px"
                        :vectorEffect "non-scaling-stroke"}
-               :fill "var(--color-white)"
+               :fill "var(--white)"
                :stroke color
                :cx cx'
                :cy cy'}]
@@ -279,7 +279,7 @@
                  :style {:fillOpacity 1
                          :stroke color
                          :strokeWidth "1px"
-                         :fill "var(--color-white)"
+                         :fill "var(--white)"
                          :vectorEffect "non-scaling-stroke"}
                  :data-position (name position)
                  :cx (+ x (/ length 2))

frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs

@@ -21,7 +21,7 @@
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
-(def ^:private line-color "var(--color-snap)")
+(def ^:private line-color "var(--color-foreground-tertiary)")
 (def ^:private segment-gap 2)
 (def ^:private segment-gap-side 5)
 
@@ -85,7 +85,7 @@
         [:text {:x (if (= coord :x) x (+ x (/ width 2)))
                 :y (- (+ y (/ (/ pill-text-height zoom) 2) (- (/ 6 zoom))) (if (= coord :x) (/ 2 zoom) 0))
                 :font-size (/ pill-text-font-size zoom)
-                :fill "var(--color-white)"
+                :fill "var(--white)"
                 :text-anchor "middle"}
          (fmt/format-number distance)]])
 

frontend/src/app/main/ui/workspace/viewport/snap_points.cljs

@@ -16,7 +16,7 @@
    [beicon.v2.core :as rx]
    [rumext.v2 :as mf]))
 
-(def ^:private line-color "var(--color-snap)")
+(def ^:private line-color "var(--color-foreground-tertiary)")
 (def ^:private line-opacity 0.6)
 (def ^:private line-width 1)
 

frontend/src/app/main/ui/workspace/viewport/widgets.cljs

@@ -70,10 +70,8 @@
       :width (:width data)
       :height (:height data)
       :style {;; Primary with 0.1 opacity
-              :fill "rgb(49, 239, 184, 0.1)"
+              :fill "var(--color-accent-tertiary-muted)"
-
+              :stroke "var(--color-accent-tertiary)"
-              ;; Primary color
-              :stroke "rgb(49, 239, 184)"
               :stroke-width (/ 1 zoom)}}]))
 
 
@@ -86,10 +84,11 @@
         ;; Note that we don't use mf/deref to avoid a repaint dependency here
         objects (deref refs/workspace-page-objects)
 
-        color (when selected?
+        color (if selected?
                 (if (ctn/in-any-component? objects frame)
                   "var(--color-component-highlight)"
-                  "var(--color-primary-dark)"))
+                  "var(--color-accent-tertiary)")
+                "#8f9da3") ;; TODO: Set this color on the DS
 
         on-pointer-down
         (mf/use-callback
@@ -145,14 +144,16 @@
                 :width 12
                 :height 12
                 :class "workspace-frame-icon"
-                :style {:fill color}
+                :style {:stroke-width (/ 1 zoom)
+                        :stroke color
+                        :fill "none"}
                 :visibility (if show-artboard-names? "visible" "hidden")}
           (cond
             (:use-for-thumbnail frame)
-            [:use {:href "#icon-set-thumbnail"}]
+            [:use {:href "#icon-boards-thumbnail-refactor"}]
 
             grid-edition?
-            [:use {:href "#icon-grid-layout-mode"}]
+            [:use {:href "#icon-grid-refactor"}]
 
             main-instance?
             [:use {:href "#icon-component-refactor"}])])