VSinerva/freesewing
1
0
Fork 0
Code Activity

chore(css-theme): Updated var names

Browse source
This commit is contained in:
Joost De Cock 2022-01-15 19:59:29 +01:00
parent c4c42b3198
commit 3bf0f6f68b
9 changed files with 120 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

12
packages/css-theme/src/_theme-wrapper.scss
View file

@ -8,18 +8,18 @@
}
.theme-wrapper.light {
background: $fc-bg-light;
color: $fc-bg-dark;
background: $fs-bg-light;
color: $fs-bg-dark;
.altbg {
background: $fc-altbg-light;
background: $fs-altbg-light;
}
}
.theme-wrapper.dark {
background: $fc-bg-dark;
color: $fc-bg-light;
background: $fs-bg-dark;
color: $fs-bg-light;
.altbg {
background: $fc-altbg-dark;
background: $fs-altbg-dark;
}
}

72
packages/css-theme/src/_variables.scss
View file

@ -1,39 +1,39 @@
$fc-blue: '#74c0fc';
$fc-text-light: $oc-gray-9;
$fc-text-dark: $oc-gray-0;
$fc-bg-light: $oc-gray-0;
$fc-bg-dark: darken($oc-gray-9, 3);
$fc-altbg-light: $oc-gray-1;
$fc-altbg-dark: $oc-gray-8;
$fc-notice-light: $oc-yellow-7;
$fc-notice-dark: $oc-lime-3;
$fc-hoverbg-light: $oc-gray-1;
$fc-hoverbg-dark: $oc-gray-8;
$fc-accentbg-light: $oc-teal-5;
$fc-accentbg-dark: $oc-teal-8;
$fc-link-light: $oc-violet-8;
$fc-link-dark: $oc-violet-2;
$fs-blue: '#74c0fc';
$fs-text-light: $oc-gray-9;
$fs-text-dark: $oc-gray-0;
$fs-bg-light: $oc-gray-0;
$fs-bg-dark: darken($oc-gray-9, 3);
$fs-altbg-light: $oc-gray-1;
$fs-altbg-dark: $oc-gray-8;
$fs-notice-light: $oc-yellow-7;
$fs-notice-dark: $oc-lime-3;
$fs-hoverbg-light: $oc-gray-1;
$fs-hoverbg-dark: $oc-gray-8;
$fs-accentbg-light: $oc-teal-5;
$fs-accentbg-dark: $oc-teal-8;
$fs-link-light: $oc-violet-8;
$fs-link-dark: $oc-violet-2;
$fc-info-light: $oc-blue-6;
$fc-success-light: $oc-green-7;
$fc-danger-light: $oc-red-6;
$fc-warning-light: $oc-yellow-6;
$fc-accent-light: $oc-grape-6;
$fs-info-light: $oc-blue-6;
$fs-success-light: $oc-green-7;
$fs-danger-light: $oc-red-6;
$fs-warning-light: $oc-yellow-6;
$fs-accent-light: $oc-grape-6;
$fc-draft-fabric-light: $oc-gray-9;
$fc-draft-lining-light: $oc-lime-7;
$fc-draft-interfacing-light: $oc-red-7;
$fc-draft-canvas-light: $oc-yellow-7;
$fc-draft-various-light: $oc-grape-7;
$fc-draft-mark-light: $oc-blue-4;
$fc-draft-contrast-light: $oc-orange-7;
$fc-draft-note-light: $oc-pink-7;
$fs-pattern-fabric-light: $oc-gray-9;
$fs-pattern-lining-light: $oc-lime-7;
$fs-pattern-interfacing-light: $oc-red-7;
$fs-pattern-canvas-light: $oc-yellow-7;
$fs-pattern-various-light: $oc-grape-7;
$fs-pattern-mark-light: $oc-blue-4;
$fs-pattern-contrast-light: $oc-orange-7;
$fs-pattern-note-light: $oc-pink-7;
$fc-draft-fabric-dark: $oc-gray-1;
$fc-draft-lining-dark: $oc-lime-4;
$fc-draft-interfacing-dark: $oc-red-4;
$fc-draft-canvas-dark: $oc-yellow-4;
$fc-draft-various-dark: $oc-grape-4;
$fc-draft-mark-dark: $oc-blue-4;
$fc-draft-contrast-dark: $oc-orange-4;
$fc-draft-note-dark: $oc-pink-4;
$fs-pattern-fabric-dark: $oc-gray-1;
$fs-pattern-lining-dark: $oc-lime-4;
$fs-pattern-interfacing-dark: $oc-red-4;
$fs-pattern-canvas-dark: $oc-yellow-4;
$fs-pattern-various-dark: $oc-grape-4;
$fs-pattern-mark-dark: $oc-blue-4;
$fs-pattern-contrast-dark: $oc-orange-4;
$fs-pattern-note-dark: $oc-pink-4;

16
packages/css-theme/src/components/_draft-design.scss
View file

@ -132,34 +132,34 @@ div.design {
.theme-wrapper.light svg.freesewing.draft {
g.design.point {
circle {
fill: $fc-link-light;
fill: $fs-link-light;
}
circle.hovertrap {
stroke: $fc-link-light;
stroke: $fs-link-light;
}
}
path.design.hovertrap {
stroke: $fc-link-light;
stroke: $fs-link-light;
}
circle.design.path.cp {
fill: $fc-bg-light;
fill: $fs-bg-light;
}
}
.theme-wrapper.dark svg.freesewing.draft {
g.design.point {
circle {
fill: $fc-link-dark;
fill: $fs-link-dark;
}
circle.hovertrap {
stroke: $fc-link-dark;
stroke: $fs-link-dark;
}
}
path.design.hovertrap {
stroke: $fc-link-dark;
stroke: $fs-link-dark;
}
circle.design.path.cp {
fill: $fc-bg-dark;
fill: $fs-bg-dark;
}
path.focus.path {
stroke-opacity: 0.5;

90
packages/css-theme/src/components/_draft.scss
View file

@ -1,4 +1,4 @@
svg.freesewing.draft {
svg.freesewing.pattern {
max-width: 100%;
/* Reset */
path,
@ -122,59 +122,59 @@ svg.freesewing.draft text {
/* Stroke classes */
path,
circle {
stroke: $fc-draft-fabric-light;
stroke: $fs-pattern-fabric-light;
}
.fabric {
stroke: $fc-draft-fabric-light;
stroke: $fs-pattern-fabric-light;
}
.lining {
stroke: $fc-draft-lining-light;
stroke: $fs-pattern-lining-light;
}
.interfacing {
stroke: $fc-draft-interfacing-light;
stroke: $fs-pattern-interfacing-light;
}
.canvas {
stroke: $fc-draft-canvas-light;
stroke: $fs-pattern-canvas-light;
}
.various {
stroke: $fc-draft-various-light;
stroke: $fs-pattern-various-light;
}
.mark {
stroke: $fc-draft-mark-light;
stroke: $fs-pattern-mark-light;
}
.contrast {
stroke: $fc-draft-contrast-light;
stroke: $fs-pattern-contrast-light;
}
.note {
stroke: $fc-draft-note-light;
stroke: $fs-pattern-note-light;
}
/* Fill classes */
.fill-fabric {
fill: $fc-draft-fabric-light;
fill: $fs-pattern-fabric-light;
}
.fill-lining {
fill: $fc-draft-lining-light;
fill: $fs-pattern-lining-light;
}
.fill-interfacing {
fill: $fc-draft-interfacing-light;
fill: $fs-pattern-interfacing-light;
}
.fill-canvas {
fill: $fc-draft-canvas-light;
fill: $fs-pattern-canvas-light;
}
.fill-various {
fill: $fc-draft-various-light;
fill: $fs-pattern-various-light;
}
.fill-mark {
fill: $fc-draft-mark-light;
fill: $fs-pattern-mark-light;
}
.fill-contrast {
fill: $fc-draft-contrast-light;
fill: $fs-pattern-contrast-light;
}
.fill-note {
fill: $fc-draft-note-light;
fill: $fs-pattern-note-light;
}
.fill-bg {
fill: $fc-bg-light;
fill: $fs-bg-light;
}
path.sample-focus {
fill: #000;
@ -182,14 +182,14 @@ svg.freesewing.draft text {
/* scalebox plugin */
path.scalebox.metric {
stroke: none;
fill: $fc-bg-light;
fill: $fs-bg-light;
}
path.scalebox.imperial {
stroke: none;
fill: $fc-bg-dark;
fill: $fs-bg-dark;
}
path.bartack {
stroke: $fc-draft-mark-light;
stroke: $fs-pattern-mark-light;
}
path.logo {
fill: currentColor;
@ -234,59 +234,59 @@ svg.freesewing.draft text {
/* Stroke classes */
path,
circle {
stroke: $fc-draft-fabric-dark;
stroke: $fs-pattern-fabric-dark;
}
.fabric {
stroke: $fc-draft-fabric-dark;
stroke: $fs-pattern-fabric-dark;
}
.lining {
stroke: $fc-draft-lining-dark;
stroke: $fs-pattern-lining-dark;
}
.interfacing {
stroke: $fc-draft-interfacing-dark;
stroke: $fs-pattern-interfacing-dark;
}
.canvas {
stroke: $fc-draft-canvas-dark;
stroke: $fs-pattern-canvas-dark;
}
.various {
stroke: $fc-draft-various-dark;
stroke: $fs-pattern-various-dark;
}
.mark {
stroke: $fc-draft-mark-dark;
stroke: $fs-pattern-mark-dark;
}
.contrast {
stroke: $fc-draft-contrast-dark;
stroke: $fs-pattern-contrast-dark;
}
.note {
stroke: $fc-draft-note-dark;
stroke: $fs-pattern-note-dark;
}
/* Fill classes */
.fill-fabric {
fill: $fc-draft-fabric-dark;
fill: $fs-pattern-fabric-dark;
}
.fill-lining {
fill: $fc-draft-lining-dark;
fill: $fs-pattern-lining-dark;
}
.fill-interfacing {
fill: $fc-draft-interfacing-dark;
fill: $fs-pattern-interfacing-dark;
}
.fill-canvas {
fill: $fc-draft-canvas-dark;
fill: $fs-pattern-canvas-dark;
}
.fill-various {
fill: $fc-draft-various-dark;
fill: $fs-pattern-various-dark;
}
.fill-mark {
fill: $fc-draft-mark-dark;
fill: $fs-pattern-mark-dark;
}
.fill-contrast {
fill: $fc-draft-contrast-dark;
fill: $fs-pattern-contrast-dark;
}
.fill-note {
fill: $fc-draft-note-dark;
fill: $fs-pattern-note-dark;
}
.fill-bg {
fill: $fc-bg-dark;
fill: $fs-bg-dark;
}
path.sample-focus {
fill: #fff;
@ -294,14 +294,14 @@ svg.freesewing.draft text {
/* scalebox plugin */
path.scalebox.metric {
stroke: none;
fill: $fc-bg-dark;
fill: $fs-bg-dark;
}
path.scalebox.imperial {
stroke: none;
fill: $fc-bg-light;
fill: $fs-bg-light;
}
path.bartack {
stroke: $fc-draft-mark-dark;
stroke: $fs-pattern-mark-dark;
}
path.logo {
fill: currentColor;
@ -347,11 +347,11 @@ svg.freesewing.draft text {
g.snippet.notch > circle,
g.snippet.button > circle,
g.snippet.buttonhole > path {
color: $fc-draft-mark-light;
color: $fs-pattern-mark-light;
}
g.snippet.bnotch > circle,
g.snippet.bnotch > path {
color: $fc-draft-note-light;
color: $fs-pattern-note-light;
}
/* Same for paperless grid, also in shadow DOM */
rect.grid {

6
packages/css-theme/src/components/_fab.scss
View file

@ -19,10 +19,10 @@ button.fab.secondary {
.style-wrapper.dark,
.theme-wrapper.dark {
button.fab.accent {
background-color: $fc-accent-light;
color: $fc-text-dark;
background-color: $fs-accent-light;
color: $fs-text-dark;
}
button.fab.accent:hover {
background-color: darken($fc-accent-light, 10%);
background-color: darken($fs-accent-light, 10%);
}
}

8
packages/css-theme/src/elements/_a.scss
View file

@ -8,17 +8,17 @@
}
.style-wrapper.light a:not(.MuiButton-root),
.theme-wrapper.light a:not(.MuiButton-root) {
color: $fc-link-light;
color: $fs-link-light;
}
.style-wrapper.dark a:not(.MuiButton-root),
.theme-wrapper.dark a:not(.MuiButton-root) {
color: $fc-link-dark;
color: $fs-link-dark;
}
.style-wrapper.light a.anchor svg path,
.theme-wrapper.light a.anchor svg path {
stroke: $fc-link-light;
stroke: $fs-link-light;
}
.style-wrapper.dark a.anchor svg path,
.theme-wrapper.dark a.anchor svg path {
stroke: $fc-link-dark;
stroke: $fs-link-dark;
}

26
packages/css-theme/src/elements/_button.scss
View file

@ -3,44 +3,44 @@
.theme-wrapper.dark,
.theme-wrapper.light {
.MuiButton-containedPrimary.info {
background-color: $fc-info-light;
background-color: $fs-info-light;
}
.MuiButton-containedPrimary.info:hover {
background-color: darken($fc-info-light, 10%);
background-color: darken($fs-info-light, 10%);
}
.MuiButton-containedPrimary.success {
background-color: $fc-success-light;
background-color: $fs-success-light;
}
.MuiButton-containedPrimary.success:hover {
background-color: darken($fc-success-light, 10%);
background-color: darken($fs-success-light, 10%);
}
.MuiButton-containedPrimary.warning {
background-color: $fc-warning-light;
background-color: $fs-warning-light;
}
.MuiButton-containedPrimary.warning:hover {
background-color: darken($fc-warning-light, 10%);
background-color: darken($fs-warning-light, 10%);
}
.MuiButton-containedPrimary.danger {
background-color: $fc-danger-light;
background-color: $fs-danger-light;
}
.MuiButton-containedPrimary.danger:hover {
background-color: darken($fc-danger-light, 10%);
background-color: darken($fs-danger-light, 10%);
}
.MuiButton-containedPrimary.accent {
background-color: $fc-accent-light;
background-color: $fs-accent-light;
}
.MuiButton-containedPrimary.accent:hover {
background-color: darken($fc-accent-light, 10%);
background-color: darken($fs-accent-light, 10%);
}
}
.theme-wrapper.light {
.MuiButton-containedPrimary {
background-color: $fc-bg-dark;
background-color: $fs-bg-dark;
}
.MuiButton-containedPrimary:hover {
background-color: #000;
@ -51,10 +51,10 @@
}
.theme-wrapper.dark {
.MuiButton-containedPrimary {
background-color: $fc-bg-light;
background-color: $fs-bg-light;
}
.MuiButton-containedPrimary:hover {
background-color: darken($fc-bg-light, 10%);
background-color: darken($fs-bg-light, 10%);
}
.MuiButton-contained.Mui-disabled {
background-color: rgba(2550, 255, 255, 0.12);

8
packages/css-theme/src/elements/_jargon.scss
View file

@ -18,8 +18,8 @@
position: absolute;
top: 1.5em;
left: 0;
background: $fc-bg-light;
color: $fc-text-light;
background: $fs-bg-light;
color: $fs-text-light;
border: 1px solid #dcdcdc;
padding: 1rem;
border-radius: 4px;
@ -34,8 +34,8 @@
text-decoration: none;
}
.jargon-term:hover .jargon-info {
background: $fc-bg-dark;
color: $fc-text-dark;
background: $fs-bg-dark;
color: $fs-text-dark;
border: 1px solid #5a5a5a;
}
}

2
packages/css-theme/src/elements/_ul.scss
View file

@ -24,7 +24,7 @@ ul.links {
}
li.active:before,
li:hover:before {
background: $fc-link-light;
background: $fs-link-light;
}
}
@include xs-screen {