@pine-ds/core 0.2.4 → 1.0.0

package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.css

@@ -1,50 +1,50 @@
 :host {
-  --background-fixed: var(--pine-color-base-white);
-  --border: var(--pine-border-default);
-  --box-shadow: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);
-  --color-sorting: var(--pine-color-neutral-charcoal-500);
-  --color: var(--pine-color-neutral-charcoal-200);
-  --fixed-cell-position: 0;
-  --font-size: var(--pine-font-size-body-sm);
-  --font-weight: var(--pine-font-weight-medium);
-  --line-height: var(--pine-line-height-sm);
-  --margin-arrow: var(--pine-spacing-xxs);
-  --padding-arrow: calc(var(--pine-spacing-xxs) / 2);
-  --padding-compact: var(--pine-spacing-xxs);
-  --padding: calc(var(--pine-spacing-md) / 2);
-  border-block-end: var(--border);
-  color: var(--color);
+  --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
+  --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);
+  --color-background-fixed: var(--pine-color-white);
+  --color-sorting: var(--pine-color-charcoal-500);
+  --color-default: var(--pine-color-charcoal-200);
+  --dimension-fixed-cell-position: 0;
+  --font-size-head-cell: var(--pine-font-size-087);
+  --font-weight-cell-default: var(--pine-font-weight-normal);
+  --line-height-cell-default: var(--pine-line-height-125);
+  --padding-cell-default: calc(var(--pine-spacing-300) / 2);
+  --spacing-margin-inline-start-arrow: var(--pine-spacing-050);
+  --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);
+  --spacing-padding-block-compact: var(--pine-spacing-050);
+  border-block-end: var(--border-head-cell-default);
+  color: var(--color-default);
   display: table-cell;
-  font-size: var(--font-size);
+  font-size: var(--font-size-head-cell);
   font-style: normal;
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-  padding: var(--padding);
+  font-weight: var(--font-weight-cell-default);
+  line-height: var(--line-height-cell-default);
+  padding: var(--padding-cell-default);
   text-align: start;
   vertical-align: inherit;
 }
 
 :host(.is-compact) {
-  padding-block: var(--padding-compact);
+  padding-block: var(--spacing-padding-block-compact);
 }
 
 :host(.is-fixed) {
-  background: var(--background-fixed);
-  left: var(--fixed-cell-position);
+  background: var(--color-background-fixed);
+  left: var(--dimension-fixed-cell-position);
   position: sticky;
   z-index: 1;
 }
 
 :host(.has-scrolled.is-fixed) {
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow-default);
 }
 
 :host(.is-sortable) {
   cursor: pointer;
 }
 :host(.is-sortable) pds-icon {
-  margin-inline-start: var(--margin-arrow);
-  padding-block-start: var(--padding-arrow);
+  margin-inline-start: var(--spacing-margin-inline-start-arrow);
+  padding-block-start: var(--spacing-padding-arrow);
   position: absolute;
 }
 

package/dist/collection/components/pds-table/pds-table-row/pds-table-row.css

@@ -1,12 +1,12 @@
 :host {
-  --background-fixed: var(--pine-color-base-white);
-  --background-interactive: var(--pine-color-neutral-grey-200);
+  --color-background-fixed: var(--pine-color-white);
+  --color-background-interactive: var(--pine-color-grey-200);
   border-color: inherit;
   display: table-row;
   vertical-align: inherit;
 }
 :host::part(checkbox-cell) {
-  background-color: var(--background-fixed);
+  background-color: var(--color-background-fixed);
   left: 0;
   position: sticky;
   z-index: 1;
@@ -18,5 +18,5 @@
 :host(.is-selected),
 :host(.is-selected)::part(checkbox-cell),
 :host(.is-selected) ::slotted(pds-table-cell) {
-  background: var(--background-interactive);
+  background: var(--color-background-interactive);
 }

package/dist/collection/components/pds-table/pds-table.css

@@ -1,6 +1,6 @@
 :host {
-  --background: var(--pine-color-base-white);
-  background: var(--background);
+  --color-background-default: var(--pine-color-white);
+  background: var(--color-background-default);
   border-collapse: separate;
   box-sizing: border-box;
   display: table;
@@ -9,7 +9,7 @@
 
 :host(.is-responsive) {
   background-attachment: local, local, scroll, scroll;
-  background-image: linear-gradient(to right, var(--background), var(--background)), linear-gradient(to right, var(--background), var(--background)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
+  background-image: linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
   background-position: left center, right center, left center, right center;
   background-repeat: no-repeat;
   background-size: 4px 100%, 4px 100%, 4px 100%, 4px 100%;

package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css

@@ -1,21 +1,26 @@
 pds-tab {
-  --background-color-tab: var(--pine-color-neutral-grey-300);
-  --background-color-tab-active: var(--pine-color-neutral-charcoal-400);
-  --background-color-tab-hover: var(--pine-color-neutral-grey-400);
-  --border-radius: var(--pine-border-radius-md);
-  --box-shadow-focus: 0 0 0 2px var(--pine-color-primary-200);
-  --color: var(--pine-color-neutral-charcoal-200);
-  --color-active: var(--pine-color-neutral-charcoal-400);
-  --color-focus: var(--pine-color-neutral-charcoal-300);
-  --color-white: var(--pine-color-base-white);
-  --font-size-body: var(--pine-font-size-body);
-  --font-size-sm: var(--pine-font-size-body-sm);
-  --font-size-xs: var(--pine-font-size-body-xs);
-  --font-weight: var(--pine-font-weight-medium);
-  --line-height-md: var(--pine-line-height-md);
-  --line-height-sm: var(--pine-line-height-sm);
-  --line-height-xs: var(--pine-line-height-xs);
-  --outline: 4px solid var(--pine-color-primary-200);
+  --border-none: var(--pine-border-width-none);
+  --border-radius-availability: var(--pine-border-radius-100);
+  --border-radius-default: var(--pine-border-radius-125);
+  --border-radius-none: var(--pine-border-radius-0);
+  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
+  --color-background-active: var(--pine-color-charcoal-400);
+  --color-background-availability: var(--pine-color-white);
+  --color-background-default: var(--pine-color-grey-300);
+  --color-background-hover: var(--pine-color-grey-400);
+  --color-text-active: var(--pine-color-charcoal-400);
+  --color-text-active-inverse: var(--pine-color-white);
+  --color-text-default: var(--pine-color-charcoal-200);
+  --color-text-focus: var(--pine-color-charcoal-300);
+  --font-size-availability-content: var(--pine-font-size-075);
+  --font-size-default: var(--pine-font-size-100);
+  --font-size-filter-content: var(--pine-font-size-087);
+  --font-weight-default: var(--pine-font-weight-medium);
+  --line-height-availability-content: var(--pine-line-height-100);
+  --line-height-default: var(--pine-line-height-150);
+  --line-height-filter-content: var(--pine-line-height-125);
+  --outline: 4px solid var(--pine-color-blue-200);
+  --spacing-padding-none: var(--pine-spacing-0);
   display: inline-block;
   position: relative;
 }
@@ -23,27 +28,27 @@ pds-tab {
 .pds-tab {
   appearance: none;
   background-color: transparent;
-  border: 0;
+  border: var(--border-none);
   box-shadow: none;
   color: inherit;
   cursor: pointer;
   font-family: inherit;
-  padding: 0;
+  padding: var(--spacing-padding-none);
   align-items: center;
-  color: var(--color);
+  color: var(--color-text-default);
   display: inline-flex;
   position: relative;
   text-decoration: none;
   white-space: nowrap;
 }
 .pds-tab.is-active, .pds-tab[aria-selected=true] {
-  color: var(--color-active);
+  color: var(--color-text-active);
 }
 .pds-tab.is-active .pds-tab__content::after, .pds-tab[aria-selected=true] .pds-tab__content::after {
   opacity: 1;
 }
 .pds-tab:hover {
-  color: var(--color-active);
+  color: var(--color-text-active);
 }
 .pds-tab:focus-visible {
   box-shadow: var(--box-shadow-focus);
@@ -51,9 +56,9 @@ pds-tab {
 }
 .pds-tab .pds-tab__content {
   font-family: inherit;
-  font-size: var(--font-size-body);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height-md);
+  font-size: var(--font-size-default);
+  font-weight: var(--font-weight-default);
+  line-height: var(--line-height-default);
   padding-block-end: 11px;
   position: relative;
 }
@@ -72,15 +77,15 @@ pds-tab {
 }
 
 .pds-tabs--availability {
-  --tab-background-color: transparent;
+  --color-background-tab: transparent;
 }
 .pds-tabs--availability .pds-tab {
-  background-color: var(--tab-background-color);
-  border-radius: 8px 8px 0 0;
+  background-color: var(--color-background-tab);
+  border-radius: var(--border-radius-availability) var(--border-radius-availability) var(--border-radius-none) var(--border-radius-none);
   padding: 8px 16px 13px;
 }
 .pds-tabs--availability .pds-tab.is-active, .pds-tabs--availability .pds-tab[aria-selected=true] {
-  --tab-background-color: var(--color-white);
+  --color-background-tab: var(--color-background-availability);
 }
 .pds-tabs--availability .pds-tab.is-active .pds-tab__content::after, .pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after {
   opacity: 1;
@@ -89,14 +94,14 @@ pds-tab {
   z-index: 1;
 }
 .pds-tabs--availability .pds-tab:hover:not(.is-active, [aria-selected=true]) {
-  --tab-background-color: var(--background-color-tab);
+  --color-background-tab: var(--color-background-default);
 }
 .pds-tabs--availability .pds-tab:focus-visible {
-  color: var(--color);
+  color: var(--color-text-default);
 }
 .pds-tabs--availability .pds-tab__content {
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-xs);
+  font-size: var(--font-size-availability-content);
+  line-height: var(--line-height-availability-content);
   padding-bottom: 7px;
 }
 .pds-tabs--availability .pds-tab-edge {
@@ -111,7 +116,7 @@ pds-tab {
 .pds-tabs--availability .pds-tab-edge::before {
   border-radius: 50%;
   bottom: 0;
-  box-shadow: 4px 4px 0 0 var(--tab-background-color);
+  box-shadow: 4px 4px 0 0 var(--color-background-tab);
   content: "";
   display: block;
   height: 200%;
@@ -124,30 +129,30 @@ pds-tab {
   inset-inline-start: 100%;
 }
 .pds-tabs--availability .pds-tab-edge--end::before {
-  box-shadow: -4px 4px 0 0 var(--tab-background-color);
+  box-shadow: -4px 4px 0 0 var(--color-background-tab);
   inset-inline-end: unset;
   inset-inline-start: 0;
 }
 
 .pds-tabs--filter {
-  --tab-background-color: var(--background-color-tab);
+  --color-background-tab: var(--color-background-active);
 }
 .pds-tabs--filter .pds-tab {
-  background-color: var(--tab-background-color);
+  background-color: var(--color-background-tab);
   border-radius: 50px;
-  color: var(--color-active);
+  color: var(--color-text-active);
   padding: 6px 15px;
 }
 .pds-tabs--filter .pds-tab.is-active, .pds-tabs--filter .pds-tab[aria-selected=true] {
-  --tab-background-color: var(--background-color-tab-active);
-  color: var(--color-white);
+  --color-background-tab: var(--color-background-active);
+  color: var(--color-text-active-inverse);
 }
 .pds-tabs--filter .pds-tab:hover:not(.is-active, [aria-selected=true]) {
-  --tab-background-color: var(--background-color-tab-hover);
+  --color-background-tab: var(--color-background-hover);
 }
 .pds-tabs--filter .pds-tab__content {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
+  font-size: var(--font-size-filter-content);
+  line-height: var(--line-height-filter-content);
   padding-block-end: 0;
 }
 .pds-tabs--filter .pds-tab__content::after {

package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.css

@@ -4,8 +4,8 @@
 
 .pds-tabpanel {
   display: none;
-  margin-top: var(--panel-margin-top);
-  padding: var(--panel-padding);
+  margin-top: var(--spacing-panel-margin-top);
+  padding: var(--spacing-panel-padding);
 }
 .pds-tabpanel.is-active {
   display: block;

package/dist/collection/components/pds-tabs/pds-tabs.css

@@ -1,29 +1,29 @@
 :host {
   /**
-   * @prop --panel-margin-top: Optional margin-top for panels
+   * @prop --spacing-panel-margin-top: Optional margin-top for panels
    */
-  --panel-margin-top: 0;
+  --spacing-panel-margin-top: 0;
   /**
-   * @prop --panel-padding: Optional padding for panels
+   * @prop --spacing-panel-padding: Optional padding for panels
    */
-  --panel-padding: 0;
-  --gap-md: var(--pine-spacing-md);
-  --gap-xs: var(--pine-spacing-xs);
-  --gap-sm: 16px var(--pine-spacing-sm);
-  --outline: 2px solid var(--pine-color-primary-200);
+  --spacing-panel-padding: 0;
+  --outline: 2px solid var(--pine-color-blue-200);
+  --spacing-gap-availability: var(--pine-spacing-100);
+  --spacing-gap-default: var(--pine-spacing-300);
+  --spacing-gap-filter: 16px var(--pine-spacing-200);
   display: block;
 }
 
 .pds-tabs__tablist {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--gap-md);
+  gap: var(--spacing-gap-default);
 }
 
 :host(.pds-tabs--availability) .pds-tabs__tablist {
-  gap: var(--gap-xs);
+  gap: var(--spacing-gap-availability);
 }
 
 :host(.pds-tabs--filter) .pds-tabs__tablist {
-  gap: var(--gap-sm);
+  gap: var(--spacing-gap-filter);
 }

package/dist/collection/components/pds-textarea/pds-textarea.css

@@ -1,31 +1,31 @@
 :host {
-  --background-color: var(--pine-color-base-white);
-  --background-color-disabled: var(--pine-color-neutral-grey-200);
-  --color: var(--pine-color-neutral-charcoal-400);
-  --color-error: var(--pine-color-red-300);
-  --color-placeholder: var(--pine-color-neutral-charcoal-200);
-  --color-disabled: var(--pine-color-neutral-charcoal-200);
-  --border-color-default: var(--pine-color-neutral-grey-400);
-  --border-color-hover: var(--pine-color-neutral-grey-500);
-  --border-color-focus-visible: var(--pine-color-neutral-grey-300);
-  --border-color-error: var(--pine-color-red-300);
-  --box-shadow-focus: 0 0 0 2px var(--focus-visible-outline-color);
-  --box-shadow-focus-error: 0 0 0 2px var(--focus-visible-outline-color-error);
-  --focus-visible-outline-color: var(--pine-color-primary-200);
-  --focus-visible-outline-color-error: var(--pine-color-red-200);
-  --label-font-size: var(--pine-font-size-body);
-  --label-font-weight: var(--pine-font-weight-medium);
-  --label-line-height: var(--pine-line-height-md);
-  --label-margin-block-end: var(--pine-spacing-xs);
-  --field-font-size: var(--pine-font-size-body);
-  --field-font-weight: var(--pine-font-weight-regular);
-  --field-line-height: var(--pine-line-height-md);
-  --field-padding-block: var(--pine-spacing-xs);
-  --field-padding-inline: var(--pine-spacing-sm);
-  --helper-message-font-size: var(--pine-font-size-body-xs);
-  --helper-message-font-weight: var(--pine-font-weight-regular);
-  --helper-message-line-height: var(--pine-line-height-sm);
-  --helper-message-margin-block-start: var(--pine-spacing-xs);
+  --box-shadow-focus: 0 0 0 2px var(--color-focus-visible-outline);
+  --box-shadow-focus-error: 0 0 0 2px var(--color-focus-visible-outline-error);
+  --color: var(--pine-color-charcoal-400);
+  --color-background: var(--pine-color-white);
+  --color-background-disabled: var(--pine-color-grey-200);
+  --color-border-default: var(--pine-color-grey-400);
+  --color-border-error: var(--pine-color-red-300);
+  --color-border-focus-visible: var(--pine-color-grey-300);
+  --color-border-hover: var(--pine-color-grey-500);
+  --color-disabled-default: var(--pine-color-charcoal-200);
+  --color-error-default: var(--pine-color-red-300);
+  --color-focus-visible-outline: var(--pine-color-primary-200);
+  --color-focus-visible-outline-error: var(--pine-color-red-200);
+  --color-placeholder-default: var(--pine-color-charcoal-200);
+  --font-size-field: var(--pine-font-size-100);
+  --font-size-helper-message: var(--pine-font-size-075);
+  --font-size-label: var(--pine-font-size-100);
+  --font-weight-field: var(--pine-font-weight-normal);
+  --font-weight-helper-message: var(--pine-font-weight-normal);
+  --font-weight-label: var(--pine-font-weight-medium);
+  --line-height-field: var(--pine-line-height-150);
+  --line-height-helper-message: var(--pine-line-height-125);
+  --line-height-label: var(--pine-line-height-150);
+  --spacing-margin-block-end-label: var(--pine-spacing-100);
+  --spacing-margin-block-start-helper-message: var(--pine-spacing-100);
+  --spacing-padding-block-field: var(--pine-spacing-100);
+  --spacing-padding-inline-field: var(--pine-spacing-200);
   display: inline;
 }
 
@@ -36,28 +36,28 @@
 
 label {
   display: block;
-  font-size: var(--label-font-size);
-  font-weight: var(--label-font-weight);
-  line-height: var(--label-line-height);
-  margin-block-end: var(--label-margin-block-end);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-label);
+  line-height: var(--line-height-label);
+  margin-block-end: var(--spacing-margin-block-end-label);
 }
 
 .pds-textarea__field {
-  background-color: var(--background-color);
+  background-color: var(--color-background);
   border: var(--pine-border-interactive);
   border-radius: var(--pine-border-radius-md);
   font-family: inherit;
-  font-size: var(--field-font-size);
-  font-weight: var(--field-font-weight);
-  line-height: var(--field-line-height);
-  padding: var(--field-padding-block) var(--field-padding-inline);
+  font-size: var(--font-size-field);
+  font-weight: var(--font-weight-field);
+  line-height: var(--line-height-field);
+  padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);
 }
 .pds-textarea__field:hover:not(:disabled, .is-invalid) {
-  border-color: var(--border-color-hover);
+  border-color: var(--color-border-hover);
 }
 .pds-textarea__field:disabled {
-  background-color: var(--background-color-disabled);
-  color: var(--color-disabled);
+  background-color: var(--color-background-disabled);
+  color: var(--color-disabled-default);
   cursor: not-allowed;
 }
 .pds-textarea__field:focus-visible {
@@ -65,10 +65,10 @@ label {
   outline: none;
 }
 .pds-textarea__field::placeholder {
-  color: var(--color-placeholder);
+  color: var(--color-placeholder-default);
 }
 .pds-textarea__field.is-invalid {
-  border-color: var(--color-error);
+  border-color: var(--color-border-error);
 }
 .pds-textarea__field.is-invalid:focus-visible {
   box-shadow: var(--box-shadow-focus-error);
@@ -76,13 +76,12 @@ label {
 
 .pds-textarea__error-message,
 .pds-textarea__helper-message {
-  font-size: var(--helper-message-font-size);
-  font-weight: var(--helper-message-font-weight);
-  line-height: var(--helper-message-line-height);
-  margin-block-end: 0;
-  margin-block-start: var(--helper-message-margin-block-start);
+  font-size: var(--font-size-helper-message);
+  font-weight: var(--font-weight-helper-message);
+  line-height: var(--line-height-helper-message);
+  margin-block-start: var(--spacing-margin-block-start-helper-message);
 }
 
 .pds-textarea__error-message {
-  color: var(--color-error);
+  color: var(--color-error-default);
 }