Update select tokens

components/lib/select/style/SelectStyle.js

@@ -1,5 +1,3 @@
-import BaseStyle from 'primevue/base/style';
-
 const theme = ({ dt }) => `
 .p-select {
     display: inline-flex;
@@ -8,8 +6,8 @@ const theme = ({ dt }) => `
     user-select: none;
     background: ${dt('select.background')};
     border: 1px solid ${dt('select.border.color')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
-    border-radius: ${dt('border.radius.md')};
+    border-radius: ${dt('select.border.radius')};
     outline-color: transparent;
     box-shadow: ${dt('select.shadow')};
 }
@@ -20,7 +18,9 @@ const theme = ({ dt }) => `
 
 .p-select:not(.p-disabled).p-focus {
     border-color: ${dt('select.focus.border.color')};
-    outline: 0 none;
+    box-shadow: ${dt('select.focus.ring.shadow')};
+    outline: ${dt('select.focus.ring.width')} ${dt('select.focus.ring.style')} ${dt('select.focus.ring.color')};
+    outline-offset: ${dt('select.focus.ring.offset')};
 }
 
 .p-select.p-variant-filled {
@@ -44,8 +44,8 @@ const theme = ({ dt }) => `
     position: absolute;
     top: 50%;
     margin-top: -0.5rem;
-    color: #94a3b8;
+    color: ${dt('select.clear.icon.color')};
-    right: 2.5rem;
+    right: ${dt('select.dropdown.width')};
 }
 
 .p-select-dropdown {
@@ -55,9 +55,9 @@ const theme = ({ dt }) => `
     flex-shrink: 0;
     background: transparent;
     color: ${dt('select.dropdown.color')};
-    width: 2.5rem;
+    width: ${dt('select.dropdown.width')};
-    border-top-right-radius: ${dt('border.radius.md')};
+    border-top-right-radius: ${dt('select.border.radius')};
-    border-bottom-right-radius: ${dt('border.radius.md')};
+    border-bottom-right-radius: ${dt('select.border.radius')};
 }
 
 .p-select-label {
@@ -66,7 +66,7 @@ const theme = ({ dt }) => `
     overflow: hidden;
     flex: 1 1 auto;
     width: 1%;
-    padding: 0.5rem 0.75rem;
+    padding: ${dt('select.padding.y')} ${dt('select.padding.x')};
     text-overflow: ellipsis;
     cursor: pointer;
     color: ${dt('select.color')};
@@ -80,7 +80,7 @@ const theme = ({ dt }) => `
 }
 
 .p-select:has(.p-select-clear-icon) .p-select-label {
-    padding-right: 1.75rem;
+    padding-right: calc(1 + ${dt('select.padding.x')});
 }
 
 .p-select.p-disabled .p-select-label {
@@ -107,12 +107,12 @@ input.p-select-label {
     background: ${dt('select.overlay.background')};
     color: ${dt('select.overlay.color')};
     border: 1px solid ${dt('select.overlay.border.color')};
-    border-radius: ${dt('border.radius.md')};
+    border-radius: ${dt('select.overlay.border.radius')};
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    box-shadow: ${dt('select.overlay.shadow')};
 }
 
 .p-select-header {
-    padding: 0.5rem 0.5rem 0 0.5rem;
+    padding: ${dt('select.list.header.padding')};
 }
 
 .p-select-filter {
@@ -140,17 +140,20 @@ input.p-select-label {
 .p-select-option-group {
     cursor: auto;
     margin: 0;
-    padding: 0.5rem 0.75rem;
+    padding: ${dt('select.option.group.padding')};
     background: ${dt('select.option.group.background')};
     color: ${dt('select.option.group.color')};
-    font-weight: 600;
+    font-weight: ${dt('select.option.group.font.weight')};
 }
 
 .p-select-list {
     margin: 0;
     padding: 0;
     list-style-type: none;
-    padding: 0.25rem 0.25rem;
+    padding: ${dt('select.list.padding')};
+    gap: ${dt('select.list.gap')};
+    display: flex;
+    flex-direction: column;
 }
 
 .p-select-option {
@@ -161,21 +164,12 @@ input.p-select-label {
     overflow: hidden;
     display: flex;
     align-items: center;
-    margin: 2px 0;
+    padding: ${dt('select.option.padding')};
-    padding: 0.5rem 0.75rem;
     border: 0 none;
     color: ${dt('select.option.color')};
     background: transparent;
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
-    border-radius: ${dt('border.radius.sm')};
+    border-radius: ${dt('select.option.border.radius')};
-}
-
-.p-select-option:first-child {
-    margin-top: 0;
-}
-
-.p-select-option:last-child {
-    margin-bottom: 0;
 }
 
 .p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus {
@@ -201,7 +195,7 @@ input.p-select-label {
 }
 
 .p-select-empty-message {
-    padding: 0.5rem 0.75rem;
+    padding: ${dt('select.option.padding')};
     background: transparent;
 }
 

components/lib/themes/aura/listbox/index.js

@@ -20,10 +20,10 @@ export default {
     },
     list: {
         padding: '{list.padding}',
-        gap: '{list.gap}'
+        gap: '{list.gap}',
-    },
         header: {
-        padding: '0.5rem 0.5rem 0 0.5rem'
+            padding: '{list.header.padding}'
+        }
     },
     option: {
         focusBackground: '{list.option.focus.background}',

components/lib/themes/aura/select/index.js

@@ -11,15 +11,35 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
-        shadow: '{form.field.shadow}'
+        shadow: '{form.field.shadow}',
+        paddingX: '{form.field.padding.x}',
+        paddingY: '{form.field.padding.y}',
+        borderRadius: '{form.field.border.radius}',
+        focusRing: {
+            width: '{form.field.focus.ring.width}',
+            style: '{form.field.focus.ring.style}',
+            color: '{form.field.focus.ring.color}',
+            offset: '{form.field.focus.ring.offset}',
+            shadow: '{form.field.focus.ring.shadow}'
+        }
     },
     dropdown: {
+        width: '2.5rem',
         color: '{form.field.icon.color}'
     },
     overlay: {
         background: '{overlay.select.background}',
         borderColor: '{overlay.select.border.color}',
-        color: '{overlay.select.color}'
+        borderRadius: '{overlay.select.border.radius}',
+        color: '{overlay.select.color}',
+        shadow: '{overlay.select.shadow}'
+    },
+    list: {
+        padding: '{list.padding}',
+        gap: '{list.gap}',
+        header: {
+            padding: '{list.header.padding}'
+        }
     },
     option: {
         focusBackground: '{list.option.focus.background}',
@@ -28,15 +48,22 @@ export default {
         color: '{list.option.color}',
         focusColor: '{list.option.focus.color}',
         selectedColor: '{list.option.selected.color}',
-        selectedFocusColor: '{list.option.selected.focus.color}'
+        selectedFocusColor: '{list.option.selected.focus.color}',
+        padding: '{list.option.padding}',
+        borderRadius: '{list.option.border.radius}'
     },
     optionGroup: {
         background: '{list.option.group.background}',
-        color: '{list.option.group.color}'
+        color: '{list.option.group.color}',
+        fontWeight: '{list.option.group.font.weight}',
+        padding: '{list.option.group.padding}'
     },
     filterIcon: {
         color: '{form.field.icon.color}'
     },
+    clearIcon: {
+        color: '{form.field.icon.color}'
+    },
     checkmark: {
         color: '{list.option.color}'
     }

components/lib/themes/lara/listbox/index.js

@@ -20,10 +20,10 @@ export default {
     },
     list: {
         padding: '{list.padding}',
-        gap: '{list.gap}'
+        gap: '{list.gap}',
-    },
         header: {
             padding: '{list.header.padding}'
+        }
     },
     option: {
         focusBackground: '{list.option.focus.background}',

components/lib/themes/lara/select/index.js

@@ -11,15 +11,35 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
-        shadow: '{form.field.shadow}'
+        shadow: '{form.field.shadow}',
+        paddingX: '{form.field.padding.x}',
+        paddingY: '{form.field.padding.y}',
+        borderRadius: '{form.field.border.radius}',
+        focusRing: {
+            width: '{form.field.focus.ring.width}',
+            style: '{form.field.focus.ring.style}',
+            color: '{form.field.focus.ring.color}',
+            offset: '{form.field.focus.ring.offset}',
+            shadow: '{form.field.focus.ring.shadow}'
+        }
     },
     dropdown: {
+        width: '2.5rem',
         color: '{form.field.icon.color}'
     },
     overlay: {
         background: '{overlay.select.background}',
         borderColor: '{overlay.select.border.color}',
-        color: '{overlay.select.color}'
+        borderRadius: '{overlay.select.border.radius}',
+        color: '{overlay.select.color}',
+        shadow: '{overlay.select.shadow}',
+    },
+    list: {
+        padding: '{list.padding}',
+        gap: '{list.gap}',
+        header: {
+            padding: '{list.header.padding}'
+        }
     },
     option: {
         focusBackground: '{list.option.focus.background}',
@@ -28,15 +48,22 @@ export default {
         color: '{list.option.color}',
         focusColor: '{list.option.focus.color}',
         selectedColor: '{list.option.selected.color}',
-        selectedFocusColor: '{list.option.selected.focus.color}'
+        selectedFocusColor: '{list.option.selected.focus.color}',
+        padding: '{list.option.padding}',
+        borderRadius: '{list.option.border.radius}'
     },
     optionGroup: {
         background: '{list.option.group.background}',
-        color: '{list.option.group.color}'
+        color: '{list.option.group.color}',
+        fontWeight: '{list.option.group.font.weight}',
+        padding: '{list.option.group.padding}'
     },
     filterIcon: {
         color: '{form.field.icon.color}'
     },
+    clearIcon: {
+        color: '{form.field.icon.color}'
+    },
     checkmark: {
         color: '{list.option.color}'
     }