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 { .theme-wrapper.light {
background: $fc-bg-light; background: $fs-bg-light;
color: $fc-bg-dark; color: $fs-bg-dark;
.altbg { .altbg {
background: $fc-altbg-light; background: $fs-altbg-light;
} }
} }
.theme-wrapper.dark { .theme-wrapper.dark {
background: $fc-bg-dark; background: $fs-bg-dark;
color: $fc-bg-light; color: $fs-bg-light;
.altbg { .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'; $fs-blue: '#74c0fc';
$fc-text-light: $oc-gray-9; $fs-text-light: $oc-gray-9;
$fc-text-dark: $oc-gray-0; $fs-text-dark: $oc-gray-0;
$fc-bg-light: $oc-gray-0; $fs-bg-light: $oc-gray-0;
$fc-bg-dark: darken($oc-gray-9, 3); $fs-bg-dark: darken($oc-gray-9, 3);
$fc-altbg-light: $oc-gray-1; $fs-altbg-light: $oc-gray-1;
$fc-altbg-dark: $oc-gray-8; $fs-altbg-dark: $oc-gray-8;
$fc-notice-light: $oc-yellow-7; $fs-notice-light: $oc-yellow-7;
$fc-notice-dark: $oc-lime-3; $fs-notice-dark: $oc-lime-3;
$fc-hoverbg-light: $oc-gray-1; $fs-hoverbg-light: $oc-gray-1;
$fc-hoverbg-dark: $oc-gray-8; $fs-hoverbg-dark: $oc-gray-8;
$fc-accentbg-light: $oc-teal-5; $fs-accentbg-light: $oc-teal-5;
$fc-accentbg-dark: $oc-teal-8; $fs-accentbg-dark: $oc-teal-8;
$fc-link-light: $oc-violet-8; $fs-link-light: $oc-violet-8;
$fc-link-dark: $oc-violet-2; $fs-link-dark: $oc-violet-2;
$fc-info-light: $oc-blue-6; $fs-info-light: $oc-blue-6;
$fc-success-light: $oc-green-7; $fs-success-light: $oc-green-7;
$fc-danger-light: $oc-red-6; $fs-danger-light: $oc-red-6;
$fc-warning-light: $oc-yellow-6; $fs-warning-light: $oc-yellow-6;
$fc-accent-light: $oc-grape-6; $fs-accent-light: $oc-grape-6;
$fc-draft-fabric-light: $oc-gray-9; $fs-pattern-fabric-light: $oc-gray-9;
$fc-draft-lining-light: $oc-lime-7; $fs-pattern-lining-light: $oc-lime-7;
$fc-draft-interfacing-light: $oc-red-7; $fs-pattern-interfacing-light: $oc-red-7;
$fc-draft-canvas-light: $oc-yellow-7; $fs-pattern-canvas-light: $oc-yellow-7;
$fc-draft-various-light: $oc-grape-7; $fs-pattern-various-light: $oc-grape-7;
$fc-draft-mark-light: $oc-blue-4; $fs-pattern-mark-light: $oc-blue-4;
$fc-draft-contrast-light: $oc-orange-7; $fs-pattern-contrast-light: $oc-orange-7;
$fc-draft-note-light: $oc-pink-7; $fs-pattern-note-light: $oc-pink-7;
$fc-draft-fabric-dark: $oc-gray-1; $fs-pattern-fabric-dark: $oc-gray-1;
$fc-draft-lining-dark: $oc-lime-4; $fs-pattern-lining-dark: $oc-lime-4;
$fc-draft-interfacing-dark: $oc-red-4; $fs-pattern-interfacing-dark: $oc-red-4;
$fc-draft-canvas-dark: $oc-yellow-4; $fs-pattern-canvas-dark: $oc-yellow-4;
$fc-draft-various-dark: $oc-grape-4; $fs-pattern-various-dark: $oc-grape-4;
$fc-draft-mark-dark: $oc-blue-4; $fs-pattern-mark-dark: $oc-blue-4;
$fc-draft-contrast-dark: $oc-orange-4; $fs-pattern-contrast-dark: $oc-orange-4;
$fc-draft-note-dark: $oc-pink-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 { .theme-wrapper.light svg.freesewing.draft {
g.design.point { g.design.point {
circle { circle {
fill: $fc-link-light; fill: $fs-link-light;
} }
circle.hovertrap { circle.hovertrap {
stroke: $fc-link-light; stroke: $fs-link-light;
} }
} }
path.design.hovertrap { path.design.hovertrap {
stroke: $fc-link-light; stroke: $fs-link-light;
} }
circle.design.path.cp { circle.design.path.cp {
fill: $fc-bg-light; fill: $fs-bg-light;
} }
} }
.theme-wrapper.dark svg.freesewing.draft { .theme-wrapper.dark svg.freesewing.draft {
g.design.point { g.design.point {
circle { circle {
fill: $fc-link-dark; fill: $fs-link-dark;
} }
circle.hovertrap { circle.hovertrap {
stroke: $fc-link-dark; stroke: $fs-link-dark;
} }
} }
path.design.hovertrap { path.design.hovertrap {
stroke: $fc-link-dark; stroke: $fs-link-dark;
} }
circle.design.path.cp { circle.design.path.cp {
fill: $fc-bg-dark; fill: $fs-bg-dark;
} }
path.focus.path { path.focus.path {
stroke-opacity: 0.5; 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%; max-width: 100%;
/* Reset */ /* Reset */
path, path,
@ -122,59 +122,59 @@ svg.freesewing.draft text {
/* Stroke classes */ /* Stroke classes */
path, path,
circle { circle {
stroke: $fc-draft-fabric-light; stroke: $fs-pattern-fabric-light;
} }
.fabric { .fabric {
stroke: $fc-draft-fabric-light; stroke: $fs-pattern-fabric-light;
} }
.lining { .lining {
stroke: $fc-draft-lining-light; stroke: $fs-pattern-lining-light;
} }
.interfacing { .interfacing {
stroke: $fc-draft-interfacing-light; stroke: $fs-pattern-interfacing-light;
} }
.canvas { .canvas {
stroke: $fc-draft-canvas-light; stroke: $fs-pattern-canvas-light;
} }
.various { .various {
stroke: $fc-draft-various-light; stroke: $fs-pattern-various-light;
} }
.mark { .mark {
stroke: $fc-draft-mark-light; stroke: $fs-pattern-mark-light;
} }
.contrast { .contrast {
stroke: $fc-draft-contrast-light; stroke: $fs-pattern-contrast-light;
} }
.note { .note {
stroke: $fc-draft-note-light; stroke: $fs-pattern-note-light;
} }
/* Fill classes */ /* Fill classes */
.fill-fabric { .fill-fabric {
fill: $fc-draft-fabric-light; fill: $fs-pattern-fabric-light;
} }
.fill-lining { .fill-lining {
fill: $fc-draft-lining-light; fill: $fs-pattern-lining-light;
} }
.fill-interfacing { .fill-interfacing {
fill: $fc-draft-interfacing-light; fill: $fs-pattern-interfacing-light;
} }
.fill-canvas { .fill-canvas {
fill: $fc-draft-canvas-light; fill: $fs-pattern-canvas-light;
} }
.fill-various { .fill-various {
fill: $fc-draft-various-light; fill: $fs-pattern-various-light;
} }
.fill-mark { .fill-mark {
fill: $fc-draft-mark-light; fill: $fs-pattern-mark-light;
} }
.fill-contrast { .fill-contrast {
fill: $fc-draft-contrast-light; fill: $fs-pattern-contrast-light;
} }
.fill-note { .fill-note {
fill: $fc-draft-note-light; fill: $fs-pattern-note-light;
} }
.fill-bg { .fill-bg {
fill: $fc-bg-light; fill: $fs-bg-light;
} }
path.sample-focus { path.sample-focus {
fill: #000; fill: #000;
@ -182,14 +182,14 @@ svg.freesewing.draft text {
/* scalebox plugin */ /* scalebox plugin */
path.scalebox.metric { path.scalebox.metric {
stroke: none; stroke: none;
fill: $fc-bg-light; fill: $fs-bg-light;
} }
path.scalebox.imperial { path.scalebox.imperial {
stroke: none; stroke: none;
fill: $fc-bg-dark; fill: $fs-bg-dark;
} }
path.bartack { path.bartack {
stroke: $fc-draft-mark-light; stroke: $fs-pattern-mark-light;
} }
path.logo { path.logo {
fill: currentColor; fill: currentColor;
@ -234,59 +234,59 @@ svg.freesewing.draft text {
/* Stroke classes */ /* Stroke classes */
path, path,
circle { circle {
stroke: $fc-draft-fabric-dark; stroke: $fs-pattern-fabric-dark;
} }
.fabric { .fabric {
stroke: $fc-draft-fabric-dark; stroke: $fs-pattern-fabric-dark;
} }
.lining { .lining {
stroke: $fc-draft-lining-dark; stroke: $fs-pattern-lining-dark;
} }
.interfacing { .interfacing {
stroke: $fc-draft-interfacing-dark; stroke: $fs-pattern-interfacing-dark;
} }
.canvas { .canvas {
stroke: $fc-draft-canvas-dark; stroke: $fs-pattern-canvas-dark;
} }
.various { .various {
stroke: $fc-draft-various-dark; stroke: $fs-pattern-various-dark;
} }
.mark { .mark {
stroke: $fc-draft-mark-dark; stroke: $fs-pattern-mark-dark;
} }
.contrast { .contrast {
stroke: $fc-draft-contrast-dark; stroke: $fs-pattern-contrast-dark;
} }
.note { .note {
stroke: $fc-draft-note-dark; stroke: $fs-pattern-note-dark;
} }
/* Fill classes */ /* Fill classes */
.fill-fabric { .fill-fabric {
fill: $fc-draft-fabric-dark; fill: $fs-pattern-fabric-dark;
} }
.fill-lining { .fill-lining {
fill: $fc-draft-lining-dark; fill: $fs-pattern-lining-dark;
} }
.fill-interfacing { .fill-interfacing {
fill: $fc-draft-interfacing-dark; fill: $fs-pattern-interfacing-dark;
} }
.fill-canvas { .fill-canvas {
fill: $fc-draft-canvas-dark; fill: $fs-pattern-canvas-dark;
} }
.fill-various { .fill-various {
fill: $fc-draft-various-dark; fill: $fs-pattern-various-dark;
} }
.fill-mark { .fill-mark {
fill: $fc-draft-mark-dark; fill: $fs-pattern-mark-dark;
} }
.fill-contrast { .fill-contrast {
fill: $fc-draft-contrast-dark; fill: $fs-pattern-contrast-dark;
} }
.fill-note { .fill-note {
fill: $fc-draft-note-dark; fill: $fs-pattern-note-dark;
} }
.fill-bg { .fill-bg {
fill: $fc-bg-dark; fill: $fs-bg-dark;
} }
path.sample-focus { path.sample-focus {
fill: #fff; fill: #fff;
@ -294,14 +294,14 @@ svg.freesewing.draft text {
/* scalebox plugin */ /* scalebox plugin */
path.scalebox.metric { path.scalebox.metric {
stroke: none; stroke: none;
fill: $fc-bg-dark; fill: $fs-bg-dark;
} }
path.scalebox.imperial { path.scalebox.imperial {
stroke: none; stroke: none;
fill: $fc-bg-light; fill: $fs-bg-light;
} }
path.bartack { path.bartack {
stroke: $fc-draft-mark-dark; stroke: $fs-pattern-mark-dark;
} }
path.logo { path.logo {
fill: currentColor; fill: currentColor;
@ -347,11 +347,11 @@ svg.freesewing.draft text {
g.snippet.notch > circle, g.snippet.notch > circle,
g.snippet.button > circle, g.snippet.button > circle,
g.snippet.buttonhole > path { g.snippet.buttonhole > path {
color: $fc-draft-mark-light; color: $fs-pattern-mark-light;
} }
g.snippet.bnotch > circle, g.snippet.bnotch > circle,
g.snippet.bnotch > path { g.snippet.bnotch > path {
color: $fc-draft-note-light; color: $fs-pattern-note-light;
} }
/* Same for paperless grid, also in shadow DOM */ /* Same for paperless grid, also in shadow DOM */
rect.grid { rect.grid {

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

@ -19,10 +19,10 @@ button.fab.secondary {
.style-wrapper.dark, .style-wrapper.dark,
.theme-wrapper.dark { .theme-wrapper.dark {
button.fab.accent { button.fab.accent {
background-color: $fc-accent-light; background-color: $fs-accent-light;
color: $fc-text-dark; color: $fs-text-dark;
} }
button.fab.accent:hover { 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), .style-wrapper.light a:not(.MuiButton-root),
.theme-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), .style-wrapper.dark a:not(.MuiButton-root),
.theme-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, .style-wrapper.light a.anchor svg path,
.theme-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, .style-wrapper.dark a.anchor svg path,
.theme-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.dark,
.theme-wrapper.light { .theme-wrapper.light {
.MuiButton-containedPrimary.info { .MuiButton-containedPrimary.info {
background-color: $fc-info-light; background-color: $fs-info-light;
} }
.MuiButton-containedPrimary.info:hover { .MuiButton-containedPrimary.info:hover {
background-color: darken($fc-info-light, 10%); background-color: darken($fs-info-light, 10%);
} }
.MuiButton-containedPrimary.success { .MuiButton-containedPrimary.success {
background-color: $fc-success-light; background-color: $fs-success-light;
} }
.MuiButton-containedPrimary.success:hover { .MuiButton-containedPrimary.success:hover {
background-color: darken($fc-success-light, 10%); background-color: darken($fs-success-light, 10%);
} }
.MuiButton-containedPrimary.warning { .MuiButton-containedPrimary.warning {
background-color: $fc-warning-light; background-color: $fs-warning-light;
} }
.MuiButton-containedPrimary.warning:hover { .MuiButton-containedPrimary.warning:hover {
background-color: darken($fc-warning-light, 10%); background-color: darken($fs-warning-light, 10%);
} }
.MuiButton-containedPrimary.danger { .MuiButton-containedPrimary.danger {
background-color: $fc-danger-light; background-color: $fs-danger-light;
} }
.MuiButton-containedPrimary.danger:hover { .MuiButton-containedPrimary.danger:hover {
background-color: darken($fc-danger-light, 10%); background-color: darken($fs-danger-light, 10%);
} }
.MuiButton-containedPrimary.accent { .MuiButton-containedPrimary.accent {
background-color: $fc-accent-light; background-color: $fs-accent-light;
} }
.MuiButton-containedPrimary.accent:hover { .MuiButton-containedPrimary.accent:hover {
background-color: darken($fc-accent-light, 10%); background-color: darken($fs-accent-light, 10%);
} }
} }
.theme-wrapper.light { .theme-wrapper.light {
.MuiButton-containedPrimary { .MuiButton-containedPrimary {
background-color: $fc-bg-dark; background-color: $fs-bg-dark;
} }
.MuiButton-containedPrimary:hover { .MuiButton-containedPrimary:hover {
background-color: #000; background-color: #000;
@ -51,10 +51,10 @@
} }
.theme-wrapper.dark { .theme-wrapper.dark {
.MuiButton-containedPrimary { .MuiButton-containedPrimary {
background-color: $fc-bg-light; background-color: $fs-bg-light;
} }
.MuiButton-containedPrimary:hover { .MuiButton-containedPrimary:hover {
background-color: darken($fc-bg-light, 10%); background-color: darken($fs-bg-light, 10%);
} }
.MuiButton-contained.Mui-disabled { .MuiButton-contained.Mui-disabled {
background-color: rgba(2550, 255, 255, 0.12); background-color: rgba(2550, 255, 255, 0.12);

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

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

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

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