@visns-studio/visns-components 6.0.4 → 6.1.0

package/src/components/styles/GenericDetail.module.scss

@@ -1,3 +1,8 @@
+@use 'controls' as *;
+
+.btn {
+    @include button-primary;
+}
 .grid {
     width: 100%;
     display: flex;
@@ -156,14 +161,21 @@
 .gridtxt__header {
     width: 100%;
     display: block;
-    background: rgba(var(--primary-rgb), 0.05);
+    background: none;
     box-sizing: border-box;
-    padding: 10px 20px;
-    border-radius: var(--br);
-    margin-bottom: 0;
-    font-weight: 700;
-    text-align: center;
-    color: var(--paragraph-color);
+    /* Was a centred, tinted bar. A section heading is read at the start of
+       the line like everything under it; centring it made the eye jump to the
+       middle and back for every section on the page. */
+    padding: 0 0 var(--spacing-sm);
+    border-bottom: 1px solid var(--border-color);
+    border-radius: 0;
+    margin-bottom: var(--spacing-md);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    text-align: left;
+    color: var(--muted-color);
 }
 
 .gridtxt__header span {
@@ -199,8 +211,14 @@
     flex: 0 0 calc(100% - 10px);
 }
 
+/* No accent. Description and Comments are ordinary fields — the same kind of
+   thing as Label and Source beside them — so they get the same neutral card.
+   The brand red here was decorative, and on a page with no validation it read
+   as an error; a left rule was only a quieter version of the same mistake.
+   Emphasis should mean something, and here there is nothing to emphasise. */
 .gridtxt > ul .notecolor {
-    border: 1px solid var(--secondary-color);
+    border: 1px solid var(--border-color);
+    background: var(--surface-color);
 }
 
 .titleInfo {
@@ -618,29 +636,9 @@
     line-height: 1.475em;
 }
 
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--tertiary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
-    border-radius: var(--br);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-    font-size: 1.25em;
-}
 
-.btn:hover {
-    color: var(--primary-color);
-    background: var(--highlight-color);
-    border: 1px solid rgba(var(--highlight-rgb), 1.05);
-}
+
+
 
 .crmtitle {
     min-height: auto;

package/src/components/styles/GenericDynamic.module.scss

@@ -1,3 +1,8 @@
+@use 'controls' as *;
+
+.btn {
+    @include button-primary;
+}
 .grid__row {
     width: 100%;
     display: flex;
@@ -397,28 +402,9 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 /* Adding btn class */
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--secondary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-rgb), 1.1);
-    border-radius: var(--br);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-}
 
-.btn:hover {
-    color: var(--tertiary-color);
-    background: var(--secondary-color);
-    border: 1px solid rgba(var(--secondary-color-rgb), 1.1);
-}
+
+
 
 /* Adding polActions style to the module.css */
 .polActions {

package/src/components/styles/GenericEditableTable.module.scss

@@ -1,3 +1,8 @@
+@use 'controls' as *;
+
+.btn {
+    @include button-primary;
+}
 .schedulingTable {
     width: 100%;
     border-collapse: collapse;
@@ -205,29 +210,7 @@
     }
 }
 
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--tertiary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
-    border-radius: var(--br);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-    font-size: 1.25em;
 
-    &:hover {
-        color: var(--primary-color);
-        background: var(--highlight-color);
-        border: 1px solid rgba(var(--highlight-rgb), 1.05);
-    }
-}
 
 .btn_compact {
     width: max-content;