mirror of
https://github.com/penpot/penpot.git
synced 2025-06-06 10:11:42 +02:00
🐛 Fix colors on measurements elements
This commit is contained in:
Eva
Andrey Antukh
parent
3dc45104db
commit
1e1b13196c
28 changed files with 103 additions and 391 deletions
|
|
@ -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-component: #{$color-component};
|
||||
--color-component-highlight: #{$color-component-highlight};
|
||||
--color-pink: #{$color-pink};
|
||||
--color-canvas: #e8e9ea;
|
||||
|
||||
// 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};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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-80: rgba(0, 0, 0, 0.8);
|
||||
--dark-gray-2-30: #{color.change(#000000, $alpha: 0.3)};
|
||||
--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-80: rgba(232, 234, 238, 0.8);
|
||||
--light-gray-2-30: #{color.change(#e8eaee, $alpha: 0.3)};
|
||||
--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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -565,10 +565,10 @@ button.collapse-sidebar {
|
|||
|
||||
&:hover {
|
||||
svg {
|
||||
stroke: var(--color-primary);
|
||||
stroke: $color-primary;
|
||||
}
|
||||
label {
|
||||
color: var(--color-primary);
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue