Skip to content

Commit

Permalink
fix: alpha-value-notation
Browse files Browse the repository at this point in the history
  • Loading branch information
@blyedev
blyedev committed Dec 17, 2024
1 parent cda1afc commit 1c1ba05
Show file tree
Hide file tree
Showing 20 changed files with 59 additions and 59 deletions.
10 changes: 5 additions & 5 deletions src/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,9 @@ $light-theme-selected-task-bg-color: #fff;

// TODO refactor names or how they are used
$light-theme-extra-border-color: #dddddd;
$dark-theme-extra-border-color: rgb(255 255 255 / 0.12);
$light-theme-separator-color: rgb(18 18 18 / 0.3);
$dark-theme-separator-color: rgb(255 255 255 / 0.3);
$dark-theme-extra-border-color: rgb(255 255 255 / 12%);
$light-theme-separator-color: rgb(18 18 18 / 30%);
$dark-theme-separator-color: rgb(255 255 255 / 30%);

$c-accent: mat-css-vars.mat-css-color-accent();
$c-warn: mat-css-vars.mat-css-color-warn();
Expand All @@ -97,8 +97,8 @@ $c-contrast: mat-css-vars.mat-css-contrast-color();
$c-contrast-600: mat-css-vars.mat-css-contrast-color(600);

$c-focus-border: $c-primary-400;
$c-backdrop-light-theme: rgb(0 0 0 / 0.6);
$c-backdrop-dark-theme: rgb(0 0 0 / 0.6);
$c-backdrop-light-theme: rgb(0 0 0 / 60%);
$c-backdrop-dark-theme: rgb(0 0 0 / 60%);

$success-green: #4fa758;
$yellow: #fff400; // for sun
Expand Down
4 changes: 2 additions & 2 deletions src/app/app.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
border-bottom: 1px solid transparent;

@include lightTheme() {
border-color: rgb(0 0 0 / 0.15);
border-color: rgb(0 0 0 / 15%);
}
@include darkTheme() {
border-color: rgb(255 255 255 / 0.15);
border-color: rgb(255 255 255 / 15%);
}

&.isNotScrolled {
Expand Down
2 changes: 1 addition & 1 deletion src/app/core-ui/main-header/main-header.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,7 @@ simple-counter-button {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
z-index: -1;
box-shadow: 0px -2px 3px 0px rgb(0 0 0 / 0.3);
box-shadow: 0px -2px 3px 0px rgb(0 0 0 / 30%);

@include lightTheme() {
background: $light-theme-selected-task-bg-color;
Expand Down
2 changes: 1 addition & 1 deletion .../dialog-gitlab-submit-worklog-for-day/dialog-gitlab-submit-worklog-for-day.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
right: -24px;
bottom: 0;
left: -24px;
background: rgb(0 0 0 / 0.5);
background: rgb(0 0 0 / 50%);
z-index: 10;

mat-progress-spinner {
Expand Down
4 changes: 2 additions & 2 deletions src/app/features/metric/improvement-banner/improvement-banner.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,15 @@ $weird-task-list-f: 5px;
color: rgba(var(--palette-foreground-text), var(--palette-foreground-text-alpha, 1));
// this would be the bookmark button border
// border-color: rgba(0, 0, 0, 0.12);
border-color: rgb(0 0 0 / 0.33);
border-color: rgb(0 0 0 / 33%);
}

@include darkTheme() {
border: 1px solid;
color: #fff;
// this would be the bookmark button border
// border-color: rgba(255, 255, 255, 0.12);
border-color: rgb(255 255 255 / 0.33);
border-color: rgb(255 255 255 / 33%);
}

&:active {
Expand Down
4 changes: 2 additions & 2 deletions src/app/features/planner/add-task-panel-planner/add-task-panel-planner.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,10 @@
color: inherit;
border: 0;
border-left: 1px solid;
border-color: rgb(0 0 0 / 0.1);
border-color: rgb(0 0 0 / 10%);

@include darkTheme {
border-color: rgb(255 255 255 / 0.1);
border-color: rgb(255 255 255 / 10%);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/app/features/schedule/schedule-event/schedule-event.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ $margin-right: 10px;
// }

@include darkTheme() {
border-color: rgb(255 255 255 / 0.1);
border-color: rgb(255 255 255 / 10%);
border-left-color: var(--project-color, $dark-theme-separator-color);
background: $dark-theme-bg-slightly-lighter;
color: $dark-theme-text-color;
Expand Down
2 changes: 1 addition & 1 deletion src/app/features/schedule/schedule/schedule.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ $row-height: 11px;
$row-height-mobile: 7px;
// $grid-color: #dadce0;
$grid-color: #dadce0;
$grid-color-dark: rgb(255 255 255 / 0.1);
$grid-color-dark: rgb(255 255 255 / 10%);
$current-time-color: $c-accent;
$fr: 12;
$total-rows: 24 * $fr;
Expand Down
12 changes: 6 additions & 6 deletions ...p/features/tasks/task-attachment/task-attachment-list/task-attachment-list.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,20 +128,20 @@ $thisLowerHeight: $thisHeight - $thisUpperHeight;
border-width: 0;

@include lightTheme() {
background: rgb(255 255 255 / 0.4);
border-color: rgb(255 255 255 / 0.5);
background: rgb(255 255 255 / 40%);
border-color: rgb(255 255 255 / 50%);

&:hover {
background: rgb(255 255 255 / 0.9);
background: rgb(255 255 255 / 90%);
}
}

@include darkTheme() {
background: rgb(0 0 0 / 0.4);
border-color: rgb(0 0 0 / 0.5);
background: rgb(0 0 0 / 40%);
border-color: rgb(0 0 0 / 50%);

&:hover {
background: rgb(0 0 0 / 0.9);
background: rgb(0 0 0 / 90%);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion ...eatures/tasks/task-detail-panel/task-additional-info-item/task-detail-item.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ mat-expansion-panel::ng-deep .mat-expansion-panel-header:not(.mat-expanded),
}

@include darkTheme() {
color: rgb(255 255 255 / 0.7);
color: rgb(255 255 255 / 70%);
}

> * {
Expand Down
8 changes: 4 additions & 4 deletions src/app/features/work-view/backlog/backlog.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
&:before {
position: absolute;
content: '';
background: rgb(0 0 0 / 0.5);
background: rgb(0 0 0 / 50%);
width: 100%;
top: 0;
left: 0;
Expand All @@ -32,8 +32,8 @@
left: 0;
z-index: 44;
box-shadow:
inset 0 10px 20px rgb(0 0 0 / 0.19),
inset 0 6px 6px rgb(0 0 0 / 0.23);
inset 0 10px 20px rgb(0 0 0 / 19%),
inset 0 6px 6px rgb(0 0 0 / 23%);
}

@include darkTheme {
Expand All @@ -45,7 +45,7 @@
background: $c-primary-200;

&:before {
background: rgb(0 0 0 / 0.2);
background: rgb(0 0 0 / 20%);
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions src/app/features/worklog/worklog-export/worklog-export.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,10 @@
z-index: -1;

@include darkTheme() {
background: rgb(255 255 255 / 0.1);
background: rgb(255 255 255 / 10%);
}
@include lightTheme() {
background: rgb(0 0 0 / 0.1);
background: rgb(0 0 0 / 10%);
}
}
}
Expand Down Expand Up @@ -179,11 +179,11 @@
border: 1px solid;

@include darkTheme() {
border-color: rgb(255 255 255 / 0.1);
border-color: rgb(255 255 255 / 10%);
}

@include lightTheme() {
border-color: rgb(0 0 0 / 0.1);
border-color: rgb(0 0 0 / 10%);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/app/ui/better-drawer/better-drawer-container/better-drawer-container.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ $z-this-backdrop: -1 + $z-task-side-bar-over;

@include lightTheme() {
background: $light-theme-bg-darker;
border-color: rgb(0 0 0 / 0.12);
border-color: rgb(0 0 0 / 12%);
}

@include darkTheme() {
Expand Down
2 changes: 1 addition & 1 deletion src/app/ui/better-simple-drawer/better-simple-drawer.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ $z-this-side: 2 + $z-this-content;

@include lightTheme() {
background: $light-theme-bg-darker;
border-color: rgb(0 0 0 / 0.12);
border-color: rgb(0 0 0 / 12%);
}

@include darkTheme() {
Expand Down
6 changes: 3 additions & 3 deletions src/app/ui/duration/input-duration-slider/input-duration-slider.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ $this-dot-size: 14px;
height: $this-size;
border-radius: 100%;
position: relative;
box-shadow: 1px 2px 2px 0 rgb(0 0 0 / 0.26);
box-shadow: 1px 2px 2px 0 rgb(0 0 0 / 26%);
cursor: grab;

@include darkTheme() {
Expand Down Expand Up @@ -107,7 +107,7 @@ $this-dot-size: 14px;
}

.dot {
box-shadow: 1px 1px 1px rgb(0 0 0 / 0.3);
box-shadow: 1px 1px 1px rgb(0 0 0 / 30%);
height: 8px;
width: 8px;
border-radius: 100%;
Expand Down Expand Up @@ -154,7 +154,7 @@ $this-stroke-width: 4px;

// actual handle
&:after {
box-shadow: 1px 1px 2px rgb(0 0 0 / 0.3);
box-shadow: 1px 1px 2px rgb(0 0 0 / 30%);
content: '';
top: -$this-handle-size * 0.5 + $this-circle-width * 0.5;
background: $this-handle-color;
Expand Down
2 changes: 1 addition & 1 deletion src/app/ui/progress-circle/progress-circle.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

.circle-bg {
fill: none;
stroke: rgb(127 127 127 / 0.2);
stroke: rgb(127 127 127 / 20%);
stroke-width: 3.8;
}

Expand Down
28 changes: 14 additions & 14 deletions src/styles/components/date-time-picker-schedule.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +7,30 @@ $owl-shadow: none;
$owl-today-not-selected: $c-primary;

// dark theme
$owl-dark-text-color-strong: rgb(255 255 255 / 0.9);
$owl-dark-text-color: rgb(255 255 255 / 0.75);
$owl-dark-text-color-less-intense: rgb(255 255 255 / 0.5);
$owl-dark-text-color-muted: rgb(255 255 255 / 0.15);
$owl-dark-text-color-strong: rgb(255 255 255 / 90%);
$owl-dark-text-color: rgb(255 255 255 / 75%);
$owl-dark-text-color-less-intense: rgb(255 255 255 / 50%);
$owl-dark-text-color-muted: rgb(255 255 255 / 15%);

$owl-dark-light-selected-bg: rgb(49 49 49 / 1);
$owl-dark-light-selected-bg: rgb(49 49 49 / 100%);

$owl-dark-divider-color: rgb(255 255 255 / 0.12);
$owl-dark-divider-color: rgb(255 255 255 / 12%);

$owl-dark-inp-bg-color: rgb(255 255 255 / 0.08);
$owl-dark-inp-bg-color: rgb(255 255 255 / 8%);
$owl-dark-inp-fg-color: $owl-dark-text-color-strong;
$owl-dark-arrow-color: $owl-dark-text-color-strong;

// light (default) theme
$owl-text-color-strong: rgb(0 0 0 / 0.9);
$owl-text-color: rgb(0 0 0 / 0.75);
$owl-text-color-less-intense: rgb(0 0 0 / 0.5);
$owl-text-color-muted: rgb(0 0 0 / 0.15);
$owl-text-color-strong: rgb(0 0 0 / 90%);
$owl-text-color: rgb(0 0 0 / 75%);
$owl-text-color-less-intense: rgb(0 0 0 / 50%);
$owl-text-color-muted: rgb(0 0 0 / 15%);

$owl-light-selected-bg: rgb(238 238 238);

$owl-divider-color: rgb(0 0 0 / 0.12);
$owl-divider-color: rgb(0 0 0 / 12%);

$owl-inp-bg-color: rgb(0 0 0 / 0.04);
$owl-inp-bg-color: rgb(0 0 0 / 4%);

$owl-inp-fg-color: $owl-text-color-strong;
$owl-arrow-color: $owl-text-color-strong;
Expand Down Expand Up @@ -252,7 +252,7 @@ $owl-missing: $owl-light-selected-bg !default;
background-color: $owl-accent-color;

&.owl-dt-calendar-cell-today {
box-shadow: inset 0 0 0 2px hsl(0 0% 100% / 0.85);
box-shadow: inset 0 0 0 2px hsl(0 0% 100% / 85%);
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/styles/components/planner-shared.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@
margin-bottom: 4px;
border-radius: 6px;
// NOTE bg color is set in material overwrite file since otherwise it does not seem to work
background: rgb(0 0 0 / 0.05);
background: rgb(0 0 0 / 5%);

@include darkTheme(true) {
background: rgb(255 255 255 / 0.05) !important;
background: rgb(255 255 255 / 5%) !important;
}
}
4 changes: 2 additions & 2 deletions src/styles/components/shepherd.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
border-radius: 3px;
border: 1px solid #b4b4b4;
box-shadow:
0 1px 1px rgb(0 0 0 / 0.2),
0 2px 0 0 rgb(255 255 255 / 0.7) inset;
0 1px 1px rgb(0 0 0 / 20%),
0 2px 0 0 rgb(255 255 255 / 70%) inset;
color: #333;
display: inline-block;
font-size: 0.85em;
Expand Down
10 changes: 5 additions & 5 deletions src/styles/config/_shadows.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,10 @@ $whiteframe-shadow-24dp:

$header-inset-shadow: inset 0 -4px 4px rgba(0, 0, 0, $shadow-key-umbra-opacity);
$shadow-card-shadow:
0 3px 1px -2px rgb(0 0 0 / 0.2),
0 2px 2px 0 rgb(0 0 0 / 0.14),
0 1px 5px 0 rgb(0 0 0 / 0.12);
$shadow-bottom: 0 10px 6px -6px rgb(0 0 0 / 0.3);
0 3px 1px -2px rgb(0 0 0 / 20%),
0 2px 2px 0 rgb(0 0 0 / 14%),
0 1px 5px 0 rgb(0 0 0 / 12%);
$shadow-bottom: 0 10px 6px -6px rgb(0 0 0 / 30%);
$shadow-bottom-boxed:
#{$shadow-bottom},
0 0 1px rgb(0 0 0 / 0.3);
0 0 1px rgb(0 0 0 / 30%);

0 comments on commit 1c1ba05

Please sign in to comment.