Skip to content

Commit

Permalink
rename bg css vars and classes
Browse files Browse the repository at this point in the history
  • Loading branch information
sprocketc committed Feb 26, 2024
1 parent f35b968 commit b3f6482
Show file tree
Hide file tree
Showing 26 changed files with 64 additions and 63 deletions.
2 changes: 1 addition & 1 deletion src/renderer/attribute/angle.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
:placeholder initial}]
[:> Popover/Root {:modal true}
[:> Popover/Trigger {:asChild true}
[:button.button.ml-px.level-1.text-muted
[:button.button.ml-px.bg-primary.text-muted
{:style {:width "26px" :height "26px"}}
[comp/icon "degrees" {:class "small"}]]]
[:> Popover/Portal
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/attribute/color.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
[:> Popover/Trigger {:asChild true}
[:button.color-drip.ml-px.inline-block
{:style {:flex "0 0 26px"
:border "5px solid var(--level-1)"
:border "5px solid var(--bg-primary)"
:background v}}]]
[:> Popover/Portal
[:> Popover/Content
Expand Down
4 changes: 2 additions & 2 deletions src/renderer/attribute/length.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@
(rf/dispatch [:element/dec-attribute k])
(rf/dispatch [:element/inc-attribute k])))}]
[:div.flex {:style {:width "54px"}}
[:button.button.ml-px.level-1.text-muted
[:button.button.ml-px.bg-primary.text-muted
{:style {:width "26px" :height "26px"}
:on-pointer-down #(rf/dispatch [:element/dec-attribute k])}
[comp/icon "minus" {:class "small"}]]
[:button.button..ml-px.level-1.text-muted
[:button.button..ml-px.bg-primary.text-muted
{:style {:width "26px" :height "26px"}
:on-click #(rf/dispatch [:element/inc-attribute k])}
[comp/icon "plus" {:class "small"}]]]])
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/attribute/points.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
(when v
[:> Popover/Root {:modal true}
[:> Popover/Trigger {:asChild true}
[:button.ml-px.inline-block.level-1.text-muted
[:button.ml-px.inline-block.bg-primary.text-muted
{:style {:flex "0 0 26px"
:height "26px"}}
[comp/icon "pencil" {:class "small"}]]]
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/attribute/style.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@

(defmethod hierarchy/form-element :style
[k v disabled?]
[:div.w-full.level-1.py-0.px-2
[:div.w-full.bg-primary.py-0.px-2
[cm/editor v {:options {:readOnly disabled?}
:on-blur #(rf/dispatch [:element/set-attr k %])}]])
12 changes: 6 additions & 6 deletions src/renderer/attribute/views.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@

(defn mdn-button
[mdn_url attr]
[:button.button.px-3.level-1.grow
[:button.button.px-3.bg-primary.grow
{:on-click #(rf/dispatch
[:window/open-remote-url
(or mdn_url
Expand Down Expand Up @@ -84,7 +84,7 @@
:on-blur #(on-change-handler % key value)
:on-key-down #(keyb/input-key-down-handler % value on-change-handler key value)}]
(when-not (or (empty? (str value)) disabled?)
[:button.button.ml-px.level-1.text-muted.absolute.right-0.clear-input-button.hover:bg-transparent
[:button.button.ml-px.bg-primary.text-muted.absolute.right-0.clear-input-button.hover:bg-transparent
{:style {:width "26px" :height "26px"}
:on-pointer-down #(rf/dispatch [:element/remove-attr key])}
[comp/icon "times" {:class "small"}]])])
Expand Down Expand Up @@ -121,7 +121,7 @@
:disabled disabled?}
[:> Select/Trigger {:class "select-trigger ml-px"
:aria-label (name key)
:style {:background "var(--level-1)"
:style {:background "var(--bg-primary)"
:border-radius 0
:width "26px"
:height "26px"}}
Expand Down Expand Up @@ -227,7 +227,7 @@
[:p description])
[caniusethis {:tag tag}]
(when-let [url (:url (tools/properties tag))]
[:button.button.px-3.level-1.w-full
[:button.button.px-3.bg-primary.w-full
{:on-click #(rf/dispatch [:window/open-remote-url url])}
"Learn more"])]
[:> HoverCard/Arrow {:class "popover-arrow"}]]]]])
Expand All @@ -242,7 +242,7 @@
[:div.w-full.ml-px.v-scroll.flex.flex-col.h-full
(when (seq selected-elements)
[:div.w-full.overflow-x-hidden
[:div.flex.level-1.py-4.pl-4.pr-2
[:div.flex.bg-primary.py-4.pl-4.pr-2
[:h1.self-center.flex-1.text-lg.p-1
(if (empty? (rest selected-elements))
(let [el (first selected-elements)
Expand All @@ -254,4 +254,4 @@
[:div.attribute-grid
(for [[k v] selected-attrs]
^{:key k} [row k v locked? tag])]])
[:div.level-1.grow.w-full.flex]]))
[:div.bg-primary.grow.w-full.flex]]))
2 changes: 1 addition & 1 deletion src/renderer/cmdk/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
}

[cmdk-input] {
@apply p-3 level-0;
@apply p-3 bg-secondary;

border-bottom: 1px solid var(--border-color)
}
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/codemirror/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
}

.CodeMirror-gutters {
@apply level-0 !important;
@apply bg-secondary !important;
}

.CodeMirror {
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/color/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
}

> div:nth-child(3) {
@apply level-1 w-full !important;
@apply bg-primary w-full !important;
padding-top: 9px !important;

> div:last-child {
Expand Down
4 changes: 2 additions & 2 deletions src/renderer/color/views.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
(rf/dispatch [:element/set-attr :fill color]))
:style {:background-color color}}
(when (= color "transparent")
[:div.level-1.text-error.relative
[:div.bg-primary.text-error.relative
[comp/icon "times"]])])

(defn swatch [colors]
Expand All @@ -35,7 +35,7 @@
[:> Popover/Root {:modal true}
[:> Popover/Trigger
[:div.color-rect.relative {:style {:background stroke}}
[:div.color-rect.level-1.absolute
[:div.color-rect.bg-primary.absolute
{:style {:width "13px"
:height "13px"
:bottom "9px"
Expand Down
4 changes: 2 additions & 2 deletions src/renderer/document/styles.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.document-tab {
@apply button flex items-center h-full mr-px text-left level-1 gap-2 opacity-50 hover:level-1;
@apply button flex items-center h-full mr-px text-left bg-primary gap-2 opacity-50 hover:bg-primary;
padding: 8px 8px 8px 16px;
flex: 0 1 130px;

Expand All @@ -15,7 +15,7 @@
}

&:active {
@apply level-1;
@apply bg-primary;
}

&.active {
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/home.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

(defn panel []
[:div.flex.overflow-auto.flex-1.min-h-full.justify-center
[:div.level-1.w-full.self-center.justify-center.p-12
[:div.bg-primary.w-full.self-center.justify-center.p-12
{:style {:max-width "1200px"}}

[:h1.text-xl.mb-1 "repath.studio"]
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/menubar/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@

.menu-content,
.menu-sub-content {
@apply level-0 drop-shadow-lg py-1 z-10;
@apply bg-secondary drop-shadow-lg py-1 z-10;
min-width: 200px;
will-change: transform, opacity;
border: 1px solid var(--border-color);
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/notification/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
}

.toast {
@apply relative flex level-0 w-80 p-4 mb-2 rounded shadow-md border border-default;
@apply relative flex bg-secondary w-80 p-4 mb-2 rounded shadow-md border border-default;

max-width: 100vw;
}
Expand Down
6 changes: 3 additions & 3 deletions src/renderer/reepl/completions.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
(dom/scroll-into-view (.-current ref)))))
:reagent-render
(fn [text selected? active? set-active]
[:div.p-1.level-0.text-nowrap
[:div.p-1.bg-secondary.text-nowrap
{:on-click set-active
:class (and selected? (if active? "bg-accent" "level-1"))
:class (and selected? (if active? "bg-accent" "bg-primary"))
:ref ref}
text])})))

Expand All @@ -33,7 +33,7 @@
active?
(partial set-active %1)]) list)]
[:div.absolute.bottom-full.left-0.w-full.text-xs
(when docs [:div.level-1.drop-shadow.p-4.absolute.bottom-full docs])
(when docs [:div.bg-primary.drop-shadow.p-4.absolute.bottom-full docs])
(into
[:div.overflow-hidden.flex
{:class (when show-all? "flex-wrap")}]
Expand Down
30 changes: 15 additions & 15 deletions src/renderer/styles.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@layer utilities {
.level-0 {
background: var(--level-0);
.bg-secondary {
background: var(--bg-secondary);
}

.level-1 {
background: var(--level-1);
.bg-primary {
background: var(--bg-primary);
}

.bg-accent {
Expand Down Expand Up @@ -66,7 +66,7 @@

@layer components {
.form-element {
@apply level-1 border-0 w-full;
@apply bg-primary border-0 w-full;

outline: none;
padding: 4px 12px;
Expand Down Expand Up @@ -128,7 +128,7 @@
body {
margin: 0;
padding: 0;
background: var(--level-0) !important;
background: var(--bg-secondary) !important;
overflow: hidden;
font-family: var(--font-sans);
font-size: var(--font-size);
Expand Down Expand Up @@ -169,7 +169,7 @@ input {
}

input[type=range] {
@apply m-0 level-1 appearance-none;
@apply m-0 bg-primary appearance-none;
padding: 5px;

&:focus {
Expand All @@ -183,7 +183,7 @@ input[type=range] {

input[type=range] {
&::-webkit-slider-runnable-track {
@apply border-0 rounded-none level-0;
@apply border-0 rounded-none bg-secondary;
height: 16px;
}

Expand Down Expand Up @@ -245,7 +245,7 @@ pre {
}

.tooltip {
@apply absolute level-0 rounded;
@apply absolute bg-secondary rounded;
z-index: 1;
margin: 8px;
line-height: 24px;
Expand Down Expand Up @@ -365,7 +365,7 @@ pre {
}

.footer {
@apply flex p-1 level-1 overflow-visible items-center mt-px;
@apply flex p-1 bg-primary overflow-visible items-center mt-px;
}

.shortcut {
Expand All @@ -374,7 +374,7 @@ pre {
}

.dialog {
@apply fixed level-0 rounded;
@apply fixed bg-secondary rounded;
width: 500px;
top: 200px;
left: calc(50% - 250px);
Expand Down Expand Up @@ -438,7 +438,7 @@ pre {
}

.popover-content {
@apply level-0 drop-shadow-lg z-10;
@apply bg-secondary drop-shadow-lg z-10;
max-width: 300px;
border: 1px solid var(--border-color);
animation-duration: 400ms;
Expand Down Expand Up @@ -466,11 +466,11 @@ pre {
.popover-arrow,
.tooltip-arrow,
.menu-arrow {
fill: var(--level-0);
fill: var(--bg-secondary);
}

.tooltip-content {
@apply level-0 px-2 py-1 rounded drop-shadow-md;
@apply bg-secondary px-2 py-1 rounded drop-shadow-md;
max-width: 300px;
border: 1px solid var(--border-color);
animation-duration: 200ms;
Expand Down Expand Up @@ -505,7 +505,7 @@ pre {
}

.switch-thumb {
@apply block level-1 rounded-full shadow-sm;
@apply block bg-primary rounded-full shadow-sm;
width: 21px;
height: 21px;
transition: transform 100ms;
Expand Down
12 changes: 6 additions & 6 deletions src/renderer/theme/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
'Apple Color Emoji', 'Segoe UI Emoji';
--font-size: 13px;

--level-0: #222;
--level-1: #2d2d2d;
--bg-secondary: #222;
--bg-primary: #2d2d2d;

--backdrop: rgb(0 0 0 / 0.5);

Expand Down Expand Up @@ -36,8 +36,8 @@
}

[data-theme='light'] {
--level-0: #e5e5e5;
--level-1: #f5f5f5;
--bg-secondary: #e5e5e5;
--bg-primary: #f5f5f5;

--overlay: #fff;

Expand All @@ -61,13 +61,13 @@
.popover-arrow,
.tooltip-arrow,
.menu-arrow {
fill: var(--level-1);
fill: var(--bg-primary);
}

.popover-content,
.tooltip-content,
.menu-content,
.menu-sub-content {
@apply level-1;
@apply bg-primary;
}
}
4 changes: 2 additions & 2 deletions src/renderer/timeline/styles.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.timeline-editor {
@apply level-1 w-full min-h-0 h-full !important;
@apply bg-primary w-full min-h-0 h-full !important;
font-family: inherit !important;
color: var(--font-color-muted) !important;
}
Expand Down Expand Up @@ -39,7 +39,7 @@
}

.timeline-editor-edit-row {
background-image: linear-gradient(var(--level-1), var(--level-1)),
background-image: linear-gradient(var(--bg-primary), var(--bg-primary)),
linear-gradient(90deg, var(--border-color) 1px, transparent 0) !important;
}

Expand Down
2 changes: 1 addition & 1 deletion src/renderer/timeline/views.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
replay? @(rf/subscribe [:timeline/replay?])
end @(rf/subscribe [:timeline/end])
timeline? @(rf/subscribe [:panel/visible? :timeline])]
[:div.toolbar.level-1.mt-px
[:div.toolbar.bg-primary.mt-px
[:div.flex-1.flex
[comp/icon-button "go-to-start"
{:on-click #(.setTime (.-current timeline-ref) 0)
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/toolbar/object.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -131,4 +131,4 @@
(interpose [{:type :divider}])
flatten
(map v/button)
(into [:div.flex.flex-col.level-1.text-center.flex-0.ml-px.toolbar]))))
(into [:div.flex.flex-col.bg-primary.text-center.flex-0.ml-px.toolbar]))))
2 changes: 1 addition & 1 deletion src/renderer/toolbar/tools.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,6 @@

(defn root
[]
(into [:div.justify-center.flex-wrap.level-1.toolbar]
(into [:div.justify-center.flex-wrap.bg-primary.toolbar]
(interpose [:span.v-divider]
(map group groups))))
Loading

0 comments on commit b3f6482

Please sign in to comment.